Merge pull request #30 from MARU-EGG/user-maru-egg-page-refactor

[USER] Feat: bottom menu bar component

src/ui/components/molecule/user/chat-form/chat-form.tsx → src/ui/components/molecule/chat-form/chat-form.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import TextInput from '../../../atom/text-input/text-input';
-import IconButton from '../../../atom/icon/icon-button';
-import { ReactComponent as SendIcon } from '../../../../../assets/Send.svg';
-import { postQuestion } from '../../../../../api/post-question';
-import { cn } from '../../../../../utils/style';
-import useChatStore from '../../../../../store/chat-store';
-import { useAutoComplete } from '../../../../../hooks/use-auto-complete.hooks';
-import AutoCompleteList from '../../../atom/auto-complete/auto-complete';
+import TextInput from '../../atom/text-input/text-input';
+import IconButton from '../../atom/icon/icon-button';
+import { ReactComponent as SendIcon } from '../../../../assets/Send.svg';
+import { postQuestion } from '../../../../api/post-question';
+import { cn } from '../../../../utils/style';
+import useChatStore from '../../../../store/chat-store';
+import { useAutoComplete } from '../../../../hooks/use-auto-complete.hooks';
+import AutoCompleteList from '../../atom/auto-complete/auto-complete';
 
 interface ChatFormProps {
   type: 'SUSI' | 'PYEONIP' | 'JEONGSI';

src/ui/components/molecule/user/header/header.tsx → src/ui/components/molecule/header/header.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { ReactComponent as RefreshIcon } from '../../../../../assets/Refresh.svg';
-import { ReactComponent as MenuIcon } from '../../../../../assets/Menu.svg';
-import maruEgg from '../../../../../assets/maru-egg.png';
-import IconButton from '../../../atom/icon/icon-button';
+import { ReactComponent as RefreshIcon } from '../../../../assets/Refresh.svg';
+import { ReactComponent as MenuIcon } from '../../../../assets/Menu.svg';
+import maruEgg from '../../../../assets/maru-egg.png';
+import IconButton from '../../atom/icon/icon-button';
+import MenuDrawer from '../menu-drawer/menu-drawer';
 
 interface HeaderProps {
   type: null | 'SUSI' | 'PYEONIP' | 'JEONGSI';
@@ -21,6 +21,10 @@ const Header = ({ type }: HeaderProps) => {
     setMenuOpen(!menuOpen);
   };
 
+  const handleCloseDrawer = () => {
+    setMenuOpen(false);
+  };
+
   return (
     <div className="fixed flex w-full items-center justify-between bg-white px-3 py-2">
       <IconButton onClick={handleRefreshClick}>
@@ -45,6 +49,7 @@ const Header = ({ type }: HeaderProps) => {
       <IconButton onClick={handleMenuClick}>
         <MenuIcon />
       </IconButton>
+      <MenuDrawer open={menuOpen} onClose={handleCloseDrawer} />
     </div>
   );
 };

src/ui/components/molecule/menu-drawer/menu-drawer.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import { Drawer } from 'antd';
+import PresetButton from '../../atom/preset/preset-button';
+import useTypeStore from '../../../../store/type-store';
+import { ReactComponent as XIcon } from '../../../../assets/X.svg';
+import IconButton from '../../atom/icon/icon-button';
+
+interface MenuDrawerProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const MenuDrawer = ({ open, onClose }: MenuDrawerProps) => {
+  const [selectedButton, setSelectedButton] = React.useState<'SUSI' | 'PYEONIP' | 'JEONGSI' | null>(null);
+  const { type } = useTypeStore();
+
+  useEffect(() => {
+    setSelectedButton(type);
+  }, [type]);
+  const handleButtonClick = (selectedType: 'SUSI' | 'PYEONIP' | 'JEONGSI') => {
+    setSelectedButton(selectedType);
+  };
+  return (
+    <Drawer placement="bottom" closable={false} open={open} onClose={onClose} className="rounded-t-3xl" height={244}>
+      <div className="flex">
+        <div className="flex w-full justify-between py-2">
+          <div>
+            <PresetButton onClick={() => handleButtonClick('SUSI')} isSelected={selectedButton === 'SUSI'}>
+              수시
+            </PresetButton>
+            <PresetButton onClick={() => handleButtonClick('PYEONIP')} isSelected={selectedButton === 'PYEONIP'}>
+              편입
+            </PresetButton>
+            <PresetButton onClick={() => handleButtonClick('JEONGSI')} isSelected={selectedButton === 'JEONGSI'}>
+              정시
+            </PresetButton>
+          </div>
+          <IconButton onClick={onClose}>
+            <XIcon className="rounded-full bg-gray-100" />
+          </IconButton>
+        </div>
+      </div>
+      <div className="w-full cursor-pointer p-2 text-start font-pretendard text-sm hover:bg-[#F4F4F4]">
+        FAQ 바로가기
+      </div>
+      <div className="w-full cursor-pointer p-2 text-start font-pretendard text-sm hover:bg-[#F4F4F4]">
+        입시결과 바로가기
+      </div>
+      <div className="w-full cursor-pointer p-2 text-start font-pretendard text-sm hover:bg-[#F4F4F4]">
+        모집요강 바로가기
+      </div>
+      <div className="p-2 font-pretendard text-xs">
+        학생부교과, 실기/실적위주, 기타 문의------입학관리팀 : 02)300-1799, 1800 <br />
+        학생부종합 문의 ------------------------인재발굴팀 : 02)300-1797, 1844
+      </div>
+      <div className="p-2 font-pretendard text-xs"></div>
+    </Drawer>
+  );
+};
+
+export default MenuDrawer;

src/ui/pages/maru-egg.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import Header from '../components/molecule/user/header/header';
+import Header from '../components/molecule/header/header';
 import useTypeStore from '../../store/type-store';
 import ChatCard from '../components/atom/chat-card/chat-card';
-import ChatForm from '../components/molecule/user/chat-form/chat-form';
+import ChatForm from '../components/molecule/chat-form/chat-form';
 import useChatStore from '../../store/chat-store';
 import PresetButton from '../components/atom/preset/preset-button';
 
@@ -17,10 +17,10 @@ const MaruEgg: React.FC = () => {
   };
 
   return (
-    <div className="h-screen min-w-[360px] bg-background-default">
+    <div className="h-lvh bg-background-default">
       <Header type={type} />
 
-      <div className="w-full px-4 pb-24 pt-16">
+      <div className="max-h-screen-minus-header w-full overflow-y-auto px-4 pb-24 pt-16">
         <ChatCard
           content={`안녕하세요 입학처 챗봇 MARU-EGG입니다!  
             궁금하신 내용 안내 도와드리겠습니다.  

tailwind.config.js

@@ -23,6 +23,10 @@ module.exports = {
         body2: ['16px', { lineHeight: '24px', fontWeight: '500' }],
         body3: ['14px', { lineHeight: '20px', fontWeight: '500' }],
         title: ['24px', { lineHeight: '32px', fontWeight: '700' }],
+        mobile_title: ['16px', { lineHeight: '24px', fontWeight: '600' }],
+      },
+      maxHeight: {
+        'screen-minus-header': 'calc(100vh - 1.75rem)',
       },
     },
   },