Feat: 전화번호 입력 시 하이픈 추가

.github/workflows/main_merge.yml

@@ -22,7 +22,7 @@ jobs:
       - name: cat env file
         run: cat .env
 
-      - name: Generate build          # React Build
+      - name: Generate wbuild          # React Build
         run: npm run build
 
   #     - name: file copy

package.json

@@ -38,7 +38,8 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+    "wbuild": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

public/index.html

@@ -67,6 +67,31 @@
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-T33NPQDW');</script>
+    <!-- End Google Tag Manager -->
+
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-HN1QZNRV1F"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-HN1QZNRV1F');
+    </script>
+    <!-- Clarity tag --> 
+    <script type="text/javascript">
+      (function(c,l,a,r,i,t,y){
+          c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+          t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+          y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+      })(window, document, "clarity", "script", "k096t0105o");
+    </script>
     <title>ReadyVery</title>
 
   </head>

src/components/Authentication/UserInputNumber.jsx

@@ -35,7 +35,19 @@ const UserInputNumber = () => {
   };
 
   const handlePhoneChange = (event) => {
-    setPhonenumber(event.target.value);
+    const HyphenNumber = event.target.value.replace(/[^0-9]/g, "");
+    setPhonenumber(HyphenNumber);
+  };
+  const displayFormattedPhoneNumber = (numbers) => {
+    if (numbers.length <= 3) {
+      return numbers;
+    } else if (numbers.length <= 7) {
+      return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
+    } else {
+      return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(
+        7
+      )}`;
+    }
   };
   // 번호 인증 성공 여부 확인
   const handleAuthSuccess = (success) => {
@@ -55,9 +67,12 @@ const UserInputNumber = () => {
       <div className="user-input-phone-number-wrapper">
         <input
           type="tel"
+          inputmode="numeric"
+          pattern="[0-9]*"
           placeholder="전화번호"
-          value={Phonenumber}
+          value={displayFormattedPhoneNumber(Phonenumber)}
           onChange={handlePhoneChange}
+          maxLength="13"
           className="user-input-phone-number-input"
         />
         <button