feat: 유어메거진

g-magazine-hackaton · Dec 5, 2023 · a0e968d · a0e968d
1 parent 4250c67
commit a0e968d
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 73 deletions.
diff --git a/src/components/ui/my-page/scrap-sheet.tsx b/src/components/ui/my-page/scrap-sheet.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, SyntheticEvent } from 'react';
+import React, { useEffect } from 'react';
 import Sheet from 'react-modal-sheet';
 import styled from '@emotion/styled';
 import Paper from '@mui/material/Paper';
@@ -125,7 +125,7 @@ const ScrapSheet: React.FC<ScrapSheetProps> = ({ isOpen, setOpen }) => {
     <Sheet
       isOpen={isOpen}
       onClose={() => setOpen(false)}
-      snapPoints={[600, 400, 100, 0]}
+      snapPoints={[500, 500, 500, 0]}
     >
       <Sheet.Container>
         <Sheet.Header />

diff --git a/src/pages/your-page.tsx b/src/pages/your-page.tsx
@@ -1,24 +1,14 @@
 /** @jsxImportSource @emotion/react */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useLayoutEffect } from 'react';
+import { useAtom } from 'jotai';
 import styled from '@emotion/styled';
-import Lottie from 'react-lottie';
-import InfiniteScroll from 'react-infinite-scroll-component';
-import YourPageProfileComponent from '@/components/ui/your-page/profile';
-import { YourMagazineListMockData } from '@/temp/your-magazine';
-import loadingAnimation from '@/assets/loading.json';
 
-const defaultOptions = {
-  loop: true,
-  autoplay: true,
-  animationData: loadingAnimation,
-  rendererSettings: {
-    preserveAspectRatio: 'xMidYMid slice',
-  },
-};
+import YourPageProfileComponent from '@/components/ui/your-page/profile';
+import { IMAGE_URL } from '@/apis/urls';
 
-const LottieWrapper = styled.div`
-  margin: 12px 0;
-`;
+import { FolderAtom } from '@/store/folder';
+import { fetch } from '@/apis/api';
+import { YourMagazineAtom } from '@/store/your-magazine';
 
 const TabContainer = styled.div`
   display: flex;
@@ -75,75 +65,73 @@ const GridItem = styled.div`
   }
 `;
 
-interface Magazine {
-  category: string;
-  image: string;
-}
-
 const YourPage: React.FC = () => {
-  const [tabIdx, setTabIdx] = useState<number>(0);
-  const [items, setItems] = useState<Magazine[]>([]);
-  const [hasMore, setHasMore] = useState<boolean>(true);
-
-  useEffect(() => {
-    setItems(YourMagazineListMockData.slice(0, 21));
-  }, []);
+  const [tabIdx, setTabIdx] = useState<string>('1');
+  const [myFolder, setMyFolder] = useAtom(FolderAtom);
+  const [yourMagazine, setYourMagazine] = useAtom(YourMagazineAtom);
 
-  const tabs = [
-    '전체',
-    '메종키츠네',
-    '웨스트비비안우드',
-    '구찌',
-    '디올',
-    '까르띠에',
-  ];
+  const fetchGetYourMagazine = async () => {
+    try {
+      const {
+        data: { data, success, message },
+      } = await fetch.get(`/api/api/magazine/all?consumerId=consumer1`);
+      if (success) {
+        setYourMagazine(data.magazines);
+      } else {
+        console.log(message);
+      }
+    } catch (error) {
+      console.error('Error', error);
+    }
+  };
 
-  const fetchMoreData = () => {
-    if (items.length >= YourMagazineListMockData.length) {
-      setHasMore(false);
-      return;
+  const fetchGetYourFolder = async () => {
+    try {
+      const {
+        data: { data, success, message },
+      } = await fetch.get(`/api/api/magazine/folders?consumerId=consumer2`);
+      if (success) {
+        setMyFolder(data.folders);
+      } else {
+        console.log(message);
+      }
+    } catch (error) {
+      console.error('Error', error);
     }
-    setTimeout(() => {
-      setItems(
-        items.concat(
-          YourMagazineListMockData.slice(items.length, items.length + 21),
-        ),
-      );
-    }, 300);
   };
 
+  const getMagazinesForFolder = () => {
+    return yourMagazine.filter((magazine) => magazine.folderId === tabIdx);
+  };
+
+  useLayoutEffect(() => {
+    fetchGetYourMagazine();
+    fetchGetYourFolder();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       <YourPageProfileComponent />
       <TabContainer>
-        {tabs.map((tab, index) => (
+        {myFolder.map((tab, index) => (
           <TabStyle
-            key={tab}
-            onClick={() => setTabIdx(index)}
-            active={index === tabIdx}
+            key={tab.id}
+            onClick={() => setTabIdx(tab.folderId)}
+            active={index + 1 === Number(tabIdx)}
           >
-            {tab}
+            {tab.folderName}
           </TabStyle>
         ))}
       </TabContainer>
-      <InfiniteScroll
-        dataLength={items.length}
-        next={fetchMoreData}
-        hasMore={hasMore}
-        loader={
-          <LottieWrapper>
-            <Lottie options={defaultOptions} height={36} width={72} />
-          </LottieWrapper>
-        }
-      >
-        <GridContainer>
-          {items.map((item, index) => (
-            <GridItem key={index}>
-              <img src={item.image} alt={item.category} />
-            </GridItem>
-          ))}
-        </GridContainer>
-      </InfiniteScroll>
+
+      <GridContainer>
+        {getMagazinesForFolder().map((item, index) => (
+          <GridItem key={index}>
+            <img src={IMAGE_URL + item.photoUrls[0]} alt={item.category} />
+          </GridItem>
+        ))}
+      </GridContainer>
     </>
   );
 };

diff --git a/src/store/your-magazine.ts b/src/store/your-magazine.ts
@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { atom } from 'jotai';
+
+export const YourMagazineAtom = atom<any>([]);