Merge pull request #43 from sangmaaaaan/Refactor/mobile-responsive-la…

…yout Refactor: 모바일 화면에서의 반응형 적용
MARU-EGG · Aug 25, 2024 · e4d9c4c · e4d9c4c
2 parents 68eef11 + 8062312
commit e4d9c4c
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 10 deletions.
diff --git a/src/ui/components/molecule/chat-section/chat-section.tsx b/src/ui/components/molecule/chat-section/chat-section.tsx
@@ -18,7 +18,7 @@ const ChatSection: React.FC = () => {
   }, [messages, selectedCategoryButton]);
 
   return (
-    <div className="max-h-screen-minus-header w-full overflow-y-auto px-4 pb-24 pt-16">
+    <div className="max-h-100vh w-full overflow-y-auto px-4 pb-24 pt-16">
       <ChatCard
         content={`안녕하세요 입학처 챗봇 MARU-EGG입니다!  
           궁금하신 내용 안내 도와드리겠습니다.  
@@ -42,7 +42,7 @@ const ChatSection: React.FC = () => {
       {type !== undefined && (
         <>
           <ChatCard content={`알고싶은 내용을 선택해주세요`} role="system" />
-          <div className="flex w-2/5 flex-wrap space-y-2">
+          <div className="flex flex-col items-start space-y-2">
             <PresetButton
               onClick={() => handleCategoryButtonClick('ADMISSION_GUIDELINE')}
               isSelected={selectedCategoryButton === 'ADMISSION_GUIDELINE'}

diff --git a/src/ui/components/molecule/header/header.tsx b/src/ui/components/molecule/header/header.tsx
@@ -26,7 +26,7 @@ const Header = ({ type }: HeaderProps) => {
   };
 
   return (
-    <div className="absolute z-10 flex w-full items-center justify-between rounded-tl-2xl rounded-tr-2xl bg-white px-4 py-4">
+    <div className="absolute z-10 flex w-full items-center justify-between bg-white p-4 mobile:rounded-none mobile:px-4 mobile:py-4 desktop:rounded-tl-3xl desktop:rounded-tr-3xl desktop:px-4 desktop:py-4">
       <IconButton onClick={handleRefreshClick}>
         <RefreshIcon />
       </IconButton>

diff --git a/src/ui/components/molecule/menu-drawer/menu-drawer.tsx b/src/ui/components/molecule/menu-drawer/menu-drawer.tsx
@@ -53,9 +53,9 @@ const MenuDrawer = ({ open, onClose }: MenuDrawerProps) => {
       closable={false}
       open={open}
       onClose={onClose}
-      height="32vh"
-      rootClassName="absolute mx-auto my-auto max-w-[390px] max-h-[780px] rounded-t-3xl"
-      rootStyle={{ width: '100%', borderRadius: '1rem', overflow: 'hidden' }}
+      height="260px"
+      rootClassName="absolute mx-auto my-auto desktop:max-w-[390px] desktop:max-h-[780px] desktop:rounded-t-3xl desktop:rounded-b-3xl mobile:max-w-full mobile:max-h-full mobile:rounded-none mobile:shadow-none"
+      rootStyle={{ width: '100%', overflow: 'hidden' }}
     >
       <div className="flex flex-col space-y-4">
         <div className="flex w-full justify-between">

diff --git a/src/ui/pages/maru-egg.tsx b/src/ui/pages/maru-egg.tsx
@@ -13,11 +13,11 @@ const MaruEgg: React.FC = () => {
 
   return (
     <div className="flex h-svh items-center justify-center bg-gray-100">
-      <div className="relative flex h-[780px] w-[390px] rounded-2xl border border-gray-200 bg-background-default shadow-2xl">
+      <div className="relative flex h-full w-full bg-background-default mobile:h-full mobile:min-h-[480px] mobile:min-w-[320px] mobile:rounded-none desktop:h-[780px] desktop:max-w-[390px] desktop:rounded-3xl desktop:border desktop:border-gray-200 desktop:shadow-2xl">
         <Header type={type} />
         <ChatSection />
         {type !== undefined && category !== undefined && (
-          <div className="absolute bottom-0 w-full rounded-bl-2xl rounded-br-2xl bg-white px-3 py-3">
+          <div className="absolute bottom-0 w-full bg-white px-3 py-3 mobile:rounded-none desktop:rounded-bl-3xl desktop:rounded-br-3xl">
             <ChatForm />
           </div>
         )}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,8 +12,9 @@ module.exports = {
         'background-default': '#F2F2F3',
       },
       screens: {
-        mobile: '360px',
-        desktop: '769px',
+        'mobile_sm' : '320px',
+        'mobile' : '360px',
+        'desktop' : '769px',
       },
       fontFamily: {
         pretendard: 'Pretendard',