Feat: 레이아웃 수정 과정 (진행중)

client/src/App.tsx

@@ -5,7 +5,6 @@ import {
   Route,
   Routes,
 } from 'react-router-dom';
-import ChatTestPage from './pages/ChatTestPage';
 import ChatbotPage from './pages/ChatbotPage';
 import TestFirstPage from './pages/TestFirstPage';
 import TestWaitingPage from './pages/TestWaitingPage';
@@ -20,13 +19,10 @@ const MainLayout = () => {
   return (
     <>
       <div className=" min-h-screen flex flex-col">
-        <main
-          className="flex-1"
-          style={{ minHeight: 'calc(100vh - 50px - 80px)' }}
-        >
+        <main style={{ minHeight: 'calc(100vh - 50px - 80px)' }}>
           <Outlet />
+          <Footer />
         </main>
-        <Footer />
       </div>
     </>
   );
@@ -45,7 +41,6 @@ function App() {
           <Route path="test-result" element={<TestResultPage />} />
           <Route path="compare" element={<ComparePage />} />
           <Route path="service-guide" element={<ServiceGuidePage />} />
-          <Route path="/chat-test" element={<ChatTestPage />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Route>
       </Routes>

client/src/components/ComparePage/PlanListItem.tsx

@@ -2,6 +2,7 @@
 import dropdownIcon from '@/assets/icon/dropdown_icon.svg';
 import PlanDetailInfo from '@/components/ComparePage/PlanDetailInfo';
 import type { Plan } from '@/components/types/Plan';
+import { useEffect, useRef, useState } from 'react';
 
 interface PlanListItemProps {
   plan: Plan;
@@ -18,8 +19,22 @@
   onToggle,
   onSelect,
 }) => {
+  const itemRef = useRef<HTMLDivElement>(null);
+  const [wasOpen, setWasOpen] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && !wasOpen && itemRef.current) {
+      setTimeout(() => {
+        itemRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        });
+      }, 0);
+    }
+    setWasOpen(isOpen);
+  }, [isOpen]);
   return (
-    <div>
+    <div ref={itemRef}>
       <motion.div
         whileHover={
           !isOpen

client/src/components/common/Footer.tsx

@@ -1,6 +1,6 @@
 const Footer = () => {
   return (
-    <footer className="w-full max-w-[600px] mx-auto px-5 py-1 flex justify-center items-center text-xs text-[rgba(87,50,161,0.8)] text-center">
+    <footer className="absolute bottom-0 w-full max-w-[600px] mx-auto px-5 py-1 flex justify-center items-center text-xs text-[rgba(87,50,161,0.8)] text-center">
       <p>@meplus.com</p>
     </footer>
   );

client/src/components/common/Modal.tsx

@@ -17,11 +17,11 @@ const Modal: React.FC<ModalProps> = ({
   children,
 }) => {
   useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'auto';
-    }
+    // if (isOpen) {
+    //   document.body.style.overflow = 'hidden';
+    // } else {
+    //   document.body.style.overflow = 'hidden';
+    // }
 
     const handleEsc = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -32,7 +32,7 @@ const Modal: React.FC<ModalProps> = ({
     window.addEventListener('keydown', handleEsc);
     return () => {
       window.removeEventListener('keydown', handleEsc);
-      document.body.style.overflow = 'hidden';
+      // document.body.style.overflow = 'hidden';
     };
   }, [isOpen, onClose]);
 

client/src/index.css

@@ -78,6 +78,7 @@
   }
   html,
   body {
+    /* overflow: hidden; */
     background-color: var(--color-gray300); /* 필요 없으면 제거 가능 */
     background-image: url('/background.png'); /* 이미지 경로 정확히 */
     background-repeat: no-repeat;