Merge pull request #61 from Team-Lecue/stickerPack#58-datafetching

[ StickerPack ] 스티커팩 API 패칭

src/StickerPack/api/getStickerPack.ts

@@ -0,0 +1,12 @@
+import { api } from '../../libs/api';
+
+export async function getStickerPack(bookId: number) {
+  const data = await api.get(`/api/stickers/${bookId}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${import.meta.env.VITE_APP_TOKEN}`,
+    },
+  });
+
+  return data.data.data;
+}

src/StickerPack/components/StickerList/StickerList.style.ts

@@ -2,16 +2,13 @@ import styled from '@emotion/styled';
 
 export const Wrapper = styled.section`
   display: flex;
-  align-items: start;
   flex-direction: column;
-
-  width: 100%;
 `;
 
 export const Title = styled.header`
   margin: 1.4rem 0;
 
-  color: ${({ theme }) => theme.colors.white};
+  color: ${({ theme }) => theme.colors.BG};
 
   ${({ theme }) => theme.fonts.Head2_SB_18};
 `;
@@ -21,21 +18,24 @@ export const StickerGridWrapper = styled.article`
   gap: 2.15rem 1.6rem;
   grid-template-columns: repeat(3, 1fr);
 
-  width: 100%;
+  margin-bottom: 5rem;
 `;
 
-export const ImageComponent = styled.button<{
+export const ImageWrapper = styled.button<{
   isSelected: boolean;
-  url: string;
 }>`
   width: 10rem;
   height: 10rem;
 
   border: solid 0.1rem
     ${({ theme, isSelected }) =>
-      isSelected ? theme.colors.key : theme.colors.BG};
+      isSelected ? theme.colors.key : theme.colors.background};
   border-radius: 0.4rem;
-  background: url(${({ url }) => url};);
-  background-position: center;
-  background-size: 10rem 10rem;
+`;
+
+export const ImageComponent = styled.img`
+  width: 10rem;
+  height: 10rem;
+
+  object-fit: contain;
 `;

src/StickerPack/components/StickerList/index.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
+import { Fragment } from 'react';
 
+import useGetStickerPack from '../../hooks/useGetStickerPack';
+import { stickerPackType } from '../../type/stickerPackType';
 import * as S from './StickerList.style';
 
 interface StickerListProps {
@@ -9,163 +11,34 @@ interface StickerListProps {
 
 function StickerList(props: StickerListProps) {
   const { isSelectedId, handleStickerClick } = props;
+  //TODO 임시 값 수정
+  const { stickerPack } = useGetStickerPack(1);
 
   return (
     <S.Wrapper>
-      {MockSticker.map((data) => (
-        <React.Fragment key={data.stickerCategory}>
-          <S.Title>{data.stickerCategory}</S.Title>
-          <S.StickerGridWrapper>
-            {data.stickerInfoList.map((sticker) => (
-              <S.ImageComponent
-                key={sticker.stickerId}
-                onClick={() => handleStickerClick(sticker.stickerId)}
-                isSelected={sticker.stickerId === isSelectedId}
-                url={sticker.stickerImage}
-              />
-            ))}
-          </S.StickerGridWrapper>
-        </React.Fragment>
-      ))}
+      {stickerPack?.length > 0 &&
+        stickerPack.map((data: stickerPackType) => (
+          <Fragment key={data.stickerCategory}>
+            <S.Title>{data.stickerCategory}</S.Title>
+            <S.StickerGridWrapper>
+              {data.stickerList.map((sticker) => (
+                <S.ImageWrapper
+                  type="button"
+                  key={sticker.stickerId}
+                  onClick={() => handleStickerClick(sticker.stickerId)}
+                  isSelected={sticker.stickerId === isSelectedId}
+                >
+                  <S.ImageComponent
+                    src={sticker.stickerImage}
+                    alt="스티커 이미지"
+                  />
+                </S.ImageWrapper>
+              ))}
+            </S.StickerGridWrapper>
+          </Fragment>
+        ))}
     </S.Wrapper>
   );
 }
 
 export default StickerList;
-
-const MockSticker = [
-  {
-    stickerCategory: '레큐잉',
-    stickerInfoList: [
-      {
-        stickerId: 1,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=1',
-      },
-      {
-        stickerId: 2,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=2',
-      },
-      {
-        stickerId: 3,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=3',
-      },
-      {
-        stickerId: 4,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=4',
-      },
-      {
-        stickerId: 5,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=5',
-      },
-      {
-        stickerId: 6,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=6',
-      },
-      {
-        stickerId: 7,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=7',
-      },
-      {
-        stickerId: 8,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=8',
-      },
-      {
-        stickerId: 9,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=9',
-      },
-      {
-        stickerId: 10,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=10',
-      },
-      {
-        stickerId: 11,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=11',
-      },
-      {
-        stickerId: 12,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=12',
-      },
-      {
-        stickerId: 13,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=13',
-      },
-      {
-        stickerId: 14,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=14',
-      },
-      {
-        stickerId: 15,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=15',
-      },
-      {
-        stickerId: 16,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=16',
-      },
-      {
-        stickerId: 17,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=17',
-      },
-      {
-        stickerId: 18,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=18',
-      },
-      {
-        stickerId: 19,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=19',
-      },
-      {
-        stickerId: 20,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=20',
-      },
-    ],
-  },
-  {
-    stickerCategory: '큐비링',
-    stickerInfoList: [
-      {
-        stickerId: 91,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=1',
-      },
-      {
-        stickerId: 92,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=2',
-      },
-      {
-        stickerId: 93,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=3',
-      },
-      {
-        stickerId: 94,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=4',
-      },
-      {
-        stickerId: 95,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=5',
-      },
-      {
-        stickerId: 96,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=6',
-      },
-      {
-        stickerId: 97,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=7',
-      },
-      {
-        stickerId: 98,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=8',
-      },
-      {
-        stickerId: 99,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=9',
-      },
-      {
-        stickerId: 910,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=10',
-      },
-      {
-        stickerId: 911,
-        stickerImage: 'https://source.unsplash.com/random/100x100?sig=11',
-      },
-    ],
-  },
-];

src/StickerPack/hooks/useGetStickerPack.ts

@@ -0,0 +1,17 @@
+import { useQuery } from 'react-query';
+
+import { getStickerPack } from '../api/getStickerPack';
+
+export default function useGetStickerPack(bookId: number) {
+  const { data: stickerPack } = useQuery(
+    ['useGetStickerPack'],
+    () => getStickerPack(bookId),
+    {
+      onError: () => {
+        console.error;
+      },
+    },
+  );
+
+  return { stickerPack };
+}

src/StickerPack/page/StickerPack/StickerPack.style.ts

@@ -1,15 +1,18 @@
 import styled from '@emotion/styled';
 
-export const Body = styled.section`
+export const Body = styled.article`
+  padding: 0 1.64rem;
+  padding-bottom: 5rem;
+
+  background-color: ${({ theme }) => theme.colors.background};
+`;
+
+export const Wrapper = styled.section`
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 
-  width: 100%;
-  height: 100%;
-  padding: 0 1.64rem;
-  padding-bottom: 10rem;
-
-  background-color: ${({ theme }) => theme.colors.BG};
+  width: 100vw;
+  height: 100dvh;
 `;

src/StickerPack/page/StickerPack/index.tsx

@@ -20,7 +20,7 @@ function StickerPack() {
 
   return (
     <>
-      <Header headerTitle="스티커팩" isDarkMode />
+      <Header headerTitle="스티커팩" />
       <S.Body>
         <StickerList
           isSelectedId={isSelectedId}

src/StickerPack/type/stickerPackType.ts

@@ -0,0 +1,9 @@
+export interface stickerPackType {
+  stickerCategory: string;
+  stickerList: [
+    {
+      stickerId: number;
+      stickerImage: string;
+    },
+  ];
+}