@@ -18,9 +20,7 @@ function Nav() {
중고마켓
diff --git a/vite-project/src/components/SelectDropdown.jsx b/vite-project/src/components/SelectDropdown.jsx
new file mode 100644
index 00000000..203b3093
--- /dev/null
+++ b/vite-project/src/components/SelectDropdown.jsx
@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from "react";
+import selectIcon from "../assets/ic-sort.svg";
+
+export default function SelectDropdown({ onChange, value }) {
+ const [isOpen, setIsOpen] = useState(false);
+ const dropdownRef = useRef(null);
+
+ const options = [
+ { label: "최신순", value: "recent" },
+ { label: "좋아요순", value: "favorite" },
+ ];
+
+ const selected = options.find((opt) => opt.value === value);
+
+ const handleSelect = (option) => {
+ onChange({ target: { value: option.value } });
+ setIsOpen(false);
+ };
+
+ useEffect(() => {
+ const handleClickOutside = (e) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+ setIsOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, []);
+
+ return (
+ <>
+
+ handleChange("image", img)} />
+ handleChange("name", val)}
+ />
+ handleChange("description", val)}
+ />
+ handleChange("price", val)}
+ />
+ handleChange("tags", tags)} />
+
+
+ );
+}
+
+export default AddItemPage;
diff --git a/vite-project/src/pages/AddItemPage/ProductAddImg.jsx b/vite-project/src/pages/AddItemPage/ProductAddImg.jsx
new file mode 100644
index 00000000..dc591158
--- /dev/null
+++ b/vite-project/src/pages/AddItemPage/ProductAddImg.jsx
@@ -0,0 +1,153 @@
+import styled from "styled-components";
+import plusIcon from "../../assets/ic-plus.svg";
+import xIcon from "../../assets/ic-x.svg";
+import { useState, useRef } from "react";
+
+const ProductAddImgDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+`;
+const ProductAddImgTitle = styled.h1`
+ font-weight: 700;
+ font-size: 1.8rem;
+ color: var(--gray-800);
+`;
+const ProductAddImgFile = styled.label`
+ width: 28.2rem;
+ height: 28.2rem;
+ border-radius: 1.2rem;
+ background-color: var(--gray-100);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ font-weight: 400;
+ font-size: 1.6rem;
+ color: var(--gray-400);
+ gap: 1rem;
+ cursor: pointer;
+ img {
+ width: 4.8rem;
+ height: 4.8rem;
+ }
+ input {
+ display: none;
+ }
+
+ @media (max-width: 767px) {
+ width: 16.8rem;
+ height: 16.8rem;
+ }
+`;
+
+const ProductAddImgFileDiv = styled.div`
+ display: flex;
+ gap: 2.4rem;
+
+ @media (max-width: 767px) {
+ gap: 1rem;
+ }
+`;
+
+const PreviewWrapper = styled.div`
+ position: relative;
+
+
+`;
+
+const PreviewImg = styled.img`
+ width: 28.2rem;
+ height: 28.2rem;
+ border-radius: 1.2rem;
+ border: 0.1rem solid var(--gray-50);
+
+ @media (max-width: 767px) {
+ width: 16.8rem;
+ height: 16.8rem;
+ }
+`;
+
+const ClearBtn = styled.button`
+ all: unset;
+ position: absolute;
+ top: 0.8rem;
+ right: 0.8rem;
+ cursor: pointer;
+
+ img {
+ width: 2.2rem;
+ height: 2.4rem;
+ }
+`;
+
+export default function ProductAddImg() {
+ const [previewImg, setPreviewImg] = useState(null);
+ const [showError, SetShowError] = useState(false);
+ const inputRef = useRef();
+
+ const handleFileChange = (e) => {
+ const file = e.target.files[0];
+ if (!file) return;
+
+ if (previewImg) {
+ SetShowError(true);
+ inputRef.current.value = "";
+ return;
+ }
+
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ setPreviewImg(reader.result);
+ };
+ reader.readAsDataURL(file);
+ };
+
+ const handleClearClick = () => {
+ if (inputRef.current) {
+ inputRef.current.value = "";
+ }
+ setPreviewImg(null);
+ SetShowError(false);
+ };
+
+ const handleInputClick = (e) => {
+ if (previewImg) {
+ e.preventDefault();
+ SetShowError(true);
+ }
+ };
+
+ return (
+
+ 상품 이미지
+
+
+ 
+ 이미지등록
+
+
+ {previewImg && (
+
+
+ 
+
+
+ )}
+
+ {showError && (
+
+ );
+}
diff --git a/vite-project/src/pages/AddItemPage/ProductAddInt.jsx b/vite-project/src/pages/AddItemPage/ProductAddInt.jsx
new file mode 100644
index 00000000..4907f3df
--- /dev/null
+++ b/vite-project/src/pages/AddItemPage/ProductAddInt.jsx
@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+const ProductAddIntDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+`;
+
+const ProductAddIntTitle = styled.h1`
+ font-weight: 700;
+ font-size: 1.8rem;
+ color: var(--gray-800);
+`;
+
+const ProductAddIntInput = styled.textarea`
+ border-radius: 1.2rem;
+ padding: 1.6rem 2.4rem;
+ height: 28.2rem;
+ background-color: var(--gray-100);
+ border: 0.1rem solid var(--gray-100);
+ font-weight: 400;
+ font-size: 1.6rem;
+ color: var(--gray-800);
+ font-family: Noto Sans KR;
+
+ &::placeholder {
+ color: var(--gray-400);
+ }
+`;
+
+export default function ProductAddInt({ value, onChange }) {
+ return (
+
+ 상품 소개
+ onChange(e.target.value)}
+ />
+
+ );
+}
diff --git a/vite-project/src/pages/AddItemPage/ProductAddName.jsx b/vite-project/src/pages/AddItemPage/ProductAddName.jsx
new file mode 100644
index 00000000..0c00456b
--- /dev/null
+++ b/vite-project/src/pages/AddItemPage/ProductAddName.jsx
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+
+const ProductAddNameDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+`;
+
+const ProductAddNameTitle = styled.h1`
+ font-weight: 700;
+ font-size: 1.8rem;
+ color: var(--gray-800);
+`;
+
+const ProductAddNameInput = styled.input`
+ border-radius: 1.2rem;
+ padding: 1.6rem 2.4rem;
+ height: 5.6rem;
+ background-color: var(--gray-100);
+ border: 0.1rem solid var(--gray-100);
+ font-weight: 400;
+ font-size: 1.6rem;
+ color: var(--gray-800);
+
+ &::placeholder {
+ color: var(--gray-400);
+ }
+`;
+
+export default function ProductAddName({ value, onChange }) {
+ return (
+
+ 상품명
+ onChange(e.target.value)}
+ />
+
+ );
+}
diff --git a/vite-project/src/pages/AddItemPage/ProductAddPrice.jsx b/vite-project/src/pages/AddItemPage/ProductAddPrice.jsx
new file mode 100644
index 00000000..7a36d3a7
--- /dev/null
+++ b/vite-project/src/pages/AddItemPage/ProductAddPrice.jsx
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+
+const ProductAddPriceDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+`;
+
+const ProductAddPriceTitle = styled.h1`
+ font-weight: 700;
+ font-size: 1.8rem;
+ color: var(--gray-800);
+`;
+
+const ProductAddPriceInput = styled.input`
+ border-radius: 1.2rem;
+ padding: 1.6rem 2.4rem;
+ height: 5.6rem;
+ background-color: var(--gray-100);
+ border: 0.1rem solid var(--gray-100);
+ font-weight: 400;
+ font-size: 1.6rem;
+ color: var(--gray-800);
+
+ &::placeholder {
+ color: var(--gray-400);
+ }
+`;
+
+export default function ProductAddPrice({ value, onChange }) {
+ return (
+
+ 판매가격
+ onChange(e.target.value)}
+ />
+
+ );
+}
diff --git a/vite-project/src/pages/AddItemPage/ProductAddTag.jsx b/vite-project/src/pages/AddItemPage/ProductAddTag.jsx
new file mode 100644
index 00000000..99114bde
--- /dev/null
+++ b/vite-project/src/pages/AddItemPage/ProductAddTag.jsx
@@ -0,0 +1,100 @@
+import { useState } from "react";
+import styled from "styled-components";
+import xIcon from "../../assets/ic-x.svg";
+
+const ProductAddTagDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+`;
+
+const ProductAddTagTitle = styled.h1`
+ font-weight: 700;
+ font-size: 1.8rem;
+ color: var(--gray-800);
+`;
+
+const ProductAddTagInput = styled.input`
+ border-radius: 1.2rem;
+ padding: 1.6rem 2.4rem;
+ height: 5.6rem;
+ background-color: var(--gray-100);
+ border: 0.1rem solid var(--gray-100);
+ font-weight: 400;
+ font-size: 1.6rem;
+ color: var(--gray-800);
+
+ &::placeholder {
+ color: var(--gray-400);
+ }
+`;
+
+const TagList = styled.div`
+ display: flex;
+ gap: 1.2rem;
+`;
+
+const TagSpan = styled.span`
+ border-radius: 2.6rem;
+ border: 0.1rem solid var(--gray-100);
+ background-color: var(--gray-100);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: auto;
+ height: 3.6rem;
+ font-weight: 400;
+ font-size: 1.6rem;
+ color: var(--gray-800);
+ padding: 0.6rem 1.2rem;
+ gap: 1rem;
+ img {
+ cursor: pointer;
+ }
+`;
+
+export default function ProductAddTag({ onTagsChange }) {
+ const [input, setInput] = useState("");
+ const [tags, setTags] = useState([]);
+
+ const handleKeyDown = (e) => {
+ if (e.key === "Enter" && input.trim()) {
+ e.preventDefault();
+ const newTags = [...tags, input.trim()];
+ setTags(newTags);
+ onTagsChange(newTags);
+ setInput("");
+ }
+ };
+
+ const handleDeleteClick = (deletespan) => {
+ const newTags = tags.filter((_, id) => id !== deletespan);
+ setTags(newTags);
+ onTagsChange(newTags);
+ };
+
+ return (
+
+ 태그
+ setInput(e.target.value)}
+ placeholder="태그를 입력해주세요"
+ onKeyDown={handleKeyDown}
+ />
+
+ {tags.map((tag, id) => (
+
+ #{tag}
+ handleDeleteClick(id)}
+ />
+
+ ))}
+
+
+ );
+}
diff --git a/vite-project/src/pages/AddItemPage/ProducutAddHeader.jsx b/vite-project/src/pages/AddItemPage/ProducutAddHeader.jsx
new file mode 100644
index 00000000..a07b9068
--- /dev/null
+++ b/vite-project/src/pages/AddItemPage/ProducutAddHeader.jsx
@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+const ProductAddHeaderDiv = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+`;
+
+const ProductAddHeaderTitle = styled.h1`
+ font-weight: 700;
+ font-size: 2rem;
+ color: var(--gray-800);
+`;
+
+const ProductAddHeaderButton = styled.button`
+ font-weight: 600;
+ font-size: 1.6rem;
+ color: var(--gray-100);
+ background-color: ${({ disabled }) =>
+ disabled ? "var(--gray-400)" : "var(--blue)"};
+ border-radius: 0.8rem;
+ width: 7.4rem;
+ height: 4.2rem;
+ border: 0.1rem solid var(--gray-400);
+ cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+`;
+
+export default function ProductAddHeader({ isFormValid }) {
+ return (
+
+ 상품 등록하기
+
+ 등록
+
+
+ );
+}
diff --git a/vite-project/src/components/BestProducts.jsx b/vite-project/src/pages/ItemsPage/BestProducts.jsx
similarity index 77%
rename from vite-project/src/components/BestProducts.jsx
rename to vite-project/src/pages/ItemsPage/BestProducts.jsx
index dc02cdf0..19733703 100644
--- a/vite-project/src/components/BestProducts.jsx
+++ b/vite-project/src/pages/ItemsPage/BestProducts.jsx
@@ -1,4 +1,4 @@
-import likeIcon from "../assets/ic-heart.svg";
+import likeIcon from "../../assets/ic-heart.svg";
function BestProducts({ bestProducts }) {
return (
@@ -15,13 +15,15 @@ function BestProducts({ bestProducts }) {
alt={product.name}
/>
))}
+
+
+ );
+}
diff --git a/vite-project/src/components/reset.css b/vite-project/src/components/reset.css
index 3a8bf972..ea8c85ef 100644
--- a/vite-project/src/components/reset.css
+++ b/vite-project/src/components/reset.css
@@ -4,50 +4,148 @@
*/
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
}
body {
- line-height: 1;
+ line-height: 1;
}
-ol, ul {
- list-style: none;
+ol,
+ul {
+ list-style: none;
}
-blockquote, q {
- quotes: none;
+blockquote,
+q {
+ quotes: none;
}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: "";
+ content: none;
}
table {
- border-collapse: collapse;
- border-spacing: 0;
-}
\ No newline at end of file
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+:root {
+ --gray-900: #111827;
+ --gray-800: #1f2937;
+ --gray-700: #374151;
+ --gray-600: #4b5563;
+ --gray-500: #6b7280;
+ --gray-400: #9ca3af;
+ --gray-200: #e5e7eb;
+ --gray-100: #f3f4f6;
+ --gray-50: #f9fafb;
+
+ --blue: #3692ff;
+}
+
+html {
+ font-size: 62.5%;
+}
diff --git a/vite-project/src/components/variable.css b/vite-project/src/components/variable.css
deleted file mode 100644
index 20d88549..00000000
--- a/vite-project/src/components/variable.css
+++ /dev/null
@@ -1,13 +0,0 @@
-:root {
- --gray-900: #111827;
- --gray-800: #1F2937;
- --gray-700: #374151;
- --gray-600: #4B5563;
- --gray-500: #6B7280;
- --gray-400: #9CA3AF;
- --gray-200: #E5E7EB;
- --gray-100: #F3F4F6;
- --gray-50: #F9FAFB;
-
- --blue: #3692FF;
-}
\ No newline at end of file
diff --git a/vite-project/src/pages/AddItemPage/AddItemPage.jsx b/vite-project/src/pages/AddItemPage/AddItemPage.jsx
new file mode 100644
index 00000000..1789a183
--- /dev/null
+++ b/vite-project/src/pages/AddItemPage/AddItemPage.jsx
@@ -0,0 +1,75 @@
+import "../../components/reset.css";
+import Styled from "styled-components";
+import ProductAddHeader from "./ProducutAddHeader";
+import ProductAddImg from "./ProductAddImg.jsx";
+import ProductAddName from "./ProductAddName.jsx";
+import ProductAddInt from "./ProductAddInt.jsx";
+import ProductAddPrice from "./ProductAddPrice.jsx";
+import ProductAddTag from "./ProductAddTag.jsx";
+import { useState } from "react";
+
+const FormContainer = Styled.form`
+ display: flex;
+ flex-direction: column;
+ margin: 3rem auto;
+ width: 120.6rem;
+ gap: 2.4rem;
+
+ @media (max-width: 1199px) {
+ width: 69.6rem;
+ }
+
+ @media (max-width: 767px) {
+ width: 34.6rem;
+ }
+ `;
+
+function AddItemPage() {
+ const [formValues, setFormValues] = useState({
+ name: "",
+ description: "",
+ price: "",
+ tags: [],
+ });
+
+ const handleChange = (field, value) => {
+ setFormValues((prev) => ({ ...prev, [field]: value }));
+ };
+
+ const isFormValid =
+ formValues.name.trim() !== "" &&
+ formValues.description.trim() !== "" &&
+ formValues.price.trim() !== "" &&
+ formValues.tags.length > 0;
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (!isFormValid) return;
+
+ console.log("등록 데이터:", formValues); //submit 확인용
+ };
+
+ return (
+ <>
+ setIsOpen(!isOpen)}>
+ 
+
+
+ {isOpen && (
+ -
+ {options.map((option) => (
+
- handleSelect(option)}> + {option.label} + + ))} +
+ *이미지 등록은 최대 1개까지 가능합니다. +
+ )} +{product.name}
-{product.price.toLocaleString()}원
-+ + {product.price.toLocaleString()}원 + + {product.favoriteCount} -
+