씰 만들기 페이지 수정

naarang · Dec 20, 2023 · e4a3e64 · e4a3e64
1 parent 642ac18
commit e4a3e64
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 67 deletions.
diff --git 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 (
     <div>
       <SealDiv>
         <AllSeal>
-          {Array(4).fill().map((item, index) => (
-            <SealBox key={index} style={{marginTop: 50}} onClick={()=>navigate(`/mypage/sealadd`)}>
-              <img src={imagePlus} style={{width: 25, height: 25}} alt="plus"/>
-            </SealBox>
-          ))}
+          {Array(4)
+            .fill()
+            .map((item, index) => (
+              <SealBox
+                key={index}
+                style={{ marginTop: 50 }}
+                onClick={() => navigate(`/mypage/sealadd`)}
+              >
+                <img
+                  src={imagePlus}
+                  style={{ width: 25, height: 25 }}
+                  alt="plus"
+                />
+              </SealBox>
+            ))}
         </AllSeal>
         <AllSeal>
-          {Array(4).fill().map((item, index) => (
-            <SealBox key={index}>
-              <img src={imagePlus} style={{width: 25, height: 25}} alt="plus"/>
-            </SealBox>
-          ))}
+          {Array(4)
+            .fill()
+            .map((item, index) => (
+              <SealBox key={index}>
+                <img
+                  src={imagePlus}
+                  style={{ width: 25, height: 25 }}
+                  alt="plus"
+                />
+              </SealBox>
+            ))}
         </AllSeal>
       </SealDiv>
     </div>
   );
 };
 
-export default SealForU;
+export default SealForU;
diff --git 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 (
     <Container>
-      <Frame>
+      <Frame onClick={() => selectFunc(stampData)} $click={isClicked}>
         <Image src={question}></Image>
       </Frame>
       <StyledStampItemTitleContainer>
@@ -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
@@ -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 (
     <Root>
-      <div style={{color: '#992D2D', marginTop: 24, fontSize: 27}}>우표 보관함</div>
+      <div style={{ color: "#992D2D", marginTop: 24, fontSize: 27 }}>
+        우표 보관함
+      </div>
       <TabBar>
-        <SButton1 style={{borderRadius: '8px 0 0 8px'}} onClick={()=>setIsStatus('default')} $isStatus={isStatus}>
+        <SButton1
+          style={{ borderRadius: "8px 0 0 8px" }}
+          onClick={() => setIsStatus("default")}
+          $isStatus={isStatus}
+        >
           전체
         </SButton1>
-        <SButton2 onClick={()=>setIsStatus('like')} $isStatus={isStatus}>
+        <SButton2 onClick={() => setIsStatus("like")} $isStatus={isStatus}>
           좋아요
         </SButton2>
-        <SButton3 style={{borderRadius: '0 8px 8px 0'}} onClick={()=>setIsStatus('mine')} $isStatus={isStatus}>
+        <SButton3
+          style={{ borderRadius: "0 8px 8px 0" }}
+          onClick={() => setIsStatus("mine")}
+          $isStatus={isStatus}
+        >
           MY
         </SButton3>
       </TabBar>
@@ -32,9 +54,9 @@ const SealAdd = () => {
         {/* 스탬프 데이터  default - like - my 별로 전송 */}
         <SealForStamp />
       </ListContainer>
-      <Submit>선택완료</Submit>
+      <Submit onClick={navigating}>선택완료</Submit>
     </Root>
   );
 };
 
-export default SealAdd;
+export default SealAdd;
diff --git 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 (
     <Root>
-      <img src={sealGroup} style={{marginTop: 14}}/>
-      <div style={{fontSize: 30, color: '#992D2D'}}>씰 제작소 </div>
-      <div style={{fontFamily: 'YClover-regular', marginTop: 16}}>나만의 크리스마스씰을 만들어봐요 !</div>
+      <img src={sealGroup} style={{ marginTop: 14 }} alt={"씰 그룹"} />
+      <div style={{ fontSize: 30, color: "#992D2D" }}>씰 제작소 </div>
+      <div style={{ fontFamily: "YClover-regular", marginTop: 16 }}>
+        나만의 크리스마스씰을 만들어봐요 !
+      </div>
       <SealContainer>
         <SealForU />
         <ButtonLayer>
-          <Button style={{backgroundColor:'#992D2D'}} onClick={handleQuit}>그만두기</Button>
-          <Button style={{backgroundColor: '#2D9985'}}>완성하기</Button>
+          <Button style={{ backgroundColor: "#992D2D" }} onClick={handleQuit}>
+            그만두기
+          </Button>
+          <Button style={{ backgroundColor: "#2D9985" }}>완성하기</Button>
         </ButtonLayer>
       </SealContainer>
     </Root>
   );
 };
 
-export default SealMaking;
+export default SealMaking;
diff --git 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 (
     <StyledStampListContainer>
       <StyledStampListInnerContainer>
         <StyledStampListContent>
           {stampListData?.map((item) => (
-            <div key={item.id} onClick={()=>selectFunc(item)}>
+            <div key={item.id}>
               <StampItem stampData={item} />
             </div>
           ))}
@@ -65,4 +51,4 @@ const SealForStamp = () => {
   );
 };
 
-export default SealForStamp;
+export default SealForStamp;