CNS-DGSW · ksh5324 · Aug 23, 2023 · Aug 23, 2023 · Aug 29, 2023
diff --git a/.eslintcache b/.eslintcache
diff --git a/src/components/Write/school/examination/index.tsx b/src/components/Write/school/examination/index.tsx
@@ -10,7 +10,7 @@ const Examination = () => {
   return (
     <Card>
       <InputWrapper title="합격년도">
-        <Input type="text" width={650} changeEvent={setPass} />
+        <Input type="number" width={650} changeEvent={setPass} />
       </InputWrapper>
     </Card>
   )

diff --git a/src/components/Write/school/expect/index.tsx b/src/components/Write/school/expect/index.tsx
@@ -7,11 +7,12 @@ import { localDetail, LocalKind } from "@/constants/Write/localKindConstant"
 import useChange from "@/hooks/useChange"
 import useLocal from "../hooks/useLocal"
 import Card from "@/components/common/Card"
+import usePhone from "@/hooks/usePhone"
 
 const ExpectedForm = () => {
-  const [, changesShoolContact] = useChange()
+  const [schoolNumber, chagneSchoolNumber] = usePhone()
   const [, changeTeacherName] = useChange()
-  const [, changeTeacherContact] = useChange()
+  const [teacherNumber, changeTeacherContact] = usePhone()
 
   const { changeDetailLocal, changeLocal, detailLocal, local } = useLocal()
 
@@ -40,15 +41,26 @@ const ExpectedForm = () => {
           />
         </InputWrapper>
         <InputWrapper title="학교 연락처">
-          <Input type="text" width={208} changeEvent={changesShoolContact} />
+          <Input
+            type="text"
+            width={208}
+            onChange={chagneSchoolNumber}
+            placeholder="- 없이 입력해주세요"
+            value={schoolNumber}
+          />
         </InputWrapper>
       </S.Wrap>
       <S.Wrap justify="space-between">
         <InputWrapper title="담임 성명">
           <Input type="text" changeEvent={changeTeacherName} />
         </InputWrapper>
         <InputWrapper title="담임 연락처">
-          <Input type="text" changeEvent={changeTeacherContact} />
+          <Input
+            type="text"
+            onChange={changeTeacherContact}
+            placeholder="- 없이 입력해주세요"
+            value={teacherNumber}
+          />
         </InputWrapper>
       </S.Wrap>
     </Card>

diff --git a/src/components/Write/school/graduate/index.tsx b/src/components/Write/school/graduate/index.tsx
@@ -4,12 +4,13 @@ import InputWrapper from "@/components/common/InputWrapper"
 import Select from "@/components/common/Select"
 import { localDetail, LocalKind } from "@/constants/Write/localKindConstant"
 import useChange from "@/hooks/useChange"
+import usePhone from "@/hooks/usePhone"
 import useLocal from "../hooks/useLocal"
 import * as S from "../style"
 
 const GraduateForm = () => {
   const { changeDetailLocal, changeLocal, detailLocal, local } = useLocal()
-  const [, changesShoolContact] = useChange()
+  const [schoolContact, changeSchoolContact] = usePhone()
   const [, changeGraduate] = useChange()
 
   return (
@@ -38,13 +39,19 @@ const GraduateForm = () => {
             />
           </InputWrapper>
           <InputWrapper title="학교 연락처">
-            <Input type="text" width={208} changeEvent={changesShoolContact} />
+            <Input
+              type="text"
+              width={208}
+              onChange={changeSchoolContact}
+              value={schoolContact}
+              placeholder="- 없이 입력해주세요"
+            />
           </InputWrapper>
         </S.Wrap>
       </Card>
       <Card>
         <InputWrapper title="졸업년도">
-          <Input type="text" width={650} changeEvent={changeGraduate} />
+          <Input type="number" width={650} onChange={changeGraduate} />
         </InputWrapper>
       </Card>
     </>

diff --git a/src/hooks/usePhone.ts b/src/hooks/usePhone.ts
@@ -0,0 +1,25 @@
+import type { ChangeEventHandler } from "react"
+import { useState, useEffect } from "react"
+
+const usePhone = <
+  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,
+>(): [string | undefined, ChangeEventHandler<T>] => {
+  const [state, setState] = useState<string>("")
+  useEffect(() => {
+    setState((prev) =>
+      prev
+        .replace(/[^0-9]/g, "")
+        .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`),
+    )
+  }, [state])
+
+  const changeEvent: ChangeEventHandler<T> = (e) => {
+    const regex = /^[0-9\b -]{0,13}$/
+    if (regex.test(e.target.value)) {
+      setState(e.target.value)
+    }
+  }
+  return [state, changeEvent]
+}
+
+export default usePhone
diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx
@@ -25,6 +25,11 @@ const GlobalStyle = createGlobalStyle`
         display: flex;
         outline: none;
         padding-left: 10px;
+    };
+    input::-webkit-inner-spin-button {
+        appearance: none;
+        -moz-appearance: none;
+        -webkit-appearance: none;
     }
 `
 

diff --git a/yarn.lock b/yarn.lock
@@ -22,6 +22,11 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz"
   integrity sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==
 
+"@babel/compat-data@^7.22.9":
+  version "7.22.9"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730"
+  integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==
+
 "@babel/core@^7.21.3":
   version "7.22.9"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.22.9.tgz"
@@ -53,6 +58,16 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.22.9":
+  version "7.22.10"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.10.tgz#c92254361f398e160645ac58831069707382b722"
+  integrity sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==
+  dependencies:
+    "@babel/types" "^7.22.10"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.22.5":
   version "7.22.5"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz"
@@ -78,6 +93,17 @@
     browserslist "^4.21.9"
     lru-cache "^5.1.1"
 
+"@babel/helper-compilation-targets@^7.22.9":
+  version "7.22.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.10.tgz#01d648bbc25dd88f513d862ee0df27b7d4e67024"
+  integrity sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==
+  dependencies:
+    "@babel/compat-data" "^7.22.9"
+    "@babel/helper-validator-option" "^7.22.5"
+    browserslist "^4.21.9"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
 "@babel/helper-create-class-features-plugin@^7.22.5":
   version "7.22.6"
   resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.6.tgz"
@@ -161,6 +187,17 @@
     "@babel/traverse" "^7.22.5"
     "@babel/types" "^7.22.5"
 
+"@babel/helper-module-transforms@^7.22.9":
+  version "7.22.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz#92dfcb1fbbb2bc62529024f72d942a8c97142129"
+  integrity sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/helper-validator-identifier" "^7.22.5"
+
 "@babel/helper-optimise-call-expression@^7.22.5":
   version "7.22.5"
   resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz"
@@ -1038,6 +1075,15 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.22.10":
+  version "7.22.10"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.10.tgz#4a9e76446048f2c66982d1a989dd12b8a2d2dc03"
+  integrity sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.5"
+    to-fast-properties "^2.0.0"
+
 "@cometjs/core@^2.1.0":
   version "2.3.2"
   resolved "https://registry.npmjs.org/@cometjs/core/-/core-2.3.2.tgz"
@@ -4111,6 +4157,11 @@ quick-lru@^6.1.1:
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.1.tgz"
   integrity sha512-S27GBT+F0NTRiehtbrgaSE1idUAJ5bX8dPAQTdylEyNlrdcH5X4Lz7Edz3DYzecbsCluD5zO8ZNEe04z3D3u6Q==
 
+react-date-object@^2.1.5:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/react-date-object/-/react-date-object-2.1.7.tgz#a21fff40ef18344fee3616f40ee86169c1e83f5e"
+  integrity sha512-810eaGk/xvQBJNncPvhwXaKcSwPRKX48jtY/5U5T1bSUnGFqmBdMvl4EVl76cyzQ8U3KX6hpF6xZ1c0eY9vvJA==
+
 react-dom@18.2.0, react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
@@ -4119,6 +4170,11 @@ react-dom@18.2.0, react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-element-popper@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/react-element-popper/-/react-element-popper-2.1.6.tgz#4afb912287d57de5d442fb85e76f4d7b94fde879"
+  integrity sha512-8va7mUmrKIkUnaM2t5Dyctd8cjgVgVcrv5vVD0FRay0sN6EPBCKa0bDi1/KmVDAjfgSIn7zQnjtc4VojcGrkgQ==
+
 react-hook-form@^7.45.4:
   version "7.45.4"
   resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.4.tgz"
@@ -4134,6 +4190,14 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-multi-date-picker@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/react-multi-date-picker/-/react-multi-date-picker-4.1.2.tgz#a8ce21946d3b9785e3aab0b7ab48b5a72bd3ebde"
+  integrity sha512-slpfl4uzXs9mA31WvJQGqbOVbFVUR+dogSya2SEjC2AVvIKPMHf3fAaEmF6OKpgd7NDldlSpfVG7Ubhju/wB8w==
+  dependencies:
+    react-date-object "^2.1.5"
+    react-element-popper "^2.1.6"
+
 react@18.2.0, react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
@@ -4315,6 +4379,11 @@ semver@^6.3.0:
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
 semver@^7.0.0, semver@^7.3.7, semver@^7.3.8:
   version "7.5.1"
   resolved "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz"