[Feat] #21 - add css and today score

LetsExercise · Aug 6, 2024 · b7af2d3 · b7af2d3
1 parent 4cf99df
commit b7af2d3
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 34 deletions.
diff --git a/src/app/log/DietLog.tsx b/src/app/log/DietLog.tsx
@@ -3,22 +3,33 @@
 import { useDietOfDay } from "@/lib/firebase/api/dietAPI";
 import Image from "next/image";
 
+import styles from './page.module.scss'
+import { logInput } from "./page";
+
 export default function DietLog() {
   const { data, isLoading, isError } = useDietOfDay(new Date());
   if (isLoading) return <div>Loading...</div>;
   if (isError) return <div>Error</div>;
-  if (!data) return <div></div>;
+  if (!data) return <div>활동을 추가해보세요!</div>;
 
   return (
-    <div>
-      <h2>식습관</h2>
-      {data.map((diet) => (
-        <div key={diet.id}>
-          <div>{diet.name}</div>
-          <div>{diet.calorie}</div>
-          <Image src={diet.imageURL} alt={diet.name} width={100} height={100} />
-        </div>
-      ))}
+    <div className={styles.add_log_frame}>
+      <div className={styles.add_log_title}>
+        <div>식습관</div>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" onClick={logInput}>
+          <path d="M12 6L12 18" stroke="#535353" stroke-width="2" stroke-linecap="round"/>
+          <path d="M18 12L6 12" stroke="#535353" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </div>
+      <div>
+        {data.map((diet) => (
+          <div key={diet.id} className={styles.log_input}>
+            <div>{diet.name}</div>
+            <div>{diet.calorie}</div>
+            <Image src={diet.imageURL} alt={diet.name} width={100} height={100} />
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/app/log/SleepLog.tsx b/src/app/log/SleepLog.tsx
@@ -2,22 +2,34 @@
 
 import { useSleepOfDay } from "@/lib/firebase/api/sleepAPI";
 
+import styles from './page.module.scss'
+import { logInput } from "./page";
+
+
 export default function SleepLog() {
   const { data, isLoading, isError } = useSleepOfDay(new Date());
   if (isLoading) return <div>Loading...</div>;
   if (isError) return <div>Error</div>;
-  if (!data) return <div></div>;
+  if (!data) return <div>활동을 추가해보세요!</div>;
 
   return (
-    <div>
-      <h2>수면</h2>
-      {data.map((sleep) => (
-        <div key={sleep.id}>
-          <div>{sleep.label}</div>
-          <div>{sleep.sleepStart.toISOString()}</div>
-          <div>{sleep.sleepEnd.toISOString()}</div>
-        </div>
-      ))}
+    <div className={styles.add_log_frame}>
+      <div className={styles.add_log_title}>
+        <div>수면습관</div>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" onClick={logInput}>
+          <path d="M12 6L12 18" stroke="#535353" stroke-width="2" stroke-linecap="round"/>
+          <path d="M18 12L6 12" stroke="#535353" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </div>
+      <div>
+        {data.map((sleep) => (
+          <div key={sleep.id} className={styles.log_input}>
+            <div>{sleep.label}</div>
+            <div>{sleep.sleepStart.toISOString()}</div>
+            <div>{sleep.sleepEnd.toISOString()}</div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/app/log/WorkoutLog.tsx b/src/app/log/WorkoutLog.tsx
@@ -2,22 +2,34 @@
 
 import { useWorkoutOfDay } from "@/lib/firebase/api/workoutAPI";
 
+import styles from './page.module.scss'
+import { logInput } from "./page";
+
 export default function WorkoutLog() {
   const { data, isLoading, isError } = useWorkoutOfDay(new Date());
   if (isLoading) return <div>Loading...</div>;
   if (isError) return <div>Error</div>;
-  if (!data) return <div></div>;
+  if (!data) return <div>활동을 추가해보세요!</div>;
 
   return (
-    <div>
-      <h2>운동</h2>
-      {data.map((workout) => (
-        <div key={workout.id}>
-          <div>{workout.exerciseName}</div>
-          <div>{workout.duration}</div>
-          <div>{workout.datetime.toISOString()}</div>
-        </div>
-      ))}
+    <div className={styles.add_log_frame}>
+      <div className={styles.add_log_title}>
+        <div>운동</div>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" onClick={logInput}>
+          <path d="M12 6L12 18" stroke="#535353" stroke-width="2" stroke-linecap="round"/>
+          <path d="M18 12L6 12" stroke="#535353" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      </div>
+      <div>
+        {data.map((workout) => (
+          <div key={workout.id} className={styles.log_input}>
+            <div>{workout.exerciseName}</div>
+            <div>{workout.duration}</div>
+            <div>{workout.datetime.toISOString()}</div>
+          </div>
+        ))}
+      </div>
+
     </div>
   );
 }
diff --git a/src/app/log/page.module.scss b/src/app/log/page.module.scss
@@ -0,0 +1,77 @@
+@use '../../lib/styles/palette' as *;
+
+.log_frame {
+    display: flex;
+    height: 100vh;
+    padding: 40px 20px;
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+    flex-shrink: 0;
+
+    .today_score_frame {
+        display: flex;
+        padding: 20px;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+
+        border-radius: 20px;
+        background: $sub-color;
+
+        .today_score_text {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 4px;
+
+            .today_score_text_in {
+                color: $black-color;
+                font-weight: 600;
+            }
+        }
+
+        .today_score {
+            color: $black-color;
+            font-size: 36px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: normal;
+        }
+    }
+
+}
+
+.add_log_frame {
+    display: flex;
+    padding: 20px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    align-self: stretch;
+
+    border-radius: 20px;
+    background: $sub-color;
+
+    .add_log_title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+
+        color: $black-color;
+        font-size: 20px;
+    }
+}
+
+.log_input {
+    display: flex;
+    padding: 4px 8px;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+
+    border-radius: 16px;
+    background: $main-color;
+}
diff --git a/src/app/log/page.tsx b/src/app/log/page.tsx
@@ -1,14 +1,44 @@
+"use client"
+
 import DietLog from "./DietLog";
 import SleepLog from "./SleepLog";
 import WorkoutLog from "./WorkoutLog";
 
+import styles from './page.module.scss'
+
+import Header from "../_common/header";
+import NavBar from "../_common/navBar";
+import { useState } from "react";
+
+
+export function logInput() {
+  console.log("log input select");
+  return (
+    <div className={styles.log_input}>
+      <input type="text"></input>
+      <input type="submit">완료</input>
+    </div>
+  )
+}
+
 export default function LogPage() {
+  const [ score, setScore ] = useState(100);
   return (
     <div>
-      <h1>Log</h1>
-      <SleepLog />
-      <DietLog />
-      <WorkoutLog />
+      <div className={styles.log_frame}>
+        <Header pageName="활동기록" info="오늘 활동한 기록을 추가해봐요!"></Header>
+        <div className={styles.today_score_frame}>
+          <div className={styles.today_score_text}>
+            <div className={styles.today_score_text_in}>오늘의 점수</div>
+            <div>오늘도 열심히 활동했어요!</div>
+          </div>
+          <div className={styles.today_score}>{score}점</div>
+        </div>
+        <SleepLog />
+        <DietLog />
+        <WorkoutLog />
+      </div>
+      <NavBar ></NavBar>
     </div>
   );
 }