Release 0.2

jsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "baseUrl": "src",
     "paths": {
+      "@/*": ["*"],
       "@home/*": ["app/feature/home/*"],
       "@constants/*": ["constants/*"],
       "@auth/*": ["app/feature/auth/*"],

src/app/api/route.js

@@ -1,14 +1,24 @@
-import clientPromise from '@/lib/mongodb'
-import { NextResponse } from 'next/server'
+import clientPromise from '@/lib/mongodb';
 
 export async function GET() {
     try {
-        const client = await clientPromise
-        const db = client.db('ddip')  // .env의 DB 이름과 동일하게
-        const posts = await db.collection('posts').find({}).toArray()
-        return NextResponse.json(posts)
+        const client = await clientPromise;
+        const db = client.db('ddip');             // ddip DB 선택
+        const collection = db.collection('object');  // object 컬렉션 선택
+        const data = await collection.find({}).toArray();
+
+        return new Response(JSON.stringify(data), {
+            status: 200,
+            headers: { 'Content-Type': 'application/json' },
+        });
     } catch (error) {
-        console.error(error)
-        return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+        console.error('MongoDB 조회 에러:', error);
+        return new Response(
+            JSON.stringify({ message: '서버 에러 발생' }),
+            {
+                status: 500,
+                headers: { 'Content-Type': 'application/json' },
+            }
+        );
     }
 }

src/app/components/chat/chat-component.js

@@ -0,0 +1,23 @@
+import Image from "next/image";
+
+export default function ChatMessage({ chatId, name, lastUser, lastMessage, time, profileImg, onClick }) {
+    return (
+        <div onClick={onClick}
+             className="flex items-center px-4 py-3 hover:bg-gray-50 cursor-pointer">
+            {/* 프로필 이미지 */}
+            <div className="w-[40px] h-[40px] relative rounded-full overflow-hidden mr-3">
+                <Image src={profileImg || "/default-profile.png"} alt="profile" fill />
+            </div>
+
+            {/* 채팅 내용 */}
+            <div className="flex-1">
+                <div className="flex justify-between items-center">
+                    <p className="font-semibold text-[16px]">{name}</p>
+                    <span className="text-[10px] text-regular text-[#D0D0D0]">{time}</span>
+                </div>
+                <p className="text-[14px] text-left ml-[2px]  text-[#909090] truncate">{lastUser}: {lastMessage}</p>
+            </div>
+
+        </div>
+    );
+}

src/app/components/chat/chat-list.js

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import ChatMessage from "./chat-component";
+import Chatting from "./chatting";
+
+export default function ChatList() {
+    const chatData = [
+        {
+            chatId: "1", //채팅에 고유번호를 부여해야하는 걸까요?
+            name: "고구마 한박스", //상품명
+            lastUser: '고구미',
+            lastMessage: "고구마 10개 사고 싶습니다!",
+            time: "13:45",
+            profileImg: "/none" //해당 상품 1번째 사진으로
+        },
+        {
+            chatId: "2",
+            name: "감자 10kg",
+            lastUser: '감자군',
+            lastMessage: "언제 만날까요?",
+            time: "12:20",
+            profileImg: "/none" 
+        }
+    ];
+
+    const [selectedChat, setSelectedChat] = useState(null);
+
+    const handleCloseChat = () => {
+        setSelectedChat(null);
+    }
+
+    return (<>
+            <div className="fixed bottom-[20px] right-[80px] w-[350px] h-[550px] bg-white
+                            rounded-[20px] border-[2px] border-[#FEB162] z-100 flex flex-col">
+                {/* 상단 */}
+                <div className="flex items-center h-[50px] px-[15px] border-b-[2px] border-[#FEB162] gap-[10px]">
+                    <p className="text-[20px] font-semibold truncate">메세지</p>
+                </div>
+
+                {/* 채팅 목록 */}
+                <div className={"flex-1 overflow-y-auto"}>
+                    {chatData.map(chat => (
+                        <ChatMessage
+                            key={chat.chatId}
+                            {...chat}
+                            onClick={() => setSelectedChat(chat)}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            {/* 선택된 채팅창 모달 띄우기 */}
+            {selectedChat && (
+                <Chatting
+                    chatId={selectedChat.chatId}
+                    name={selectedChat.name}
+                    profileImg={selectedChat.profileImg}
+                    onClose={handleCloseChat}
+                />
+            )}
+        </>
+    );
+}