From d3cea31e0a92ba35993d0b93663eca44b6c58219 Mon Sep 17 00:00:00 2001 From: Madang Date: Mon, 28 Nov 2022 00:11:39 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feature=20#195:=20=EC=98=81=EC=88=98?= =?UTF-8?q?=EC=A6=9D=20API=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/controllers/receiptController.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/controllers/receiptController.js b/src/controllers/receiptController.js index fcabf5d..3440b6c 100644 --- a/src/controllers/receiptController.js +++ b/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) => { From 89b6dd0f1653942ca2f7c26a9180c4563929bce8 Mon Sep 17 00:00:00 2001 From: Madang Date: Mon, 28 Nov 2022 00:12:05 +0900 Subject: [PATCH 2/9] =?UTF-8?q?WIP=20:=20=EC=98=81=EC=88=98=EC=A6=9DAPI?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../atoms/ReceiptPageBtns/PinBtn.jsx | 19 ++++++++++++++++--- .../atoms/ReceiptQuotes/ReceiptQuotes.jsx | 6 +++--- .../pages/ReceiptPage/ReceiptPage.jsx | 1 + src/store/authContext.js | 5 ++--- 4 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/components/atoms/ReceiptPageBtns/PinBtn.jsx b/src/components/atoms/ReceiptPageBtns/PinBtn.jsx index 0e2794d..f3f575a 100644 --- a/src/components/atoms/ReceiptPageBtns/PinBtn.jsx +++ b/src/components/atoms/ReceiptPageBtns/PinBtn.jsx @@ -1,19 +1,32 @@ 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"; export function PinBtn({ isPinned }) { + const client = useReceiptClient(); const [pinned, setPinned] = useState(false); useEffect(() => { if (isPinned) setPinned(true); }, [isPinned]); - function handlePin() { + const handlePin = async () => { // todo: 서버로 pin 데이터 보내는 기능 추가 - console.log("pinned", !pinned); + // 세션 스토리지에서 TODO, 명언, 영수증 아이디 정보 취득 + if (isPinned === false) { + // 이 때 PINNED는 무조건 true, 유저 이름은 컨텍스트에서 취득 + // 영수증 정보 취합하기 + // POST Pinned Receipt + const response = await client.postPinnedReceipt(pinned); + // clear session storage + } + if (isPinned === true) { + //PUT Pinned Receipt + const response = await client.putPinnedReceipt(pinned); + } setPinned(!pinned); - } + }; return ( diff --git a/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx b/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx index 8ce7899..3a14cf9 100644 --- a/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx +++ b/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx @@ -13,14 +13,14 @@ export function ReceiptQuotes() { const [quotesState, setQuotes] = useState(); useEffect(() => { - const getQuotes = async () => { + (async () => { await fetch("https://api.adviceslip.com/advice") .then((response) => response.json()) .then((data) => setQuotes(data.slip.advice)) .catch((e) => console.error(e)); - }; + })(); - getQuotes(); + // 세션에 저장 }, []); return {quotesState || "Well done!"}; diff --git a/src/components/pages/ReceiptPage/ReceiptPage.jsx b/src/components/pages/ReceiptPage/ReceiptPage.jsx index 0927731..058a36c 100644 --- a/src/components/pages/ReceiptPage/ReceiptPage.jsx +++ b/src/components/pages/ReceiptPage/ReceiptPage.jsx @@ -21,6 +21,7 @@ export function ReceiptPage() { if (receiptHeight > receiptSectionHeight) { setScale(receiptSectionHeight / receiptHeight - 0.01); } + // TODO를 세션스토리지에 저장 }, []); return ( diff --git a/src/store/authContext.js b/src/store/authContext.js index e669815..ddfc1a5 100644 --- a/src/store/authContext.js +++ b/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 ( - - {children} - + {children} ); }; From 2a692f4dfe9dfdbecc8810988c0718f28110fd98 Mon Sep 17 00:00:00 2001 From: Madang Date: Mon, 28 Nov 2022 22:30:40 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feature=20#195:=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=ED=86=B5=ED=95=A9=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 +- .../organisms/NicknameModal/NicknameModal.jsx | 15 +++++---------- src/controllers/error.js | 7 +++++++ 3 files changed, 13 insertions(+), 11 deletions(-) create mode 100644 src/controllers/error.js diff --git a/src/App.js b/src/App.js index c3dc2f0..a0b27c7 100644 --- a/src/App.js +++ b/src/App.js @@ -23,7 +23,7 @@ function App() { } /> )} - } /> + } /> ); } diff --git a/src/components/organisms/NicknameModal/NicknameModal.jsx b/src/components/organisms/NicknameModal/NicknameModal.jsx index b86bf66..4d0af13 100644 --- a/src/components/organisms/NicknameModal/NicknameModal.jsx +++ b/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"; /** * AlertModal * @@ -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(); }; diff --git a/src/controllers/error.js b/src/controllers/error.js new file mode 100644 index 0000000..5c60865 --- /dev/null +++ b/src/controllers/error.js @@ -0,0 +1,7 @@ +import { useNavigate } from "react-router-dom"; + +export const AbortIfError = (error) => { + // TODO: 에러별 화면으로 이동 + const navigate = useNavigate(); + navigate("/error"); +}; From ab6651ed9b0e72350e7f7fc6e40fea165ba3d932 Mon Sep 17 00:00:00 2001 From: Madang Date: Mon, 5 Dec 2022 20:53:00 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feature=20#195=20:=20=ED=95=80=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EA=B8=B0=EB=8A=A5=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../atoms/ReceiptPageBtns/PinBtn.jsx | 30 ++++++++++++------- .../atoms/ReceiptQuotes/ReceiptQuotes.jsx | 6 ++-- .../pages/ReceiptPage/ReceiptPage.jsx | 5 +++- 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/components/atoms/ReceiptPageBtns/PinBtn.jsx b/src/components/atoms/ReceiptPageBtns/PinBtn.jsx index f3f575a..9b8788b 100644 --- a/src/components/atoms/ReceiptPageBtns/PinBtn.jsx +++ b/src/components/atoms/ReceiptPageBtns/PinBtn.jsx @@ -2,6 +2,7 @@ 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 }) { const client = useReceiptClient(); @@ -12,18 +13,25 @@ export function PinBtn({ isPinned }) { }, [isPinned]); const handlePin = async () => { - // todo: 서버로 pin 데이터 보내는 기능 추가 - // 세션 스토리지에서 TODO, 명언, 영수증 아이디 정보 취득 - if (isPinned === false) { - // 이 때 PINNED는 무조건 true, 유저 이름은 컨텍스트에서 취득 - // 영수증 정보 취합하기 - // POST Pinned Receipt - const response = await client.postPinnedReceipt(pinned); - // clear session storage + if (!isPinned) { + const famousSaying = sessionStorage.getItem("famous_saying"); + const todos = sessionStorage.getItem("todos"); + const userName = "test"; + + try { + await client.postPinnedReceipt({ + todos, + famous_saying: famousSaying, + receipt_name: userName, + pinned: true, + }); + } catch (error) { + AbortIfError(error); + } } - if (isPinned === true) { - //PUT Pinned Receipt - const response = await client.putPinnedReceipt(pinned); + if (isPinned) { + const id = "todo"; + await client.updatePinnedReceipt({ pinned: false }, id); } setPinned(!pinned); }; diff --git a/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx b/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx index 3a14cf9..6c92d6d 100644 --- a/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx +++ b/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx @@ -19,9 +19,11 @@ export function ReceiptQuotes() { .then((data) => setQuotes(data.slip.advice)) .catch((e) => console.error(e)); })(); - - // 세션에 저장 }, []); + useEffect(() => { + sessionStorage.setItem("famous_saying", quotesState); + }, [quotesState]); + return {quotesState || "Well done!"}; } diff --git a/src/components/pages/ReceiptPage/ReceiptPage.jsx b/src/components/pages/ReceiptPage/ReceiptPage.jsx index 058a36c..c5f4274 100644 --- a/src/components/pages/ReceiptPage/ReceiptPage.jsx +++ b/src/components/pages/ReceiptPage/ReceiptPage.jsx @@ -21,9 +21,12 @@ export function ReceiptPage() { if (receiptHeight > receiptSectionHeight) { setScale(receiptSectionHeight / receiptHeight - 0.01); } - // TODO를 세션스토리지에 저장 }, []); + useEffect(() => { + sessionStorage.setItem("todos", JSON.stringify(todos)); + }, [todos]); + return ( navigate(-1)}> From f7f7cc096b870aa18b5742272137beef6e518534 Mon Sep 17 00:00:00 2001 From: Madang Date: Tue, 20 Dec 2022 22:06:23 +0900 Subject: [PATCH 5/9] =?UTF-8?q?WIP=20:=20=ED=95=80=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../atoms/ReceiptPageBtns/PinBtn.jsx | 14 ++++++- src/components/atoms/TextBtn/TextBtn.jsx | 5 ++- .../atoms/TextBtn/TextBtn.styles.jsx | 4 +- .../organisms/MySection/MySection.jsx | 5 +-- .../organisms/PinnedModal/PinnedModal.jsx | 38 +++++++++++++++++++ .../PinnedModal/PinnedModal.style.jsx | 37 ++++++++++++++++++ src/components/organisms/PinnedModal/index.js | 1 + .../PomodoroBottomSheet.jsx | 3 +- .../TwotBtnTemplate.styles.jsx | 5 ++- 9 files changed, 101 insertions(+), 11 deletions(-) create mode 100644 src/components/organisms/PinnedModal/PinnedModal.jsx create mode 100644 src/components/organisms/PinnedModal/PinnedModal.style.jsx create mode 100644 src/components/organisms/PinnedModal/index.js diff --git a/src/components/atoms/ReceiptPageBtns/PinBtn.jsx b/src/components/atoms/ReceiptPageBtns/PinBtn.jsx index 9b8788b..bb74ec7 100644 --- a/src/components/atoms/ReceiptPageBtns/PinBtn.jsx +++ b/src/components/atoms/ReceiptPageBtns/PinBtn.jsx @@ -3,10 +3,12 @@ import { useEffect, useState } from "react"; import styled from "styled-components"; import { useReceiptClient } from "controllers/receiptController"; import { AbortIfError } from "controllers/error"; +import { PinnedModal } from "components/organisms/PinnedModal"; export function PinBtn({ isPinned }) { const client = useReceiptClient(); const [pinned, setPinned] = useState(false); + const [visibleModal, setVisibleModal] = useState(false); useEffect(() => { if (isPinned) setPinned(true); @@ -15,16 +17,19 @@ export function PinBtn({ isPinned }) { const handlePin = async () => { if (!isPinned) { const famousSaying = sessionStorage.getItem("famous_saying"); - const todos = sessionStorage.getItem("todos"); + const todos = JSON.parse(sessionStorage.getItem("todos")); const userName = "test"; try { - await client.postPinnedReceipt({ + const response = await client.postPinnedReceipt({ todos, famous_saying: famousSaying, receipt_name: userName, pinned: true, }); + const receiptId = response.data; + console.log(receiptId); + setVisibleModal(!pinned); } catch (error) { AbortIfError(error); } @@ -36,10 +41,15 @@ export function PinBtn({ isPinned }) { setPinned(!pinned); }; + const closePinnedModal = () => { + setVisibleModal(false); + }; + return ( {pinned ? "PINNED" : "PIN"} + {visibleModal && } ); } diff --git a/src/components/atoms/TextBtn/TextBtn.jsx b/src/components/atoms/TextBtn/TextBtn.jsx index 2dca02e..a0793b7 100644 --- a/src/components/atoms/TextBtn/TextBtn.jsx +++ b/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 ( - + {children} ); diff --git a/src/components/atoms/TextBtn/TextBtn.styles.jsx b/src/components/atoms/TextBtn/TextBtn.styles.jsx index b3cad1f..7a70b64 100644 --- a/src/components/atoms/TextBtn/TextBtn.styles.jsx +++ b/src/components/atoms/TextBtn/TextBtn.styles.jsx @@ -1,8 +1,10 @@ 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]}; `; diff --git a/src/components/organisms/MySection/MySection.jsx b/src/components/organisms/MySection/MySection.jsx index 6ed73fc..a8d6e5c 100644 --- a/src/components/organisms/MySection/MySection.jsx +++ b/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) => { diff --git a/src/components/organisms/PinnedModal/PinnedModal.jsx b/src/components/organisms/PinnedModal/PinnedModal.jsx new file mode 100644 index 0000000..a3ce086 --- /dev/null +++ b/src/components/organisms/PinnedModal/PinnedModal.jsx @@ -0,0 +1,38 @@ +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 ( + + + + + 영수증이 저장되었습니다 {/* */} + + + + Cancel + + { + navigate("/my"); + }} + type="bold" + size="sm" + > + Check Receipt + + + + + ); +} diff --git a/src/components/organisms/PinnedModal/PinnedModal.style.jsx b/src/components/organisms/PinnedModal/PinnedModal.style.jsx new file mode 100644 index 0000000..d7c24db --- /dev/null +++ b/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: center; + 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; +`; diff --git a/src/components/organisms/PinnedModal/index.js b/src/components/organisms/PinnedModal/index.js new file mode 100644 index 0000000..22cacc8 --- /dev/null +++ b/src/components/organisms/PinnedModal/index.js @@ -0,0 +1 @@ +export { PinnedModal } from "./PinnedModal"; diff --git a/src/components/organisms/PomodoroBottomSheet/PomodoroBottomSheet.jsx b/src/components/organisms/PomodoroBottomSheet/PomodoroBottomSheet.jsx index b66a635..cab2b43 100644 --- a/src/components/organisms/PomodoroBottomSheet/PomodoroBottomSheet.jsx +++ b/src/components/organisms/PomodoroBottomSheet/PomodoroBottomSheet.jsx @@ -67,7 +67,8 @@ export function PomodoroBottomSheet({ isOpen, onClose, todo, onEdit }) { useEffect(() => { if (!isRunning) { - const remainTime = timer + POMODORO_TIME - count; + const remainTime = timer + (POMODORO_TIME - count); + console.log("remainTime:", remainTime); onEdit(id, { ...todo, timer: remainTime, diff --git a/src/components/templates/TwotBtnTemplate/TwotBtnTemplate.styles.jsx b/src/components/templates/TwotBtnTemplate/TwotBtnTemplate.styles.jsx index c17c17e..df7ad28 100644 --- a/src/components/templates/TwotBtnTemplate/TwotBtnTemplate.styles.jsx +++ b/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: flex-end; + justify-content: space-around; + width: 70%; `; export const Divider = styled.hr` From b6d590465e9f29f1ad751867ddbbba0d7e5a7731 Mon Sep 17 00:00:00 2001 From: Madang Date: Wed, 21 Dec 2022 21:28:22 +0900 Subject: [PATCH 6/9] WIP #195 --- src/components/atoms/ReceiptPageBtns/PinBtn.jsx | 12 ++---------- src/components/organisms/PinnedModal/PinnedModal.jsx | 5 +++-- src/components/pages/ReceiptPage/ReceiptPage.jsx | 6 ++++-- 3 files changed, 9 insertions(+), 14 deletions(-) diff --git a/src/components/atoms/ReceiptPageBtns/PinBtn.jsx b/src/components/atoms/ReceiptPageBtns/PinBtn.jsx index bb74ec7..422457b 100644 --- a/src/components/atoms/ReceiptPageBtns/PinBtn.jsx +++ b/src/components/atoms/ReceiptPageBtns/PinBtn.jsx @@ -3,12 +3,10 @@ import { useEffect, useState } from "react"; import styled from "styled-components"; import { useReceiptClient } from "controllers/receiptController"; import { AbortIfError } from "controllers/error"; -import { PinnedModal } from "components/organisms/PinnedModal"; -export function PinBtn({ isPinned }) { +export function PinBtn({ isPinned, toggleVisible }) { const client = useReceiptClient(); const [pinned, setPinned] = useState(false); - const [visibleModal, setVisibleModal] = useState(false); useEffect(() => { if (isPinned) setPinned(true); @@ -28,8 +26,7 @@ export function PinBtn({ isPinned }) { pinned: true, }); const receiptId = response.data; - console.log(receiptId); - setVisibleModal(!pinned); + toggleVisible(!pinned); } catch (error) { AbortIfError(error); } @@ -41,15 +38,10 @@ export function PinBtn({ isPinned }) { setPinned(!pinned); }; - const closePinnedModal = () => { - setVisibleModal(false); - }; - return ( {pinned ? "PINNED" : "PIN"} - {visibleModal && } ); } diff --git a/src/components/organisms/PinnedModal/PinnedModal.jsx b/src/components/organisms/PinnedModal/PinnedModal.jsx index a3ce086..96e59c2 100644 --- a/src/components/organisms/PinnedModal/PinnedModal.jsx +++ b/src/components/organisms/PinnedModal/PinnedModal.jsx @@ -27,9 +27,10 @@ export function PinnedModal({ onClose }) { navigate("/my"); }} type="bold" - size="sm" > - Check Receipt + Check +
+ Receipts diff --git a/src/components/pages/ReceiptPage/ReceiptPage.jsx b/src/components/pages/ReceiptPage/ReceiptPage.jsx index c5f4274..6856279 100644 --- a/src/components/pages/ReceiptPage/ReceiptPage.jsx +++ b/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; @@ -38,9 +39,10 @@ export function ReceiptPage() { - + setPinBtnModalVisible(bool)} /> {modalOn && setModalOn(false)} />} + {pinBtnModalVisible && setPinBtnModalVisible(false)} />} ); } From e060d8e0a961d3d8b340007045ef73a93f4cec8e Mon Sep 17 00:00:00 2001 From: Madang Date: Wed, 21 Dec 2022 21:39:16 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feature=20#195=20:=20=ED=95=80=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EB=AA=A8=EB=8B=AC=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/index.js | 1 + src/components/organisms/PinnedModal/PinnedModal.jsx | 4 +--- src/components/organisms/PinnedModal/PinnedModal.style.jsx | 2 +- .../templates/ModalTemplate/ModalTemplate.styles.jsx | 2 +- .../templates/TwotBtnTemplate/TwotBtnTemplate.styles.jsx | 2 +- 5 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/index.js b/src/components/index.js index eb01867..c493a0a 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -62,6 +62,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"; /** diff --git a/src/components/organisms/PinnedModal/PinnedModal.jsx b/src/components/organisms/PinnedModal/PinnedModal.jsx index 96e59c2..9f54621 100644 --- a/src/components/organisms/PinnedModal/PinnedModal.jsx +++ b/src/components/organisms/PinnedModal/PinnedModal.jsx @@ -28,9 +28,7 @@ export function PinnedModal({ onClose }) { }} type="bold" > - Check -
- Receipts + My Page diff --git a/src/components/organisms/PinnedModal/PinnedModal.style.jsx b/src/components/organisms/PinnedModal/PinnedModal.style.jsx index d7c24db..26b632b 100644 --- a/src/components/organisms/PinnedModal/PinnedModal.style.jsx +++ b/src/components/organisms/PinnedModal/PinnedModal.style.jsx @@ -18,7 +18,7 @@ export const ModalContainer = styled.div` display: flex; flex-direction: column; align-items: flex-start; - justify-content: center; + justify-content: space-between; width: 80%; `; diff --git a/src/components/templates/ModalTemplate/ModalTemplate.styles.jsx b/src/components/templates/ModalTemplate/ModalTemplate.styles.jsx index c2bfc2d..07c38e2 100644 --- a/src/components/templates/ModalTemplate/ModalTemplate.styles.jsx +++ b/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; `; diff --git a/src/components/templates/TwotBtnTemplate/TwotBtnTemplate.styles.jsx b/src/components/templates/TwotBtnTemplate/TwotBtnTemplate.styles.jsx index df7ad28..d708776 100644 --- a/src/components/templates/TwotBtnTemplate/TwotBtnTemplate.styles.jsx +++ b/src/components/templates/TwotBtnTemplate/TwotBtnTemplate.styles.jsx @@ -25,7 +25,7 @@ export const ButtonContainer = styled.div` padding: 0.5rem; display: flex; flex-direction: row; - align-items: flex-end; + align-items: center; justify-content: space-around; width: 70%; `; From 154450cbea5ac5225962178ad3c18abc971b9652 Mon Sep 17 00:00:00 2001 From: Madang Date: Wed, 21 Dec 2022 21:54:25 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Co-authored-by:=20=EB=B0=95=EC=A3=BC?= =?UTF-8?q?=EC=98=81=20=20Co-au?= =?UTF-8?q?thored-by:=20Davey=20=20Co-authored-by:=20S?= =?UTF-8?q?ang=20Woo=20Yang=20(Dan)=20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../organisms/PomodoroBottomSheet/PomodoroBottomSheet.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/organisms/PomodoroBottomSheet/PomodoroBottomSheet.jsx b/src/components/organisms/PomodoroBottomSheet/PomodoroBottomSheet.jsx index 2660a73..6dcb6e5 100644 --- a/src/components/organisms/PomodoroBottomSheet/PomodoroBottomSheet.jsx +++ b/src/components/organisms/PomodoroBottomSheet/PomodoroBottomSheet.jsx @@ -66,8 +66,7 @@ export function PomodoroBottomSheet({ isOpen, onClose, todo, onEdit }) { useEffect(() => { if (!isRunning) { - const remainTime = timer + (POMODORO_TIME - count); - console.log("remainTime:", remainTime); + const remainTime = timer + POMODORO_TIME - count; onEdit(id, { ...todo, timer: remainTime, From 286fc9cdee2f0aee4c7628dec2d67d05183abefc Mon Sep 17 00:00:00 2001 From: Madang Date: Wed, 21 Dec 2022 22:13:57 +0900 Subject: [PATCH 9/9] =?UTF-8?q?[refactor][#195]=20=EC=BB=A8=ED=94=8C?= =?UTF-8?q?=EB=A6=AD=ED=8A=B8=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../atoms/ReceiptQuotes/ReceiptQuotes.jsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx b/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx index 6c92d6d..1e5dead 100644 --- a/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx +++ b/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from "react"; import * as S from "./ReceiptQuotes.styles"; +import useAsync from "../../../hooks/useAsync"; +import { useEffect } from "react"; /** * ReceiptQuotes @@ -10,20 +11,21 @@ import * as S from "./ReceiptQuotes.styles"; * @returns */ export function ReceiptQuotes() { - const [quotesState, setQuotes] = useState(); + const [state] = useAsync(getQuotes, []); + const { loading, data: quote, error } = state; + // TODO: 리팩토링 예정 useEffect(() => { - (async () => { - await fetch("https://api.adviceslip.com/advice") - .then((response) => response.json()) - .then((data) => setQuotes(data.slip.advice)) - .catch((e) => console.error(e)); - })(); - }, []); + sessionStorage.setItem("famous_saying", quote); + }, [quote]); - useEffect(() => { - sessionStorage.setItem("famous_saying", quotesState); - }, [quotesState]); + return {loading || error ? "Well done!" : quote}; +} + +async function getQuotes() { + const response = await fetch("https://api.adviceslip.com/advice").then((response) => + response.json(), + ); - return {quotesState || "Well done!"}; + return response.slip.advice; }