Merge pull request #63 from Team-Lecue/feature/StickerPack

[ stickerPack ] dev 머지 PR 입니다!!

.stylelintrc.json

@@ -22,6 +22,7 @@
         "noEmptyLineBetween": true,
         "properties": [
           "display",
+          "gap",
           "justify-content",
           "align-items",
           "flex-direction",
@@ -30,6 +31,12 @@
           "flex-grow",
           "flex-shrink",
           "flex-basis",
+          "grid-template-columns",
+          "grid-area",
+          "grid-template-rows",
+          "grid-column",
+          "grid-template-areas",
+          "grid-gap",
           "position",
           "top",
           "right",
@@ -77,6 +84,8 @@
           "border-style",
           "background",
           "background-color",
+          "background-position",
+          "background-size",
           "color",
           "font-style",
           "font-weight",

src/Router.tsx

@@ -1,12 +1,14 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import HomePage from './Home/page/HomePage';
+import StickerPack from './StickerPack/page/StickerPack';
 
 function Router() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<HomePage />} />
+        <Route path="/sticker-pack" element={<StickerPack />} />
       </Routes>
     </BrowserRouter>
   );

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

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

src/StickerPack/components/StickerList/index.tsx

@@ -0,0 +1,44 @@
+import { Fragment } from 'react';
+
+import useGetStickerPack from '../../hooks/useGetStickerPack';
+import { stickerPackType } from '../../type/stickerPackType';
+import * as S from './StickerList.style';
+
+interface StickerListProps {
+  isSelectedId: number | null;
+  handleStickerClick: (stickerId: number) => void;
+}
+
+function StickerList(props: StickerListProps) {
+  const { isSelectedId, handleStickerClick } = props;
+  //TODO 임시 값 수정
+  const { stickerPack } = useGetStickerPack(1);
+
+  return (
+    <S.Wrapper>
+      {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;

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

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+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: 100vw;
+  height: 100dvh;
+`;

src/StickerPack/page/StickerPack/index.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+// component
+import Button from '../../../components/common/Button/index.tsx';
+import Header from '../../../components/common/Header/index.tsx';
+import StickerList from '../../components/StickerList/index.tsx';
+// style
+import * as S from './StickerPack.style.ts';
+
+function StickerPack() {
+  const [isSelectedId, setIsSelectedId] = useState<number | null>(null);
+
+  const handleStickerClick = (stickerId: number) => {
+    setIsSelectedId(stickerId);
+  };
+
+  const handleClickDone = () => {
+    alert(`${isSelectedId}`);
+  };
+
+  return (
+    <>
+      <Header headerTitle="스티커팩" />
+      <S.Body>
+        <StickerList
+          isSelectedId={isSelectedId}
+          handleStickerClick={handleStickerClick}
+        />
+        <Button
+          variant="choose"
+          disabled={isSelectedId == null}
+          onClick={handleClickDone}
+        >
+          선택 완료
+        </Button>
+      </S.Body>
+    </>
+  );
+}
+
+export default StickerPack;

src/StickerPack/type/stickerPackType.ts

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

src/components/common/Button/Button.style.ts

@@ -3,6 +3,9 @@ import styled from '@emotion/styled';
 export type ButtonStyle = 'choose' | 'complete';
 
 export const CustomButton = styled.button<{ variant: ButtonStyle }>`
+  position: fixed;
+  bottom: 2rem;
+
   width: 34.4rem;
   height: 6rem;