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 diff --git a/src/pages/createTask.jsx b/src/pages/createTask.jsx index be63f8c..65e61fc 100644 --- a/src/pages/createTask.jsx +++ b/src/pages/createTask.jsx @@ -1,5 +1,6 @@ -import React, { useMemo, useState } from 'react' -import { Link, useLocation, useNavigate } from 'react-router-dom' +import useCreateTasks from 'shared/hooks/useCreateTasks' +import useNavigation from 'shared/hooks/useNavigation' +import { Link, useLocation } from 'react-router-dom' import styled from 'styled-components' import { colors } from 'shared/constants/colors' @@ -15,62 +16,26 @@ const BUTTON_TEXT = Object.freeze({ }) export const CreateTask = () => { - const navigate = useNavigate() const location = useLocation() + const { tasks, task, spareTime, setSpareTime, setTask, removeTask, handleSubmit, isValidTasks } = + useCreateTasks() - const [spareTime, setSpareTime] = useState({ hour: 0, minute: 0 }) - const [task, setTask] = useState('') - const [tasks, setTasks] = useState([]) - const [isValidTasks, setIsValidTasks] = useState(false) - - 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 handleIsValidTask = tasks => { - if (tasks.length > 0) { - setIsValidTasks(true) - return - } - setIsValidTasks(false) + const navigationValidator = () => { + const { spareTime } = location.state + setSpareTime(spareTime) } - useMemo(() => { - try { - const { spareTime } = location.state - setSpareTime(spareTime) - } catch { - navigate('/home') - } - }, [location, navigate]) - - useMemo(() => { - handleIsValidTask(tasks) - }, [tasks]) + useNavigation(navigationValidator) return ( - + 오늘 해야할 일들은 무엇이 있나요? - + 클릭하여 삭제할 수 있습니다. @@ -83,7 +48,7 @@ export const CreateTask = () => { ))} -
handleSubmit(e)}> + { 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 ( - + 오늘 사용할 수 있는 시간은 얼마인가요? @@ -96,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 ( 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 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