From 8b9c8fe29b05e246e9afaa16e53a30a38cc693d3 Mon Sep 17 00:00:00 2001 From: dahye1013 Date: Thu, 16 Jun 2022 02:06:03 +0900 Subject: [PATCH 1/6] =?UTF-8?q?refactor:=20=EB=A1=9C=EC=A7=81=20=EB=AF=B8?= =?UTF-8?q?=EC=A1=B4=EC=9E=AC=20=ED=95=A8=EC=88=98=20return=20=EC=83=9D?= =?UTF-8?q?=EB=9E=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 945397f..39e9c21 100644 --- a/src/App.js +++ b/src/App.js @@ -2,13 +2,11 @@ import GlobalStyle from './styles/GlobalStyle' import AppRouter from './routes/router' import { RecoilRoot } from 'recoil' -const App = () => { - return ( - - - - - ) -} +const App = () => ( + + + + +) export default App From 7262e158806dd7221061723c5e631d755b4a194c Mon Sep 17 00:00:00 2001 From: dahye1013 Date: Thu, 16 Jun 2022 02:37:46 +0900 Subject: [PATCH 2/6] =?UTF-8?q?refactor:=20useMemo=20=ED=9B=85=20=EB=A9=94?= =?UTF-8?q?=EB=AA=A8=EC=A0=9C=EC=9D=B4=EC=85=98=20=EA=B0=92=20=EB=B0=98?= =?UTF-8?q?=ED=99=98=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/createTask.jsx | 18 +++--------------- src/pages/createTime.jsx | 17 ++++------------- 2 files changed, 7 insertions(+), 28 deletions(-) diff --git a/src/pages/createTask.jsx b/src/pages/createTask.jsx index be63f8c..f333f0b 100644 --- a/src/pages/createTask.jsx +++ b/src/pages/createTask.jsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState } from 'react' +import React, { useMemo, useEffect, useState } from 'react' import { Link, useLocation, useNavigate } from 'react-router-dom' import styled from 'styled-components' @@ -21,7 +21,7 @@ export const CreateTask = () => { const [spareTime, setSpareTime] = useState({ hour: 0, minute: 0 }) const [task, setTask] = useState('') const [tasks, setTasks] = useState([]) - const [isValidTasks, setIsValidTasks] = useState(false) + const isValidTasks = useMemo(() => tasks.length > 0, [tasks]) const handleSubmit = e => { e.preventDefault() @@ -39,15 +39,7 @@ export const CreateTask = () => { setTasks(filteredTasks) } - const handleIsValidTask = tasks => { - if (tasks.length > 0) { - setIsValidTasks(true) - return - } - setIsValidTasks(false) - } - - useMemo(() => { + useEffect(() => { try { const { spareTime } = location.state setSpareTime(spareTime) @@ -56,10 +48,6 @@ export const CreateTask = () => { } }, [location, navigate]) - useMemo(() => { - handleIsValidTask(tasks) - }, [tasks]) - return ( diff --git a/src/pages/createTime.jsx b/src/pages/createTime.jsx index 554722e..afdf093 100644 --- a/src/pages/createTime.jsx +++ b/src/pages/createTime.jsx @@ -27,25 +27,16 @@ const BUTTON_TEXT = Object.freeze({ const CreateTime = () => { const [spareTime, setSpareTime] = useState({ [TIME_TYPE.HOUR]: '0', [TIME_TYPE.MINUTE]: '0' }) - const [isValidSpareTime, setIsValidSpareTime] = useState(false) + const isValidSpareTime = useMemo( + () => spareTime.hour !== '0' || spareTime.minute !== '0', + [spareTime], + ) const handleSpareTime = e => { const { name, value } = e.target setSpareTime({ ...spareTime, [name]: value }) } - const handleIsValidSpareTime = spareTime => { - if (spareTime.hour === '0' && spareTime.minute === '0') { - setIsValidSpareTime(false) - return - } - setIsValidSpareTime(true) - } - - useMemo(() => { - handleIsValidSpareTime(spareTime) - }, [spareTime]) - return ( From 218d14e0c7539bf7162985bad60fc6622e63b6e0 Mon Sep 17 00:00:00 2001 From: dahye1013 Date: Thu, 16 Jun 2022 02:41:15 +0900 Subject: [PATCH 3/6] =?UTF-8?q?refactor:=20=EB=B0=9B=EB=8A=94=20params?= =?UTF-8?q?=EC=99=80=20=EB=84=98=EA=B2=A8=EC=A3=BC=EB=8A=94=20params=20?= =?UTF-8?q?=EC=9D=BC=EC=B9=98=EC=8B=9C=20=EC=9D=B8=EC=9E=90=20=EC=83=9D?= =?UTF-8?q?=EB=9E=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/createTask.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/createTask.jsx b/src/pages/createTask.jsx index f333f0b..c545d4f 100644 --- a/src/pages/createTask.jsx +++ b/src/pages/createTask.jsx @@ -71,7 +71,7 @@ export const CreateTask = () => { ))} -
handleSubmit(e)}> + Date: Thu, 16 Jun 2022 03:05:47 +0900 Subject: [PATCH 4/6] =?UTF-8?q?refactor:=20=ED=95=A0=EC=9D=BC=EB=A7=8C?= =?UTF-8?q?=EB=93=A4=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20custom=20hoo?= =?UTF-8?q?k=EC=9C=BC=EB=A1=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B6=94?= =?UTF-8?q?=EC=83=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/createTask.jsx | 26 ++++---------------- src/shared/hooks/useCreateTasks.js | 38 ++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 22 deletions(-) create mode 100644 src/shared/hooks/useCreateTasks.js diff --git a/src/pages/createTask.jsx b/src/pages/createTask.jsx index c545d4f..b3a85ce 100644 --- a/src/pages/createTask.jsx +++ b/src/pages/createTask.jsx @@ -1,4 +1,5 @@ -import React, { useMemo, useEffect, useState } from 'react' +import { useEffect } from 'react' +import useCreateTasks from 'shared/hooks/useCreateTasks' import { Link, useLocation, useNavigate } from 'react-router-dom' import styled from 'styled-components' @@ -17,27 +18,8 @@ const BUTTON_TEXT = Object.freeze({ export const CreateTask = () => { const navigate = useNavigate() const location = useLocation() - - const [spareTime, setSpareTime] = useState({ hour: 0, minute: 0 }) - const [task, setTask] = useState('') - const [tasks, setTasks] = useState([]) - const isValidTasks = useMemo(() => tasks.length > 0, [tasks]) - - const handleSubmit = e => { - e.preventDefault() - const trimmedTask = task.trim() - - if (trimmedTask) { - setTasks([...tasks, { id: `${Date.now()}${tasks.length}`, task: trimmedTask }]) - } - - setTask('') - } - - const removeTask = removeId => { - const filteredTasks = tasks.filter(({ id }) => removeId !== id) - setTasks(filteredTasks) - } + const { tasks, task, spareTime, setSpareTime, setTask, removeTask, handleSubmit, isValidTasks } = + useCreateTasks() useEffect(() => { try { diff --git a/src/shared/hooks/useCreateTasks.js b/src/shared/hooks/useCreateTasks.js new file mode 100644 index 0000000..71ae872 --- /dev/null +++ b/src/shared/hooks/useCreateTasks.js @@ -0,0 +1,38 @@ +import { useMemo, useState } from 'react' + +const useCreateTasks = () => { + const [spareTime, setSpareTime] = useState({ hour: 0, minute: 0 }) + const [task, setTask] = useState('') + const [tasks, setTasks] = useState([]) + const isValidTasks = useMemo(() => tasks.length > 0, [tasks]) + + const handleSubmit = e => { + e.preventDefault() + const trimmedTask = task.trim() + + if (trimmedTask) { + setTasks([...tasks, { id: `${Date.now()}${tasks.length}`, task: trimmedTask }]) + } + + setTask('') + } + + const removeTask = removeId => { + const filteredTasks = tasks.filter(({ id }) => removeId !== id) + setTasks(filteredTasks) + } + + return { + spareTime, + setSpareTime, + task, + setTask, + tasks, + setTasks, + isValidTasks, + handleSubmit, + removeTask, + } +} + +export default useCreateTasks From 204bc74ca8b0f376c1316a3691b219e84a7766d3 Mon Sep 17 00:00:00 2001 From: dahye1013 Date: Thu, 16 Jun 2022 03:13:43 +0900 Subject: [PATCH 5/6] =?UTF-8?q?refactor:=20navigation=20guard=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20custom=20hook=EC=9C=BC=EB=A1=9C=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/createTask.jsx | 19 ++++++++----------- src/shared/hooks/useNavigation.js | 16 ++++++++++++++++ 2 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 src/shared/hooks/useNavigation.js diff --git a/src/pages/createTask.jsx b/src/pages/createTask.jsx index b3a85ce..5353aeb 100644 --- a/src/pages/createTask.jsx +++ b/src/pages/createTask.jsx @@ -1,6 +1,6 @@ -import { useEffect } from 'react' import useCreateTasks from 'shared/hooks/useCreateTasks' -import { Link, useLocation, useNavigate } from 'react-router-dom' +import useNavigation from 'shared/hooks/useNavigation' +import { Link, useLocation } from 'react-router-dom' import styled from 'styled-components' import { colors } from 'shared/constants/colors' @@ -16,19 +16,16 @@ const BUTTON_TEXT = Object.freeze({ }) export const CreateTask = () => { - const navigate = useNavigate() const location = useLocation() const { tasks, task, spareTime, setSpareTime, setTask, removeTask, handleSubmit, isValidTasks } = useCreateTasks() - useEffect(() => { - try { - const { spareTime } = location.state - setSpareTime(spareTime) - } catch { - navigate('/home') - } - }, [location, navigate]) + const navigationValidator = () => { + const { spareTime } = location.state + setSpareTime(spareTime) + } + + useNavigation(navigationValidator) return ( diff --git a/src/shared/hooks/useNavigation.js b/src/shared/hooks/useNavigation.js new file mode 100644 index 0000000..0b3be37 --- /dev/null +++ b/src/shared/hooks/useNavigation.js @@ -0,0 +1,16 @@ +import { useEffect } from 'react' +import { useLocation, useNavigate } from 'react-router-dom' + +const useNavigation = cb => { + const navigate = useNavigate() + const location = useLocation() + useEffect(() => { + try { + cb() + } catch { + navigate('/home') + } + }, [location, navigate]) +} + +export default useNavigation From 9dc0aa73c7f2ecfd931d030cf70f35fa21acb0a5 Mon Sep 17 00:00:00 2001 From: dahye1013 Date: Thu, 16 Jun 2022 03:33:38 +0900 Subject: [PATCH 6/6] =?UTF-8?q?refactor:=20css=20=EC=9D=B8=EB=9D=BC?= =?UTF-8?q?=EC=9D=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20styled=20component?= =?UTF-8?q?=EC=99=80=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EC=97=90=20=EC=97=AD=ED=95=A0=20=EC=9C=84=EC=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/createTask.jsx | 8 +++----- src/pages/createTime.jsx | 4 ++-- src/pages/createTimeDivider.jsx | 6 +++--- src/shared/components/Text.jsx | 5 +++-- 4 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/pages/createTask.jsx b/src/pages/createTask.jsx index 5353aeb..65e61fc 100644 --- a/src/pages/createTask.jsx +++ b/src/pages/createTask.jsx @@ -32,12 +32,10 @@ export const CreateTask = () => { - + 오늘 해야할 일들은 무엇이 있나요? - + 클릭하여 삭제할 수 있습니다. @@ -87,7 +85,7 @@ const Wrapper = styled.div` const SubTitle = styled.span` position: relative; - left: -5rem; + left: -2.5rem; display: flex; flex-direction: column; align-items: flex-start; diff --git a/src/pages/createTime.jsx b/src/pages/createTime.jsx index afdf093..bd46eb1 100644 --- a/src/pages/createTime.jsx +++ b/src/pages/createTime.jsx @@ -42,7 +42,7 @@ const CreateTime = () => { - + 오늘 사용할 수 있는 시간은 얼마인가요? @@ -87,7 +87,7 @@ const Wrapper = styled.div` ` const SubTitle = styled.span` position: relative; - left: -5rem; + left: -2.5rem; display: flex; align-items: flex-start; width: 24.5rem; diff --git a/src/pages/createTimeDivider.jsx b/src/pages/createTimeDivider.jsx index e868d7d..10a6a2b 100644 --- a/src/pages/createTimeDivider.jsx +++ b/src/pages/createTimeDivider.jsx @@ -80,7 +80,7 @@ export const CreateTimeDivider = () => { <> - + 오늘 해야할 일들에 시간을 분배하세요. @@ -88,7 +88,7 @@ export const CreateTimeDivider = () => { 남은 분배 가능 시간 @@ -147,7 +147,7 @@ const BoxContainer = styled.div` const SubTitle = styled.span` position: relative; - left: -5rem; + left: -2.5rem; display: flex; flex-direction: column; align-items: left; diff --git a/src/shared/components/Text.jsx b/src/shared/components/Text.jsx index 4fce7f7..6bf935b 100644 --- a/src/shared/components/Text.jsx +++ b/src/shared/components/Text.jsx @@ -1,11 +1,12 @@ import PropTypes from 'prop-types' -const Text = ({ children, block, size, strong, color, ...props }) => { +const Text = ({ children, block, size, strong, color, textAlign, ...props }) => { const Tag = block ? 'div' : 'span' const fontStyle = { fontWeight: strong ? 'bold' : undefined, fontSize: `${typeof size === 'number' ? `${size}rem` : size}`, - color: color, + color, + textAlign, } return (