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`)}>
-
-
- ))}
+ {Array(4)
+ .fill()
+ .map((item, index) => (
+ navigate(`/mypage/sealadd`)}
+ >
+
+
+ ))}
- {Array(4).fill().map((item, index) => (
-
-
-
- ))}
+ {Array(4)
+ .fill()
+ .map((item, index) => (
+
+
+
+ ))}
);
};
-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;