From 4cc66826da45b9ca128b86e4446b5a213d3cbc99 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Thu, 12 Sep 2024 17:07:17 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85,?=
 =?UTF-8?q?=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=86=92=EC=9D=B4=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=9D=BC=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css                               |  1 +
 src/app/signup/page.tsx                           |  8 ++++----
 src/components/signup/Step1.tsx                   |  2 +-
 src/components/signup/Step3.tsx                   |  4 ++--
 src/components/signup/Step4.tsx                   |  6 +++---
 src/components/signup/modal/PhoneVerification.tsx | 13 ++++++++-----
 src/service/auth.ts                               |  3 +--
 7 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index e586385..dd1aa32 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -50,6 +50,7 @@
   }
 }
 
+
 .find-container {
   display: flex;
   width: 100%;
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 4e3ea92..e40289d 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -23,14 +23,14 @@ const SignupPage: React.FC = () => {
     loginType: 'local'
   });
   
-  const [minHeightClass, setMinHeightClass] = useState('min-h-screen');
+  const [maxHeightClass, setmaxHeightClass] = useState('max-h-screen');
 
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth < 640) {
-        setMinHeightClass('min-h-[calc(100vh-100px)]');
+        setmaxHeightClass('max-h-[calc(100vh-75.5px)]');
       } else {
-        setMinHeightClass('min-h-screen');
+        setmaxHeightClass('max-h-screen');
       }
     };
     handleResize();
@@ -79,7 +79,7 @@ const SignupPage: React.FC = () => {
   };
 
   return (
-    <div className={`flex flex-col items-center justify-center ${minHeightClass}`}>
+    <div className={`flex flex-col items-center justify-center ${maxHeightClass} overflow-y-auto`}>
       {currentStep === 1 && (
         <Step1 onNext={handleNext} onUpdate={(data) => handleUpdate(data)} />
       )}
diff --git a/src/components/signup/Step1.tsx b/src/components/signup/Step1.tsx
index b7d9b98..ddf208f 100644
--- a/src/components/signup/Step1.tsx
+++ b/src/components/signup/Step1.tsx
@@ -124,7 +124,7 @@ const Step1: React.FC<StepProps> = ({ onNext, onUpdate }) => {
 
       <button
         onClick={onNext}
-        className={`w-full max-w-[340px] mt-[60px] py-3 rounded-[12px] font-bold text-lg transition duration-300 ${
+        className={`w-full max-w-[340px] mt-[60px] mb-[10px] py-3 rounded-[12px] font-bold text-lg transition duration-300 ${
           isNextEnabled
             ? 'bg-purple-600 text-white hover:bg-purple-700'
             : 'bg-gray100 text-heading4 text-gray400 cursor-not-allowed'
diff --git a/src/components/signup/Step3.tsx b/src/components/signup/Step3.tsx
index 43e91f7..188669e 100644
--- a/src/components/signup/Step3.tsx
+++ b/src/components/signup/Step3.tsx
@@ -90,7 +90,7 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
           )}
         </div>
 
-        <div className="mb-12">
+        <div className="">
           <div className="text-body3">비밀번호 확인</div>
           <input 
             type="password" 
@@ -113,7 +113,7 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
         <button 
           onClick={onNext} 
           disabled={!isFormValid} 
-          className={`w-full max-w-[340px] py-3 mt-[60px] rounded-[12px] text-lg font-bold ${isFormValid ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray100 text-heading4 text-gray400'}`}
+          className={`w-full max-w-[340px] py-3 mt-[60px] mb-[10px] rounded-[12px] text-lg font-bold ${isFormValid ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray100 text-heading4 text-gray400'}`}
         >
           다음으로
         </button>
diff --git a/src/components/signup/Step4.tsx b/src/components/signup/Step4.tsx
index 6f25f47..3a42091 100644
--- a/src/components/signup/Step4.tsx
+++ b/src/components/signup/Step4.tsx
@@ -110,7 +110,7 @@ const Step4: React.FC<StepProps> = ({ onNext, onUpdate }) => {
         <h2 className="text-xl font-bold mb-6 leading-tight">
           모아가이드에서 사용할<br /><span className="text-purple-600">상세정보</span>를 입력해주세요
         </h2>
-        <div className="mt-10 mb-4">
+        <div className="mb-4">
           <div className="text-body3">닉네임</div>
           <div className="flex items-center mt-2">
             <input
@@ -148,7 +148,7 @@ const Step4: React.FC<StepProps> = ({ onNext, onUpdate }) => {
           />
         </div>
 
-        <div className='mb-10'>
+        <div className='mb-4'>
           <div className="text-body3">생년월일</div>
           <input
             type="text"
@@ -196,7 +196,7 @@ const Step4: React.FC<StepProps> = ({ onNext, onUpdate }) => {
         <button
           onClick={handleComplete}
           disabled={!isFormValid}
-          className={`w-full max-w-[340px] mt-[60px] py-3 rounded-[12px] text-white text-lg font-bold ${isFormValid ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray-100 text-gray-400'}`}
+          className={`w-full max-w-[340px] mt-[60px] mb-[10px] py-3 rounded-[12px] text-white text-lg font-bold ${isFormValid ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray-100 text-gray-400'}`}
         >
           가입완료
         </button>
diff --git a/src/components/signup/modal/PhoneVerification.tsx b/src/components/signup/modal/PhoneVerification.tsx
index 1a1bb5d..a112512 100644
--- a/src/components/signup/modal/PhoneVerification.tsx
+++ b/src/components/signup/modal/PhoneVerification.tsx
@@ -35,7 +35,8 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
 
   const handleRequest = async () => {
     try {
-      const data = await sendVerificationCode(phoneNumber);
+      const plainPhoneNumber = phoneNumber.replace(/-/g, '');
+      const data = await sendVerificationCode(plainPhoneNumber);
       console.log('인증 요청 성공:', data);
       setIsRequest(true); // 요청 상태 true
       setValidTime(300); // 인증 요청 시 타이머 초기화
@@ -48,7 +49,8 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
   const handleResending = async () => {
     if (isComplete) return;
     try {
-      const data = await sendVerificationCode(phoneNumber);
+      const plainPhoneNumber = phoneNumber.replace(/-/g, '');
+      const data = await sendVerificationCode(plainPhoneNumber);
       console.log('인증 재요청 성공:', data);
       setValidNumber('');
       inputRef.current?.focus();
@@ -62,7 +64,8 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
   const handleCertify = async () => {
     if (isComplete) return; // 이미 인증 완료된 상태면 return
     try {
-      const data = await verifyCode(phoneNumber, validNumber);
+      const plainPhoneNumber = phoneNumber.replace(/-/g, '');
+      const data = await verifyCode(plainPhoneNumber, validNumber);
       console.log('인증 완료:', data);
       setIsComplete(true); // 인증 검사 통과
       setIsError(false);
@@ -243,12 +246,12 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
         {isComplete ? (
           <div
             onClick={handleComplete}
-            className="w-full max-w-[340px] cursor-pointer flex items-center justify-center px-5 py-3 mt-[60px] w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white"
+            className="w-full max-w-[340px] cursor-pointer flex items-center justify-center px-5 py-3 mt-[60px] mb-[10px] w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white"
           >
             다음으로
           </div>
         ) : (
-          <div className="w-full max-w-[340px] flex items-center justify-center px-5 py-3 mt-[60px] w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400">
+          <div className="w-full max-w-[340px] flex items-center justify-center px-5 py-3 mt-[60px] mb-[10px] w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400">
             다음으로
           </div>
         )}
diff --git a/src/service/auth.ts b/src/service/auth.ts
index fdf85e8..bfe293c 100644
--- a/src/service/auth.ts
+++ b/src/service/auth.ts
@@ -15,8 +15,7 @@ export const verifyCode = async (phone: string, code: string): Promise<VerifyCod
   console.log('응답 데이터:', response.data);
   console.log('응답 헤더:', response.headers);
 
-  const token = response.headers['authorization'] || response.headers['Authorization'];
-  const accessToken = token.replace('Bearer ', '');
+  const accessToken = response.headers['verify'];
   setToken(accessToken);
 
   return response.data;