codeit-bootcamp-frontend · GANGYIKIM · May 12, 2025 · May 3, 2025 · May 6, 2025 · May 6, 2025
diff --git a/index.html b/index.html
@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <meta property="or:url" content="https://p-anda-market.netlify.app/" />
+    <meta property="og:title" content="판다마켓" />
+    <meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <meta property="og:image" content="img/img_preview.png" />
+    <title>판다마켓</title>
+    <link rel="icon" href="/favicon.png" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg
diff --git a/src/assets/icons/x.svg b/src/assets/icons/x.svg
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -1,8 +1,19 @@
-function Button({ children, onClick }) {
+function Button({ children, type, onClick, disabled }) {
+  const buttonStyles = {
+    login: "w-128 h-48 rounded-lg bg-blue100 text-lg text-white font-semibold",
+    shopping:
+      "w-357 h-56 rounded-[40px] bg-blue100 text-2lg tablet:text-xl text-white font-semibold",
+    additem:
+      "py-8 px-24 rounded-lg bg-blue100 text-lg text-white font-semibold",
+    upload:
+      "w-74 h-42 rounded-lg bg-blue100 text-lg text-white font-semibold disabled:bg-gray400 disabled:cursor-not-allowed",
+  };
+
-  const buttonStyles = {
-    login: "w-128 h-48 rounded-lg bg-blue100 text-lg text-white font-semibold",
-    shopping:
-      "w-357 h-56 rounded-[40px] bg-blue100 text-2lg tablet:text-xl text-white font-semibold",
-    additem:
-      "py-8 px-24 rounded-lg bg-blue100 text-lg text-white font-semibold",
-    upload:
-      "w-74 h-42 rounded-lg bg-blue100 text-lg text-white font-semibold disabled:bg-gray400 disabled:cursor-not-allowed",
-  };
+  const buttonStyles = {
+    login: "w-128 h-48 rounded-lg text-lg ",
+    shopping: "w-357 h-56 rounded-[40px] text-2lg tablet:text-xl",
+    additem: "py-8 px-24 rounded-lg text-lg",
+    upload: "w-74 h-42 rounded-lg text-lg",
+  };
+  
+  // 사용시
+  // <button className={`cursor-pointer bg-blue100 text-white font-semibold disabled:bg-gray400 disabled:cursor-not-allowed ${buttonStyles[type]}`}
-  const buttonStyles = {
-    login: "w-128 h-48 rounded-lg bg-blue100 text-lg text-white font-semibold",
-    shopping:
-      "w-357 h-56 rounded-[40px] bg-blue100 text-2lg tablet:text-xl text-white font-semibold",
-    additem:
-      "py-8 px-24 rounded-lg bg-blue100 text-lg text-white font-semibold",
-    upload:
-      "w-74 h-42 rounded-lg bg-blue100 text-lg text-white font-semibold disabled:bg-gray400 disabled:cursor-not-allowed",
-  };
+  const buttonStyles = {
+    login: "w-128 h-48 rounded-lg text-lg ",
+    shopping: "w-357 h-56 rounded-[40px] text-2lg tablet:text-xl",
+    additem: "py-8 px-24 rounded-lg text-lg",
+    upload: "w-74 h-42 rounded-lg text-lg",
+  };
+  
+  // 사용시
+  // <button className={`cursor-pointer bg-blue100 text-white font-semibold disabled:bg-gray400 disabled:cursor-not-allowed ${buttonStyles[type]}`}
   return (
     <button
-      className="py-8 px-24 bg-blue100 text-white text-lg font-semibold rounded-lg cursor-pointer"
+      className={`${buttonStyles[type]} cursor-pointer`}
       onClick={onClick}
+      disabled={disabled}
     >
       {children}
     </button>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -4,6 +4,7 @@ import logoText from "../assets/images/logo_text.svg";
 import profile from "../assets/icons/profile.svg";
 
 function Header() {
+  const active = location.pathname === "/items" || "/additems";
   return (
     <div className="w-full bg-white sticky top-0 border border-[#dfdfdf]">
       <div className="max-w-1520 p-9 flex items-center justify-between m-auto gap-16 tablet:px-24 tablet:gap-24">
@@ -16,9 +17,7 @@ function Header() {
             <span className="cursor-pointer">자유게시판</span>
           </Link>
           <Link to="/items">
-            <span
-              className={`${location.pathname === "/items" ? "text-blue100" : ""} cursor-pointer`}
-            >
+            <span className={`${active ? "text-blue100" : ""} cursor-pointer`}>
               중고마켓
             </span>
           </Link>

diff --git a/src/components/InputField.jsx b/src/components/InputField.jsx
@@ -0,0 +1,31 @@
+function inputField({ type, label, value, onChange, onKeyDown, placeholder }) {
+  if (type === "input") {
+    return (
+      <div className="flex flex-col justify-center gap-16">
+        <div className="text-2lg font-bold">{label}</div>
+        <input
+          className="bg-gray100 .placeholder-text-gray400 text-lg font-regular rounded-xl py-16 px-24"
+          value={value}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          placeholder={placeholder}
+        />
+      </div>
+    );
+  } else if (type === "textarea") {
+    return (
+      <div className="flex flex-col justify-center gap-16">
+        <div className="text-2lg font-bold">{label}</div>
+        <textarea
+          className="h-282 bg-gray100 .placeholder-text-gray400 text-lg font-regular rounded-xl py-16 px-24"
+          value={value}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          placeholder={placeholder}
+        ></textarea>
+      </div>
+    );
+  }
+}
+
+export default inputField;
diff --git a/src/components/ItemControls.jsx b/src/components/ItemControls.jsx
@@ -18,7 +18,9 @@ function ItemControl({ isMobile, options }) {
             <div className="text-xl text-gray900 font-bold flex-1">
               전체상품
             </div>
-            <Button onClick={handleButtonClick}>상품 등록하기</Button>
+            <Button type="additem" onClick={handleButtonClick}>
+              상품 등록하기
+            </Button>
           </div>
           <div className="flex justify-between items-center gap-8 relative">
             <div className="flex justify-between items-center gap-4 flex-1">
@@ -44,7 +46,9 @@ function ItemControl({ isMobile, options }) {
                 placeholder="검색할 상품을 입력해주세요"
               />
             </div>
-            <Button onClick={handleButtonClick}>상품 등록하기</Button>
+            <Button type="additem" onClick={handleButtonClick}>
+              상품 등록하기
+            </Button>
             <Dropdown options={options} isMobile={isMobile} />
           </div>
         </>

diff --git a/src/pages/AddItemPage.jsx b/src/pages/AddItemPage.jsx
@@ -1,5 +1,148 @@
+import { useState, useRef } from "react";
+import Button from "../components/Button";
+import Header from "../components/Header";
+import InputField from "../components/InputField";
+import plus from "../assets/icons/plus.svg";
+import x from "../assets/icons/x.svg";
+
 function AddItemPage() {
-  return <div>hi</div>;
+  const imgRef = useRef(null);
+  const [imgPreview, setImgPreview] = useState("");
+  const [itemName, setItemName] = useState("");
+  const [itemDetail, setItemDetail] = useState("");
+  const [price, setPrice] = useState("");
+  const [tagInput, setTagInput] = useState("");
+  const [tags, setTags] = useState([]);
+  const isFormValid = itemName && itemDetail && price && tags.length > 0;
+
+  const handleUploadImg = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const previewUrl = URL.createObjectURL(file);
+      setImgPreview(previewUrl);
+    }
+  };
+  const handleDeleteImg = () => {
+    setImgPreview("");
+    if (imgRef.current) {
+      imgRef.current.value = null;
+    }
+  };
+
+  const handleEnterTag = (e) => {
+    if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      const newTag = tagInput.trim();
+      if (newTag && !tags.includes(newTag)) {
+        setTags([...tags, newTag]);
+      }
+      setTagInput("");
+    }
+  };
+  const handleDeleteTag = (index) => {
+    const newTags = [...tags];
+    newTags.splice(index, 1);
+    setTags(newTags);
+  };
+
+  return (
+    <div>
+      <Header />
+      <div className="max-w-1200 m-auto flex flex-col gap-24 pt-24 px-15 pb-52">
+        <div className="flex justify-between items-center">
+          <div className="text-xl font-bold">상품 등록하기</div>
+          <Button type="upload" disabled={!isFormValid}>
+            등록
+          </Button>
+        </div>
+        <div className="flex flex-col justify-center gap-16">
+          <div className="text-2lg font-bold">상품 이미지</div>
+          <div className="flex gap-10 pc:gap-24">
+            <label className="flex flex-col justify-center items-center gap-12 size-168 pc:size-282 bg-gray100 text-gray400 text-lg font-regular rounded-xl cursor-pointer">
+              <img className="size-48" src={plus} />
+              이미지 등록
+              <input
+                className="hidden"
+                type="file"
+                onChange={handleUploadImg}
+                ref={imgRef}
+                disabled={imgPreview}
+              />
+            </label>
+            {imgPreview ? (
+              <>
+                <img
+                  className="size-168 pc:size-282 rounded-xl"
+                  src={imgPreview}
+                  alt="미리보기"
+                />
+                <img
+                  className="relative right-40 pc:right-52 top-8 size-22 cursor-pointer"
+                  src={x}
+                  onClick={handleDeleteImg}
+                />
+              </>
+            ) : (
+              ""
+            )}
+          </div>
+          {imgPreview ? (
+            <div className="text-red text-lg font-regular">
+              *이미지 등록은 최대 1개까지 가능합니다.
+            </div>
+          ) : (
+            ""
+          )}
+        </div>
+        <InputField
+          type="input"
+          label="상품명"
+          value={itemName}
+          onChange={(e) => setItemName(e.target.value)}
+          placeholder="상품명을 입력해주세요"
+        />
+        <InputField
+          type="textarea"
+          label="상품소개"
+          value={itemDetail}
+          onChange={(e) => setItemDetail(e.target.value)}
+          placeholder="상품 소개를 입력해주세요"
+        />
+        <InputField
+          type="input"
+          label="판매가격"
+          value={price}
+          onChange={(e) => setPrice(e.target.value)}
+          placeholder="판매 가격을 입력해주세요"
+        />
+        <InputField
+          type="input"
+          label="태그"
+          value={tagInput}
+          onChange={(e) => setTagInput(e.target.value)}
+          onKeyDown={handleEnterTag}
+          placeholder="태그를 입력해주세요"
+        />
+        <div className="flex gap-12">
+          {tags.map((tag, index) => {
+            return (
+              <span
+                key={index}
-              <span
-                key={index}
+              <span
+                key={tag}
-              <span
-                key={index}
+              <span
+                key={tag}
+                className="flex items-center gap-8 py-6 pl-16 pr-12 bg-gray100 rounded-[26px]"
+              >
+                #{tag}
+                <img
+                  className="size-22 cursor-pointer"
+                  src={x}
+                  onClick={() => handleDeleteTag(index)}
+                />
-                <img
-                  className="size-22 cursor-pointer"
-                  src={x}
-                  onClick={() => handleDeleteTag(index)}
-                />
+                <button type="button onClick={() => handleDeleteTag(index)}>
+                  <img
+                    className="size-22"
+                    src={x}
+                  />
+                </button>
-                <img
-                  className="size-22 cursor-pointer"
-                  src={x}
-                  onClick={() => handleDeleteTag(index)}
-                />
+                <button type="button onClick={() => handleDeleteTag(index)}>
+                  <img
+                    className="size-22"
+                    src={x}
+                  />
+                </button>
+              </span>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default AddItemPage;
diff --git a/src/pages/ItemsPage.jsx b/src/pages/ItemsPage.jsx
@@ -11,7 +11,7 @@ function ItemsPage() {
   const [sort, setSort] = useState("recent");
   const [totalProducts, setTotalProducts] = useState(1);
   const [bestProducts, setBestProducts] = useState([]);
-  const [best, setBest] = useState(4);
+  const [best, setBest] = useState("");
   const [totalPages, setTotalPages] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(10);
   const [currentPage, setCurrentPage] = useState(1);

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import MainSection from "../components/MainSection";
 import logo from "../assets/images/logo.svg";
 import logoText from "../assets/images/logo_text.svg";
@@ -7,8 +7,15 @@ import bottomImg from "../assets/images/home_bottom.svg";
 import img1 from "../assets/images/home_01.svg";
 import img2 from "../assets/images/home_02.svg";
 import img3 from "../assets/images/home_03.svg";
+import Button from "../components/Button";
 
 function MainPage() {
+  const navigate = useNavigate();
+
+  const handleButtonClick = () => {
+    navigate("/items");
+  };
+
   return (
     <div>
       <div className="w-full bg-white sticky top-0">
@@ -17,7 +24,9 @@ function MainPage() {
             <img className="w-153 hidden tablet:block" src={logo} />
             <img className="w-103 block tablet:hidden" src={logoText} />
           </div>
-          <button>로그인</button>
+          <Button type="login" onClick={handleButtonClick}>
+            로그인
+          </Button>
         </div>
       </div>
       <div className="bg-[#cfe5ff] flex items-end">
@@ -27,9 +36,9 @@ function MainPage() {
               일상의 모든 물건을 <br className="block tablet:hidden pc:block" />
               거래해보세요
             </h2>
-            <Link to="/items">
-              <button>구경하러 가기</button>
-            </Link>
+            <Button type="shopping" onClick={handleButtonClick}>
+              구경하러 가기
+            </Button>
           </div>
           <div>
             <img className="h-172 tablet:h-340" src={topImg} />