Merge pull request #70 from Team-Lecue/StickerPack#30-SrickerDataMove

[ StickerPack ] 선택된 스티커 데이터 라우트 이동

src/StickerPack/components/StickerList/index.tsx

@@ -1,17 +1,16 @@
 import { Fragment } from 'react';
 
 import useGetStickerPack from '../../hooks/useGetStickerPack';
-import { stickerPackType } from '../../type/stickerPackType';
+import { stickerPackType, stickerType } from '../../type/stickerPackType';
 import * as S from './StickerList.style';
 
 interface StickerListProps {
-  isSelectedId: number | null;
-  handleStickerClick: (stickerId: number) => void;
+  selectedStickerData: stickerType;
+  handleStickerClick: (newId: number, newImage: string) => void;
 }
 
 function StickerList(props: StickerListProps) {
-  const { isSelectedId, handleStickerClick } = props;
-  //TODO 임시 값 수정
+  const { selectedStickerData, handleStickerClick } = props;
   const { stickerPack } = useGetStickerPack(1);
 
   return (
@@ -25,8 +24,12 @@ function StickerList(props: StickerListProps) {
                 <S.ImageWrapper
                   type="button"
                   key={sticker.stickerId}
-                  onClick={() => handleStickerClick(sticker.stickerId)}
-                  isSelected={sticker.stickerId === isSelectedId}
+                  onClick={() =>
+                    handleStickerClick(sticker.stickerId, sticker.stickerImage)
+                  }
+                  isSelected={
+                    sticker.stickerId === selectedStickerData.stickerId
+                  }
                 >
                   <S.ImageComponent
                     src={sticker.stickerImage}

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

@@ -1,18 +1,30 @@
 import styled from '@emotion/styled';
 
 export const Body = styled.article`
+  display: flex;
+  justify-content: center;
+
+  width: 100%;
   padding: 0 1.64rem;
   padding-bottom: 5rem;
+  margin-top: 5.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;
 `;
+
+export const ButtonWrapper = styled.div`
+  position: fixed;
+  bottom: 2rem;
+
+  width: 100%;
+  padding: 0 2.5rem;
+`;

src/StickerPack/page/StickerPack/index.tsx

@@ -1,40 +1,53 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 // component
 import Button from '../../../components/common/Button/index.tsx';
 import Header from '../../../components/common/Header/index.tsx';
 import StickerList from '../../components/StickerList/index.tsx';
+// type
+import { stickerType } from '../../type/stickerPackType.ts';
 // style
 import * as S from './StickerPack.style.ts';
 
 function StickerPack() {
-  const [isSelectedId, setIsSelectedId] = useState<number | null>(null);
+  const navigate = useNavigate();
+  const [selectedStickerData, setSelectedStickerData] = useState<stickerType>({
+    stickerId: 0,
+    stickerImage: '',
+  });
 
-  const handleStickerClick = (stickerId: number) => {
-    setIsSelectedId(stickerId);
+  const handleStickerClick = (newId: number, newImage: string) => {
+    setSelectedStickerData((prevState) => ({
+      ...prevState,
+      stickerId: newId,
+      stickerImage: newImage,
+    }));
   };
 
   const handleClickDone = () => {
-    alert(`${isSelectedId}`);
+    navigate('/sticker-attach', { state: { sticker: selectedStickerData } });
   };
 
   return (
-    <>
+    <S.Wrapper>
       <Header headerTitle="스티커팩" />
       <S.Body>
         <StickerList
-          isSelectedId={isSelectedId}
+          selectedStickerData={selectedStickerData}
           handleStickerClick={handleStickerClick}
         />
+      </S.Body>
+      <S.ButtonWrapper>
         <Button
           variant="choose"
-          disabled={isSelectedId == null}
+          disabled={selectedStickerData.stickerImage === ''}
           onClick={handleClickDone}
         >
           선택 완료
         </Button>
-      </S.Body>
-    </>
+      </S.ButtonWrapper>
+    </S.Wrapper>
   );
 }
 

src/StickerPack/type/stickerPackType.ts

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