Feat home page

src/app/_common/navBar.module.scss

@@ -0,0 +1,19 @@
+@use '../../lib/styles/palette' as *;
+
+
+.navbar {
+    display: flex;
+    padding: 12px 60px;
+    justify-content: space-between;
+    align-items: center;
+    width: 390px;
+
+    position: absolute;
+    bottom: 0;
+
+
+    border: 1px solid $light-gray-color;
+    background-color: $white-color;
+
+    z-index: 2;
+}

src/app/_common/navBar.tsx

@@ -0,0 +1,57 @@
+import { useRouter } from 'next/navigation';
+
+import styles from './navBar.module.scss'
+import { useState } from 'react';
+
+
+export default function NavBar() {
+    const mainColor = "#95cc3c";
+    const blackColor = "#2C2C2C";
+
+    const [ nowPage, setNowPage ] = useState<string | null>("home");
+
+    const router = useRouter();
+    const clickHome = () => {
+      setNowPage("home");
+      router.push("/home");
+    };
+    const clickLog = () => {
+      setNowPage("log");
+      router.push("/log")
+    };
+    const clickShop = () => {
+      setNowPage("shop");
+      router.push("/shop")
+    };
+    const clickMypage = () => {
+      setNowPage("mypage");
+      router.push("/mypage")
+    };
+
+    return (
+      <div className={styles.navbar}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none" onClick={clickHome}>
+          <path d="M7.5 19.1396C7.5 17.1029 7.5 16.0846 7.91169 15.1895C8.32338 14.2944 9.09655 13.6317 10.6429 12.3063L12.1429 11.0205C14.9379 8.62485 16.3353 7.427 18 7.427C19.6647 7.427 21.0621 8.62485 23.8571 11.0205L25.3571 12.3063C26.9035 13.6317 27.6766 14.2944 28.0883 15.1895C28.5 16.0846 28.5 17.1029 28.5 19.1396V25.5002C28.5 28.3286 28.5 29.7428 27.6213 30.6215C26.7426 31.5002 25.3284 31.5002 22.5 31.5002H13.5C10.6716 31.5002 9.25736 31.5002 8.37868 30.6215C7.5 29.7428 7.5 28.3286 7.5 25.5002V19.1396Z" 
+          stroke={nowPage === "home" ? mainColor : blackColor} stroke-width="3"/>
+          <path d="M21.75 31.5V24C21.75 23.1716 21.0784 22.5 20.25 22.5H15.75C14.9216 22.5 14.25 23.1716 14.25 24V31.5" stroke={nowPage === "home" ? mainColor : blackColor} stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+
+        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none" onClick={clickLog}>
+          <path d="M7.875 21.2143V8.35714C7.875 7.95308 7.875 7.75105 8.00053 7.62553C8.12605 7.5 8.32808 7.5 8.73215 7.5H14.9154C15.4425 7.5 15.7061 7.5 15.916 7.6328C16.1259 7.76559 16.2388 8.00376 16.4645 8.48008L17.1605 9.94849C17.3862 10.4248 17.4991 10.663 17.709 10.7958C17.9189 10.9286 18.1825 10.9286 18.7096 10.9286H26.5179C26.9219 10.9286 27.1239 10.9286 27.2495 11.0541C27.375 11.1796 27.375 11.3817 27.375 11.7857V23.7857C27.375 24.1898 27.375 24.3918 27.2495 24.5173C27.1239 24.6429 26.9219 24.6429 26.5179 24.6429H18.7096C18.1825 24.6429 17.9189 24.6429 17.709 24.5101C17.4991 24.3773 17.3862 24.1391 17.1605 23.6628L16.4645 22.1944C16.2388 21.718 16.1259 21.4799 15.916 21.3471C15.7061 21.2143 15.4425 21.2143 14.9154 21.2143H7.875ZM7.875 21.2143V31.5" 
+          stroke={nowPage === "log" ? mainColor : blackColor} stroke-width="3" stroke-linecap="round"/>
+        </svg>
+
+        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none" onClick={clickShop}>
+          <path d="M7.93546 8.20398H18.719C23.9605 8.20398 28.2095 12.453 28.2095 17.6945V28.4781H17.426C12.1845 28.4781 7.93546 24.229 7.93546 18.9875V8.20398Z" stroke={nowPage === "shop" ? mainColor : blackColor} stroke-width="3"/>
+          <path d="M16.9265 18L29.8565 29.637" stroke={nowPage === "shop" ? mainColor : blackColor} stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+
+        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none" onClick={clickMypage}>
+          <circle cx="18" cy="10.5" r="6" stroke={nowPage === "mypage" ? mainColor : blackColor} stroke-width="3" stroke-linecap="round"/>
+          <path d="M8.00683 27.4808C8.99845 23.2903 13.1576 21 17.4639 21H18.5361C22.8424 21 27.0016 23.2903 27.9932 27.4808C28.185 28.2917 28.3375 29.1402 28.4233 30.0025C28.5054 30.8268 27.8284 31.5 27 31.5H9C8.17157 31.5 7.49463 30.8268 7.57666 30.0025C7.66246 29.1402 7.81495 28.2917 8.00683 27.4808Z" 
+          stroke={nowPage === "mypage" ? mainColor : blackColor} stroke-width="3" stroke-linecap="round"/>
+        </svg>
+      </div>
+    );
+}
+

src/app/home/homeView.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import Floor from './floor.svg'
+import Character from './character.svg'
+
+import styles from "./page.module.scss";
+
+import Image from 'next/image'
+
+
+
+export default function HomeView() {
+
+    return (
+        <div className={styles.character}>
+            <div className={styles.forward}>
+                <Image src={Character} alt='character'></Image>
+            </div>
+            <div className={styles.background}>
+                <Image src={Floor} alt='floor' className={styles.floor}></Image>
+            </div>
+        </div>
+    )
+}

src/app/home/page.module.scss

@@ -2,4 +2,132 @@
 
 // *{
 //     color: $main-blue-color;
-// }
+// }
+
+.home {
+    display: flex;
+    width: 390px;
+    height: 784px;
+    padding: 40px 20px;
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+    flex-shrink: 0;
+
+    color: $black-color;
+    font-family: Inter;
+
+    /* medium */
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+.top_bar {
+    display: flex;
+    width: 334px;
+    height: 31px;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+
+    color: $main-color;
+    font-family: Inter;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+
+    .pay {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .setting {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+}
+
+.home_status {
+    display: flex;
+    padding: 0px 20px;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+
+    .home_fill {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 20px;
+    }
+
+    .home_status_frame {
+        display: flex;
+        width: 54px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+
+        .home_status_info {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+    }
+}
+
+.home_view {
+    display: flex;
+    padding: 20px;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 40px;
+    flex: 1 0 0;
+    align-self: stretch;
+
+    border-radius: 20px;
+    background: #F0F7FF;
+
+    .comment {
+        display: flex;
+        padding: 20px;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        align-self: stretch;
+
+        border-radius: 12px;
+        border: 2px solid #7CACDE;
+        background: $white-color;
+    }
+}
+
+// home view (character)
+.character {
+    position: relative;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .forward {
+        position: absolute;  
+        z-index: 1;  
+    }
+
+    .background {
+        height: 40vh;
+        position: static;
+
+        .floor {
+            position: relative;
+            top: 60%;
+        }
+    }
+}

src/app/home/page.tsx

@@ -1,9 +1,67 @@
+"use client";
+
 import styles from "./page.module.scss";
 
+import HomeView from "./homeView";
+import NavBar from "../_common/navBar";
+
+
 export default function HomePage() {
   return (
     <div>
-        HomePage
+        <div className={styles.home}>
+          <div className={styles.top_bar}>
+            <div className={styles.pay}>
+              <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M7.78949 7.86298H18.573C23.8145 7.86298 28.0636 12.112 28.0636 17.3535V28.1371H17.28C12.0386 28.1371 7.78949 23.888 7.78949 18.6465V7.86298Z" stroke="#A0D943" stroke-width="3"/>
+              <path d="M16.7805 17.659L29.7106 29.296" stroke="#A0D943" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              <span>Daily Pet</span>
+            </div>
+            <div className={styles.setting}>
+              <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27" fill="none">
+                <path d="M7.25382 8.9656C7.60746 5.78286 10.2977 3.375 13.5 3.375V3.375C16.7023 3.375 19.3925 5.78286 19.7462 8.9656L20.0295 11.5151C20.0331 11.5476 20.0349 11.5638 20.0367 11.5799C20.1818 12.8441 20.5933 14.0631 21.244 15.1566C21.2523 15.1705 21.2607 15.1845 21.2775 15.2125L21.9278 16.2963C22.5179 17.2799 22.813 17.7716 22.7493 18.1753C22.7069 18.444 22.5687 18.6881 22.3601 18.8627C22.0467 19.125 21.4732 19.125 20.3262 19.125H6.67376C5.52677 19.125 4.95327 19.125 4.63988 18.8627C4.43135 18.6881 4.2931 18.444 4.25071 18.1753C4.18702 17.7716 4.48208 17.2799 5.0722 16.2963L5.72249 15.2125C5.73931 15.1845 5.74772 15.1705 5.756 15.1566C6.40674 14.0631 6.81822 12.8441 6.96328 11.5799C6.96513 11.5638 6.96693 11.5476 6.97055 11.5151L7.25382 8.9656Z" stroke="#535353" stroke-width="2.25"/>
+                <path d="M9 19.125C9 19.7159 9.1164 20.3011 9.34254 20.8471C9.56869 21.393 9.90016 21.8891 10.318 22.307C10.7359 22.7248 11.232 23.0563 11.7779 23.2825C12.3239 23.5086 12.9091 23.625 13.5 23.625C14.0909 23.625 14.6761 23.5086 15.2221 23.2825C15.768 23.0563 16.2641 22.7248 16.682 22.307C17.0998 21.8891 17.4313 21.393 17.6575 20.8471C17.8836 20.3011 18 19.7159 18 19.125" stroke="#535353" stroke-width="2.25" stroke-linecap="round"/>
+              </svg>
+              <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27" fill="none">
+                <path d="M3.4669 15.6876C2.8721 14.6183 2.5747 14.0837 2.5747 13.5C2.5747 12.9163 2.8721 12.3817 3.4669 11.3124L4.9848 8.58375L6.58896 5.90486C7.21755 4.85513 7.53185 4.33026 8.03735 4.03841C8.54284 3.74656 9.15454 3.73681 10.3779 3.71729L13.5 3.6675L16.6221 3.71729C17.8455 3.73681 18.4572 3.74656 18.9626 4.03841C19.4681 4.33026 19.7824 4.85513 20.411 5.90486L22.0152 8.58375L23.5331 11.3124C24.1279 12.3817 24.4253 12.9163 24.4253 13.5C24.4253 14.0837 24.1279 14.6183 23.5331 15.6876L22.0152 18.4162L20.411 21.0951C19.7824 22.1449 19.4681 22.6697 18.9627 22.9616C18.4572 23.2534 17.8455 23.2632 16.6221 23.2827L13.5 23.3325L10.3779 23.2827C9.15454 23.2632 8.54285 23.2534 8.03735 22.9616C7.53185 22.6697 7.21756 22.1449 6.58896 21.0951L4.9848 18.4163L3.4669 15.6876Z" stroke="#535353" stroke-width="2.25"/>
+                <circle cx="13.5" cy="13.5" r="3.375" stroke="#535353" stroke-width="2.25"/>
+              </svg>
+            </div>
+          </div>
+          <div className={styles.home_status}>
+            <div className={styles.home_fill}>
+              <div>오늘의 기분</div>
+              <div>행복해요</div>
+            </div>
+            <div className={styles.home_status_frame}>
+              <div className={styles.home_status_info}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                  <circle cx="6" cy="6" r="6" fill="#A0D943"/>
+                </svg>
+                <span>수면</span>
+              </div>
+              <div className={styles.home_status_info}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                  <circle cx="6" cy="6" r="6" fill="#A0D943"/>
+                </svg>
+                <span>음식</span>
+              </div>
+              <div className={styles.home_status_info}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                  <circle cx="6" cy="6" r="6" fill="#A0D943"/>
+                </svg>
+                <span>활동</span>
+              </div>
+            </div>
+          </div>
+          <div className={styles.home_view}>
+            <HomeView></HomeView>
+            <div className={styles.comment}>즐거운 아침이에요!</div>
+          </div>
+
+        </div>
+      <NavBar></NavBar>
     </div>
   );
 }

src/lib/styles/_palette.scss

@@ -2,4 +2,5 @@
 $main-color: #95cc3c;
 $black-color: #2c2c2c;
 $dark-gray-color: #535353; 
-$light-gray-color: #f0f0f0;
+$light-gray-color: #f0f0f0;
+$white-color: #ffffff;