design: 이메일/비밀번호 찾기 페이지 화면 높이에 따라 레이아웃 조정

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

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/src/components/find/FindEmail.tsx b/src/components/find/FindEmail.tsx
@@ -225,12 +225,12 @@ const FindEmail = ({ onEmailFound }: { onEmailFound: () => void }) => {
         {isComplete ? (
           <div
             onClick={handleComplete}
-            className="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="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-3 mt-[60px] w-full rounded-[12px] font-bold text-lg 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>
         )}

diff --git a/src/components/find/FindPassword.tsx b/src/components/find/FindPassword.tsx
@@ -29,7 +29,7 @@ const FindPassword = () => {
         <div className='w-full max-w-[340px]'>
         <button 
           disabled={!email} 
-          className={`flex items-center justify-center px-5 py-3 text-lg font-bold mt-[60px] w-full rounded-[12px] ${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>

diff --git a/src/components/find/FindTabs.tsx b/src/components/find/FindTabs.tsx
@@ -18,14 +18,14 @@ const FindTabs = () => {
     setShowEmailInfo(true); 
   };
 
-  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();
@@ -37,17 +37,19 @@ const FindTabs = () => {
   }, []);
 
   return (
-    <div className={`flex flex-col items-center justify-center ${minHeightClass}`}>
+    <div className={`flex flex-col items-center justify-center ${maxHeightClass} overflow-y-auto`}>
       {!showEmailInfo ? ( 
         <>
-        <div className="find-container flex flex-col items-center overflow-y-auto mt-[30px] max-w-[340px]">
+        <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