Skip to content

Postwrite : 게시물 작성 및 등록 확인 모달 창, 게시물 페이지 컴포넌트 제작 #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hobaksweetpotato wants to merge 1 commit into
base: release-0.2-refactory
Choose a base branch
from
Open

Postwrite : 게시물 작성 및 등록 확인 모달 창, 게시물 페이지 컴포넌트 제작 #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 127 additions & 0 deletions src/app/components/common/post-box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
13 changes: 13 additions & 0 deletions src/app/components/common/post-confirm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
124 changes: 124 additions & 0 deletions src/app/components/common/post-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
71 changes: 71 additions & 0 deletions src/app/components/common/post-unuse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
// );
// }
Loading