From 433ef4acd15cf3f9cc1973729a2d767421c71b0e Mon Sep 17 00:00:00 2001
From: Hyeongseok Kim <hyeongseok@coconutsilo.com>
Date: Fri, 23 Aug 2024 15:22:35 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20handlePhoneNumberChange=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20utils.ts=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20(#8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/request-custom/page.tsx       |  8 ++------
 src/app/request-notification/page.tsx | 24 +++++++++++++++++++++---
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/app/request-custom/page.tsx b/src/app/request-custom/page.tsx
index 0c7665b..d2dedab 100644
--- a/src/app/request-custom/page.tsx
+++ b/src/app/request-custom/page.tsx
@@ -3,6 +3,7 @@
 import { ChangeEvent, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { submitForm } from '../api/apis';
+import { handlePhoneNumberChange } from '@/lib/utils';
 
 const RequestCustom = () => {
   const router = useRouter();
@@ -15,11 +16,6 @@ const RequestCustom = () => {
     setText(e.target.value);
   };
 
-  const handlePhoneNumberChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setPhoneNumber(e.target.value);
-  };
-
-  const isOverLimit = text.length > 600;
   const isTextEntered = text.length > 0;
   const isPhoneNumberEntered = phoneNumber.trim().length > 0;
 
@@ -61,7 +57,7 @@ const RequestCustom = () => {
             type="text"
             placeholder="XXX - XXXX - XXXX"
             value={phoneNumber}
-            onChange={handlePhoneNumberChange}
+            onChange={(e) => handlePhoneNumberChange(e, setPhoneNumber)}
             className="w-full h-[3.125rem] px-[0.875rem] bg-gray-50 rounded-lg body-1 placeholder-gray-300
             hover:bg-gray-100 focus:bg-gray-100 focus:border-gray-200 focus:ring-0 focus:outline-none
             border border-transparent transition-colors duration-200
diff --git a/src/app/request-notification/page.tsx b/src/app/request-notification/page.tsx
index ddfb647..33ee6da 100644
--- a/src/app/request-notification/page.tsx
+++ b/src/app/request-notification/page.tsx
@@ -6,14 +6,31 @@ import Image from 'next/image';
 import Close from '@/data/close.svg';
 import Instagram from '@/data/instagram.svg';
 import { useRouter } from 'next/navigation';
+import { handlePhoneNumberChange } from '@/lib/utils';
+import { submitForm } from '../api/apis';
 
 const RequestNotification = () => {
   const router = useRouter();
 
   const [phoneNumber, setPhoneNumber] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
-  const handlePhoneNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPhoneNumber(e.target.value);
+  const isPhoneNumberEntered = phoneNumber.trim().length > 12;
+
+  const handleSubmit = async () => {
+    if (!isPhoneNumberEntered) return;
+    setLoading(true);
+
+    try {
+      await submitForm({ phone_number: phoneNumber, prefer_style: '알림요청' });
+    } catch (error) {
+      console.error('실패: ', error);
+      alert('요청 전송에 실패했습니다. 다시 시도해주세요.');
+    } finally {
+      setIsModalOpen(true);
+      setLoading(false);
+    }
   };
 
   const isPhoneNumberEntered = phoneNumber.trim().length > 0;
@@ -40,12 +57,13 @@ Chiksnap은 스냅사진작가를 추천해주는 플랫폼으로 10월 출시 
           <h2 className="body-1">전화번호</h2>
           <h2 className="body-3 text-gray-500">*필수</h2>
         </div>
+
         <div className="mb-[1.75rem]">
           <input
             type="text"
             placeholder="XXX - XXXX - XXXX"
             value={phoneNumber}
-            onChange={handlePhoneNumberChange}
+            onChange={(e) => handlePhoneNumberChange(e, setPhoneNumber)}
             className="w-full h-[3.125rem] px-[0.875rem] bg-gray-50 rounded-lg body-1 placeholder-gray-300
             hover:bg-gray-100 focus:bg-gray-100 focus:border-gray-200 focus:ring-0 focus:outline-none
             border border-transparent transition-colors duration-200