-
+
-
+ Get started by editing{" "}
+
+ src/app/page.tsx ++ . +
+ - Save and see your changes instantly. +
Loading...
;
+ }
+
+ if (isProductError || isCommentsError || !product) {
+ return Error loading data
;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/pandamarket/src/app/layout.tsx b/pandamarket/src/app/layout.tsx
new file mode 100644
index 000000000..f7fa87eb8
--- /dev/null
+++ b/pandamarket/src/app/layout.tsx
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+ variable: "--font-geist-sans",
+ subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+ variable: "--font-geist-mono",
+ subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+ title: "Create Next App",
+ description: "Generated by create next app",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/pandamarket/src/app/login/login.tsx b/pandamarket/src/app/login/login.tsx
new file mode 100644
index 000000000..b2ae7c49e
--- /dev/null
+++ b/pandamarket/src/app/login/login.tsx
@@ -0,0 +1,12 @@
+import LoginForm from "@/components/Login/LoginForm";
+import SimpleLogin from "@/components/Login/SimpleLogin";
+import { JSX } from "react";
+
+export default function Login(): JSX.Element {
+ return (
+
+
+
+
+
+
+
+
+
+
+ {product.name}
++ {FormatCurrency(product.price)}원 +
+
+ 상품소개
+
+ {product.description}
+
+
+
+ 상품태그
+ #{product.tags.join(", #")}
+
+
+
+
+
+
+ 총명한 판다
+ {FormatDate(product.createdAt)}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/pandamarket/src/app/page.tsx b/pandamarket/src/app/page.tsx
new file mode 100644
index 000000000..3eee0141a
--- /dev/null
+++ b/pandamarket/src/app/page.tsx
@@ -0,0 +1,101 @@
+import Image from "next/image";
+
+export default function Home() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/pandamarket/src/app/post/post.tsx b/pandamarket/src/app/post/post.tsx
new file mode 100644
index 000000000..5a128a457
--- /dev/null
+++ b/pandamarket/src/app/post/post.tsx
@@ -0,0 +1,14 @@
+import RegisterOrEdit from "@/components/WriteArticle/EditRegisterPost";
+import Header from "@/components/header";
+import Footer from "@/components/footer";
+import { JSX } from "react";
+
+export default function RegisterPost(): JSX.Element {
+ return (
+
+
+ );
+}
diff --git a/pandamarket/src/app/posts/[id].tsx b/pandamarket/src/app/posts/[id].tsx
new file mode 100644
index 000000000..1963bf7b4
--- /dev/null
+++ b/pandamarket/src/app/posts/[id].tsx
@@ -0,0 +1,109 @@
+import styles from "@/styles/posts.module.css"
+import Comment from '@/components/post/comment';
+import CommentList from '@/components/post/postCommentList';
+import DropdownMenu from "@/components/Dropdown/DropdownBox";
+import FormatDate from "@/utils/Format";
+import Header from "@/components/header"
+import Footer from "@/components/footer"
+import Image from 'next/image';
+import { useEffect, useState} from 'react';
+import { useRouter } from 'next/router';
+import axios from '@/lib/axios';
+
+type PostComment = {
+ id: number;
+ content: string;
+ author: string;
+ createdAt: string;
+ // 필요한 필드 추가
+};
+
+type Post = {
+ id: number;
+ title: string;
+ createdAt: string;
+ content: string;
+};
+
+export default function IdPost(){
+ const [post, setPost] = useState
+
+ );
+}
\ No newline at end of file
diff --git a/pandamarket/src/app/product/product.tsx b/pandamarket/src/app/product/product.tsx
new file mode 100644
index 000000000..a2a589b9d
--- /dev/null
+++ b/pandamarket/src/app/product/product.tsx
@@ -0,0 +1,16 @@
+import Header from "@/components/header";
+import BestItemSection from "@/components/Product/BestItemSection";
+import AllitemsSection from "@/components/Product/AllItemSection";
+import Footer from "@/components/footer";
+import { JSX } from "react";
+
+export default function Market(): JSX.Element {
+ return (
+
+ {post ? (
+ <>
+
+
+ {
+ throw new Error("Function not implemented.");
+ }}
+ />
+
+ {post.title}
+
+
+
+
+
+
+
+ {post.content}
+
+
+ ) : (
+ 게시글을 불러오는 중...
// ✅ 데이터 없을 때 로딩 메시지 + )} +
+
+ );
+}
diff --git a/pandamarket/src/app/productpost/productpost.tsx b/pandamarket/src/app/productpost/productpost.tsx
new file mode 100644
index 000000000..7b5d00a32
--- /dev/null
+++ b/pandamarket/src/app/productpost/productpost.tsx
@@ -0,0 +1,81 @@
+import { useState, FormEvent, KeyboardEvent, JSX } from "react";
+import axios from "@/lib/axios";
+import { useRouter } from "next/router";
+import Header from "@/components/header";
+import ProductHeader from "@/components/ItemsPost/ProductHeader";
+import ImageForm from "@/components/ItemsPost/ImageForm";
+import NameForm from "@/components/ItemsPost/NameForm";
+import DescriptionForm from "@/components/ItemsPost/DescriptionForm";
+import PriceForm from "@/components/ItemsPost/PriceForm";
+import TagsForm from "@/components/ItemsPost/TagsForm";
+import Footer from "@/components/footer";
+
+interface FormData {
+ image: File | null;
+ name: string;
+ description: string;
+ price: number;
+ tags: string[];
+}
+
+export default function ProductPost(): JSX.Element {
+ const [formData, setFormData] = useState
+
+ );
+}
diff --git a/pandamarket/src/app/signin/signin.tsx b/pandamarket/src/app/signin/signin.tsx
new file mode 100644
index 000000000..88f6a8651
--- /dev/null
+++ b/pandamarket/src/app/signin/signin.tsx
@@ -0,0 +1,11 @@
+import SigninForm from "@/components/SignIn/SigninForm";
+import SimpleSignin from "@/components/SignIn/SImpleSignin";
+
+export default function Signin() {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/Dropdown/CommentDropdown.tsx b/pandamarket/src/components/Dropdown/CommentDropdown.tsx
new file mode 100644
index 000000000..dea7a69c6
--- /dev/null
+++ b/pandamarket/src/components/Dropdown/CommentDropdown.tsx
@@ -0,0 +1,89 @@
+import styles from "@/components/Dropdown/DropdownBox.module.css";
+import Image from "next/image";
+import axios from "@/lib/axios";
+import { useState, useEffect } from "react";
+
+interface CommentDropdownMenuProps {
+ commentId: number;
+ onEdit: (id: number) => void;
+ onDelete: (id: number) => void;
+}
+
+export default function CommentDropdownMenu({ commentId, onEdit, onDelete }: CommentDropdownMenuProps) {
+ const [isOpen, setIsOpen] = useState(false);
+ const [isAuthorized, setIsAuthorized] = useState(false);
+
+ // 사용자 인가 여부 확인
+ useEffect(() => {
+ axios
+ .get("https://panda-market-api.vercel.app/users/me", { withCredentials: true })
+ .then(() => setIsAuthorized(true))
+ .catch(() => setIsAuthorized(false));
+ }, []);
+
+ const toggleDropdown = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const handleEdit = async () => {
+ try {
+ await axios.patch(
+ `https://panda-market-api.vercel.app/comments/${commentId}`,
+ { text: "수정된 내용입니다." }, // 여기에 수정할 내용을 추가
+ { withCredentials: true }
+ );
+ onEdit(commentId); // 수정 후 콜백 실행
+ } catch (err) {
+ console.error("Failed to edit comment:", err);
+ alert("댓글 수정에 실패했습니다.");
+ } finally {
+ setIsOpen(false); // 드롭다운 닫기
+ }
+ };
+
+ const handleDelete = async () => {
+ try {
+ await axios.delete(
+ `https://panda-market-api.vercel.app/comments/${commentId}`,
+ { withCredentials: true }
+ );
+ onDelete(commentId); // 삭제 후 콜백 실행
+ } catch (err) {
+ console.error("Failed to delete comment:", err);
+ alert("댓글 삭제에 실패했습니다.");
+ } finally {
+ setIsOpen(false); // 드롭다운 닫기
+ }
+ };
+
+ return (
+
+ {/* 드롭다운 토글 버튼 */}
+
+ );
+}
diff --git a/pandamarket/src/components/Dropdown/DropdownBox.module.css b/pandamarket/src/components/Dropdown/DropdownBox.module.css
new file mode 100644
index 000000000..cda7436af
--- /dev/null
+++ b/pandamarket/src/components/Dropdown/DropdownBox.module.css
@@ -0,0 +1,40 @@
+.dropdownMenu{
+ font-weight: 400;
+ font-size: 16px;
+ color: #6b7280;
+ border-radius: 8px;
+ border: 1px solid #d1d5db;
+}
+
+.editMenu{
+ width: 100px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ padding: 10px 14px;
+ border: 0.5px solid #d1d5db;
+ list-style-type: none;
+ font-size: 16px;
+ font-weight: 400;
+ color: #6b7280;
+ cursor: pointer;
+ text-align: center;
+}
+
+.deleteMenu{
+ width: 100px;
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+ padding: 10px 14px;
+ border: 0.5px solid #d1d5db;
+ list-style-type: none;
+ font-size: 16px;
+ font-weight: 400;
+ color: #6b7280;
+ cursor: pointer;
+ text-align: center;
+}
+
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/Dropdown/DropdownBox.tsx b/pandamarket/src/components/Dropdown/DropdownBox.tsx
new file mode 100644
index 000000000..06408af59
--- /dev/null
+++ b/pandamarket/src/components/Dropdown/DropdownBox.tsx
@@ -0,0 +1,52 @@
+import styles from "@/components/Dropdown/DropdownBox.module.css";
+import Image from "next/image";
+import Link from "next/link";
+import axios from "@/lib/axios";
+import { useState } from "react";
+
+interface DropdownMenuProps {
+ postId: number;
+ onEdit: (id: number) => void;
+ onDelete: (id: number) => void;
+}
+
+export default function DropdownMenu({ postId, onEdit, onDelete }: DropdownMenuProps) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const toggleDropdown = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const handleDelete = async () => {
+ try {
+ await axios.delete(`/board/${postId}`); // 삭제 요청
+ onDelete(postId); // 삭제 후 콜백 실행
+ } catch (err) {
+ console.error("Failed to delete post:", err);
+ } finally {
+ setIsOpen(false);
+ }
+ };
+
+ return (
+ -
+ {isAuthorized ? (
+ <>
+
- + 수정하기 + +
- + 삭제하기 + + + ) : ( +
- + 권한이 없습니다. + + )} +
+
+ );
+}
diff --git a/pandamarket/src/components/Dropdown/ProductCommentDropdown.tsx b/pandamarket/src/components/Dropdown/ProductCommentDropdown.tsx
new file mode 100644
index 000000000..80860664f
--- /dev/null
+++ b/pandamarket/src/components/Dropdown/ProductCommentDropdown.tsx
@@ -0,0 +1,52 @@
+import styles from "@/components/Dropdown/DropdownBox.module.css";
+import Image from "next/image";
+import axios from "@/lib/axios";
+import { useState } from "react";
+
+interface ProductCommentDropdownProps {
+ productId: number;
+ onEdit: (id: number) => void;
+ onDelete: (id: number) => void;
+}
+
+export default function ProductCommentDropdown({ productId, onEdit, onDelete }: ProductCommentDropdownProps) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const toggleDropdown = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const handleEdit = () => {
+ onEdit(productId); // 수정 로직 실행
+ setIsOpen(false);
+ };
+
+ const handleDelete = async () => {
+ try {
+ await axios.delete(`/products/${productId}/comments`); // 삭제 요청
+ onDelete(productId); // 삭제 후 콜백 실행
+ } catch (err) {
+ console.error("Failed to delete post:", err);
+ } finally {
+ setIsOpen(false);
+ }
+ };
+
+ return (
+ -
+
- + 수정하기 + +
- + 삭제하기 + +
+
+ );
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/DropdownBox.module.css b/pandamarket/src/components/DropdownBox.module.css
new file mode 100644
index 000000000..725755781
--- /dev/null
+++ b/pandamarket/src/components/DropdownBox.module.css
@@ -0,0 +1,17 @@
+.sortBtn{
+ border-radius: 12px;
+ padding: 1.2rem 3rem;
+ background-color: #FFFFFF;
+ border: 1px solid #E5E7Eb;
+ font-size: 1.6rem;
+ font-weight: 600;
+ position: relative;
+}
+
+.option{
+ border-radius: 12px;
+ background-color: #ffffff;
+ font-size: 1.6rem;
+ font-weight: 400;
+ color: #1F2937;
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/DropdownBox.tsx b/pandamarket/src/components/DropdownBox.tsx
new file mode 100644
index 000000000..63a355dc5
--- /dev/null
+++ b/pandamarket/src/components/DropdownBox.tsx
@@ -0,0 +1,31 @@
+import { useState, ChangeEvent, JSX } from "react";
+import styles from "@/components/DropdownBox.module.css";
+
+export default function Dropdown(): JSX.Element {
+ const [currentValue, setCurrentValue] = useState-
+
- 수정하기 +
- 삭제하기 +
+
+
+ );
+}
diff --git a/pandamarket/src/components/ItemsPost/DescriptionForm.module.css b/pandamarket/src/components/ItemsPost/DescriptionForm.module.css
new file mode 100644
index 000000000..6b57e4a39
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/DescriptionForm.module.css
@@ -0,0 +1,46 @@
+.descriptionWrapper{
+ display: flex;
+ flex-direction: column;
+ width: 1200px;
+ margin-left: 360px;
+ margin-right: 360px;
+ margin-bottom: 20px;
+}
+
+.descriptionText{
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 26px;
+ color: #1f2937;
+}
+
+.descriptionInput{
+ height: 282px;
+ padding: 16px 24px;
+ background-color: #f3f4f6;
+ resize: none;
+ border-radius: 12px;
+ border: none;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 26px;
+ color: #1f2937;
+}
+
+.descriptionInput::placeholder{
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 26px;
+ color: #9ca3af;
+}
+
+.descriptionInput:focus{
+ outline-color: #3692ff;
+}
+
+.errorMsg{
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 24px;
+ color: #f74747;
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/ItemsPost/DescriptionForm.tsx b/pandamarket/src/components/ItemsPost/DescriptionForm.tsx
new file mode 100644
index 000000000..c92a28921
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/DescriptionForm.tsx
@@ -0,0 +1,36 @@
+import styles from "@/components/ItemsPost/DescriptionForm.module.css";
+import { useState, ChangeEvent } from "react";
+
+interface DescriptionFormProps {
+ updateFormData: (key: string, value: string) => void;
+}
+
+export default function DescriptionForm({ updateFormData }: DescriptionFormProps) {
+ const [descriptionMessage, setDescriptionMessage] = useState("");
+ const [isDescription, setIsDescription] = useState(true);
+
+ const handleDescriptionChange = (e: ChangeEvent
+
+
+
+ );
+}
diff --git a/pandamarket/src/components/ItemsPost/ImageForm.module.css b/pandamarket/src/components/ItemsPost/ImageForm.module.css
new file mode 100644
index 000000000..0d34b57a7
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/ImageForm.module.css
@@ -0,0 +1,97 @@
+
+.imageWrapper {
+ width: 282px;
+ margin-left: 360px;
+ display: flex;
+ flex-direction: column;
+}
+
+.imageText {
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 26px;
+ color: #1f2937;
+}
+
+.customFileInput {
+ width: 282px;
+ height: 282px;
+ border-radius: 12px;
+ background-color: #f3f4f6;
+}
+
+.fileInputContent {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 98px;
+}
+
+.registText {
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 26px;
+ color: #9ca3af;
+}
+
+.imageInput {
+ display: none;
+}
+
+.errorMsg {
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 24px;
+ color: #f74747;
+}
+
+
+.container {
+ display: flex;
+ gap: 5px;
+ flex-wrap: nowrap;
+ align-items: flex-start;
+ margin-bottom: 20px;
+}
+
+
+.imageWrapper {
+ flex-shrink: 0;
+}
+
+
+.previewContainer {
+ display: flex;
+ margin-top: 27px;
+ flex-wrap: wrap;
+ gap: 5px;
+ margin-left: 5px;
+}
+
+
+.previewItem {
+ position: relative;
+ width: 282px;
+ height: 282px;
+ border-radius: 12px;
+ overflow: hidden;
+}
+
+.previewImage {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.removeButton {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ border-radius: 50%;
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/pandamarket/src/components/ItemsPost/ImageForm.tsx b/pandamarket/src/components/ItemsPost/ImageForm.tsx
new file mode 100644
index 000000000..68673f425
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/ImageForm.tsx
@@ -0,0 +1,95 @@
+import React, { useState, ChangeEvent } from 'react';
+import styles from '@/components/ItemsPost/ImageForm.module.css';
+import Image from 'next/image';
+
+interface PreviewImage {
+ file: File;
+ previewUrl: string;
+}
+
+interface ImageFormProps {
+ updateFormData: (field: string, value: File[]) => void;
+}
+
+const ImageForm: React.FC{descriptionMessage}
+
+
+ );
+};
+
+export default ImageForm;
diff --git a/pandamarket/src/components/ItemsPost/NameForm.module.css b/pandamarket/src/components/ItemsPost/NameForm.module.css
new file mode 100644
index 000000000..b36252a16
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/NameForm.module.css
@@ -0,0 +1,44 @@
+.nameWrapper{
+ display: flex;
+ flex-direction: column;
+ width: 1200px;
+ margin-left: 360px;
+ margin-right: 360px;
+ margin-bottom: 20px;
+}
+
+.nameText{
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 26px;
+ color: #1f2937;
+}
+
+.nameInput{
+ padding: 16px 24px;
+ background-color: #f3f4f6;
+ border-radius: 12px;
+ border: none;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 26px;
+ color: #1f2937;
+}
+
+.nameInput::placeholder{
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 26px;
+ color: #9ca3af;
+}
+
+.nameInput:focus{
+ outline-color: #3692ff;
+}
+
+.errorMsg{
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 24px;
+ color: #f74747;
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/ItemsPost/NameForm.tsx b/pandamarket/src/components/ItemsPost/NameForm.tsx
new file mode 100644
index 000000000..1b2204ab4
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/NameForm.tsx
@@ -0,0 +1,38 @@
+import styles from "@/components/ItemsPost/NameForm.module.css";
+import { useState, ChangeEvent } from "react";
+
+interface NameFormProps {
+ updateFormData: (field: string, value: string) => void;
+}
+
+export default function NameForm({ updateFormData }: NameFormProps) {
+ const [nameMessage, setNameMessage] = useState
+
+ {/* 미리보기 섹션 */}
+ 상품 이미지
+ + {/* 이미지 등록 인풋 박스 아래에 메시지 표시 */} +{imgMessage}
+
+ {previewImages.map((preview, index) => (
+
+
+ 
+
+
+ ))}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/ItemsPost/PriceForm.module.css b/pandamarket/src/components/ItemsPost/PriceForm.module.css
new file mode 100644
index 000000000..f1252f40f
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/PriceForm.module.css
@@ -0,0 +1,43 @@
+.priceWrapper{
+ display: flex;
+ flex-direction: column;
+ width: 1200px;
+ margin-left: 360px;
+ margin-right: 360px;
+ margin-bottom: 20px;
+}
+
+.priceText{
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 26px;
+}
+
+.priceInput{
+ padding: 16px 24px;
+ background-color: #f3f4f6;
+ border-radius: 12px;
+ border: none;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 26px;
+ color: #1f2937;
+}
+
+.priceInput::placeholder{
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 26px;
+ color: #9ca3af;
+}
+
+.priceInput:focus{
+ outline-color: #3692ff;
+}
+
+.errorMsg{
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 24px;
+ color: #f74747;
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/ItemsPost/PriceForm.tsx b/pandamarket/src/components/ItemsPost/PriceForm.tsx
new file mode 100644
index 000000000..bbb2d545e
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/PriceForm.tsx
@@ -0,0 +1,40 @@
+import styles from "@/components/ItemsPost/PriceForm.module.css";
+import { useState, ChangeEvent } from "react";
+
+interface PriceFormProps {
+ updateFormData: (field: string, value: number) => void;
+}
+
+export default function PriceForm({ updateFormData }: PriceFormProps) {
+ const [priceMessage, setPriceMessage] = useState{nameMessage}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/ItemsPost/ProductHeader.module.css b/pandamarket/src/components/ItemsPost/ProductHeader.module.css
new file mode 100644
index 000000000..64e724334
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/ProductHeader.module.css
@@ -0,0 +1,26 @@
+.productPost{
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 32px;
+ color: #1F2937;
+}
+
+.postButton{
+ border-radius: 8px;
+ padding: 12px 23px;
+ background-color: #3692ff;
+ color: #f3f4f6;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 26px;
+ color: #f3f4f6;
+}
+
+.postWrapper{
+ width: 1200px;
+ margin-left: 360px;
+ margin-right: 360px;
+ display: flex;
+ justify-content: space-between;
+ margin-top: 20px;
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/ItemsPost/ProductHeader.tsx b/pandamarket/src/components/ItemsPost/ProductHeader.tsx
new file mode 100644
index 000000000..b6b1649ca
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/ProductHeader.tsx
@@ -0,0 +1,12 @@
+import styles from "@/components/ItemsPost/ProductHeader.module.css";
+
+export default function ProductHeader() {
+ return (
+ {priceMessage}
+
+
+ );
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/ItemsPost/TagsForm.module.css b/pandamarket/src/components/ItemsPost/TagsForm.module.css
new file mode 100644
index 000000000..e0a7be2a7
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/TagsForm.module.css
@@ -0,0 +1,79 @@
+.tagWrapper{
+ display: flex;
+ flex-direction: column;
+ width: 1200px;
+ margin-left: 360px;
+ margin-right: 360px;
+ margin-bottom: 20px;
+}
+
+.tagContainer{
+ display: flex;
+ flex-direction: column;
+ width: 1200px;
+}
+
+.tagText{
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 26px;
+ color: #1f2937;
+}
+
+.tagInput{
+ padding: 16px 24px;
+ border: 12px;
+ background-color: #f3f4f6;
+ border-radius: 12px;
+ border: none;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 26px;
+ color: #1f2937;
+}
+
+.tagInput::placeholder{
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 26px;
+ color: #9ca3af;
+}
+
+.tagInput:focus{
+ outline-color: #3692ff;
+}
+
+.errorMsg{
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 24px;
+ color: #f74747;
+}
+
+.tagBtnSection{
+ display: flex;
+ gap: 12px;
+ margin-top: 12px;
+ flex-wrap: wrap;
+}
+
+.tag{
+ background-color: #f3f4f6;
+ font-size: 16px;
+ line-height: 24px;
+ margin-right: 8px;
+ max-width: calc(100% - 28px);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ padding: 14px 14px 14px 16px;
+ border-radius: 999px;
+ min-width: 100px;
+ display: flex; /* 추가 */
+ align-items: center; /* 추가 */
+}
+
+.tagIcon{
+ margin-left: 5px;
+ transform: translateY(4px); /* 추가 */
+}
diff --git a/pandamarket/src/components/ItemsPost/TagsForm.tsx b/pandamarket/src/components/ItemsPost/TagsForm.tsx
new file mode 100644
index 000000000..e5e5fcb76
--- /dev/null
+++ b/pandamarket/src/components/ItemsPost/TagsForm.tsx
@@ -0,0 +1,77 @@
+import styles from "@/components/ItemsPost/TagsForm.module.css";
+import Image from "next/image";
+import { useState, ChangeEvent, KeyboardEvent } from "react";
+
+interface TagsFormProps {
+ updateFormData: (field: string, value: string[]) => void;
+}
+
+export default function TagsForm({ updateFormData }: TagsFormProps) {
+ const [tagMessage, setTagMessage] = useState상품 등록하기
+ +
+
+ );
+}
diff --git a/pandamarket/src/components/Login/LoginForm.module.css b/pandamarket/src/components/Login/LoginForm.module.css
new file mode 100644
index 000000000..ac5eafe34
--- /dev/null
+++ b/pandamarket/src/components/Login/LoginForm.module.css
@@ -0,0 +1,164 @@
+.loginContainer{
+ padding: 24px 16px;
+ max-width: 432px;
+ margin: 0 auto;
+}
+
+.logoLink {
+ display: block;
+ margin-bottom: 24px;
+ text-align: center;
+}
+
+.logoLink Image{
+ width: 198px;
+}
+
+.inputSection{
+ margin-bottom: 24px;
+}
+
+.inputSection input{
+ padding: 16px 24px;
+ background-color: #f3f4f6;
+ border: none;
+ border-radius: 12px;
+ font-size: 16px;
+ line-height: 24px;
+ width: 100%;
+}
+
+.inputSection input::placeholder {
+ color: #9ca3af;
+ font-size: 16px;
+ line-height: 24px;
+}
+
+.inputSection input:focus {
+ outline-color: #3692ff;
+}
+
+.errorWrapper{
+ display: flex;
+}
+
+.inputWrapper{
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.passwordToggleBtn{
+ position: absolute;
+ right: 24px;
+}
+
+.loginBtn{
+ background-color: #3692ff;
+ color: #ffffff;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 16px;
+ font-weight: 600;
+ border-radius: 999px;
+ padding: 14.5px 33.5px;
+ width: 100%;
+}
+
+.loginBtn:hover{
+ background-color: #1967d6;
+}
+
+.loginBtn:focus{
+ background-color: #1251aa;
+}
+
+.loginBtn:disabled{
+ background-color: #9ca3af;
+ cursor: default;
+ pointer-events: none;
+}
+
+.error{
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 24px;
+ color: #f74747;
+}
+
+.modalOverlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.7); /* 어두운 반투명 배경 */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000; /* 모달이 다른 요소 위에 표시되도록 */
+}
+
+.modalContent {
+ background-color: white;
+ border-radius: 8px;
+ padding: 24px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ width: 100%;
+ max-width: 400px;
+ z-index: 1001; /* 오버레이보다 위에 표시 */
+}
+
+.modalText{
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 26px;
+ text-align: center;
+ margin-bottom: 30px;
+}
+
+.closeModalBtn{
+ width: 165px;
+ height: 48px;
+ border-radius: 8px;
+ padding: 12px 23px;
+ background-color:#3692ff;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 26px;
+ color: #f3f4f6;
+}
+
+@media (min-width: 744px) {
+ .loginContainer{
+ max-width: 640px;
+ padding: 48px 0;
+ }
+
+ .logoLink{
+ margin-bottom: 40px;
+ }
+
+ .logoLink Image {
+ width: 396px;
+ }
+
+ .inputSection label{
+ font-size: 18px;
+ margin-bottom: 16px;
+ }
+
+ .loginBtn{
+ font-size: 20px;
+ font-weight: 700;
+ padding: 16px 126px;
+ }
+}
+
+@media(min-width:1200px) {
+ .loginContainer{
+ padding: 60px 0;
+ }
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/Login/LoginForm.tsx b/pandamarket/src/components/Login/LoginForm.tsx
new file mode 100644
index 000000000..5b441b0b0
--- /dev/null
+++ b/pandamarket/src/components/Login/LoginForm.tsx
@@ -0,0 +1,174 @@
+import { useState, useEffect, ChangeEvent, FormEvent } from "react";
+import axios from "@/lib/axios";
+import styles from "@/components/Login/LoginForm.module.css";
+import useValidate from "@/hooks/useValidate";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useAuth } from "@/context/AuthContext";
+
+type ValidationValues = Record
+
+
+
+ {tagMessage}
+-
+ {tags.map((tag, index) => (
+
- + #{tag} + + + ))} +
+
+ );
+};
\ No newline at end of file
diff --git a/pandamarket/src/components/Login/SimpleLogin.module.css b/pandamarket/src/components/Login/SimpleLogin.module.css
new file mode 100644
index 000000000..22c09264b
--- /dev/null
+++ b/pandamarket/src/components/Login/SimpleLogin.module.css
@@ -0,0 +1,50 @@
+.loginContainer{
+ padding: 24px 16px;
+ max-width: 432px;
+ margin: 0 auto;
+}
+
+.simpleLoginContainer{
+ background-color: #e6f2ff;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 23px;
+ margin: 24px 0;
+}
+
+.simpleLoginContainer h3{
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+}
+
+.socialLinkContainer {
+ display: flex;
+ gap: 16px;
+}
+
+.moveToLogin{
+ font-weight: 500;
+ font-size: 15px;
+ text-align: center;
+}
+
+.signin{
+ color: #3182f6;
+ text-decoration: underline;
+ text-underline-offset: 2px;
+}
+
+@media (min-width: 744px) {
+ .loginContainer{
+ max-width: 640px;
+ }
+}
+
+@media (min-width: 1200px) {
+ .loginContainer{
+ padding: 60px 0;
+ }
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/Login/SimpleLogin.tsx b/pandamarket/src/components/Login/SimpleLogin.tsx
new file mode 100644
index 000000000..742999447
--- /dev/null
+++ b/pandamarket/src/components/Login/SimpleLogin.tsx
@@ -0,0 +1,33 @@
+import styles from "@/components/Login/SimpleLogin.module.css"
+import Link from "next/link"
+import Image from "next/image"
+
+export default function SimpleLogin() {
+ return (
+
+
+
+
+
+ {isModalVisible && (
+ setIsModalVisible(false)}
+ >
+
+ )}
+ e.stopPropagation()}
+ >
+
+ {modalMessage}
+ +
+
+ )
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/Product/AllItemSection.tsx b/pandamarket/src/components/Product/AllItemSection.tsx
new file mode 100644
index 000000000..f5afd0dbc
--- /dev/null
+++ b/pandamarket/src/components/Product/AllItemSection.tsx
@@ -0,0 +1,152 @@
+import styles from "./ItemSection.module.css";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import ItemCard from "./ItemCard";
+import DropdownList from "./DropdownList";
+import Pagination from "./Pagination";
+import axiosInstance from "@/lib/axios";
+
+// 아이템 타입 정의
+type Item = {
+ id: number;
+ name: string;
+ price: number;
+ image: string;
+ favoriteCount: number;
+};
+
+const getPageSize = (): number => {
+ const width = window.innerWidth;
+ if (width < 744) return 1;
+ if (width < 1280) return 2;
+ return 4;
+};
+
+export default function AllItemsSection() {
+ const [orderBy, setOrderBy] = useState
+
+ 간편 로그인하기
+
+
+
+
+ 판다마켓이 처음이신가요?
+ 회원가입
+
+
+
+ );
+}
diff --git a/pandamarket/src/components/Product/BestItemCard.tsx b/pandamarket/src/components/Product/BestItemCard.tsx
new file mode 100644
index 000000000..5b9b24697
--- /dev/null
+++ b/pandamarket/src/components/Product/BestItemCard.tsx
@@ -0,0 +1,40 @@
+import styles from "@/components/Product/ItemCard.module.css";
+import Image from "next/image";
+
+// 아이템 타입 정의
+type Item = {
+ id: number;
+ name: string;
+ price: number;
+ image: string;
+};
+
+type BestItemCardProps = {
+ item: Item;
+};
+
+export default function BestItemCard({ item }: BestItemCardProps) {
+ return (
+
+
+ 판매 중인 상품
+
+
+
+ 상품 등록하기
+
+
+
+ {isDropdownVisible &&
+
+ {itemList.map((item) => (
+
+
+
+
+
+ );
+}
diff --git a/pandamarket/src/components/Product/BestItemSection.tsx b/pandamarket/src/components/Product/BestItemSection.tsx
new file mode 100644
index 000000000..146083a93
--- /dev/null
+++ b/pandamarket/src/components/Product/BestItemSection.tsx
@@ -0,0 +1,54 @@
+import { useState, useEffect } from "react";
+import BestItemCard from "./BestItemCard";
+import axiosInstance from "@/lib/axios";
+import styles from "./ItemSection.module.css";
+
+type Item = {
+ id: number;
+ name: string;
+ price: number;
+ image: string;
+};
+
+const getPageSize = (): number => {
+ const width = window.innerWidth;
+ if (width < 744) return 1;
+ if (width < 1280) return 2;
+ return 4;
+};
+
+export default function BestItemSection() {
+ const [itemList, setItemList] = useState
+
+ {item.name}
+{item.price.toLocaleString()}원
+
+
+
+
+ );
+}
diff --git a/pandamarket/src/components/Product/DropdownList.module.css b/pandamarket/src/components/Product/DropdownList.module.css
new file mode 100644
index 000000000..e031fc433
--- /dev/null
+++ b/pandamarket/src/components/Product/DropdownList.module.css
@@ -0,0 +1,22 @@
+.dropdownList {
+ position: absolute;
+ top: 110%;
+ right: 0;
+ background-color: #ffffff;
+ border-radius: 8px;
+ border: 1px solid #e5e7eb;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ z-index: 99;
+}
+
+.dropdownItem{
+ padding: 12px 44px;
+ border-bottom: 1px solid #e5e7eb;
+ font-size: 16px;
+ color: #1f2937;
+ cursor: pointer;
+}
+
+.dropdownItem:last-child{
+ border-bottom: none;
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/Product/DropdownList.tsx b/pandamarket/src/components/Product/DropdownList.tsx
new file mode 100644
index 000000000..749ae338b
--- /dev/null
+++ b/pandamarket/src/components/Product/DropdownList.tsx
@@ -0,0 +1,19 @@
+import styles from "@/components/Product/DropdownList.module.css";
+
+// Props 타입 정의
+type DropdownListProps = {
+ onSortSelection: (sortOption: string) => void;
+};
+
+export default function DropdownList({ onSortSelection }: DropdownListProps) {
+ return (
+ 베스트 상품
+
+ {itemList.map((item) => (
+
+
+
+ );
+}
diff --git a/pandamarket/src/components/Product/ItemCard.module.css b/pandamarket/src/components/Product/ItemCard.module.css
new file mode 100644
index 000000000..f72403cd1
--- /dev/null
+++ b/pandamarket/src/components/Product/ItemCard.module.css
@@ -0,0 +1,43 @@
+.itemCard{
+ color: #1f2937;
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.itemCardThumbnail {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ border-radius: 16px;
+ overflow: hidden;
+ aspect-ratio: 1;
+ margin-bottom: 16px;
+}
+
+.itemSummary {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ flex-grow: 1;
+}
+
+.itemName{
+ font-size: 16px;
+ font-weight: 400;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.itemPrice{
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.favoriteCount{
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: #4b5563;
+ font-size: 12px;
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/Product/ItemCard.tsx b/pandamarket/src/components/Product/ItemCard.tsx
new file mode 100644
index 000000000..4ae08bb35
--- /dev/null
+++ b/pandamarket/src/components/Product/ItemCard.tsx
@@ -0,0 +1,42 @@
+import styles from "@/components/Product/ItemCard.module.css";
+import Image from "next/image";
+
+// Item 타입 정의
+type Item = {
+ id: number;
+ name: string;
+ price: number;
+ image: string;
+ favoriteCount?: number;
+};
+
+// Props 타입 정의
+type ItemCardProps = {
+ item: Item;
+};
+
+export default function ItemCard({ item }: ItemCardProps) {
+ return (
+ onSortSelection("recent")}>
+ 최신순
+
+ onSortSelection("favorite")}>
+ 인기순
+
+
+
+ );
+}
diff --git a/pandamarket/src/components/Product/ItemSection.module.css b/pandamarket/src/components/Product/ItemSection.module.css
new file mode 100644
index 000000000..7178568f2
--- /dev/null
+++ b/pandamarket/src/components/Product/ItemSection.module.css
@@ -0,0 +1,75 @@
+.bestItemsContainer {
+ padding-top: 17px;
+ padding-bottom: 24px;
+}
+
+.allItemsCardSection {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 32px 7px;
+}
+
+.allItemsSectionHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.sorButtonWrapper {
+ position: relative;
+}
+
+.srotDropdownTriggerButton {
+ border: 1px solid #e5e7eb;
+ border-radius: 12px;
+}
+
+.searchBarWrapper {
+ display: flex;
+ background-color: #f3f4f6;
+ border-radius: 12px;
+ padding: 9px 16px;
+ flex: 1;
+ align-items: center;
+ width: 289px;
+}
+
+.searchBarInput{
+ border: none;
+ flex: 1;
+ background-color: inherit;
+ margin-left: 4px;
+}
+
+.searchBarInput::placeholder {
+ color: #9ca3af;
+ font-size: 16px;
+}
+
+.createItemButton {
+ margin: 0px 12px;
+ font-size: 16px;
+ font-weight: 600;
+ border-radius: 8px;
+ padding: 11.5px 23px;
+}
+
+
+
+@media (min-width: 744px){
+ .bestItemsContainer{
+ margin-bottom: 40px;
+ }
+
+ .bestItemsSection{
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 24px;
+ }
+}
+
+@media ( min-width: 1280px){
+ .bestItemsSection{
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
diff --git a/pandamarket/src/components/Product/Pagination.module.css b/pandamarket/src/components/Product/Pagination.module.css
new file mode 100644
index 000000000..cb214d256
--- /dev/null
+++ b/pandamarket/src/components/Product/Pagination.module.css
@@ -0,0 +1,29 @@
+.paginationBar{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+}
+
+.paginationButton{
+ border: 1px solid #e5e7eb;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ color: #6b7280;
+ font-weight: 600;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.paginationButton:disabled{
+ cursor: default;
+ opacity: 0.5;
+}
+
+.paginationButton.active{
+ background-color: #3692ff;
+ color: #ffffff;
+}
\ No newline at end of file
diff --git a/pandamarket/src/components/Product/Pagination.tsx b/pandamarket/src/components/Product/Pagination.tsx
new file mode 100644
index 000000000..9548aebc9
--- /dev/null
+++ b/pandamarket/src/components/Product/Pagination.tsx
@@ -0,0 +1,60 @@
+import styles from "@/components/Product/Pagination.module.css";
+import Image from "next/image";
+
+// Props 타입 정의
+type PaginationProps = {
+ totalPageNum: number;
+ activePageNum: number;
+ onPageChange: (pageNumber: number) => void;
+};
+
+export default function Pagination({
+ totalPageNum,
+ activePageNum,
+ onPageChange,
+}: PaginationProps) {
+ const maxVisiblePages = 5;
+ let startPage: number;
+
+ if (totalPageNum <= maxVisiblePages) {
+ startPage = 1;
+ } else {
+ startPage = Math.max(activePageNum - Math.floor(maxVisiblePages / 2), 1);
+ startPage = Math.min(startPage, totalPageNum - maxVisiblePages + 1);
+ }
+
+ const pages = Array.from(
+ { length: Math.min(maxVisiblePages, totalPageNum - startPage + 1) },
+ (_, i) => startPage + i
+ );
+
+ return (
+
+
+ {item.name}
+{item.price.toLocaleString()}원
+
+
+
+
+ {pages.map((page) => (
+
+ ))}
+
+
+ );
+}
diff --git a/pandamarket/src/components/ProductDetail/AskInput.module.css b/pandamarket/src/components/ProductDetail/AskInput.module.css
new file mode 100644
index 000000000..284da21dc
--- /dev/null
+++ b/pandamarket/src/components/ProductDetail/AskInput.module.css
@@ -0,0 +1,48 @@
+.askWrapper{
+ width: 1200px;
+ margin-left: 360px;
+ margin-right: 360px;
+ margin-top: 35px;
+}
+
+.ask{
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 26px;
+ color: #111827;
+}
+
+.askInput{
+ width: 1200px;
+ padding: 16px 24px;
+ border-radius: 12px;
+ background-color: #f3f4f6;
+ resize: none;
+ border: none;
+}
+
+.askInput::placeholder{
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 26px;
+ color: #9ca3af;
+}
+
+.askInput:focus{
+ outline-color: #3692ff;
+}
+
+.commentBtn{
+ border-radius: 8px;
+ padding: 12px 23px;
+ background-color: #9ca3af;
+ font-weight: 600;
+ font-size: 16px;
+ color: #f3f4f6;
+ border: none;
+}
+
+.btnWrapper{
+ margin-left: 1122px;
+ margin-top: 5px;
+}
diff --git a/pandamarket/src/components/ProductDetail/AskInput.tsx b/pandamarket/src/components/ProductDetail/AskInput.tsx
new file mode 100644
index 000000000..4b5a3b445
--- /dev/null
+++ b/pandamarket/src/components/ProductDetail/AskInput.tsx
@@ -0,0 +1,67 @@
+import styles from "@/components/Product/AskInput.module.css";
+import axios from "@/lib/axios";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+export default function AskInput() {
+ const [comment, setComment] = useState
+
+ 문의하기
+
+
+