+ {/* 상단 */}
+
+
+ {/* 채팅 부분 */}
+
+ {messages.map((msg) => (
+
+
+
+ {/* 이름 (상대방 메시지일 때만 표시) */}
+ {msg.sender !== "me" && (
+
+ {msg.name}
+
+ )}
+ {/* 말풍선 + 시간*/}
+
+ {/* 말풍선 */}
+
+ {msg.text}
+
+ {/* 시간 */}
+
+ {msg.time}
+
+
+
+
+ ))}
+ {/* 스크롤 제일 밑에 위치한 빈 div */}
+
+
+
+ {/* 입력 부분 */}
+
+ setInput(e.target.value)}
+ onKeyDown={(e) => e.key === "Enter" && handleSend()}
+ className="flex-1 px-2 text-sm focus:outline-none"
+ placeholder="메시지를 입력하세요."
+ />
+
+
+
+ );
+}
diff --git a/src/app/components/common/post.js b/src/app/components/common/post.js
new file mode 100644
index 0000000..31b1243
--- /dev/null
+++ b/src/app/components/common/post.js
@@ -0,0 +1,71 @@
+import { useState } from "react";
+import Image from "next/image";
+import category_lists from "@constants/simpleDB";
+
+export default function PostBox({ onClose }) {
+ const [activeTags, setActiveTags] = useState([]);
+
+ const handleClick = (value) => {
+ setActiveTags((prev) =>
+ prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
+ );
+ };
+
+ return (
+
+ {/* 상단 */}
+
+
+ {/* 제목 */}
+
+
+
+
+
+ {/* 이미지 첨부 */}
+
+
+ {/* 본문 입력 */}
+
+
+
+
+ {/* 카테고리 선택 */}
+
+
+
+
+
+ {category_lists.map((item) => {
+ const isActive = activeTags.includes(item.value);
+ return (
+
+ );
+ })}
+
+
+
+
+ );
+}
diff --git a/src/app/components/common/shortcut.js b/src/app/components/common/shortcut.js
new file mode 100644
index 0000000..5a39701
--- /dev/null
+++ b/src/app/components/common/shortcut.js
@@ -0,0 +1,36 @@
+import Image from 'next/image';
+import ChatList from '../chat/chat-list';
+import ChatBox from '../chat/chatting';
+import PostBox from './post';
+
+import {useEffect, useState} from "react";
+
+export default function Shortcut({}) {
+ const [isCOpen, setIsCOpen] = useState(false);
+ const [isPOpen, setIsPOpen] = useState(false);
+
+
+ const toggleChat = () => setIsCOpen(!isCOpen);
+ const togglePost = () => setIsPOpen(!isPOpen);
+
+ return (
+ <>
+
+ {isCOpen &&
}
+
+
+ {isPOpen &&
}
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/feature/home/components/item-explain.js b/src/app/feature/home/components/item-explain.js
index 96edc25..975a478 100644
--- a/src/app/feature/home/components/item-explain.js
+++ b/src/app/feature/home/components/item-explain.js
@@ -1,47 +1,87 @@
-import Image from 'next/image'
-import ingredient_lists from '@constants/categoryDB';
-import category_lists from "@constants/simpleDB";
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
-export default function ItemExplain({onSelect}) {
+export default function ItemExplain({ onSelect }) {
+ const [allData, setAllData] = useState([]);
+ const [productData, setProductData] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
- const productData = ingredient_lists[onSelect];
+ useEffect(() => {
+ // 전체 데이터 불러오기
+ const fetchAll = async () => {
+ setLoading(true);
+ setError(null);
+ try {
+ const res = await fetch('/api');
+ if (!res.ok) throw new Error('데이터 불러오기 실패');
+ const data = await res.json();
+ setAllData(data);
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+ fetchAll();
+ }, []);
+
+ useEffect(() => {
+ if (!onSelect || allData.length === 0) {
+ setProductData(null);
+ return;
+ }
+ // id로 필터링
+ const found = allData.find(item => item._id === onSelect);
+ setProductData(found || null);
+ }, [onSelect, allData]);
+
+ if (loading) return
로딩중...
;
+ if (error) return
{error}
;
+ if (!productData) return
선택된 제품 정보를 찾을 수 없습니다.
;
return (
-
-
-
-
+
+
+
+
-
- 제품명:{productData.value || '이름 없음'}
+
+ 제품명: {productData.name || '이름 없음'}
-
- 상세설명:{productData.desc}
+
+ 상세설명: {productData.desc}
-
- DDIP:{productData.price}원 / {productData.team}명
+
+ DDIP: {productData.price}원 / {productData.max}명
-
+
현재인원
-
+
{Array.from({ length: productData.now }).map((_, idx) => (
-
+
))}
- {Array.from({ length: productData.team-productData.now }).map((_, idx) => (
+ {Array.from({ length: productData.max - productData.now }).map((_, idx) => (
))}
+ {
+ selectedCategoryValue
+ ? (SimpleDB.find(cat => cat.value === selectedCategoryValue)?.name || '알 수 없음')
+ : '전체 항목'
+ }
+
-
- {ingredient_lists.map(item => (
-