From 79ee06b0ea903e914a7197b0ac264bb985ab3c25 Mon Sep 17 00:00:00 2001 From: jayjeong8 Date: Wed, 21 Dec 2022 15:57:03 +0900 Subject: [PATCH 1/4] =?UTF-8?q?style:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20import,=20return=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F?= =?UTF-8?q?=20JSDoc=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/SquareBtn/SquareBtn.jsx | 12 +++--------- src/components/index.js | 2 -- .../molecules/TodoListBlock/TodoListBlock.jsx | 5 ++--- .../pages/RedirectionPage/RedirectionPage.jsx | 1 - 4 files changed, 5 insertions(+), 15 deletions(-) diff --git a/src/components/atoms/SquareBtn/SquareBtn.jsx b/src/components/atoms/SquareBtn/SquareBtn.jsx index 2bbf03a..57d32b2 100644 --- a/src/components/atoms/SquareBtn/SquareBtn.jsx +++ b/src/components/atoms/SquareBtn/SquareBtn.jsx @@ -1,5 +1,4 @@ import * as S from "./SquareBtn.styles"; -import { ReactComponent as ArrowBelowIcon } from "assets/svg/arrow_below_sm_icon.svg"; /** * SquareBtn component @@ -9,20 +8,15 @@ import { ReactComponent as ArrowBelowIcon } from "assets/svg/arrow_below_sm_icon * * @param {function} onClick - 버튼을 클릭했을 때 실행되는 이벤트 * @param {React.Component} children - 버튼의 텍스트 - * + * @param type + * @param color * @returns {React.Component} 네모난 버튼 컴포넌트 */ -export function SquareBtn({ - onClick, - children, - type = "default", - color = "#191919", -}) { +export function SquareBtn({ onClick, children, type = "default", color = "#191919" }) { return ( {children} - {/**/} ); } diff --git a/src/components/index.js b/src/components/index.js index eb01867..bb19bbb 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,8 +4,6 @@ * atoms */ //TodoPage -import SaveBtn from "./atoms/ReceiptPageBtns/SaveBtn"; - export { HeaderText } from "./atoms/HeaderText"; export { DayOfWeek } from "./atoms/DayOfWeek"; export { SquareBtn } from "./atoms/SquareBtn"; diff --git a/src/components/molecules/TodoListBlock/TodoListBlock.jsx b/src/components/molecules/TodoListBlock/TodoListBlock.jsx index 1f69b28..7b48fab 100644 --- a/src/components/molecules/TodoListBlock/TodoListBlock.jsx +++ b/src/components/molecules/TodoListBlock/TodoListBlock.jsx @@ -35,7 +35,7 @@ function TodoItem({ todo, onRemove, onEdit, onOpenBottomSheet }) { } }; - const handleClickToDoRemoveButton = (e) => { + const handleClickToDoRemoveButton = () => { onRemove(todo.id); }; @@ -78,6 +78,7 @@ function TodoItem({ todo, onRemove, onEdit, onOpenBottomSheet }) { * @param {Array} todos - todo list * @param {Function} onRemove - todo 삭제 * @param {Function} onEdit - todo 수정 + * @param {Function} onOpenBottomSheet - 하단 포모도로 창 오픈 * @returns */ @@ -86,12 +87,10 @@ export function TodoListBlock({ todos, onRemove, onEdit, onOpenBottomSheet }) { const setRunningTimer = (key) => { setHasRuuningTimer(key); - return; }; const resetRunningTimer = () => { setHasRuuningTimer(""); - return; }; useEffect(() => { diff --git a/src/components/pages/RedirectionPage/RedirectionPage.jsx b/src/components/pages/RedirectionPage/RedirectionPage.jsx index 6b9824e..b5e9f82 100644 --- a/src/components/pages/RedirectionPage/RedirectionPage.jsx +++ b/src/components/pages/RedirectionPage/RedirectionPage.jsx @@ -1,4 +1,3 @@ -import { BackBtn } from "components"; import ReceiptImg from "assets/images/receipt_img.png"; import * as S from "./RedirectionPage.styles"; import { useNavigate } from "react-router-dom"; From 9ec1e88eaf2e1bdc1ac922a61bb14f86c940642e Mon Sep 17 00:00:00 2001 From: jayjeong8 Date: Wed, 21 Dec 2022 16:08:57 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix=20#189=20:=20=EC=98=81=EC=88=98?= =?UTF-8?q?=EC=A6=9D=20=ED=95=AD=EB=AA=A9=EC=9D=B4=20=EB=A7=8E=EC=95=84?= =?UTF-8?q?=EC=A7=80=EB=A9=B4=20=EC=98=81=EC=88=98=EC=A6=9D=EC=97=90=20?= =?UTF-8?q?=EA=B2=80=EC=9D=80=20=EC=A4=84=EC=9D=B4=20=EC=83=9D=EA=B8=B0?= =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 영수증 텍스쳐 이미지보다 영수증이 커질 경우 텍스쳐 이미지가 repeat 되면서 사이에 빈 틈이 생겨 백그라운드의 검정색이 나타나는 문제였습니다. 영수증 텍스쳐가 영수증 사이즈만큼 덮을 수 있게 하여 해결하였습니다. --- .../ReceiptPaperContents/ReceiptPaperContents.styles.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/molecules/ReceiptPaperContents/ReceiptPaperContents.styles.jsx b/src/components/molecules/ReceiptPaperContents/ReceiptPaperContents.styles.jsx index d1127fd..cff2a11 100644 --- a/src/components/molecules/ReceiptPaperContents/ReceiptPaperContents.styles.jsx +++ b/src/components/molecules/ReceiptPaperContents/ReceiptPaperContents.styles.jsx @@ -16,7 +16,7 @@ export const Paper = styled(Center)` letter-spacing: -0.5px; line-height: 1.4; color: #2f2f2f; - background: url(${paperTexture}); + background: url(${paperTexture}) no-repeat center/cover; ; `; export const Title = styled.h1` From a98e95cf7c468afe66ec54c152f4b409be39a1b1 Mon Sep 17 00:00:00 2001 From: jayjeong8 Date: Wed, 21 Dec 2022 17:41:32 +0900 Subject: [PATCH 3/4] =?UTF-8?q?refactor=20#202=20:=20=EC=98=81=EC=88=98?= =?UTF-8?q?=EC=A6=9D=20=EB=AA=85=EC=96=B8=20=EC=83=81=ED=83=9C=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=EB=A5=BC=20useReducer=EB=A5=BC=20=EC=9D=B4=EC=9A=A9?= =?UTF-8?q?=ED=95=9C=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 상태에 따라 나타나는 명언을 더 쉽게 컨트롤하기 위해 변경했습니다. --- .../atoms/ReceiptQuotes/ReceiptQuotes.jsx | 23 ++++---- src/hooks/useAsync.jsx | 54 +++++++++++++++++++ 2 files changed, 65 insertions(+), 12 deletions(-) create mode 100644 src/hooks/useAsync.jsx diff --git a/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx b/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx index 8ce7899..6db98da 100644 --- a/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx +++ b/src/components/atoms/ReceiptQuotes/ReceiptQuotes.jsx @@ -1,5 +1,5 @@ -import { useEffect, useState } from "react"; import * as S from "./ReceiptQuotes.styles"; +import useAsync from "../../../hooks/useAsync"; /** * ReceiptQuotes @@ -10,18 +10,17 @@ import * as S from "./ReceiptQuotes.styles"; * @returns */ export function ReceiptQuotes() { - const [quotesState, setQuotes] = useState(); + const [state] = useAsync(getQuotes, []); + const { loading, data: quote, error } = state; + console.log(quote); - useEffect(() => { - const getQuotes = async () => { - await fetch("https://api.adviceslip.com/advice") - .then((response) => response.json()) - .then((data) => setQuotes(data.slip.advice)) - .catch((e) => console.error(e)); - }; + return {loading || error ? "Well done!" : quote}; +} - getQuotes(); - }, []); +async function getQuotes() { + const response = await fetch("https://api.adviceslip.com/advice").then((response) => + response.json(), + ); - return {quotesState || "Well done!"}; + return response.slip.advice; } diff --git a/src/hooks/useAsync.jsx b/src/hooks/useAsync.jsx new file mode 100644 index 0000000..e4be0c2 --- /dev/null +++ b/src/hooks/useAsync.jsx @@ -0,0 +1,54 @@ +// 참고 자료 - https://react.vlpt.us/integrate-api/03-useAsync.html + +import { useReducer, useEffect } from "react"; + +function reducer(state, action) { + switch (action.type) { + case "LOADING": + return { + loading: true, + data: null, + error: null, + }; + case "SUCCESS": + return { + loading: false, + data: action.data, + error: null, + }; + case "ERROR": + return { + loading: false, + data: null, + error: action.error, + }; + default: + throw new Error(`Unhandled action type: ${action.type}`); + } +} + +function useAsync(callback, deps = []) { + const [state, dispatch] = useReducer(reducer, { + loading: false, + data: null, + error: false, + }); + + const fetchData = async () => { + dispatch({ type: "LOADING" }); + try { + const data = await callback(); + dispatch({ type: "SUCCESS", data }); + } catch (e) { + dispatch({ type: "ERROR", error: e }); + } + }; + + useEffect(() => { + fetchData(); + }, deps); + + return [state, fetchData]; +} + +export default useAsync; From 5023576e42b437a3b99004b052320ecb455fd554 Mon Sep 17 00:00:00 2001 From: jayjeong8 Date: Wed, 21 Dec 2022 21:55:16 +0900 Subject: [PATCH 4/4] =?UTF-8?q?style=20:=20JSDoc=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=EB=B0=8F=20prop=EC=97=90=20=EB=A7=9E?= =?UTF-8?q?=EB=8A=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/SquareBtn/SquareBtn.jsx | 4 ++-- src/components/atoms/SquareBtn/SquareBtn.styles.jsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/atoms/SquareBtn/SquareBtn.jsx b/src/components/atoms/SquareBtn/SquareBtn.jsx index 57d32b2..85bcd9d 100644 --- a/src/components/atoms/SquareBtn/SquareBtn.jsx +++ b/src/components/atoms/SquareBtn/SquareBtn.jsx @@ -8,8 +8,8 @@ import * as S from "./SquareBtn.styles"; * * @param {function} onClick - 버튼을 클릭했을 때 실행되는 이벤트 * @param {React.Component} children - 버튼의 텍스트 - * @param type - * @param color + * @param {String} color - 텍스트의 색 ※context에 지정된 색만 사용할 것 "bk"(default) / "wt" / "red" / "gray" / "green" / "lightGray" + * @param {String} type - 텍스트의 타입 "default" / "bold" * @returns {React.Component} 네모난 버튼 컴포넌트 */ diff --git a/src/components/atoms/SquareBtn/SquareBtn.styles.jsx b/src/components/atoms/SquareBtn/SquareBtn.styles.jsx index 1783de8..640c1e3 100644 --- a/src/components/atoms/SquareBtn/SquareBtn.styles.jsx +++ b/src/components/atoms/SquareBtn/SquareBtn.styles.jsx @@ -9,7 +9,8 @@ export const BtnContainer = styled.div` align-items: center; box-sizing: border-box; background-color: ${(props) => (props.type === "default" ? props.theme.wt : `#FFFFFF`)}; - color: ${(props) => props.color}; + color: ${(props) => props.theme[props.color]}; + font-weight: ${(props) => (props.type === "bold" ? "bold" : "400")}; font-family: "Courier Prime", monospace; font-size: 1.125rem; cursor: pointer;