Feat root page

package.json

@@ -12,7 +12,8 @@
     "firebase": "^10.12.3",
     "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "sass": "^1.77.8"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -21,6 +22,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "scss": "^0.2.4",
+    "scss-reset": "^1.4.2",
     "typescript": "^5",
     "typescript-plugin-css-modules": "^5.1.0"
   }

src/app/_common/Logo/index.module.scss

@@ -0,0 +1,17 @@
+@import "../../../lib/styles/palette.scss"; 
+// TODO: next.config.mjs의 perpendDate로 import 
+
+.logo{
+    margin: auto 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    font-weight: 700;
+    color: $black-color;
+    :last-child {
+        color: $main-color;
+        font-size: 64px;
+        font-weight: 800;
+    }
+}

src/app/_common/Logo/index.tsx

@@ -0,0 +1,10 @@
+import style from "./index.module.scss";
+
+export default function Logo() {
+  return (
+    <div className={style.logo}>
+      <div>daily</div>
+      <div>Pet</div>
+    </div>
+  );
+}

src/app/globals.scss

@@ -1,4 +1,23 @@
+@use 'scss-reset/reset';
+@import '../lib/styles/_palette.scss';
+
 body{
-    background-color: #2c2c2c;
-
+    background-color: #ffffff;
+    color: $black-color;
+    font-size: 16px;
+}
+
+button{
+    background-color: $main-color;
+    color: $black-color;
+
+    padding: 10px;
+    border-radius: 10px;
+
+    font-size: 20px;
+    font-weight: 700;
+}
+a{
+    color: $main-color;
+    text-decoration: none;
 }

src/app/page.module.scss

@@ -1,50 +1,22 @@
-.main{
-    width: 100%;
-    height: 100vh;
+.main {
     display: flex;
-}
-.main:nth-child(0){
-    display: inline-flex;
     flex-direction: column;
+    justify-content: space-around;
     align-items: center;
-    gap: 40px;
-}
-
-.main:nth-child(1){
-    display: flex;
-    width: 260px;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-}
-
-.logo{
-    display: flex;
-    width: 179px;
-    flex-direction: column;
-    align-items: center;
-    gap: -4px;
-    > div{
-        display: flex;
-        align-items: center;
-        gap: 2px;
-        align-self: stretch;
-        &:first-child {
-            color: #FFF;
-            font-family: Inter;
-            font-size: 32px;
-            font-style: normal;
-            font-weight: 600;   
-            line-height: normal;
-        }
-        &:nth-child(2) {
-            // 두 번째 div 스타일
-            color: #9EE628;
-            font-family: Inter;
-            font-size: 64px;
-            font-style: normal;
-            font-weight: 700;
-            line-height: normal;
-        }
+    height: 100vh;
+    text-align: center;
+    h3{
+        margin-top: 30px;
+        margin-bottom: 10px;
+
+        font-weight: 700;
+        font-size: 20px;
+    }
+    button{
+        margin: 5px;
+        width: 60vw;
     }
+}
+.smallfont {
+    font-size: 12px;
 }

src/app/page.tsx

@@ -1,26 +1,23 @@
-import Image from "next/image";
+import Link from "next/link";
+import Logo from "./_common/Logo";
 import styles from "./page.module.scss";
 
 export default function Home() {
   return (
     <main className={styles.main}>
+      <div />
       <div>
-        <div className={styles.logo}>
-          <div>
-            <div>daily</div>
-            <div>Pet</div>
-          </div>
-        </div>
-        <div>
-
-        </div>
+        <Logo />
+        <h3>수면, 음식, 운동</h3>
+        <div>나만의 펫과 함께</div>
+        <div>오늘 하루를 활동해 볼까요?</div>
       </div>
       <div>
-      <div>
-
-        </div>
-        <div>
-
+        <Link href="/signup">
+          <button>시작하기</button>
+        </Link>
+        <div className={styles.smallfont}>
+          이미 계정이 있나요? <Link href="/login">로그인</Link>
         </div>
       </div>
     </main>

src/app/signup/page.module.scss

@@ -0,0 +1,36 @@
+.login_page {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .auth_title{
+
+  }
+
+  .login_page h1 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    color: #4BBD5D;
+  }
+
+  .login_space{
+
+  }
+
+  .login_button{
+    display: flex;
+    bottom: 60px;
+    width: 80%;
+    height: 50px;
+    /* fill: #4BBD5D; */
+    /* font: ; */
+    color: #fff;
+    background: #4BBD5D;
+    border-radius: 12px;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+  }