[ISSUE-12] 메인 페이지 반응형 추가

frontend/app/_common/BottomMenu/bottomMenu.module.css

@@ -1,11 +1,18 @@
-.main {
-  background-color: white;
+.main_wrapper {
+  width: 100%;
   display: flex;
-  width: 360px;
-  border-top: 1px solid #999999;
+  justify-content: center;
+  align-items: center;
+}
+.util_wrapper {
+  background-color: #fff;
+  display: flex;
+  width: 100%;
+  max-width: 700px;
   position: fixed;
   z-index: 100;
   bottom: 0;
+  margin: auto;
 }
 .link {
   flex: 1;
@@ -16,13 +23,17 @@
 .button {
   display: flex;
   flex-direction: column;
-  padding: 8px 0;
+  padding: 4px 0;
   align-items: center;
   color: #999999;
   color:#ff5757;
 }
-
 .icon {
   width: 24px;
   height: 24px;
+}
+@media (min-width:1001px) {
+  .main_wrapper {
+    display: none;
+  }
 }

frontend/app/_common/BottomMenu/index.tsx

@@ -10,38 +10,41 @@ import Link from 'next/link'
 import style from './bottomMenu.module.css'
 
 const userTools = () => (
-  <div className={style.main}>
-    <Link href="/" className={style.link}>
-      <button type="button" className={style.button}>
-        <FontAwesomeIcon icon={faHouse} className={style.icon} />
-        <span>메인</span>
-      </button>
-    </Link>
-    <Link href="/feed" className={style.link}>
-      <button type="button" className={style.button}>
-        <FontAwesomeIcon icon={faClipboard} className={style.icon} />
-        <span>피드</span>
-      </button>
-    </Link>
-    <Link href="search" className={style.link}>
-      <button type="button" className={style.button}>
-        <FontAwesomeIcon icon={faMagnifyingGlass} className={style.icon} />
-        <span>검색</span>
-      </button>
-    </Link>
-    <Link href="alarm" className={style.link}>
-      <button type="button" className={style.button}>
-        <FontAwesomeIcon icon={faBell} className={style.icon} />
-        <span>알림</span>
-      </button>
-    </Link>
-    <Link href="profile" className={style.link}>
-      <button type="button" className={style.button}>
-        <FontAwesomeIcon icon={faUser} className={style.icon} />
-        <span>내 정보</span>
-      </button>
-    </Link>
+  <div className={style.main_wrapper}>
+    <div className={style.util_wrapper}>
+      <Link href="/" className={style.link}>
+        <button type="button" className={style.button}>
+          <FontAwesomeIcon icon={faHouse} className={style.icon} />
+          <span>메인</span>
+        </button>
+      </Link>
+      <Link href="/feed" className={style.link}>
+        <button type="button" className={style.button}>
+          <FontAwesomeIcon icon={faClipboard} className={style.icon} />
+          <span>피드</span>
+        </button>
+      </Link>
+      <Link href="search" className={style.link}>
+        <button type="button" className={style.button}>
+          <FontAwesomeIcon icon={faMagnifyingGlass} className={style.icon} />
+          <span>검색</span>
+        </button>
+      </Link>
+      <Link href="alarm" className={style.link}>
+        <button type="button" className={style.button}>
+          <FontAwesomeIcon icon={faBell} className={style.icon} />
+          <span>알림</span>
+        </button>
+      </Link>
+      <Link href="profile" className={style.link}>
+        <button type="button" className={style.button}>
+          <FontAwesomeIcon icon={faUser} className={style.icon} />
+          <span>내 정보</span>
+        </button>
+      </Link>
   </div>
+  </div>
+
 )
 
 export default userTools

frontend/app/_components/Carousel/carousel.module.css

@@ -1,7 +1,14 @@
-.main {
+.main_wrapper {
   width: 100%;
+  background-color: rgba(255, 141, 35, 0.705);
+  margin-bottom: 24px;
 }
-.carouselContainer {
+.data_wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+}
+.carousel_container {
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -25,28 +32,31 @@
 .carouselItems {
   display: flex;
   position: relative;
-  height: 100%;
+  max-height: 440px;
   padding: 0;
   margin: 0;
 }
 .carouselItem {
   display: flex;
   flex: none;
   width: 100%;
+  min-height: 300px;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }
-.carouselTextContainer {
+.carousel_text_container {
   position: absolute;
   width: 100%;
   bottom: 0;
   background: linear-gradient(rgba(255, 255, 255, 0),rgba(255, 0, 0, 0.3));
   padding: 0 24px;
 }
-.carouselText {
+.carousel_text {
   margin: 0;
-  color: white;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
 }
 .carouselImage {
   width: 100%;
@@ -68,4 +78,37 @@
 }
 .monthlyCatText {
   margin-bottom: 12px;
+}
+/* @media (min-width:481px) {
+  .main_wrapper {
+    display: hidden;
+  }
+} */
+@media (min-width:601px) {
+  .main_wrapper {
+    height: 302px;
+    margin-bottom: 100px;
+  }
+  .data_wrapper {
+    position: absolute;
+    top: 80px;
+    justify-content: center;
+    align-items: center;
+    padding: 0 40px;
+  }
+  .carousel_container {
+    min-width: 268px;
+    flex: 1;
+    max-width: 560px;
+    height: 284px;
+    border-radius: 20px;
+  }
+  .carousel_text_container {
+    position: relative;
+    background:none;
+    flex-shrink: 0;
+    width: 236px;
+    height:206px;
+    padding: 24px;
+  }
 }

frontend/app/_components/Carousel/index.tsx

@@ -78,48 +78,51 @@ function Carousel({ carouselList }: CarouselProps) {
   }, 5000)
 
   return (
-    <div className={style.main}>
-      <div className={style.carouselContainer}>
-        <FaChevronCircleLeft
-          size={20}
-          color="#000000"
-          opacity={0.5}
-          className={cn(style.moveBtn, style.left)}
-          onClick={() => handleSwipe(-1)}
-        />
-        <FaChevronCircleRight
-          size={20}
-          color="#000000"
-          opacity={0.5}
-          className={cn(style.moveBtn, style.right)}
-          onClick={() => handleSwipe(1)}
-        />
-        <ul className={style.carouselItems} ref={carouselRef}>
-          {currList?.map((image, idx) => {
-            const key = `${image.url}-${idx}`
-            return (
-              <li key={key} className={style.carouselItem}>
-                <img
-                  src={image.url}
-                  alt="carousel-img"
-                  className={style.carouselImage}
-                />
-              </li>
-            )
-          })}
-        </ul>
-        <div className={style.carouselTextContainer}>
+    <section className={style.main_wrapper}>
+      <div className={style.data_wrapper}>
+        <div className={style.carousel_container}>
+          <FaChevronCircleLeft
+            size={20}
+            color="#000000"
+            opacity={0.5}
+            className={cn(style.moveBtn, style.left)}
+            onClick={() => handleSwipe(-1)}
+          />
+          <FaChevronCircleRight
+            size={20}
+            color="#000000"
+            opacity={0.5}
+            className={cn(style.moveBtn, style.right)}
+            onClick={() => handleSwipe(1)}
+          />
+          <ul className={style.carouselItems} ref={carouselRef}>
+            {currList?.map((image, idx) => {
+              const key = `${image.url}-${idx}`
+              return (
+                <li key={key} className={style.carouselItem}>
+                  <img
+                    src={image.url}
+                    alt="carousel-img"
+                    className={style.carouselImage}
+                  />
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+        <div className={style.carousel_text_container}>
           <div className={style.monthlyCatBadge}>이달의 고양이</div>
           <div className={style.monthlyCatText}>
             {currList[currIndex]?.text.split('\n').map((line) => (
-              <p className={style.carouselText} key={line}>
+              <p className={style.carousel_text} key={line}>
                 {line}
               </p>
             ))}
           </div>
         </div>
       </div>
-    </div>
+
+    </section>
   )
 }
 

frontend/app/_components/Navbar2/index.tsx

@@ -8,21 +8,28 @@ import style from './navbar2.module.css'
 import {useRouter} from 'next/navigation'
 import { useRecoilState } from 'recoil'
 import { authState } from '@/app/_store/atom/auth'
+import { usePathname } from 'next/navigation'
+
+const navItems = [
+  {name:'투데이' ,path:'/'},
+  {name:'피드', path:'/feed'},
+  {name:'검색', path:'/search'},
+  {name:'알림',path:'/alarm'},
+  {name:'프로필',path:'/profile'}
+]
 
 function Navbar2() {
   const [scrollY, setScrollY] = useState(0)
   const [auth,setAuth] = useRecoilState(authState);
+
+  const pathname = usePathname();
   const router = useRouter();
   useEffect(() => {
     const handleScroll = () => {
-      // window.scrollY를 사용하여 현재 스크롤 위치를 가져옵니다.
       setScrollY(window.scrollY)
     }
-
-    // 스크롤 이벤트 리스너를 추가합니다.
     window.addEventListener('scroll', handleScroll)
 
-    // 컴포넌트 언마운트 시 이벤트 리스너를 제거합니다.
     return () => {
       window.removeEventListener('scroll', handleScroll)
     }
@@ -38,17 +45,34 @@ function Navbar2() {
     }
   }
   return (
-    <div className={cn(style.main, { [style.scrolled]: scrollY > 0 })}>
-      <div>왓냐옹</div>
-      <div>
-        {auth ? 
-        <button className={style.navBtn} onClick={onHandleLogout}>로그아웃</button> :
-        <Link href="/login" className={style.navBtn}>
-          로그인
-        </Link>
+    <section className={cn(style.main_wrapper, { [style.scrolled]: scrollY > 0 })}>
+      <h3 className={style.logo_wrapper}>
+        <Link href='/'>LOGO</Link>
+      </h3>
+      <nav className={style.nav}>
+        <ul className={style.nav_ul}>
+          {navItems.map(({name,path},idx)=>
+            <li key={`${name}-${idx}`}>
+              <Link href={path} className={cn(style.nav_link,{[style.nav_clicked]: pathname===path })}>{name}</Link>
+            </li>
+          )}
+        </ul>
+      </nav>
+      <ul className={style.util_ul}>
+        {auth ?
+        <li>
+          <button className={cn(style.util_button,{[style.util_scrolled]: scrollY > 0})} onClick={onHandleLogout}>로그아웃</button>
+        </li> :
+        <li>
+          <Link href="/login">
+            <button  className={cn(style.util_button,{[style.util_scrolled]: scrollY > 0})}>
+              로그인
+            </button>
+          </Link>
+        </li>
         }
-      </div>
-    </div>
+      </ul>
+    </section>
   )
 }