PaceInput 컴포넌트 작성

client/src/components/Input/Input.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import Input from "./Input";
 
 export default {
-    title: "Example/Input",
+    title: "Input/Input",
     component: Input,
 } as ComponentMeta<typeof Input>;
 

client/src/components/Input/Input.style.ts

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { COLOR } from "styles/color";
+
+export const InputWrapper = styled.div<{ width: string }>`
+    display: flex;
+    padding: 16px;
+    border-bottom: ${`1px solid ${COLOR.BABY_BLUE}`};
+    width: ${({ width }) => width};
+    input {
+        color: ${COLOR.BLACK};
+        border: none;
+        :focus {
+            outline: none;
+        }
+        ::placeholder {
+            color: ${COLOR.BABY_BLUE};
+        }
+        /* Chrome, Safari, Edge, Opera */
+        ::-webkit-outer-spin-button,
+        ::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        /* Firefox */
+        [type="number"] {
+            -moz-appearance: textfield;
+        }
+    }
+    p {
+        color: ${COLOR.BABY_BLUE};
+        text-align: right;
+        width: 20%;
+    }
+`;

client/src/components/Input/Input.tsx

@@ -1,6 +1,5 @@
 import { ChangeEventHandler, ReactNode } from "react";
-import styled from "styled-components";
-import { COLOR } from "styles/color";
+import { InputWrapper } from "./Input.style";
 
 interface InputProps {
     placeholder?: string;
@@ -10,38 +9,6 @@ interface InputProps {
     onChange?: ChangeEventHandler<HTMLInputElement>;
 }
 
-const InputWrapper = styled.div<{ width: string }>`
-    display: flex;
-    padding: 16px;
-    border-bottom: ${`1px solid ${COLOR.BABY_BLUE}`};
-    width: ${({ width }) => width};
-    input {
-        color: ${COLOR.BLACK};
-        border: none;
-        :focus {
-            outline: none;
-        }
-        ::placeholder {
-            color: ${COLOR.BABY_BLUE};
-        }
-        /* Chrome, Safari, Edge, Opera */
-        ::-webkit-outer-spin-button,
-        ::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-        }
-        /* Firefox */
-        [type="number"] {
-            -moz-appearance: textfield;
-        }
-    }
-    p {
-        color: ${COLOR.BABY_BLUE};
-        text-align: right;
-        width: 20%;
-    }
-`;
-
 const Input = ({ width, type = "text", placeholder, subText, onChange }: InputProps) => {
     return (
         <InputWrapper width={width ?? "100%"}>

client/src/components/Input/PaceInput/PaceInput.stories.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import PaceInput from "./PaceInput";
+
+export default {
+    title: "Input/PaceInput",
+    component: PaceInput,
+} as ComponentMeta<typeof PaceInput>;
+
+export const Template: ComponentStory<typeof PaceInput> = (args) => <PaceInput {...args} />;

client/src/components/Input/PaceInput/PaceInput.tsx

@@ -0,0 +1,51 @@
+import { ERROR } from "#constants/errorMessage";
+import { ChangeEventHandler, FormEventHandler, useCallback } from "react";
+import { InputWrapper } from "../Input.style";
+
+interface PaceInputProps {
+    width?: string;
+    onChangeMinute: ChangeEventHandler<HTMLInputElement>;
+    onChangeSecond: ChangeEventHandler<HTMLInputElement>;
+}
+
+const PaceInput = ({ width, onChangeMinute, onChangeSecond }: PaceInputProps) => {
+    const onInput: FormEventHandler<HTMLInputElement> = useCallback((e) => {
+        const value = e.currentTarget.value;
+        if (value.length > 1 && value[0] === "0") {
+            e.currentTarget.value = value.slice(1);
+        }
+        if (Number(value) > 60) {
+            alert(ERROR.INVALID_MINUTE_VALUE);
+            e.currentTarget.value = "60";
+        }
+        if (Number(value) < 0) {
+            alert(ERROR.INVALID_MINUTE_VALUE);
+            e.currentTarget.value = "0";
+        }
+    }, []);
+    return (
+        <InputWrapper width={width ?? "100%"}>
+            <input
+                onInput={onInput}
+                onChange={onChangeMinute}
+                min="1"
+                max="60"
+                type="number"
+                style={{ width: "40%" }}
+            />
+            <p style={{ marginRight: "1rem" }}>분</p>
+            <input
+                onInput={onInput}
+                onChange={onChangeSecond}
+                min="1"
+                max="60"
+                type="number"
+                style={{ width: "40%" }}
+            />
+            <p style={{ marginRight: "1rem" }}>초</p>
+            <p>/km</p>
+        </InputWrapper>
+    );
+};
+
+export default PaceInput;

client/src/constants/errorMessage.ts

@@ -0,0 +1,3 @@
+export enum ERROR {
+    INVALID_MINUTE_VALUE = "1 이상 60 이하의 숫자만 입력 가능합니다.",
+}

client/src/hooks/usePaceInput.ts

@@ -0,0 +1,15 @@
+import { ChangeEventHandler, useCallback, useState } from "react";
+
+const usePaceInput = () => {
+    const [pace, setPace] = useState({ minute: 0, second: 0 });
+    const onChangeMinute: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
+        setPace((prev) => ({ ...prev, minute: Number(e.target.value) }));
+    }, []);
+
+    const onChangeSecond: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
+        setPace((prev) => ({ ...prev, second: Number(e.target.value) }));
+    }, []);
+    return { pace, onChangeMinute, onChangeSecond };
+};
+
+export default usePaceInput;

client/src/pages/Login.tsx

@@ -5,7 +5,7 @@ import Input from "#components/Input/Input";
 import Button from "#components/Button/Button";
 import useInput from "#hooks/useInput";
 import axios from "axios";
-import { PLACEHOLDER } from "#constants/constants";
+import { PLACEHOLDER } from "#constants/placeholder";
 import { idValidator, passwordValidator } from "#utils/valitationUtils";
 
 import { InputWrapper, OptionsWrapper } from "./SignUp.styles";

client/src/pages/SignUp.styles.ts

@@ -17,13 +17,8 @@ export const InputWrapper = styled.div`
     padding: 4rem;
     width: 90%;
     margin: auto;
-    div {
-        display: block;
-        margin: auto;
-
-        input {
-            font-size: 1.4rem;
-        }
+    input {
+        font-size: 1.4rem;
     }
 
     span {

client/src/pages/SignUp.tsx

@@ -7,7 +7,9 @@ import axios from "axios";
 import useInput from "#hooks/useInput";
 import { confirmPasswordValidator, idValidator, passwordValidator, zipCodeValidator } from "#utils/valitationUtils";
 import { InputWrapper, LogoWrapper, OptionsWrapper } from "./SignUp.styles";
-import { PLACEHOLDER } from "#constants/constants";
+import { PLACEHOLDER } from "#constants/placeholder";
+import usePaceInput from "#hooks/usePaceInput";
+import PaceInput from "#components/Input/PaceInput/PaceInput";
 
 const SignUp = () => {
     const [userId, onChangeUserId, userIdError] = useInput(idValidator);
@@ -16,8 +18,7 @@ const SignUp = () => {
         confirmPasswordValidator(String(password)),
     );
     const [zipCode, onChangeZipCode, zipCodeError] = useInput(zipCodeValidator);
-    const [pace, onChangePace] = useInput(() => "", true);
-
+    const { pace, onChangeMinute, onChangeSecond } = usePaceInput();
     const navigate = useNavigate();
 
     const checkFormValidation = useCallback(() => {
@@ -30,7 +31,7 @@ const SignUp = () => {
             .post("http://localhost:4000/user", {
                 userId,
                 password,
-                pace,
+                pace: pace.minute * 60 + pace.second,
                 zipCode,
             })
             .then((res) => res.status === 201 && navigate("/", { replace: true }))
@@ -52,7 +53,7 @@ const SignUp = () => {
                     onChange={onChangeConfirmPassword}
                 ></Input>
                 <span>{confirmPasswordError}</span>
-                <Input placeholder={PLACEHOLDER.PACE} type="number" onChange={onChangePace}></Input>
+                <PaceInput onChangeMinute={onChangeMinute} onChangeSecond={onChangeSecond}></PaceInput>
                 <Input placeholder={PLACEHOLDER.ZIP_CODE} type="number" onChange={onChangeZipCode}></Input>
                 <span>{zipCodeError}</span>
                 <Button width="fill" onClick={onSubmitSignUp}>