design: 반응형 처리

src/app/find/page.tsx

@@ -8,9 +8,6 @@ import { Suspense } from "react";
 const FindPage = () => {
   return (
     <div>
-      <Suspense>
-      <Navbar />
-      </Suspense>
       <FindTabs />
     </div>
   );

src/app/globals.css

@@ -34,3 +34,39 @@
 .mySwiper .swiper-pagination-bullet-active {
   background-color: black;
 }
+
+.custom-container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  min-height: calc(100vh - 100px);
+  overflow-y: auto;
+}
+
+@media (max-width: 640px) {
+  .custom-container {
+    justify-content: space-between;
+  }
+}
+
+
+.find-container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: auto;
+}
+
+.find-inner-container {
+  display: flex;
+  flex-direction: column;
+}
+
+
+@media (max-width: 640px) {
+  .find-inner-container {
+    justify-content: space-between;
+  }
+}

src/app/layout.tsx

@@ -1,19 +1,19 @@
 import { Metadata } from 'next';
 import './globals.css';
 import localFont from 'next/font/local';
-import Gnb from '@/components/common/Gnb';
 import QueryProvider from '@/providers/QueryProvider';
 import IntegrateMSW from '@/mocks/IntegrateMsw';
-
 import Script from 'next/script';
 import ModalProvider from '@/providers/ModalProvider';
 import MobileFooter from '@/components/common/MobileFooter';
+import GnbWrapper from '@/components/common/GnbWrapper'; 
 
 declare global {
   interface Window {
     kakao: any;
   }
 }
+
 const pretendard = localFont({
   src: '../static/fonts/PretendardVariable.woff2',
   display: 'swap',
@@ -51,7 +51,7 @@ export default function RootLayout({
               strategy="beforeInteractive"
               src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_MAP_KEY}&autoload=false`}
             />
-            <Gnb />
+            <GnbWrapper />
             {children}
             <MobileFooter />
             <ModalProvider />

src/app/mypage/page.tsx

@@ -14,11 +14,11 @@ const Mypage = () => {
 
   useEffect(() => {
     const checkLoginStatus = async () => {
-      const isLoggedIn = !!localStorage.getItem('access_token');
-      if (!isLoggedIn) {
+      const accessToken = localStorage.getItem('access_token');
+      if (!accessToken || accessToken === 'undefined') {
         router.push('/sign');
       } else {
-        setLoading(false); 
+        setLoading(false);
       }
     };
 
@@ -28,6 +28,7 @@ const Mypage = () => {
   const handleLogout = async () => {
     await logout();
     setIsLoggedIn(false);
+    localStorage.removeItem('access_token'); // Remove access token from local storage
     router.push('/sign');
   };
 

src/app/sign/page.tsx

@@ -8,9 +8,6 @@ import { Suspense } from "react";
 const SignPage = () => {
   return (
     <div>
-      <Suspense>
-      <Navbar />
-      </Suspense>
       <SignLayout/>
     </div>
   );

src/app/signup/page.tsx

@@ -1,21 +1,11 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import dynamic from 'next/dynamic';
-import { finalSignup } from '@/service/auth';
-
-// Step 컴포넌트들을 동적 로딩으로 사용할 경우 (필요시 사용)
-// const Step1 = dynamic(() => import('@/components/signup/Step1'));
-// const Step2 = dynamic(() => import('@/components/signup/Step2'));
-// const Step3 = dynamic(() => import('@/components/signup/Step3'));
-// const Step4 = dynamic(() => import('@/components/signup/Step4'));
-
 import Step1 from '@/components/signup/Step1';
 import Step2 from '@/components/signup/Step2';
 import Step3 from '@/components/signup/Step3';
 import Step4 from '@/components/signup/Step4';
-import Navbar from '@/components/common/Navbar';
-import { Suspense } from "react";
+import { finalSignup } from '@/service/auth';
 
 const SignupPage: React.FC = () => {
   const [currentStep, setCurrentStep] = useState(1);
@@ -32,6 +22,24 @@ const SignupPage: React.FC = () => {
   }>({
     loginType: 'local'
   });
+
+  const [maxHeightClass, setmaxHeightClass] = useState('max-h-screen');
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 640) {
+        setmaxHeightClass('max-h-[calc(100vh-75.5px)]');
+      } else {
+        setmaxHeightClass('max-h-screen');
+      }
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
   const handleNext = () => {
     setCurrentStep((prev) => prev + 1);
@@ -41,25 +49,18 @@ const SignupPage: React.FC = () => {
     setFormData((prev) => {
       const updatedFormData = { ...prev, ...data };
 
-      // 새로운 상태와 기존 상태를 비교해 변경 사항이 없으면 업데이트를 생략합니다.
       if (JSON.stringify(prev) === JSON.stringify(updatedFormData)) {
         return prev;
       }
 
       return updatedFormData;
     });
   };
-
-
-  useEffect(() => {
-    console.log(formData);
-  }, [formData]);
 
   const handleSubmit = async () => {
     try {
       console.log('최종 제출 데이터:', formData);
 
-      // 로컬스토리지에서 access_token 가져오기
       const accessToken = localStorage.getItem('access_token');
       if (!accessToken) {
         throw new Error('Access token이 없습니다.');
@@ -78,11 +79,7 @@ const SignupPage: React.FC = () => {
   };
 
   return (
-    <div>
-       <Suspense>
-      <Navbar/>
-      </Suspense>
-    <div className="signup-container">
+    <div className={`flex flex-col items-center justify-center ${maxHeightClass} overflow-y-auto`}>
       {currentStep === 1 && (
         <Step1 onNext={handleNext} onUpdate={(data) => handleUpdate(data)} />
       )}
@@ -96,7 +93,6 @@ const SignupPage: React.FC = () => {
         <Step4 onNext={handleSubmit} onUpdate={(data) => handleUpdate(data)} />
       )}
     </div>
-    </div>
   );
 };
 

src/components/common/Gnb.tsx

@@ -13,7 +13,8 @@ const Gnb = () => {
 
   useEffect(() => {
     const accessToken = localStorage.getItem('access_token');
-    if (accessToken) {
+
+    if (accessToken && accessToken !== 'undefined') {
       setIsLoggedIn(true);
     } else {
       setIsLoggedIn(false);
@@ -53,7 +54,7 @@ const Gnb = () => {
             className="cursor-pointer">
             <img src="/images/gnb/alert.svg" alt="alert" className="w-6 h-6" />
           </div>
-          <div className="hidden items-center min-w-[123px] min-h-[35px] sm:flex">
+          <div className="items-center min-w-[123px] min-h-[35px] sm:flex">
             {isLoggedIn ? (
               <Link href={'/mypage'}>
                 <img src="/images/gnb/mypage.svg" alt="mypage" className="w-6 h-6" />

src/components/common/GnbWrapper.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import Gnb from '@/components/common/Gnb';
+
+const GnbWrapper = () => {
+  const pathname = usePathname();
+  const [isGnbHidden, setIsGnbHidden] = useState(false);
+
+  useEffect(() => {
+    const checkIfGnbShouldBeHidden = () => {
+      if (pathname === '/signup' || pathname === '/sign' || pathname === '/find' || pathname === '/login') {
+        setIsGnbHidden(true);
+      } else {
+        setIsGnbHidden(false); 
+      }
+    };
+
+    checkIfGnbShouldBeHidden();
+  }, [pathname]);
+
+  return !isGnbHidden ? <Gnb /> : null;
+};
+
+export default GnbWrapper;

src/components/find/FindEmail.tsx

@@ -121,8 +121,8 @@ const FindEmail = ({ onEmailFound }: { onEmailFound: () => void }) => {
   }, [isError]);
 
   return (
-    <div>
-      <section className="max-w-[340px] w-full mx-auto mt-[30px]">
+    <div className='find-inner-container flex flex-col items-center min-h-[calc(100vh-220px)] w-[340px]'>
+      <section className="w-full mx-auto mt-[30px]">
         <div className="text-heading3">
           <h2 className="text-xl font-bold mb-6 text-left">
             휴대폰 번호를<br />
@@ -220,19 +220,21 @@ const FindEmail = ({ onEmailFound }: { onEmailFound: () => void }) => {
             </div>
           )}
         </div>
+        </section>
+        <div className='w-full max-w-[340px]'>
         {isComplete ? (
           <div
             onClick={handleComplete}
-            className="cursor-pointer flex items-center justify-center px-5 py-[14px] mt-[60px] w-full rounded-[12px] bg-gradient2 text-heading4 text-white"
+            className="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="flex items-center justify-center px-5 py-[14px] mt-[60px] w-full rounded-[12px] bg-gray100 text-heading4 text-gray400">
+          <div className="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>
         )}
-      </section>
+        </div>
     </div>
   );
 };

src/components/find/FindPassword.tsx

@@ -5,8 +5,8 @@ const FindPassword = () => {
   const [email, setEmail] = useState('');
 
   return (
-    <div className="flex justify-center items-center">
-      <div className="max-w-[340px] w-full mx-auto mt-[30px]">
+    <div className='find-inner-container flex flex-col items-center min-h-[calc(100vh-220px)] w-[340px]'>
+    <div className="w-full mx-auto mt-[30px]">
       <div className="text-heading3">
           <h2 className="text-xl font-bold mb-6 text-left">
             가입하신<br />
@@ -25,16 +25,17 @@ const FindPassword = () => {
             className="w-full mt-2 px-4 py-[14px] bg-bg rounded-[12px] outline-none text-body2 "
           />
         </div>
-
+        </div>
+        <div className='w-full max-w-[340px]'>
         <button 
           disabled={!email} 
-          className={`w-full mt-[60px] py-3 rounded-lg text-lg ${email ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray100 text-heading4 text-gray400'}`}
+          className={`flex items-center justify-center px-5 py-3 text-lg font-bold mt-[60px] mb-[10px] w-full rounded-[12px] ${email ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray100 text-heading4 text-gray400'}`}
         >
           다음으로
         </button>
-      </div>
+        </div>
     </div>
   );
 };
 
-export default FindPassword;
+export default FindPassword;

src/components/find/FindTabs.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import FindEmail from './FindEmail';
 import ShowEmailInfo from './ShowEmailInfo';
 import FindPassword from './FindPassword';
+import Image from 'next/image';
 
 const FindTabs = () => {
   const [activeTab, setActiveTab] = useState('email');
@@ -17,11 +18,40 @@ const FindTabs = () => {
     setShowEmailInfo(true); 
   };
 
+  const [maxHeightClass, setmaxHeightClass] = useState('max-h-screen');
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 640) {
+        setmaxHeightClass('max-h-[calc(100vh-75.5px)]');
+      } else {
+        setmaxHeightClass('max-h-screen');
+      }
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
-    <div className="max-w-[340px] w-full mx-auto mt-[76px]">
+    <div className={`flex flex-col items-center justify-center ${maxHeightClass} overflow-y-auto`}>
       {!showEmailInfo ? ( 
         <>
-          <div className="flex">
+        <div className="find-container flex flex-col items-center overflow-y-auto w-full">
+          <div className='max-w-[340px] w-full mx-auto mt-[30px]'>
+          <div className="self-start">
+            <Image
+              src={'/sign/LeftArrowIcon.svg'}
+              alt='뒤로가기'
+              width={24}
+              height={24}
+            />
+            </div>
+        </div>
+          <div className="flex max-w-[340px] w-full mx-auto mt-6">
             <div
               className={`flex-1 text-center cursor-pointer pb-4 ${activeTab === 'email' ? 'font-bold border-b-2 border-purple-600' : 'text-gray300'}`}
               onClick={() => handleTabClick('email')}
@@ -40,6 +70,7 @@ const FindTabs = () => {
             {activeTab === 'email' && <FindEmail onEmailFound={handleEmailFound} />}
             {activeTab === 'password' && <FindPassword/>}
           </div>
+          </div>
         </>
       ) : (
         <ShowEmailInfo />