Merge pull request #201 from EasyAndBeauty/feature/#189

Feature#189:핀버튼과 영수증 정보 연결로직 추가
EasyAndBeauty · Nov 23, 2022 · c437209 · c437209
2 parents c65a293 + 0b9813f
commit c437209
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/components/atoms/ReceiptPageBtns/PinBtn.jsx b/src/components/atoms/ReceiptPageBtns/PinBtn.jsx
@@ -1,10 +1,14 @@
 import { ReactComponent as PinIcon } from "assets/svg/pin_icon.svg";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 
-export function PinBtn() {
+export function PinBtn({ isPinned }) {
   const [pinned, setPinned] = useState(false);
 
+  useEffect(() => {
+    if (isPinned) setPinned(true);
+  }, [isPinned]);
+
   function handlePin() {
     // todo: 서버로 pin 데이터 보내는 기능 추가
     console.log("pinned", !pinned);

diff --git a/src/components/organisms/MySection/MySection.jsx b/src/components/organisms/MySection/MySection.jsx
@@ -33,7 +33,7 @@ export const MySection = () => {
           <S.CreatedDate>{receipt.date && formatReceiptDate(receipt.date)}</S.CreatedDate>
           <ReceiptPaper
             onClick={() => {
-              navigate(`/receipt`, { state: { todos: receipt.todos } });
+              navigate(`/receipt`, { state: { todos: receipt.todos, pinned: receipt.pinned } });
             }}
             todos={Array.from(receipt.todos)}
             key={receipt.id}

diff --git a/src/components/pages/ReceiptPage/ReceiptPage.jsx b/src/components/pages/ReceiptPage/ReceiptPage.jsx
@@ -6,7 +6,7 @@ import * as S from "./ReceiptPage.styles";
 
 export function ReceiptPage() {
   const {
-    state: { todos, date, receiptNumber },
+    state: { todos, pinned, date, receiptNumber },
   } = useLocation();
   const navigate = useNavigate();
   const receiptRef = useRef(null);
@@ -34,7 +34,7 @@ export function ReceiptPage() {
       <S.IconContainer>
         <CopyBtn />
         <SaveBtn date={date} />
-        <PinBtn />
+        <PinBtn isPinned={pinned} />
       </S.IconContainer>
       {modalOn && <AlertModal onClick={() => setModalOn(false)} />}
     </S.Container>