[김희진] sprint 6

src/components/FileInput/FileInput.jsx

@@ -0,0 +1,62 @@
+import * as S from "./FileInput.styles";
+import x from "../../assets/icons/delete.svg";
+import plus from "../../assets/icons/plus.svg";
+import { useState, useRef } from "react";
+
+export default function FileInput({ lable, images, setValues }) {
+  const [preview, setPreview] = useState(null);
+  const inputRef = useRef();
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+
+    if (file) {
+      setValues((prevState) => ({
+        ...prevState,
+        images: file,
+      }));
+
+      const fileUrl = URL.createObjectURL(file);
+      setPreview(fileUrl);
+    }
+  };
+
+  const handleImageDelete = () => {
+    if (!inputRef.current) return;
+    inputRef.current.value = "";
+    setValues((prevState) => ({
+      ...prevState,
+      images: null,
+    }));
+    setPreview(null);
+  };
+
+  return (
+    <>
+      <S.FileContainer>
+        <S.Label>{lable}</S.Label>
+        <S.File htmlFor="images">
+          <S.Div>
+            <S.PlusIcon src={plus} />
+            <S.AddImg>이미지 등록</S.AddImg>
+          </S.Div>
+        </S.File>
+        <input
+          id="images"
+          name="images"
+          type="file"
+          accept="image/jpeg, image/png"
+          style={{ display: "none" }}
+          onChange={handleImageChange}
+          ref={inputRef}
+        />
+      </S.FileContainer>
+      {images && (
+        <S.Preview>
+          <S.PreviewImg src={preview} />
+          <S.DeleteImg src={x} onClick={handleImageDelete} />
+        </S.Preview>
+      )}
+    </>
+  );
+}

src/components/FileInput/FileInput.styles.jsx

@@ -0,0 +1,76 @@
+import { styled } from "styled-components";
+
+export const FileContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+export const Label = styled.div`
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  color: var(--gray800);
+`;
+
+export const File = styled.label`
+  width: 282px;
+  height: 282px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--gray100);
+  border-radius: 12px;
+  cursor: pointer;
+
+  @media (max-width: 1199px) {
+    width: 168px;
+    height: 168px;
+  }
+`;
+
+export const Div = styled.div`
+  width: 74px;
+  height: 86px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const PlusIcon = styled.img`
+  width: 48px;
+  height: 48px;
+`;
+
+export const AddImg = styled.div`
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--gray400);
+`;
+
+export const Preview = styled.div`
+  display: flex;
+  position: relative;
+`;
+
+export const PreviewImg = styled.img`
+  width: 282px;
+  height: 282px;
+  border-radius: 12px;
+
+  @media (max-width: 1199px) {
+    width: 168px;
+    height: 168px;
+  }
+`;
+
+export const DeleteImg = styled.img`
+  width: 22px;
+  height: 24px;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;:
+`;

src/components/Items/AllItems/AllItems.jsx

@@ -1,39 +1,92 @@
 import * as S from "./AllItems.styles";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import ItemCard from "../ItemCard/ItemCard";
 import Dropdown from "../../common/Dropdown/Dropdown";
-import { Link } from "react-router-dom";
 import Search from "../../Search/Search";
 import NoneItem from "../../NoneItem/NoneItem";
+import { getProducts } from "../../../api/products";
+import Paging from "../../Paging/Paging";
+
+const LIST = ["최신순", "좋아요순"];
+
+export default function AllItems() {
+  const [items, setItems] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [sortOption, setSortOption] = useState("최신순");
+  const [keyword, setKeyword] = useState("");
+  const [totalItems, setTotalItems] = useState(0);
+
+  const orderByValue = sortOption === "최신순" ? "recent" : "favorite";
+
+  const updateItems = () => {
+    if (window.innerWidth <= 767) {
+      setPageSize(4);
+    } else if (window.innerWidth >= 768 && window.innerWidth <= 1199) {
+      setPageSize(6);
+    } else {
+      setPageSize(10);
+    }
+  };
+
+  useEffect(() => {
+    getProducts({
+      page: currentPage,
+      pageSize: pageSize,
+      orderBy: orderByValue,
+      keyword: keyword,
+    }).then((result) => {
+      if (!result) return;
+      setItems(result.list);
+      setTotalItems(result.totalCount);
+    });
+  }, [currentPage, pageSize, orderByValue, keyword]);
+
+  useEffect(() => {
+    updateItems();
+    window.addEventListener("resize", updateItems);
+
+    return () => {
+      window.removeEventListener("resize", updateItems);
+    };
+  }, []);
 
-const list = ["최신순", "좋아요순"];
+  const handleChangeClick = (sortOption) => {
+    setSortOption(sortOption);
+  };
 
-export default function AllItems({ items, sortOption, onChange, setKeyword }) {
   return (
-    <S.AllContainer>
-      <S.AllHeader>
-        <S.Div>
-          <S.Title>전체 상품</S.Title>
-          <Link to="/addItem">
-            <S.AddBtnForMedia>상품 등록하기</S.AddBtnForMedia>
-          </Link>
-        </S.Div>
-        <S.Filter>
-          <Search onSearch={setKeyword} />
-          <Link to="/addItem">
-            <S.AddBtn>상품 등록하기</S.AddBtn>
-          </Link>
-          <Dropdown sortOption={sortOption} list={list} onChange={onChange} />
-        </S.Filter>
-      </S.AllHeader>
-      {items.length !== 0 ? (
-        <S.ItemCardContainer>
-          {items.map((items, idx) => (
-            <ItemCard key={idx} list="all" {...items} />
-          ))}
-        </S.ItemCardContainer>
-      ) : (
-        <NoneItem />
+    <S.AllItems>
+      <S.AllContainer>
+        <S.AllHeader>
+          <S.Div>
+            <S.Title>전체 상품</S.Title>
+            <Link to="/addItem">
+              <S.AddBtnForMedia>상품 등록하기</S.AddBtnForMedia>
+            </Link>
+          </S.Div>
+          <S.Filter>
+            <Search onSearch={setKeyword} />
+            <Link to="/addItem">
+              <S.AddBtn>상품 등록하기</S.AddBtn>
+            </Link>
+            <Dropdown sortOption={sortOption} list={LIST} onChange={handleChangeClick} />
+          </S.Filter>
+        </S.AllHeader>
+        {items.length !== 0 ? (
+          <S.ItemCardContainer>
+            {items.map((items, idx) => (
+              <ItemCard key={idx} list="all" {...items} />
+            ))}
+          </S.ItemCardContainer>
+        ) : (
+          <NoneItem />
+        )}
+      </S.AllContainer>
+      {items.length !== 0 && (
+        <Paging currentPage={currentPage} pageSize={pageSize} totalItemsCount={totalItems} setPage={setCurrentPage} />
       )}
-    </S.AllContainer>
+    </S.AllItems>
   );
 }

src/components/Items/AllItems/AllItems.styles.jsx

@@ -1,5 +1,11 @@
 import styled from "styled-components";
 
+export const AllItems = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+`;
+
 export const AllContainer = styled.div`
   display: flex;
   flex-direction: column;

src/components/Items/BestItems/BestItems.jsx

@@ -1,8 +1,37 @@
 import * as S from "./BestItems.styles";
+import { useState, useEffect, useCallback } from "react";
 import ItemCard from "../ItemCard/ItemCard";
-import { useEffect } from "react";
+import { getProducts } from "../../../api/products";
+
+export default function BestItems() {
+  const [bestItems, setBestItems] = useState([]);
+  const [showItems, setShowItems] = useState(4);
+
+  useEffect(() => {
+    getProducts({
+      page: 1,
+      pageSize: showItems,
+      orderBy: "favorite",
+      keyword: "",
+    }).then((result) => {
+      if (!result) return;
+      const sortedBestItems = [...result.list].slice(0, 4);
+      setBestItems(sortedBestItems);
+    });
+  }, [showItems]);
+
+  const updateBestItems = useCallback(() => {
+    if (window.innerWidth <= 767) {
+      setShowItems(1);
+    } else if (window.innerWidth >= 768 && window.innerWidth <= 1199) {
+      setShowItems(2);
+    } else {
+      setShowItems(4);
+    }
+  }, []);
+
+  const responsiveItems = bestItems.slice(0, showItems);
 
-export default function BestItems({ bestItems, updateBestItems }) {
   useEffect(() => {
     updateBestItems();
     window.addEventListener("resize", updateBestItems);
@@ -16,7 +45,7 @@ export default function BestItems({ bestItems, updateBestItems }) {
     <S.BestContainer>
       <S.Title>베스트 상품</S.Title>
       <S.ItemCardContainer>
-        {bestItems.map((items, idx) => (
+        {responsiveItems.map((items, idx) => (
           <ItemCard key={idx} list="best" {...items} />
         ))}
       </S.ItemCardContainer>

src/components/Items/ItemCard/ItemCard.jsx

@@ -1,12 +1,18 @@
 import * as S from "./ItemCard.styles";
 import heart from "../../../assets/icons/heart.svg";
 import NoneImage from "../../NoneImage/NoneImage";
+import { useState } from "react";
 
-// images 값이 없으면 NoneImage 컴포넌트가 보이도록 구현했는데 images 배열 안에 값이 있지만 사진이 안 불러와지는 경우에는 어떻게 처리해야 하는지 고민입니다.
 export default function ItemCard({ list = "best", images, name, price, favoriteCount }) {
+  const [isImgError, setIsImgError] = useState(false);
+
   return (
     <S.ItemContainer list={list}>
-      {images[0] ? <S.ItemImg src={images[0]} alt="productImage" list={list} /> : <NoneImage list={list} />}
+      {images[0] && !isImgError ? (
+        <S.ItemImg src={images[0]} alt="productImage" list={list} onError={() => setIsImgError(true)} />
+      ) : (
+        <NoneImage list={list} />
+      )}
       <S.ContentContainer>
         <S.Title>{name}</S.Title>
         <S.Price>{price.toLocaleString()}원</S.Price>

src/components/Paging/Paging.styles.jsx

@@ -3,7 +3,6 @@ import { styled } from "styled-components";
 export const PagingContainer = styled.div`
   width: 100%;
   display: flex;
-  margin-bottom: 40px;
 
   .pagination {
     display: flex;

src/components/Tag/Tag.jsx

@@ -0,0 +1,13 @@
+import * as S from "./Tag.styles";
+import x from "../../assets/icons/delete.svg";
+
+export default function Tag({ tag, onClick }) {
+  return (
+    <S.TagContainer>
+      <S.Tag>
+        <S.TagName>#{tag}</S.TagName>
+        <S.DeleteTag src={x} onClick={onClick} />
+      </S.Tag>
+    </S.TagContainer>
+  );
+}