diff --git a/src/app/_common/navBar.module.scss b/src/app/_common/navBar.module.scss new file mode 100644 index 0000000..fce19f8 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/_common/navBar.tsx b/src/app/_common/navBar.tsx new file mode 100644 index 0000000..32284ba --- /dev/null +++ b/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("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 ( +
+ + + + + + + + + + + + + + + + + + +
+ ); +} + \ No newline at end of file diff --git a/src/app/home/character.svg b/src/app/home/character.svg new file mode 100644 index 0000000..50a27b7 --- /dev/null +++ b/src/app/home/character.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/app/home/floor.svg b/src/app/home/floor.svg new file mode 100644 index 0000000..b9b28ff --- /dev/null +++ b/src/app/home/floor.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/home/homeView.tsx b/src/app/home/homeView.tsx new file mode 100644 index 0000000..c09a8fb --- /dev/null +++ b/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 ( +
+
+ character +
+
+ floor +
+
+ ) +} \ No newline at end of file diff --git a/src/app/home/page.module.scss b/src/app/home/page.module.scss index febd81f..b4fa145 100644 --- a/src/app/home/page.module.scss +++ b/src/app/home/page.module.scss @@ -2,4 +2,132 @@ // *{ // color: $main-blue-color; -// } \ No newline at end of file +// } + +.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%; + } + } +} \ No newline at end of file diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 57864db..102c7ca 100644 --- a/src/app/home/page.tsx +++ b/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 (
- HomePage +
+
+
+ + + + + Daily Pet +
+
+ + + + + + + + +
+
+
+
+
오늘의 기분
+
행복해요
+
+
+
+ + + + 수면 +
+
+ + + + 음식 +
+
+ + + + 활동 +
+
+
+
+ +
즐거운 아침이에요!
+
+ +
+
); } diff --git a/src/lib/styles/_palette.scss b/src/lib/styles/_palette.scss index e91675e..74c77d0 100644 --- a/src/lib/styles/_palette.scss +++ b/src/lib/styles/_palette.scss @@ -2,4 +2,5 @@ $main-color: #95cc3c; $black-color: #2c2c2c; $dark-gray-color: #535353; -$light-gray-color: #f0f0f0; \ No newline at end of file +$light-gray-color: #f0f0f0; +$white-color: #ffffff; \ No newline at end of file