[리팩터링] 오늘의시간, 할일적기 페이지 리팩터링

src/App.js

@@ -2,13 +2,11 @@ import GlobalStyle from './styles/GlobalStyle'
 import AppRouter from './routes/router'
 import { RecoilRoot } from 'recoil'
 
-const App = () => {
-	return (
-		<RecoilRoot>
-			<GlobalStyle />
-			<AppRouter />
-		</RecoilRoot>
-	)
-}
+const App = () => (
+	<RecoilRoot>
+		<GlobalStyle />
+		<AppRouter />
+	</RecoilRoot>
+)
 
 export default App

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 (
 		<Wrapper>
 			<NavBar backIcon />
 
 			<SubTitle>
-				<Text style={{ textAlign: 'start', fontSize: '2.2rem', padding: '0 3rem' }}>
+				<Text size={2.2} textAlign={'start'}>
 					오늘 해야할 일들은 무엇이 있나요?
 				</Text>
-				<Text
-					style={{ textAlign: 'start', fontSize: '1.3rem', color: '#919191', padding: '0 3rem' }}
-				>
+				<Text size={1.3} textAlign={'start'} color={'#919191'}>
 					클릭하여 삭제할 수 있습니다.
 				</Text>
 			</SubTitle>
@@ -83,7 +48,7 @@ export const CreateTask = () => {
 						</Task>
 					))}
 				</TaskArea>
-				<Form onSubmit={e => handleSubmit(e)}>
+				<Form onSubmit={handleSubmit}>
 					<Input
 						type="text"
 						value={task}
@@ -120,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;

src/pages/createTime.jsx

@@ -27,31 +27,22 @@ 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 (
 		<Wrapper>
 			<NavBar backIcon />
 
 			<SubTitle>
-				<Text style={{ textAlign: 'start', fontSize: '2.2rem', padding: '0 3rem' }}>
+				<Text size={2.2} textAlign={'start'}>
 					오늘 사용할 수 있는 시간은 얼마인가요?
 				</Text>
 			</SubTitle>
@@ -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;

src/pages/createTimeDivider.jsx

@@ -80,15 +80,15 @@ export const CreateTimeDivider = () => {
 		<>
 			<NavBar backIcon />
 			<SubTitle>
-				<Text style={{ textAlign: 'start', fontSize: '2.2rem', padding: '0 3rem' }}>
+				<Text size={2.2} textAlign={'start'}>
 					오늘 해야할 일들에 시간을 분배하세요.
 				</Text>
 			</SubTitle>
 			<TimeSection>
 				<Text
 					size={2.0}
 					color={themeColors.primary}
-					style={{ color: themeColors.primary, fontSize: '2.0rem', marginBottom: '1rem' }}
+					style={{ fontSize: '2.0rem', marginBottom: '1rem' }}
 				>
 					남은 분배 가능 시간
 				</Text>
@@ -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;

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 (

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

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