Merge pull request #74 from Team-Lecue/revert-70-StickerPack#30-Srick…

…erDataMove

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

src/StickerPack/components/StickerList/index.tsx

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

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

@@ -1,30 +1,18 @@
 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,53 +1,40 @@
 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 navigate = useNavigate();
-  const [selectedStickerData, setSelectedStickerData] = useState<stickerType>({
-    stickerId: 0,
-    stickerImage: '',
-  });
+  const [isSelectedId, setIsSelectedId] = useState<number | null>(null);
 
-  const handleStickerClick = (newId: number, newImage: string) => {
-    setSelectedStickerData((prevState) => ({
-      ...prevState,
-      stickerId: newId,
-      stickerImage: newImage,
-    }));
+  const handleStickerClick = (stickerId: number) => {
+    setIsSelectedId(stickerId);
   };
 
   const handleClickDone = () => {
-    navigate('/sticker-attach', { state: { sticker: selectedStickerData } });
+    alert(`${isSelectedId}`);
   };
 
   return (
-    <S.Wrapper>
+    <>
       <Header headerTitle="스티커팩" />
       <S.Body>
         <StickerList
-          selectedStickerData={selectedStickerData}
+          isSelectedId={isSelectedId}
           handleStickerClick={handleStickerClick}
         />
-      </S.Body>
-      <S.ButtonWrapper>
         <Button
           variant="choose"
-          disabled={selectedStickerData.stickerImage === ''}
+          disabled={isSelectedId == null}
           onClick={handleClickDone}
         >
           선택 완료
         </Button>
-      </S.ButtonWrapper>
-    </S.Wrapper>
+      </S.Body>
+    </>
   );
 }
 

src/StickerPack/type/stickerPackType.ts

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