Merge branch 'release/221223' into feature/#189

src/App.js

@@ -23,7 +23,7 @@ function App() {
           <Route path="*" element={<LoginPage />} />
         </>
       )}
-      <Route path="*" element={<RedirectionPage />} />
+      <Route path="/error" element={<RedirectionPage />} />
     </Routes>
   );
 }

src/components/atoms/ReceiptPageBtns/PinBtn.jsx

@@ -1,19 +1,42 @@
 import { ReactComponent as PinIcon } from "assets/svg/pin_icon.svg";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
+import { useReceiptClient } from "controllers/receiptController";
+import { AbortIfError } from "controllers/error";
 
-export function PinBtn({ isPinned }) {
+export function PinBtn({ isPinned, toggleVisible }) {
+  const client = useReceiptClient();
   const [pinned, setPinned] = useState(false);
 
   useEffect(() => {
     if (isPinned) setPinned(true);
   }, [isPinned]);
 
-  function handlePin() {
-    // todo: 서버로 pin 데이터 보내는 기능 추가
-    console.log("pinned", !pinned);
+  const handlePin = async () => {
+    if (!isPinned) {
+      const famousSaying = sessionStorage.getItem("famous_saying");
+      const todos = JSON.parse(sessionStorage.getItem("todos"));
+      const userName = "test";
+
+      try {
+        const response = await client.postPinnedReceipt({
+          todos,
+          famous_saying: famousSaying,
+          receipt_name: userName,
+          pinned: true,
+        });
+        const receiptId = response.data;
+        toggleVisible(!pinned);
+      } catch (error) {
+        AbortIfError(error);
+      }
+    }
+    if (isPinned) {
+      const id = "todo";
+      await client.updatePinnedReceipt({ pinned: false }, id);
+    }
     setPinned(!pinned);
-  }
+  };
 
   return (
     <PinContainer onClick={handlePin} pinned={pinned}>

src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx

@@ -1,5 +1,6 @@
 import * as S from "./ReceiptQuotes.styles";
 import useAsync from "../../../hooks/useAsync";
+import { useEffect } from "react";
 
 /**
  * ReceiptQuotes
@@ -12,7 +13,11 @@ import useAsync from "../../../hooks/useAsync";
 export function ReceiptQuotes() {
   const [state] = useAsync(getQuotes, []);
   const { loading, data: quote, error } = state;
-  console.log(quote);
+
+  // TODO: 리팩토링 예정
+  useEffect(() => {
+    sessionStorage.setItem("famous_saying", quote);
+  }, [quote]);
 
   return <S.Quotes>{loading || error ? "Well done!" : quote}</S.Quotes>;
 }

src/components/atoms/TextBtn/TextBtn.jsx

@@ -9,12 +9,13 @@ import * as S from "./TextBtn.styles";
  * @param {String} text - 버튼에 표시될 텍스트
  * @param {String} color - 텍스트의 색 ※context에 지정된 색만 사용할 것 "bk"(default) / "wt" / "red" / "gray" / "green" / "lightGray"
  * @param {String} type - 텍스트의 타입  "default" / "bold"
+ * @param {String} size - 텍스트의 타입  "sm" 12px / "md"(default) 18px / "lg" 24px
  *
  * @returns {JSX.Element} TextBtn
  */
-export function TextBtn({ onClick, type = "default", color = "bk", children }) {
+export function TextBtn({ onClick, type = "default", color = "bk", size = "md", children }) {
   return (
-    <S.TextContainer onClick={onClick} type={type} color={color}>
+    <S.TextContainer onClick={onClick} type={type} color={color} size={size}>
       {children}
     </S.TextContainer>
   );

src/components/atoms/TextBtn/TextBtn.styles.jsx

@@ -1,9 +1,11 @@
 import styled from "styled-components";
 
+const fontSize = { sm: "16px", md: "18px", lg: "24px" };
+
 export const TextContainer = styled.div`
   font-family: "Courier Prime", monospace;
   font-weight: ${(props) => (props.type === "bold" ? "bold" : "400")};
-  font-size: 18px;
+  font-size: ${(props) => fontSize[props.size]};
   color: ${(props) => props.theme[props.color]};
   cursor: pointer;
 `;

src/components/index.js

@@ -60,6 +60,7 @@ export { MySection } from "./organisms/MySection";
 export { LoadingModal } from "./organisms/LoadingModal";
 export { AlertModal } from "./organisms/AlertModal";
 export { NicknameModal } from "./organisms/NicknameModal";
+export { PinnedModal } from "./organisms/PinnedModal";
 export { TimerAlertModal } from "./organisms/TimerAlertModal";
 
 /**

src/components/organisms/MySection/MySection.jsx

@@ -1,9 +1,8 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { ReceiptPaper } from "components";
 import * as S from "./MySection.styles";
 import { useReceiptClient } from "controllers/receiptController";
-import { useEffect } from "react";
 import { formatReceiptDate } from "helper/formatter";
 
 /**
@@ -24,7 +23,7 @@ export const MySection = () => {
       const data = await getPinnedReceipts();
       setReceipts(data);
     })();
-  });
+  }, []);
 
   const renderReceipts = (receipts) => {
     const pinnedReceipts = receipts.map((receipt) => {

src/components/organisms/NicknameModal/NicknameModal.jsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { isNull, isOverMaxLength } from "helper/validations";
 import { IS_NULL, IS_OVER } from "helper/constants";
 import { useUserClient } from "controllers/userController";
-
+import { AbortIfError } from "controllers/error";
 /**
  * NicknameModal
  *
@@ -24,15 +24,10 @@ export function NicknameModal({ onClose }) {
       return;
     }
 
-    const response = await client.putUser(newUserName);
-
-    if (response.status !== 200) {
-      alert("에러가 발생했습니다. 다시 시도해주세요.");
-      return;
-    }
-
-    if (response.status === 200) {
-      alert("닉네임 변경이 완료 되었습니다.");
+    try {
+      client.putUser(newUserName).then(alert("닉네임 변경이 완료 되었습니다."));
+    } catch (error) {
+      AbortIfError(error);
     }
     onClose();
   };

src/components/organisms/PinnedModal/PinnedModal.jsx

@@ -0,0 +1,37 @@
+import { useNavigate } from "react-router-dom";
+import { ModalTemplate, TwotBtnTemplate, TextBtn, Spacer } from "components";
+import * as S from "./PinnedModal.style";
+
+/**
+ * PinnedModal
+ *
+ * 핀 버튼 클릭 시 사용자 알림 모달 컴포넌트
+ *
+ * @returns {JSX.Element} 핀 버튼 클릭 알림 모달 컴포넌트
+ */
+export function PinnedModal({ onClose }) {
+  const navigate = useNavigate();
+  return (
+    <S.Background>
+      <ModalTemplate>
+        <Spacer />
+        <S.ModalContainer>
+          <S.ModalMessage>영수증이 저장되었습니다</S.ModalMessage> {/* <Spacer /> */}
+        </S.ModalContainer>
+        <TwotBtnTemplate isAbsolute={false}>
+          <TextBtn onClick={onClose} color="lightGray">
+            Cancel
+          </TextBtn>
+          <TextBtn
+            onClick={() => {
+              navigate("/my");
+            }}
+            type="bold"
+          >
+            My Page
+          </TextBtn>
+        </TwotBtnTemplate>
+      </ModalTemplate>
+    </S.Background>
+  );
+}

src/components/organisms/PinnedModal/PinnedModal.style.jsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+export const Background = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  position: fixed;
+  left: 0;
+  top: 0;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.1);
+`;
+
+export const ModalContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 80%;
+`;
+
+export const ModalTitle = styled.span`
+  text-align: left;
+  font-size: 14px;
+  font-weight: bold;
+  margin: 10px;
+`;
+
+export const ModalMessage = styled.span`
+  width: 100%;
+  font-size: 24px;
+  font-weight: 500;
+  text-align: center;
+`;

src/components/organisms/PinnedModal/index.js

@@ -0,0 +1 @@
+export { PinnedModal } from "./PinnedModal";

src/components/pages/ReceiptPage/ReceiptPage.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import { ReceiptPaper, AlertModal, SaveBtn, CopyBtn, PinBtn } from "components";
+import { ReceiptPaper, AlertModal, SaveBtn, CopyBtn, PinBtn, PinnedModal } from "components";
 import { ReactComponent as BackIcon } from "assets/svg/back_icon.svg";
 import * as S from "./ReceiptPage.styles";
 
@@ -13,6 +13,7 @@ export function ReceiptPage() {
 
   const [scale, setScale] = useState(1);
   const [modalOn, setModalOn] = useState(false);
+  const [pinBtnModalVisible, setPinBtnModalVisible] = useState(false);
 
   useEffect(() => {
     const ratio = window.innerHeight / 1700;
@@ -23,6 +24,10 @@ export function ReceiptPage() {
     }
   }, []);
 
+  useEffect(() => {
+    sessionStorage.setItem("todos", JSON.stringify(todos));
+  }, [todos]);
+
   return (
     <S.Container>
       <S.BackIconContainer onClick={() => navigate(-1)}>
@@ -34,9 +39,10 @@ export function ReceiptPage() {
       <S.IconContainer>
         <CopyBtn />
         <SaveBtn date={date} />
-        <PinBtn isPinned={pinned} />
+        <PinBtn isPinned={pinned} toggleVisible={(bool) => setPinBtnModalVisible(bool)} />
       </S.IconContainer>
       {modalOn && <AlertModal onClick={() => setModalOn(false)} />}
+      {pinBtnModalVisible && <PinnedModal onClose={() => setPinBtnModalVisible(false)} />}
     </S.Container>
   );
 }

src/components/templates/ModalTemplate/ModalTemplate.styles.jsx

@@ -23,7 +23,7 @@ export const Content = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   gap: 1rem;
   position: relative;
 `;

src/components/templates/TwotBtnTemplate/TwotBtnTemplate.styles.jsx

@@ -25,8 +25,9 @@ export const ButtonContainer = styled.div`
   padding: 0.5rem;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  width: 60%;
+  align-items: center;
+  justify-content: space-around;
+  width: 70%;
 `;
 
 export const Divider = styled.hr`

src/controllers/error.js

@@ -0,0 +1,7 @@
+import { useNavigate } from "react-router-dom";
+
+export const AbortIfError = (error) => {
+  // TODO: 에러별 화면으로 이동
+  const navigate = useNavigate();
+  navigate("/error");
+};

src/controllers/receiptController.js

@@ -1,13 +1,10 @@
 import { AuthClient } from "./client";
-import { dummyPinnedReceipts } from "./dummy";
 
 export const useReceiptClient = () => {
   const authClient = AuthClient();
 
-  // Todo: 백엔드 갱신 후 API요청 URL 수정
   const getPinnedReceipts = async () => {
-    return dummyPinnedReceipts;
-    // return await authClient.get("/api/v1/receipt/pinned");
+    return await authClient.get("/api/v1/receipt/pinned");
   };
 
   const postPinnedReceipt = async (receipt) => {

src/store/authContext.js

@@ -4,6 +4,7 @@ const initialAuth = {
   isLoggedIn: false,
   accessToken: "",
   refreshToken: "",
+  // 유저 이름 추가
 };
 
 const AuthStateContext = createContext(initialAuth);
@@ -52,9 +53,7 @@ export const AuthContextProvider = ({ children }) => {
 
   return (
     <AuthStateContext.Provider value={user}>
-      <AuthDispatchContext.Provider value={dispatch}>
-        {children}
-      </AuthDispatchContext.Provider>
+      <AuthDispatchContext.Provider value={dispatch}>{children}</AuthDispatchContext.Provider>
     </AuthStateContext.Provider>
   );
 };