Merge pull request #41 from TWC-codeit/Fix/Scraplist

[Fix] scraplist grid / bookmark icon fill 속성 변경

Author: da2mon

src/assets/icons/bookmark.svg

@@ -4,7 +4,6 @@ import { getCookie } from "../api/Cookie.js";
 
 const PrivateRoute = ({ element }) => {
   const token = getCookie("access_token");
-  
 
   return token ? element : <Navigate to="/login" />;
 };

src/components/PrivateRoute.jsx

@@ -17,7 +17,6 @@ const formatDateHeading = (isoDate) => {
 
 const ScrapList = () => {
   const [groupedScraps, setGroupedScraps] = useState({});
-  const [columns, setColumns] = useState(5);
   const [isLogin, setIsLogin] = useState(true);
   const [isLoading, setIsLoading] = useState(true);
   const [accessToken, setAccessToken] = useState("");
@@ -26,11 +25,11 @@ const ScrapList = () => {
     try {
       const response = await axios.get(`${apiUrl}/scraps`, {
         headers: {
-          Authorization: `Bearer ${accessToken}`, // 인증 헤더 추가
+          Authorization: `Bearer ${accessToken}`,
         },
       });
 
-      const scraps = response.data.scraps; // scraps 배열 추출
+      const scraps = response.data.scraps;
 
       // 날짜별 그룹화
       if (Array.isArray(scraps)) {
@@ -52,28 +51,6 @@ const ScrapList = () => {
       setIsLoading(false);
     }
   };
-  // 열 개수 업데이트 함수
-  const updateColumns = () => {
-    if (window.innerWidth >= 1200) setColumns(5);
-    else if (window.innerWidth >= 1000) setColumns(4);
-    else if (window.innerWidth >= 800) setColumns(3);
-    else if (window.innerWidth >= 600) setColumns(2);
-    else setColumns(1);
-  };
-
-  // 빈 카드 채우기 함수 (열 개수에 맞춰 동적으로)
-  const fillEmptyCards = (cards) => {
-    const remainder = cards.length % columns;
-    if (remainder === 0) return cards;
-    const emptyCardsCount = columns - remainder;
-    return [
-      ...cards,
-      ...Array(emptyCardsCount).fill({
-        id: `empty-${cards.length}`,
-        isEmpty: true,
-      }),
-    ];
-  };
 
   useEffect(() => {
     const accessToken = getCookie("access_token");
@@ -84,12 +61,8 @@ const ScrapList = () => {
     }
     setAccessToken(accessToken);
     fetchScraps(accessToken);
-    updateColumns();
-    window.addEventListener("resize", updateColumns);
-    return () => window.removeEventListener("resize", updateColumns);
   }, []);
 
-  /* 비로그인 시 비로그인 모달 리턴으로 변경 필요*/
   if (!isLogin) {
     return <S.Message>로그인되지 않은 사용자</S.Message>;
   }
@@ -106,13 +79,12 @@ const ScrapList = () => {
       {Object.entries(groupedScraps).map(([date, scraps]) => (
         <S.Section key={date}>
           <S.DateHeading>{formatDateHeading(date)}</S.DateHeading>
-          <S.Grid columns={columns}>
-            {fillEmptyCards(scraps).map((scrap) => {
+          <S.Grid>
+            {scraps.map((scrap) => {
               return (
                 <ScrapListItem
-                  key={scrap.id}
+                  key={scrap.scrapId}
                   scrap={scrap}
-                  isEmpty={scrap.isEmpty}
                   accessToken={accessToken}
                 />
               );

src/pages/ScrapList.jsx

@@ -31,7 +31,27 @@ export const DateHeading = styled.div`
 
 export const Grid = styled.div`
   display: grid;
-  grid-template-columns: repeat(${(props) => props.columns}, 1fr);
+
+  @media (min-width: 0px) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  @media (min-width: 600px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: 800px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media (min-width: 1000px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @media (min-width: 1200px) {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
   gap: 20px;
   max-width: 100%; /* 최대 너비를 설정하여 웹 페이지에서 중앙에 배치 */
   margin: 0 auto; /* 가운데 정렬 */