refactor: StepService.tsx 인풋 상태 input -> inputURL로 수정 (#224)

morib-in · Dec 17, 2024 · cfcde98 · cfcde98
1 parent 9788e7e
commit cfcde98
Showing 1 changed file with 13 additions and 13 deletions.
diff --git a/src/pages/OnboardingPage/components/Step/StepService/StepService.tsx b/src/pages/OnboardingPage/components/Step/StepService/StepService.tsx
@@ -11,25 +11,25 @@ interface StepServiceProps {
 
 const StepService = ({ setStep, FIELDS }: StepServiceProps) => {
 	const [activeTab, setActiveTab] = useState('비즈니스');
-	const [input, setInput] = useState('');
+	const [inputURL, setInputURL] = useState('');
 	const [selectedService, setSelectedService] = useState<string[]>([]);
 
 	const handleAddSelectedService = (service: string) => {
 		setSelectedService((prev) => [...prev, service]);
-		setInput('');
+		setInputURL('');
 	};
 
 	const handleRemoveSelectedService = (service: string) => {
 		setSelectedService((prev) => prev.filter((prevService) => prevService !== service));
 	};
 
-	const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
-		setInput(e.target.value);
+	const handleChangeInputURL = (e: ChangeEvent<HTMLInputElement>) => {
+		setInputURL(e.target.value);
 	};
 
 	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
 		if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
-			handleAddSelectedService(input);
+			handleAddSelectedService(inputURL);
 		}
 	};
 
@@ -51,8 +51,8 @@ const StepService = ({ setStep, FIELDS }: StepServiceProps) => {
 
 				<div className="flex flex-col justify-between">
 					<div>
-						<h1 className="title-bold-36 mb-[2rem] text-white">작업 시 사용할 서비스들을 입력해주세요</h1>
-						<p className="body-reg-24 mb-[2.3rem] text-gray-04">
+						<h1 className="mb-[2rem] text-white title-bold-36">작업 시 사용할 서비스들을 입력해주세요</h1>
+						<p className="mb-[2.3rem] text-gray-04 body-reg-24">
 							필요한 서비스에만 들어가고, 나의 온전한 집중 시간을 기록할 수 있어요. 만든 모립세트는 언제든 편집할 수
 							있어요.
 						</p>
@@ -76,17 +76,17 @@ const StepService = ({ setStep, FIELDS }: StepServiceProps) => {
 
 					<div className="flex h-[6.6rem] items-center justify-between rounded-[8px] bg-gray-bg-02 py-[1rem] pl-[2rem] pr-[1rem]">
 						<input
-							value={input}
+							value={inputURL}
 							onKeyDown={handleKeyDown}
-							onChange={handleChangeInput}
-							className="subhead-med-18 flex flex-grow bg-transparent text-gray-04 focus:outline-none"
+							onChange={handleChangeInputURL}
+							className="flex flex-grow bg-transparent text-gray-04 subhead-med-18 focus:outline-none"
 							placeholder="직접 url 입력하기"
 						/>
 
 						<button
-							onClick={() => handleAddSelectedService(input)}
-							disabled={input === ''}
-							className={`body-semibold-16 ml-[2rem] rounded-[5px] px-[2.2rem] py-[1.2rem] ${input ? 'bg-main-gra-01 text-gray-01 hover:bg-main-gra-hover active:bg-main-gra-press' : 'bg-gray-bg-05 text-gray-04'}`}
+							onClick={() => handleAddSelectedService(inputURL)}
+							disabled={inputURL === ''}
+							className={`ml-[2rem] rounded-[5px] px-[2.2rem] py-[1.2rem] body-semibold-16 ${inputURL ? 'bg-main-gra-01 text-gray-01 hover:bg-main-gra-hover active:bg-main-gra-press' : 'bg-gray-bg-05 text-gray-04'}`}
 						>
 							등록하기
 						</button>