design: 회원가입, 로그인 페이지 화면 높이에 따라 레이아웃 조정

Moaguide-develop · Sep 12, 2024 · 4cc6682 · 4cc6682
1 parent 93eaf87
commit 4cc6682
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;