Merge pull request #259 from SCBJ-7/feature/#243-bottomNav-color

[#243] 바텀네비게이션 수정
SCBJ-7 · Jan 26, 2024 · a0533f1 · a0533f1
2 parents 3c755ec + 8a3c0fa
commit a0533f1
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/src/assets/icons/NavHome.tsx b/src/assets/icons/NavHome.tsx
@@ -12,23 +12,23 @@ const NavIconHome = ({ isActive }: { isActive: boolean }) => {
       <g clipPath="url(#clip0_1724_9234)">
         <path
           d="M26.4873 20.5968C28.4273 20.5968 30 19.0186 30 17.0718C30 15.125 28.4273 13.5469 26.4873 13.5469C24.5473 13.5469 22.9746 15.125 22.9746 17.0718C22.9746 19.0186 24.5473 20.5968 26.4873 20.5968Z"
-          fill={isActive ? theme.color.percentOrange : "white"}
+          fill={isActive ? theme.color.percentOrange : theme.color.black}
         />
         <path
           d="M4.51269 16.8146C6.45269 16.8146 8.02537 15.2364 8.02537 13.2896C8.02537 11.3428 6.45269 9.76465 4.51269 9.76465C2.57268 9.76465 1 11.3428 1 13.2896C1 15.2364 2.57268 16.8146 4.51269 16.8146Z"
-          fill={isActive ? theme.color.percentOrange : "white"}
+          fill={isActive ? theme.color.percentOrange : theme.color.black}
         />
         <path
           d="M22.7322 5.99975H19.089C18.5431 8.0072 17.8158 8.73873 16.9359 8.73873C16.1476 8.73873 15.6017 8.22156 15.6017 7.24675C15.6017 6.91331 15.6306 6.51692 15.7221 5.99975H12.0314C11.2855 5.99975 10.6362 6.50842 10.4531 7.23484L6.00797 24.9566C5.75028 25.9858 6.52165 26.9844 7.57952 26.9878L10.7345 26.9997H10.8989C11.4499 25.0076 12.1806 24.2761 13.0622 24.2761C13.8607 24.2761 14.4133 24.8001 14.4133 25.7868C14.4133 26.1134 14.3828 26.503 14.298 26.9997H18.633C19.3908 26.9997 20.0468 26.4758 20.2181 25.7357L24.3139 8.0004C24.5496 6.97625 23.7765 5.99805 22.7288 5.99805L22.7322 5.99975ZM17.6921 13.8594H14.0014L14.237 12.7196H17.9379L17.6921 13.8594Z"
-          fill={isActive ? theme.color.percentOrange : "white"}
+          fill={isActive ? theme.color.percentOrange : theme.color.black}
         />
       </g>
       <defs>
         <clipPath id="clip0_1724_9234">
           <rect
             width="29"
             height="21"
-            fill={isActive ? theme.color.percentOrange : "white"}
+            fill={isActive ? theme.color.percentOrange : theme.color.black}
             transform="translate(1 6)"
           />
         </clipPath>

diff --git a/src/components/layout/navBottom/NavBottom.style.ts b/src/components/layout/navBottom/NavBottom.style.ts
@@ -7,22 +7,23 @@ import { NavLink } from "react-router-dom";
 import styled from "styled-components";
 import NavIconHome from "@/assets/icons/NavHome";
 
-export const BottomNavContainer = styled.section`
+export const BottomNavContainer = styled.section<{ $isMobile: boolean }>`
   display: flex;
   position: fixed;
   bottom: 0;
   width: 100%;
   max-width: 768px;
   z-index: 1;
-  height: 60px;
+  height: ${({ $isMobile }) => ($isMobile ? "78px" : "60px")};
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
 
-  background-color: ${({ theme }) => theme.color.black};
+  background-color: white;
   box-shadow: 0 0 10px 0 rgba(5, 44, 82, 0.1);
 `;
 
 export const BottomNavWrapper = styled.div`
+  margin-top: 4px;
   max-width: 768px;
   width: 100%;
 
@@ -41,7 +42,7 @@ export const BottomNavCell = styled(NavLink)`
 
   ${({ theme }) => theme.typo.caption5}
 
-  color: white;
+  color: ${({ theme }) => theme.color.black};
   &.active {
     color: ${({ theme }) => theme.color.percentOrange};
   }

diff --git a/src/components/layout/navBottom/NavBottom.tsx b/src/components/layout/navBottom/NavBottom.tsx
@@ -1,8 +1,11 @@
 import { PATH } from "@/constants/path";
 import { useLocation } from "react-router-dom";
 import * as S from "./NavBottom.style";
+import { isMobile } from "@/utils/isMobile";
 
 const BottomNav = () => {
+  const isMobileDevice = isMobile();
+
   const { pathname } = useLocation();
   const navList = [
     {
@@ -32,7 +35,7 @@ const BottomNav = () => {
   ];
 
   return (
-    <S.BottomNavContainer>
+    <S.BottomNavContainer $isMobile={isMobileDevice}>
       <S.BottomNavWrapper>
         {navList.map((item) => {
           return (

diff --git a/src/pages/homePage/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx b/src/pages/homePage/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
@@ -41,7 +41,7 @@ const ItemCarouselUnit = ({ item }: UnitProps) => {
               <h1>{hotel[0].hotelName}</h1>
               <h3>{hotel[0].roomType}</h3>
               <S.Sticker>
-                {CHKIN1} ~ {CHKOUT1}
+                {CHKIN0} ~ {CHKOUT0}
               </S.Sticker>
             </div>
             <div className="hotel_price">
@@ -62,7 +62,7 @@ const ItemCarouselUnit = ({ item }: UnitProps) => {
               <h1>{hotel[1].hotelName}</h1>
               <h3>{hotel[1].roomType}</h3>
               <S.Sticker>
-                {CHKIN0} ~ {CHKOUT0}
+                {CHKIN1} ~ {CHKOUT1}
               </S.Sticker>
             </div>
             <div className="hotel_price">