From ca3ce8bb5c9ef278bcc0c7094011fd4d7c46e90b Mon Sep 17 00:00:00 2001
From: hobaksweetpotato <164849940+hobaksweetpotato@users.noreply.github.com>
Date: Sat, 7 Jun 2025 20:47:28 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=EB=AC=BC=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20=ED=99=95=EC=9D=B8=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?,=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20=EC=9E=91=EC=84=B1=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/common/post-box.js     | 127 ++++++++++++++++++++++
 src/app/components/common/post-confirm.js |  13 +++
 src/app/components/common/post-page.js    | 124 +++++++++++++++++++++
 src/app/components/common/post-unuse.js   |  71 ++++++++++++
 src/app/components/common/post.js         |  71 ------------
 src/app/components/common/shortcut.js     |   2 +-
 6 files changed, 336 insertions(+), 72 deletions(-)
 create mode 100644 src/app/components/common/post-box.js
 create mode 100644 src/app/components/common/post-confirm.js
 create mode 100644 src/app/components/common/post-page.js
 create mode 100644 src/app/components/common/post-unuse.js
 delete mode 100644 src/app/components/common/post.js

diff --git a/src/app/components/common/post-box.js b/src/app/components/common/post-box.js
new file mode 100644
index 0000000..f32010d
--- /dev/null
+++ b/src/app/components/common/post-box.js
@@ -0,0 +1,127 @@
+'use client';
+
+import { useState } from 'react';
+import ConfirmModal from './post-confirm';
+import WritingPage from './post-page';
+
+export default function PostBox({ onClose }) {
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [showFullPage, setShowFullPage] = useState(false);
+
+    const handleSubmit = () => {
+        console.log('등록 처리 완료');
+        setShowConfirm(false);
+        onClose();
+    };
+
+    const handleExpand = () => {
+        setShowFullPage(true);
+    };
+
+    if (showFullPage) {
+        return <WritingPage />;
+    }
+
+    return (
+        <div className="fixed top-0 left-0 w-full h-full z-100 flex justify-center items-center bg-black/50">
+            <div className="w-full max-w-3xl p-10 bg-[#FFFEF6] rounded-4xl shadow-lg z-50 relative">
+                <h2 className="text-2xl font-bold mb-6">상품 등록</h2>
+                <form className="space-y-5">
+                    {/* 이미지 업로드 */}
+                    <div className="flex items-center">
+                        <label className="w-26 text-md font-semibold text-[#4D4D4D]">상품이미지</label>
+                        <input type="file" className="w-full border border-[#E0E0E0] rounded-lg p-2"/>
+                    </div>
+
+                    {/* 제목 */}
+                    <div className="flex items-center">
+                        <label className="w-26 text-md font-semibold text-[#4D4D4D]">제목</label>
+                        <input type="text" placeholder="상품 이름을 작성하세요"
+                               className="w-full border border-[#E0E0E0] rounded-lg p-2"/>
+                    </div>
+
+                    {/* 금액 + 인원 */}
+                    <div className="flex items-center gap-4">
+                        <div className="flex items-center w-1/2">
+                            <label className="w-22 text-md font-semibold text-[#4D4D4D]">금액</label>
+                            <div className="flex items-center">
+                                <input type="number" placeholder="상품 금액"
+                                       className="w-full border border-[#E0E0E0] rounded-lg p-2"/>
+                                <span className="text-[#4D4D4D]">원</span>
+                            </div>
+                        </div>
+                        <div className="flex items-center w-1/2">
+                            <label className="w-22 text-md font-semibold text-[#4D4D4D]">인원</label>
+                            <div className="flex items-center">
+                                <input type="number" placeholder="모집 인원"
+                                       className="w-full border border-[#E0E0E0] rounded-lg p-2"/>
+                                <span className="text-[#4D4D4D]">명</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* 카테고리 + 거래방식 */}
+                    <div className="flex items-center gap-4">
+                        <div className="flex items-center w-1/2">
+                            <label className="w-30 text-md font-semibold text-[#4D4D4D]">카테고리</label>
+                            <select className="w-full border border-[#E0E0E0] rounded-lg p-2">
+                                <option>카테고리</option>
+                                <option>식재료</option>
+                                <option>간편식/냉동식품</option>
+                                <option>생활용품</option>
+                                <option>대용량</option>
+                                <option>배달음식</option>
+                                <option>나눔템</option>
+                            </select>
+                        </div>
+                        <div className="flex items-center w-1/2">
+                            <label className="w-30 text-md font-semibold text-[#4D4D4D]">거래방식</label>
+                            <select className="w-full border border-[#E0E0E0] rounded-lg p-2">
+                                <option>거래 방식</option>
+                                <option>직거래</option>
+                                <option>택배</option>
+                                <option>기타</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    {/* 상세설명 */}
+                    <div className="flex items-center">
+                        <label className="w-26 text-md font-semibold text-[#4D4D4D] mb-20">상세설명</label>
+                        <textarea
+                            placeholder={'구매시기, 거래 장소, 상품 분배 기준, 하자 여부 등 상품 설명을 자세히 작성해주세요. \n전화번호, SNS 계정 등 개인정보는 입력이 제한될 수 있어요.'}
+                            className="w-full border border-[#E0E0E0] rounded-lg p-2 h-32 resize-none"
+                        ></textarea>
+                    </div>
+
+                    {/* 등록 버튼 */}
+                    <button type="submit"
+                            className="w-[50%] h-12 bg-[#F5C24C] hover:bg-[#E5B33C] text-white text-lg font-bold py-2 rounded-3xl"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                setShowConfirm(true)
+                                ;
+                            }}>
+                        등록하기
+                    </button>
+                </form>
+
+                {/* 등록 확인 모달 */}
+                {showConfirm && (
+                    <ConfirmModal
+                        onCancel={() => setShowConfirm(false)}
+                        onConfirm={handleSubmit}
+                    />
+                )}
+
+                <button onClick={handleExpand} className="absolute top-5 left-7 text-[#4D4D4D] hover:text-black text-2xl">
+                    ⇱
+                </button>
+
+                <button onClick={onClose} className="absolute top-5 right-7 text-[#4D4D4D] hover:text-black text-2xl">
+                    ✖
+                </button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/app/components/common/post-confirm.js b/src/app/components/common/post-confirm.js
new file mode 100644
index 0000000..2011e2b
--- /dev/null
+++ b/src/app/components/common/post-confirm.js
@@ -0,0 +1,13 @@
+export default function ConfirmModal({ onConfirm, onCancel }) {
+    return (
+        <div className="fixed inset-0 bg-black/50 flex justify-center items-center z-50">
+            <div className="bg-white rounded-3xl p-8 text-center w-90">
+                <p className="mb-4 m-2 font-semibold">상품을 등록하시겠습니까?</p>
+                <div className="flex justify-between">
+                    <button onClick={onCancel} className="border border-yellow-400 border-[1.5px] mt-4 ml-2 py-2 rounded-4xl w-32 font-semibold">닫기</button>
+                    <button onClick={onConfirm} className="bg-yellow-400 mt-4 mr-2 py-2 rounded-4xl text-white w-32 font-semibold">등록하기</button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/app/components/common/post-page.js b/src/app/components/common/post-page.js
new file mode 100644
index 0000000..1afe1b7
--- /dev/null
+++ b/src/app/components/common/post-page.js
@@ -0,0 +1,124 @@
+'use client';
+
+import { useState } from 'react';
+import { useRef } from 'react';
+import ConfirmModal from './post-confirm';
+
+export default function WritingPage() {
+    const [showConfirm, setShowConfirm] = useState(false);
+
+    const handleSubmit = () => {
+        console.log('등록 처리 완료');
+        setShowConfirm(false);
+        onClose();
+    };
+
+    const fileInputRef = useRef(null);
+
+    const handleClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    return (
+        <div className="fixed top-36 right-30 w-full h-[82%] max-w-5xl border border-[#D9D9D9] bg-[#FFFEF6] rounded-4xl z-100 p-8">
+            {/*<h2 className="text-2xl font-bold mb-6">상품 등록</h2>*/}
+            <form className="space-y-5">
+                {/* 이미지 업로드 */}
+                <div className="flex items-center">
+                    <label className="w-26 text-lg font-semibold text-[#4D4D4D] mb-30">상품이미지</label>
+                    <div
+                        onClick={handleClick}
+                        className="w-40 h-40 border border-[#D9D9D9] rounded-md bg-white flex flex-col items-center justify-center cursor-pointer"
+                    ><span className="text-4xl">📷</span>
+                        <span className="text-md text-gray-500 mt-1">이미지 등록</span></div>
+                    <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                    />
+                </div>
+
+                {/* 제목 */}
+                <div className="flex items-center">
+                    <label className="w-29 text-lg font-semibold text-[#4D4D4D]">제목</label>
+                    <input type="text" placeholder="상품 이름을 작성하세요"
+                           className="w-full border border-[#E0E0E0] rounded-lg p-2"/>
+                </div>
+
+                {/* 금액 + 인원 */}
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center w-1/2">
+                        <label className="w-33 text-lg font-semibold text-[#4D4D4D]">금액</label>
+                        <div className="flex items-center w-full">
+                            <input type="number" placeholder="상품 금액"
+                                   className="flex-1 border border-[#E0E0E0] rounded-lg p-2"/>
+                            <span className="ml-2 text-[#4D4D4D]">원</span>
+                        </div>
+                    </div>
+                    <div className="flex items-center w-1/2">
+                        <label className="w-30 text-lg font-semibold text-[#4D4D4D]">인원</label>
+                        <div className="flex items-center w-full">
+                            <input type="number" placeholder="모집 인원"
+                                   className="flex-1 border border-[#E0E0E0] rounded-lg p-2"/>
+                            <span className="ml-2 text-[#4D4D4D]">명</span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* 카테고리 + 거래방식 */}
+                <div className="flex items-center gap-4">
+                    <div className="flex items-center w-1/2">
+                        <label className="w-33 text-lg font-semibold text-[#4D4D4D]">카테고리</label>
+                        <select className="w-full border border-[#E0E0E0] rounded-lg p-2">
+                            <option className="text-[#888888]">카테고리</option>
+                            <option>식재료</option>
+                            <option>간편식/냉동식품</option>
+                            <option>생활용품</option>
+                            <option>대용량</option>
+                            <option>배달음식</option>
+                            <option>나눔템</option>
+                        </select>
+                    </div>
+                    <div className="flex items-center w-1/2">
+                        <label className="w-30 text-lg font-semibold text-[#4D4D4D]">거래방식</label>
+                        <select className="w-full border border-[#E0E0E0] rounded-lg p-2">
+                            <option className="text-[#888888]">거래 방식</option>
+                            <option>직거래</option>
+                            <option>택배</option>
+                            <option>기타</option>
+                        </select>
+                    </div>
+                </div>
+
+                {/* 상세설명 */}
+                <div className="flex items-center">
+                    <label className="w-29 text-lg font-semibold text-[#4D4D4D] mb-60">상세설명</label>
+                    <textarea
+                        placeholder={'구매시기, 거래 장소, 상품 분배 기준, 하자 여부 등 상품 설명을 자세히 작성해주세요. \n전화번호, SNS 계정 등 개인정보는 입력이 제한될 수 있어요.'}
+                        className="w-full border border-[#E0E0E0] rounded-lg p-2 h-70 resize-none"
+                    ></textarea>
+                </div>
+
+                {/* 등록 버튼 */}
+                <button type="submit"
+                        className="w-[30%] h-12 right-8 bg-[#F5C24C] hover:bg-[#E5B33C] text-white text-lg font-bold py-2 rounded-xl absolute"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            setShowConfirm(true)
+                            ;
+                        }}>
+                    등록하기
+                </button>
+            </form>
+
+            {/* 등록 확인 모달 */}
+            {showConfirm && (
+                <ConfirmModal
+                    onCancel={() => setShowConfirm(false)}
+                    onConfirm={handleSubmit}
+                />
+            )}
+        </div>
+    );
+}
diff --git a/src/app/components/common/post-unuse.js b/src/app/components/common/post-unuse.js
new file mode 100644
index 0000000..4c1d092
--- /dev/null
+++ b/src/app/components/common/post-unuse.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 (
+//         <div className="fixed bottom-[20px] right-[80px] w-[600px] h-[700px] 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]">
+//                 <button onClick={onClose} className="w-[20px] h-[20px] relative">
+//                     <Image src="/chat-back.svg" fill alt="chat-back" />
+//                 </button>
+//                 <p className="text-[20px] font-semibold truncate">게시글</p>
+//             </div>
+//
+//             {/* 제목 */}
+//             <div className="flex items-center h-[50px] px-[15px] border-b-[2px] border-[#FEB162] gap-[10px]">
+//                 <label className="w-[10%] font-bold">제목:</label>
+//                 <input type="text" className="w-[90%] h-[40px] border px-2 rounded" />
+//             </div>
+//
+//             {/* 이미지 첨부 */}
+//             <div className="flex items-center h-[100px] px-[15px] border-b-[2px] border-[#FEB162] gap-[10px]">
+//                 <label className="w-[20%] font-bold">이미지 첨부:</label>
+//                 <div className="flex relative w-[80px] h-[80px] justify-center items-center border-2 rounded-2xl opacity-50">
+//                     <div className="relative w-[16px] h-[2px] bg-black" />
+//                     <div className="absolute w-[2px] h-[16px] bg-black" />
+//                     <input type="file" className="absolute w-full h-full opacity-0 cursor-pointer" />
+//                 </div>
+//             </div>
+//
+//             {/* 본문 입력 */}
+//             <div className="flex items-center justify-center h-[350px] px-[15px] border-b-[2px] border-[#FEB162] gap-[10px]">
+//                 <textarea className="w-[95%] h-[95%] resize-none overflow-hidden border rounded p-2" />
+//             </div>
+//
+//             {/* 카테고리 선택 */}
+//             <div className="h-[25px] px-[15px] text-center items-center jusfity-center">
+//                 <label className="font-bold">제품 태그 선택</label>
+//
+//             </div>
+//             <div className="h-[50px] px-[15px] border-b-[2px] border-[#FEB162] grid grid-cols-6 gap-4">
+//                 {category_lists.map((item) => {
+//                     const isActive = activeTags.includes(item.value);
+//                     return (
+//                         <button key={item.key} onClick={() => handleClick(item.value)}
+//                             className="w-full h-full flex-col justify-center text-center">
+//                             <p className={`
+//                                     w-full h-[80%]  hover:opacity-100 rounded-2xl text-[11px]
+//                                     transition-opacity duration-200 flex items-center justify-center
+//                                     ${isActive ? 'bg-[#FEB162] opacity-90 font-bold' : 'bg-[#DED1D2] opacity-70 font-medium'}`}>
+//                                 {item.name || '이름 없음'}</p>
+//                         </button>
+//                     );
+//                 })}
+//             </div>
+//             <div className="flex h-[10px]"></div>
+//             <button className="flex justify-center items-center w-[90%] h-[50px] self-center font-bold
+//             bg-[#DED1D2] hover:bg-[#FEB162] hover:shadow-[0_0_8px_#FEB162] transition-all duration-250 rounded-2xl">글 게시</button>
+//         </div>
+//     );
+// }
diff --git a/src/app/components/common/post.js b/src/app/components/common/post.js
deleted file mode 100644
index 31b1243..0000000
--- a/src/app/components/common/post.js
+++ /dev/null
@@ -1,71 +0,0 @@
-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 (
-        <div className="fixed bottom-[20px] right-[80px] w-[600px] h-[700px] 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]">
-                <button onClick={onClose} className="w-[20px] h-[20px] relative">
-                    <Image src="/chat-back.svg" fill alt="chat-back" />
-                </button>
-                <p className="text-[20px] font-semibold truncate">게시글</p>
-            </div>
-
-            {/* 제목 */}
-            <div className="flex items-center h-[50px] px-[15px] border-b-[2px] border-[#FEB162] gap-[10px]">
-                <label className="w-[10%] font-bold">제목:</label>
-                <input type="text" className="w-[90%] h-[40px] border px-2 rounded" />
-            </div>
-
-            {/* 이미지 첨부 */}
-            <div className="flex items-center h-[100px] px-[15px] border-b-[2px] border-[#FEB162] gap-[10px]">
-                <label className="w-[20%] font-bold">이미지 첨부:</label>
-                <div className="flex relative w-[80px] h-[80px] justify-center items-center border-2 rounded-2xl opacity-50">
-                    <div className="relative w-[16px] h-[2px] bg-black" />
-                    <div className="absolute w-[2px] h-[16px] bg-black" />
-                    <input type="file" className="absolute w-full h-full opacity-0 cursor-pointer" />
-                </div>
-            </div>
-
-            {/* 본문 입력 */}
-            <div className="flex items-center justify-center h-[350px] px-[15px] border-b-[2px] border-[#FEB162] gap-[10px]">
-                <textarea className="w-[95%] h-[95%] resize-none overflow-hidden border rounded p-2" />
-            </div>
-
-            {/* 카테고리 선택 */}
-            <div className="h-[25px] px-[15px] text-center items-center jusfity-center">
-                <label className="font-bold">제품 태그 선택</label>
-
-            </div>
-            <div className="h-[50px] px-[15px] border-b-[2px] border-[#FEB162] grid grid-cols-6 gap-4">
-                {category_lists.map((item) => {
-                    const isActive = activeTags.includes(item.value);
-                    return (
-                        <button key={item.key} onClick={() => handleClick(item.value)}
-                            className="w-full h-full flex-col justify-center text-center">
-                            <p className={`
-                                    w-full h-[80%]  hover:opacity-100 rounded-2xl text-[11px]
-                                    transition-opacity duration-200 flex items-center justify-center
-                                    ${isActive ? 'bg-[#FEB162] opacity-90 font-bold' : 'bg-[#DED1D2] opacity-70 font-medium'}`}>
-                                {item.name || '이름 없음'}</p>
-                        </button>
-                    );
-                })}
-            </div>
-            <div className="flex h-[10px]"></div>
-            <button className="flex justify-center items-center w-[90%] h-[50px] self-center font-bold
-            bg-[#DED1D2] hover:bg-[#FEB162] hover:shadow-[0_0_8px_#FEB162] transition-all duration-250 rounded-2xl">글 게시</button>
-        </div>
-    );
-}
diff --git a/src/app/components/common/shortcut.js b/src/app/components/common/shortcut.js
index 5a39701..85d56be 100644
--- a/src/app/components/common/shortcut.js
+++ b/src/app/components/common/shortcut.js
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import ChatList from '../chat/chat-list';
 import ChatBox from '../chat/chatting';
-import PostBox from './post';
+import PostBox from './post-box';
 
 import {useEffect, useState} from "react";