[이태식] sprint6

src/App.jsx

@@ -3,13 +3,15 @@ import "./App.css";
 import HomePage from "./pages/HomePage";
 import ItemsPage from "./pages/ItemsPage";
 import Layout from "./layout/Layout";
+import AddItemPage from "./pages/AddItemPage";
 
 function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route index element={<HomePage />} />
         <Route path="items" element={<ItemsPage />} />
+        <Route path="additem" element={<AddItemPage />} />
       </Route>
     </Routes>
   );

src/components/Button.jsx

@@ -1,8 +1,12 @@
-const Button = ({ children, className, onClick }) => {
+const Button = ({ children, className, onClick, isDisable }) => {
+  const status = isDisable
+    ? "bg-secondary-400 cursor-not-allowed"
+    : "bg-primary-100 hover:bg-primary-200 active:bg-primary-300 cursor-pointer";
   return (
     <button
-      className={`bg-primary-100 hover:bg-primary-200 active:bg-primary-300 text-secondary-100 cursor-pointer rounded-[8px] px-23 py-8 text-lg font-semibold ${className}`}
+      className={`text-secondary-100 rounded-[8px] px-23 py-8 text-lg font-semibold ${status} ${className}`}
       onClick={onClick}
+      disabled={isDisable}
     >
       {children}
     </button>

src/components/Input.jsx

@@ -0,0 +1,11 @@
+const Input = ({ placeholder, className, value, onChange }) => {
+  return (
+    <input
+      value={value}
+      placeholder={placeholder}
+      className={`font-regular focus:outline-primary-100 text-secondary-800 placeholder:text-secondary-400 bg-secondary-100 rounded-[12px] px-24 py-15 text-lg ${className}`}
+      onChange={onChange}
+    />
+  );
+};
+export default Input;

src/components/Pagination.jsx

@@ -1,8 +1,8 @@
 import PaginationButton from "./PaginationButton";
-import arrowLeftActive from "../assets/icons/icon-arrow-left-active.png";
-import arrowLeftInactive from "../assets/icons/icon-arrow-left-inactive.png";
-import arrowRightActive from "../assets/icons/icon-arrow-right-active.png";
-import arrowRightInactive from "../assets/icons/icon-arrow-right-inactive.png";
+import ArrowLeftActive from "../assets/icons/icon-arrow-left-active.png";
+import ArrowLeftInactive from "../assets/icons/icon-arrow-left-inactive.png";
+import ArrowRightActive from "../assets/icons/icon-arrow-right-active.png";
+import ArrowRightInactive from "../assets/icons/icon-arrow-right-inactive.png";
 
 const displayConfig = {
   mobile: { itemCount: 4 },
@@ -27,7 +27,7 @@ const Pagination = ({ page: currentPage, setPage, totalCount, display }) => {
           isActive={currentPage > 5}
         >
           <img
-            src={currentPage <= 5 ? arrowLeftInactive : arrowLeftActive}
+            src={currentPage <= 5 ? ArrowLeftInactive : ArrowLeftActive}
             alt="왼쪽 화살표"
             className="size-16"
           />
@@ -50,7 +50,7 @@ const Pagination = ({ page: currentPage, setPage, totalCount, display }) => {
           isActive={lastIndex !== lastPage}
         >
           <img
-            src={lastIndex === lastPage ? arrowRightInactive : arrowRightActive}
+            src={lastIndex === lastPage ? ArrowRightInactive : ArrowRightActive}
             alt="오른쪽 화살표"
             className="size-16"
           />

src/components/Search.jsx

@@ -1,8 +1,10 @@
+import Input from "./Input";
+
 const Search = ({ className }) => {
   return (
-    <input
+    <Input
       placeholder="검색할 상품을 입력해주세요"
-      className={`font-regular bg-secondary-100 rounded-[12px] bg-[url(./assets/icons/icon-search.png)] bg-size-[24px_24px] bg-position-[16px] bg-no-repeat py-9 pr-20 pl-44 text-lg ${className}`}
+      className={`h-42 bg-[url(./assets/icons/icon-search.png)] bg-size-[24px_24px] bg-position-[16px] bg-no-repeat pl-44 ${className}`}
     />
   );
 };

src/components/Tag.jsx

@@ -0,0 +1,13 @@
+import XIcon from "../assets/icons/icon-X.png";
+
+const Tag = ({ children, onDelete }) => {
+  return (
+    <div className="bg-secondary-100 text-secondary-800 font-regular flex items-center justify-between gap-8 rounded-[26px] py-5 pr-12 pl-16 text-lg">
+      {children}
+      <button onClick={() => onDelete(children)} className="cursor-pointer">
+        <img src={XIcon} alt="x아이콘" className="size-20" />
+      </button>
+    </div>
+  );
+};
+export default Tag;

src/components/TagInput.jsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import Input from "./Input";
+import Tag from "./Tag";
+
+const TagInput = ({ value, onChange }) => {
+  const [tagList, setTagList] = useState(["#티셔츠", "#상의"]);
+  const onDelete = (deleteTag) => {
+    setTagList(tagList.filter((tag) => tag !== deleteTag));
+  };
+  return (
+    <>
+      <Input
+        value={value}
+        placeholder="태그를 입력해주세요"
+        onChange={onChange}
+      />
+      <ul className="flex flex-wrap gap-12">
+        {tagList.map((tag) => {
+          return (
+            <li key={tag}>
+              <Tag onDelete={onDelete}>{tag}</Tag>
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+};
+export default TagInput;

src/components/TextArea.jsx

@@ -0,0 +1,11 @@
+const TextArea = ({ placeholder, className, value, onChange }) => {
+  return (
+    <textarea
+      value={value}
+      placeholder={placeholder}
+      className={`font-regular focus:outline-primary-100 text-secondary-800 placeholder:text-secondary-400 bg-secondary-100 resize-none rounded-[12px] px-24 py-15 text-lg ${className}`}
+      onChange={onChange}
+    />
+  );
+};
+export default TextArea;

src/components/UploadImage.jsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import PlusIcon from "../assets/icons/icon-plus.png";
+import XIcon from "../assets/icons/icon-X.png";
+
+const UploadImage = () => {
+  const [preview, setPreview] = useState(null);
+  const [isError, setIsError] = useState(false);
+  const uploadImage = (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    const imageUrl = URL.createObjectURL(file);
+    setPreview(imageUrl);
+  };
+  const showError = () => {
+    if (preview) setIsError(true);
+  };
+  const onDelete = () => {
+    setPreview(null);
+    setIsError(false);
+  };
+  return (
+    <>
+      <div className="pc:gap-24 flex gap-10">
+        <label
+          className="bg-secondary-100 pc:size-282 font-regular text-secondary-400 flex size-168 cursor-pointer flex-col items-center justify-center gap-12 rounded-[12px] text-lg"
+          onClick={showError}
+        >
+          <img src={PlusIcon} alt="더하기" className="size-48" />
+          이미지 등록
+          {!preview && (
+            <input type="file" className="hidden" onChange={uploadImage} />
+          )}
+        </label>
+        {preview && (
+          <div className="relative">
+            <img
+              src={preview}
+              alt="미리보기"
+              className="pc:size-282 size-168 rounded-[12px] object-cover"
+            />
+            <button
+              className="absolute top-12 right-12 size-24 cursor-pointer"
+              onClick={onDelete}
+            >
+              <img src={XIcon} alt="x버튼" />
+            </button>
+          </div>
+        )}
+      </div>
+      {isError && (
+        <p className="text-error-red font-regular font-lg">
+          *이미지 등록은 최대 1개까지 가능합니다.
+        </p>
+      )}
+    </>
+  );
+};
+export default UploadImage;

src/components/header/Navbar.jsx

@@ -1,6 +1,8 @@
-import { NavLink } from "react-router";
+import { NavLink, useLocation } from "react-router";
 
 const Navbar = () => {
+  const location = useLocation();
+  console.log(location);
   return (
     <ul className="tablet:text-2lg tablet:gap-30 text-secondary-600 flex grow gap-8 text-lg font-bold">
       <li>
@@ -9,7 +11,11 @@ const Navbar = () => {
       <li>
         <NavLink
           to="/items"
-          className={({ isActive }) => (isActive ? "text-primary-100" : "")}
+          className={({ isActive }) =>
+            isActive || location.pathname === "/additem"
+              ? "text-primary-100"
+              : ""
+          }
         >
           중고마켓
         </NavLink>

src/pages/AddItemPage.jsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+import Button from "../components/Button";
+import Input from "../components/Input";
+import TagInput from "../components/TagInput";
+import TextArea from "../components/TextArea";
+import UploadImage from "../components/UploadImage";
+
+const AddItemPage = () => {
+  const [isDisable, setIsDisable] = useState(true);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState("");
+  const [tag, setTag] = useState("");
+  useEffect(() => {
+    if (name && description && price && tag) setIsDisable(false);
+    else setIsDisable(true);
+  }, [name, description, price, tag]);
+
+  return (
+    <div className="tablet:pt-16 tablet:pb-78 tablet:px-24 text-secondary-800 mx-auto flex max-w-1200 flex-col gap-24 px-15 pt-24 pb-70 font-bold">
+      <div className="flex justify-between">
+        <h1 className="text-xl">상품 등록하기</h1>
+        <Button isDisable={isDisable}>등록</Button>
+      </div>
+      <div className="flex flex-col gap-16">
+        <h2 className="text-2lg">상품 이미지</h2>
+        <UploadImage />
+      </div>
+      <div className="flex flex-col gap-16">
+        <h2 className="text-2lg">상품명</h2>
+        <Input
+          value={name}
+          placeholder="상품명을 입력해주세요"
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-16">
+        <h2 className="text-2lg">상품 소개</h2>
+        <TextArea
+          value={description}
+          placeholder="상품 소개를 입력해주세요"
+          className="h-282"
+          onChange={(e) => setDescription(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-16">
+        <h2 className="text-2lg">판매가격</h2>
+        <Input
+          value={price}
+          placeholder="판매 가격을 입력해주세요"
+          onChange={(e) => setPrice(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-16">
+        <h2 className="text-2lg">태그</h2>
+        <TagInput value={tag} onChange={(e) => setTag(e.target.value)} />
+      </div>
+    </div>
+  );
+};
+export default AddItemPage;