diff --git a/src/StickerPack/components/StickerList/index.tsx b/src/StickerPack/components/StickerList/index.tsx index af4c779f..ab282aff 100644 --- a/src/StickerPack/components/StickerList/index.tsx +++ b/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) { - handleStickerClick(sticker.stickerId, sticker.stickerImage) - } - isSelected={ - sticker.stickerId === selectedStickerData.stickerId - } + onClick={() => handleStickerClick(sticker.stickerId)} + isSelected={sticker.stickerId === isSelectedId} > 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; -`; diff --git a/src/StickerPack/page/StickerPack/index.tsx b/src/StickerPack/page/StickerPack/index.tsx index 5e45aed0..2f25afa2 100644 --- a/src/StickerPack/page/StickerPack/index.tsx +++ b/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({ - stickerId: 0, - stickerImage: '', - }); + const [isSelectedId, setIsSelectedId] = useState(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 ( - + <>
- - - - + + ); } diff --git a/src/StickerPack/type/stickerPackType.ts b/src/StickerPack/type/stickerPackType.ts index 94d91e6d..f2e513ed 100644 --- a/src/StickerPack/type/stickerPackType.ts +++ b/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; + }, + ]; }