✨ feat: 메인페이지 반응형 디자인 추가

boostcampwm-2024 · Dec 4, 2024 · 3919857 · 3919857
1 parent 1eef1cf
commit 3919857
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 24 deletions.
diff --git a/FE/src/components/Header.tsx b/FE/src/components/Header.tsx
@@ -6,8 +6,9 @@ import useSearchInputStore from 'store/useSearchInputStore.ts';
 import logoPng from 'assets/logo.png';
 import logoWebp from 'assets/logo.webp';
 import { checkAuth, logout } from 'service/auth.ts';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import Toast from './Toast';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 
 export default function Header() {
   const { toggleModal } = useLoginModalStore();
@@ -16,6 +17,7 @@ export default function Header() {
   const { searchInput } = useSearchInputStore();
   const location = useLocation();
   const navigate = useNavigate();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   useEffect(() => {
     const check = async () => {
@@ -42,24 +44,24 @@ export default function Header() {
       return;
     }
     navigate(to);
+    setIsMenuOpen(false);
   };
 
   return (
     <header className='fixed left-0 top-0 z-20 h-[60px] w-full bg-white'>
-      <div className='mx-auto flex h-full max-w-[1280px] items-center justify-between px-8'>
+      <div className='mx-auto flex h-full max-w-[1280px] items-center justify-between px-4 md:px-8'>
         <Link to={'/'} className='flex items-center gap-2'>
           <picture>
-            <source
-              srcSet={logoWebp}
-              type='image/webp'
-              className={'h-[32px]'}
-            />
-            <img src={logoPng} alt={'Logo'} className={'h-[32px]'} />
+            <source srcSet={logoWebp} type='image/webp' className='h-[32px]' />
+            <img src={logoPng} alt='Logo' className='h-[32px]' />
           </picture>
-          <h1 className='text-xl font-bold text-juga-grayscale-black'>JuGa</h1>
+          <h1 className='hidden text-xl font-bold text-juga-grayscale-black md:block'>
+            JuGa
+          </h1>
         </Link>
 
-        <div className='flex items-center gap-8'>
+        {/* Desktop Navigation */}
+        <div className='hidden items-center gap-8 md:flex'>
           <nav className='flex items-center gap-6 text-sm font-bold text-juga-grayscale-500'>
             <div
               onClick={() => handleLink('/')}
@@ -88,13 +90,15 @@ export default function Header() {
               className='flex h-[36px] w-[280px] items-center rounded-lg bg-juga-grayscale-50 px-4 py-2'
               onClick={toggleSearchModal}
             >
-              <div className={'text-juga-grayscale-200'}>
+              <div className='text-juga-grayscale-200'>
                 {searchInput ? searchInput : 'Search...'}
               </div>
             </button>
           </div>
         </div>
-        <div className='flex items-center gap-4'>
+
+        {/* Desktop Auth Buttons */}
+        <div className='hidden items-center gap-4 md:flex'>
           {isLogin ? (
             <button
               className='px-4 py-2 text-sm text-juga-grayscale-500'
@@ -110,12 +114,81 @@ export default function Header() {
               >
                 로그인
               </button>
-              {/* <button className='px-4 py-2 text-sm text-white rounded-lg bg-juga-grayscale-black'>
-                회원가입
-              </button> */}
             </>
           )}
         </div>
+
+        {/* Mobile Menu Button */}
+        <div className='flex w-3/4 items-center justify-center md:hidden'>
+          <button
+            defaultValue={searchInput}
+            className='flex h-[36px] w-full items-center rounded-lg bg-juga-grayscale-50 px-4 py-2'
+            onClick={toggleSearchModal}
+          >
+            <div className='text-juga-grayscale-200'>
+              {searchInput ? searchInput : 'Search...'}
+            </div>
+          </button>
+        </div>
+
+        <button
+          className='p-2 md:hidden'
+          onClick={() => setIsMenuOpen(!isMenuOpen)}
+        >
+          {isMenuOpen ? (
+            <XMarkIcon className='h-6 w-6 text-juga-grayscale-500' />
+          ) : (
+            <Bars3Icon className='h-6 w-6 text-juga-grayscale-500' />
+          )}
+        </button>
+
+        {/* Mobile Menu */}
+        {isMenuOpen && (
+          <div className='absolute left-0 top-[60px] w-full bg-white shadow-lg md:hidden'>
+            <div className='flex flex-col p-4'>
+              <nav className='flex flex-col gap-4 text-sm font-bold text-juga-grayscale-500'>
+                <div
+                  onClick={() => handleLink('/')}
+                  className='cursor-pointer px-1 py-2'
+                >
+                  홈
+                </div>
+                <div
+                  onClick={() => handleLink('/rank')}
+                  className='cursor-pointer px-1 py-2'
+                >
+                  랭킹
+                </div>
+                {isLogin && (
+                  <div
+                    onClick={() => handleLink('/mypage')}
+                    className='cursor-pointer px-1 py-2'
+                  >
+                    마이페이지
+                  </div>
+                )}
+              </nav>
+
+              <div className='mt-4 flex flex-col gap-2'>
+                {isLogin ? (
+                  <button
+                    className='w-full px-4 py-2 text-sm text-juga-grayscale-500'
+                    onClick={handleLogout}
+                  >
+                    로그아웃
+                  </button>
+                ) : (
+                  <button
+                    className='w-full px-4 py-2 text-sm text-juga-grayscale-500'
+                    onClick={toggleModal}
+                  >
+                    로그인
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </header>
   );

diff --git a/FE/src/components/News/Card.tsx b/FE/src/components/News/Card.tsx
@@ -7,26 +7,26 @@ type CardWithImageProps = {
 export default function Card({ data }: CardWithImageProps) {
   return (
     <a
-      className='flex flex-col p-4 transition-all border rounded-lg cursor-pointer hover:bg-juga-grayscale-50'
+      className='flex cursor-pointer flex-col rounded-lg border p-4 transition-all hover:bg-juga-grayscale-50'
       href={data.originallink}
       target='_blank'
       rel='noopener noreferrer'
     >
       <div className={'mb-2 flex w-full flex-row items-center justify-between'}>
-        <div className={'flex flex-row items-center gap-3'}>
-          <h3 className='w-[320px] truncate text-left text-base font-medium'>
+        <div className={'flex w-full flex-row items-center gap-3'}>
+          <h3 className='w-fit truncate text-left text-base font-medium lg:w-[320px]'>
             {data.title}
           </h3>
         </div>
-        <span className={'w-fit text-sm text-gray-500'}>
+        <span className={'hidden w-fit text-sm text-gray-500 lg:block'}>
           {formatDate(data.pubDate)}
         </span>
       </div>
-      <div className='flex items-center justify-between w-full gap-4'>
-        <p className='text-sm text-left truncate w-96 text-juga-grayscale-500'>
+      <div className='flex w-full items-center justify-between gap-4'>
+        <p className='w-96 truncate text-left text-sm text-juga-grayscale-500'>
           {data.description}
         </p>
-        <span className='rounded-full bg-juga-blue-10 px-2 py-0.5 text-xs text-juga-blue-50'>
+        <span className='hidden rounded-full bg-juga-blue-10 px-2 py-0.5 text-xs text-juga-blue-50 lg:block'>
           {data.query}
         </span>
       </div>

diff --git a/FE/src/components/News/News.tsx b/FE/src/components/News/News.tsx
@@ -19,7 +19,7 @@ export default function News() {
         <h2 className='text-xl font-bold'>주요 뉴스</h2>
       </div>
 
-      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2'>
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
         {data.news
           .slice(randomNewsIndex, randomNewsIndex + 4)
           .map((news: NewsDataType, index: number) => (

diff --git a/FE/src/components/Search/index.tsx b/FE/src/components/Search/index.tsx
@@ -47,7 +47,7 @@ export default function SearchModal() {
     <div className='z-30'>
       <Overlay onClick={() => toggleSearchModal()} />
       <section
-        className={`${searchInput.length ? 'h-[520px]' : ''} fixed left-1/2 top-3 w-[640px] -translate-x-1/2 rounded-2xl bg-white shadow-xl`}
+        className={`${searchInput.length ? 'h-[520px]' : ''} fixed left-1/2 top-3 w-4/5 -translate-x-1/2 rounded-2xl bg-white shadow-xl md:w-[640px]`}
       >
         <div
           className={'absolute left-0 right-0 top-0 rounded-t-2xl bg-white p-3'}