[리팩토링] custom hooks를 사용한 리팩토링

src/pages/CreateNameIds/hooks/useNameTag.js

@@ -0,0 +1,30 @@
+import { useState } from 'react'
+import { useCreatingTimers } from '../../../shared/hooks/useCreatingTimers'
+
+const useNameTag = () => {
+	const { nameIds, addNameId, updateNameIds } = useCreatingTimers()
+	const [nameTag, setNameTag] = useState('')
+
+	const handleNameTagSubmit = e => {
+		e.preventDefault()
+		const trimmedName = nameTag.trim()
+
+		if (trimmedName) {
+			addNameId(`${Date.now()}${nameIds.length}`, trimmedName)
+		}
+
+		setNameTag('')
+	}
+	const removeNameTag = removeId => {
+		const filteredNameIds = nameIds.filter(({ id }) => removeId !== id)
+		updateNameIds(filteredNameIds)
+	}
+	return {
+		nameTag,
+		setNameTag,
+		handleNameTagSubmit,
+		removeNameTag,
+	}
+}
+
+export default useNameTag

src/pages/CreateTask/index.js → src/pages/CreateNameIds/index.js

@@ -1,6 +1,4 @@
-import useCreateTasks from './hooks/useCreateTasks'
-import useNavigation from 'shared/hooks/useNavigation'
-import { Link, useLocation } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
 import * as S from './style'
 import { colors } from 'shared/constants/colors'
@@ -10,23 +8,20 @@ import Text from 'shared/components/Text'
 import Button from 'shared/components/Button'
 import Input from 'shared/components/Input'
 import Badge from 'shared/components/Badge'
+import { useCreatingTimers } from '../../shared/hooks/useCreatingTimers'
+import { useMemo } from 'react'
+import useNameTags from './hooks/useNameTag'
 
 const BUTTON_TEXT = Object.freeze({
 	VALID: '계속 진행하기',
 	INVALID: '할 일을 입력해주세요',
 })
 
-const CreateTask = () => {
-	const location = useLocation()
-	const { tasks, task, spareTime, setSpareTime, setTask, removeTask, handleSubmit, isValidTasks } =
-		useCreateTasks()
+const CreateNameIds = () => {
+	const { nameIds } = useCreatingTimers()
+	const { nameTag, setNameTag, removeNameTag, handleNameTagSubmit } = useNameTags()
 
-	const navigationValidator = () => {
-		const { spareTime } = location.state
-		setSpareTime(spareTime)
-	}
-
-	useNavigation(navigationValidator)
+	const isValidNames = useMemo(() => nameIds.length > 0, [nameIds])
 
 	return (
 		<S.Wrapper>
@@ -43,17 +38,17 @@ const CreateTask = () => {
 
 			<S.Section>
 				<S.TaskArea>
-					{tasks.map(({ id, task }) => (
-						<Badge key={id} onClick={() => removeTask(id)}>
-							{task}
+					{nameIds.map(({ id, name }) => (
+						<Badge key={id} onClick={() => removeNameTag(id)}>
+							{name}
 						</Badge>
 					))}
 				</S.TaskArea>
-				<S.Form onSubmit={handleSubmit}>
+				<S.Form onSubmit={handleNameTagSubmit}>
 					<Input
 						type="text"
-						value={task}
-						onChange={e => setTask(e.target.value)}
+						value={nameTag}
+						onChange={e => setNameTag(e.target.value)}
 						autoFocus={true}
 						required
 					/>
@@ -64,14 +59,14 @@ const CreateTask = () => {
 			</S.Section>
 
 			<S.ButtonArea>
-				<Link to="/createTimeDivider" state={{ spareTime, tasks }}>
-					<Button disabled={!isValidTasks}>
-						{!isValidTasks ? BUTTON_TEXT.INVALID : BUTTON_TEXT.VALID}
+				<Link to="/divideTime">
+					<Button disabled={!isValidNames}>
+						{!isValidNames ? BUTTON_TEXT.INVALID : BUTTON_TEXT.VALID}
 					</Button>
 				</Link>
 			</S.ButtonArea>
 		</S.Wrapper>
 	)
 }
 
-export default CreateTask
+export default CreateNameIds

src/pages/CreateTime/index.js → src/pages/CreateSpareTime/index.js

@@ -1,11 +1,12 @@
-import React, { useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 
 import * as S from './style'
 import NavBar from 'shared/components/NavBar'
 import Text from 'shared/components/Text'
 import Button from 'shared/components/Button'
 import Select from 'shared/components/Select'
+import { TIME_TYPE, useCreatingTimers } from '../../shared/hooks/useCreatingTimers'
 
 const HOUR_NUMBERS = Array.from({ length: 24 }, (_, i) => {
 	return { label: `${i}`, value: i }
@@ -15,26 +16,22 @@ const MINUTE_NUMBERS = Array.from({ length: 6 }, (_, i) => {
 	return { label: `${i * 10}`, value: i * 10 }
 })
 
-const TIME_TYPE = Object.freeze({
-	HOUR: 'hour',
-	MINUTE: 'minute',
-})
-
 const BUTTON_TEXT = Object.freeze({
 	VALID: '다음 단계',
 	INVALID: '시간을 입력해주세요',
 })
 
-const CreateTime = () => {
-	const [spareTime, setSpareTime] = useState({ [TIME_TYPE.HOUR]: '0', [TIME_TYPE.MINUTE]: '0' })
+const CreateSpareTime = () => {
+	const { spareTime, updateSpareTime } = useCreatingTimers()
+
 	const isValidSpareTime = useMemo(
 		() => spareTime.hour !== '0' || spareTime.minute !== '0',
 		[spareTime],
 	)
 
-	const handleSpareTime = e => {
+	const handleSpareTimeChange = e => {
 		const { name, value } = e.target
-		setSpareTime({ ...spareTime, [name]: value })
+		updateSpareTime(name, value)
 	}
 
 	return (
@@ -52,20 +49,22 @@ const CreateTime = () => {
 					name={'hour'}
 					data={HOUR_NUMBERS}
 					style={{ width: '10rem' }}
-					onChange={handleSpareTime}
+					onChange={handleSpareTimeChange}
+					value={spareTime[TIME_TYPE.HOUR]}
 				/>
 				<Text size={2}>시간</Text>
 				<Select
 					name={'minute'}
 					data={MINUTE_NUMBERS}
+					value={spareTime[TIME_TYPE.MINUTE]}
 					style={{ width: '10rem' }}
-					onChange={handleSpareTime}
+					onChange={handleSpareTimeChange}
 				/>
 				<Text size={2}>분</Text>
 			</S.Section>
 
 			<S.ButtonArea>
-				<Link to="/createTask" state={{ spareTime }}>
+				<Link to="/createNameIds">
 					<Button disabled={!isValidSpareTime}>
 						{!isValidSpareTime ? BUTTON_TEXT.INVALID : BUTTON_TEXT.VALID}
 					</Button>
@@ -75,4 +74,4 @@ const CreateTime = () => {
 	)
 }
 
-export default CreateTime
+export default CreateSpareTime

src/shared/components/TaskBox.jsx → src/pages/DivideTime/components/TaskBox.jsx

@@ -1,15 +1,15 @@
 import { themeColors } from 'shared/constants/colors'
 import styled from 'styled-components'
-import Text from './Text'
+import Text from '../../../shared/components/Text'
 
-const TaskBox = ({ task, ...props }) => {
-	const { hour, minute } = task
+const TaskBox = ({ timer, ...props }) => {
+	const { hour, minute, name } = timer
 
 	return (
 		<BoxContainer {...props}>
 			<BoxWrapper>
 				<Text size={1.4} color={themeColors.primary}>
-					{task.task}
+					{name}
 				</Text>
 				<Text style={{ marginTop: '0.8rem', fontSize: '1.4rem' }}>
 					{hour.length === 1 ? `0${hour}` : hour} : {minute === '0' ? '00' : minute}