diff --git a/src/components/SealMaking/SealForU.jsx b/src/components/SealMaking/SealForU.jsx index 0a6e221..0ae692c 100644 --- a/src/components/SealMaking/SealForU.jsx +++ b/src/components/SealMaking/SealForU.jsx @@ -1,33 +1,49 @@ -import { - SealBox, - AllSeal, - SealDiv -} from './styled'; -import imagePlus from '../../assets/icon/image_plus_btn.svg'; -import { useNavigate } from 'react-router'; +import { SealBox, AllSeal, SealDiv } from "./styled"; +import imagePlus from "../../assets/icon/image_plus_btn.svg"; +import { useNavigate } from "react-router"; +import { useRecoilState } from "recoil"; +import { selectState } from "../../stores/select-state"; const SealForU = () => { const navigate = useNavigate(); - return( + const [selectedItem, setSelectedItem] = useRecoilState(selectState); + + return (
- {Array(4).fill().map((item, index) => ( - navigate(`/mypage/sealadd`)}> - plus - - ))} + {Array(4) + .fill() + .map((item, index) => ( + navigate(`/mypage/sealadd`)} + > + plus + + ))} - {Array(4).fill().map((item, index) => ( - - plus - - ))} + {Array(4) + .fill() + .map((item, index) => ( + + plus + + ))}
); }; -export default SealForU; \ No newline at end of file +export default SealForU; diff --git a/src/components/StampList/StampItem.jsx b/src/components/StampList/StampItem.jsx index c2f2cdf..ab6ef5f 100644 --- a/src/components/StampList/StampItem.jsx +++ b/src/components/StampList/StampItem.jsx @@ -3,11 +3,34 @@ import LikeChecked from "../../assets/icon/like-checked.svg"; import LikeUnchecked from "../../assets/icon/like-unchecked.svg"; import frame from "../../assets/icon/stamp_frame.svg"; import question from "../../assets/icon/no_image.svg"; +import { useRecoilState } from "recoil"; +import { selectState } from "../../stores/select-state"; +import { useEffect, useState } from "react"; const StampItem = ({ stampData }) => { + const [selectItem, setSelectItem] = useRecoilState(selectState); + const [isClicked, setIsClicked] = useState(false); + + const selectFunc = (item) => { + setIsClicked(!isClicked); + setSelectItem({ + id: item?.id, + stampImg: item?.stampImg, + stampName: item?.stampName, + likeCnt: item?.likeCnt, + like: item?.like, + }); + }; + useEffect(() => { + if (!isClicked) { + setSelectItem(null); + } else { + console.log(selectItem); + } + }, [isClicked]); return ( - + selectFunc(stampData)} $click={isClicked}> @@ -48,6 +71,7 @@ const Frame = styled.div` width: 150px; height: 150px; background-image: url(${frame}); + opacity: ${(props) => (props.$click ? "0.5" : "1")}; background-size: cover; background-position: center; background-repeat: no-repeat; /*반복 방지*/ diff --git a/src/pages/SealMaking/SealAdd.jsx b/src/pages/SealMaking/SealAdd.jsx index f985622..759be03 100644 --- a/src/pages/SealMaking/SealAdd.jsx +++ b/src/pages/SealMaking/SealAdd.jsx @@ -1,29 +1,51 @@ -import { +import { Root, TabBar, SButton1, SButton2, SButton3, ListContainer, - Submit + Submit, } from "./styled"; import { useState } from "react"; import SealForStamp from "../StampList/SealForStamp"; +import { useNavigate } from "react-router-dom"; +import { useRecoilState } from "recoil"; +import { selectState } from "../../stores/select-state"; // default - like - mine const SealAdd = () => { - const [isStatus, setIsStatus] = useState('default'); - return( + const [selectItem, setSelectItem] = useRecoilState(selectState); + const [isStatus, setIsStatus] = useState("default"); + const navigate = useNavigate(); + const navigating = () => { + if (!selectItem) { + alert("아무것도 선택되지 않았습니다."); + } else { + navigate(`/mypage/sealmaking`); + } + }; + return ( -
우표 보관함
+
+ 우표 보관함 +
- setIsStatus('default')} $isStatus={isStatus}> + setIsStatus("default")} + $isStatus={isStatus} + > 전체 - setIsStatus('like')} $isStatus={isStatus}> + setIsStatus("like")} $isStatus={isStatus}> 좋아요 - setIsStatus('mine')} $isStatus={isStatus}> + setIsStatus("mine")} + $isStatus={isStatus} + > MY @@ -32,9 +54,9 @@ const SealAdd = () => { {/* 스탬프 데이터 default - like - my 별로 전송 */} - 선택완료 + 선택완료
); }; -export default SealAdd; \ No newline at end of file +export default SealAdd; diff --git a/src/pages/SealMaking/SealMaking.jsx b/src/pages/SealMaking/SealMaking.jsx index b7fd704..8d8eed3 100644 --- a/src/pages/SealMaking/SealMaking.jsx +++ b/src/pages/SealMaking/SealMaking.jsx @@ -1,33 +1,33 @@ -import { - Root, - SealContainer, - ButtonLayer, - Button -} from './styled'; -import sealGroup from '../../assets/icon/seal_group.svg'; -import SealForU from '../../components/SealMaking/SealForU'; -import { useNavigate } from 'react-router'; +import { Root, SealContainer, ButtonLayer, Button } from "./styled"; +import sealGroup from "../../assets/icon/seal_group.svg"; +import SealForU from "../../components/SealMaking/SealForU"; +import { useNavigate } from "react-router"; const SealMaking = () => { const navigate = useNavigate(); const handleQuit = () => { - alert('지금 나가시면 변경사항이 저장되지 않습니다.\n 나가시겠습니까?'); + alert("지금 나가시면 변경사항이 저장되지 않습니다.\n 나가시겠습니까?"); navigate(-1); }; - return( + + return ( - -
씰 제작소
-
나만의 크리스마스씰을 만들어봐요 !
+ {"씰 +
씰 제작소
+
+ 나만의 크리스마스씰을 만들어봐요 ! +
- - + +
); }; -export default SealMaking; \ No newline at end of file +export default SealMaking; diff --git a/src/pages/StampList/SealForStamp.jsx b/src/pages/StampList/SealForStamp.jsx index 3354549..968ddcc 100644 --- a/src/pages/StampList/SealForStamp.jsx +++ b/src/pages/StampList/SealForStamp.jsx @@ -1,18 +1,15 @@ -import{ +import { StyledStampListContainer, StyledStampListContent, StyledStampListInnerContainer, -} from './styled'; +} from "./styled"; import { useEffect, useState } from "react"; import StampItem from "../../components/StampList/StampItem"; -import { useRecoilState } from 'recoil'; -import { selectState } from '../../stores/select-state'; const SealForStamp = () => { const [stampListData, setStampListData] = useState(null); - const [selectItem, setSelectedItem] = useRecoilState(selectState); - useEffect(()=>{ + useEffect(() => { let stampList = [ { id: 1, @@ -37,25 +34,14 @@ const SealForStamp = () => { }, ]; setStampListData(stampList); - }, []); - const selectFunc = (item) => { - setSelectedItem({ - id: item?.id, - stampImg: item?.stampImg, - stampName: item?.stampName, - likeCnt: item?.likeCnt, - like: item?.like - }); - }; - - return( + return ( {stampListData?.map((item) => ( -
selectFunc(item)}> +
))} @@ -65,4 +51,4 @@ const SealForStamp = () => { ); }; -export default SealForStamp; \ No newline at end of file +export default SealForStamp;