2024.10.29

websseu · Oct 29, 2024 · 914f01f · 914f01f
1 parent 7b04e98
commit 914f01f
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 34 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import Header from "@/components/Header";
+import { Analytics } from "@vercel/analytics/react";
 
 export const metadata: Metadata = {
   title: "칼로리 정보 허브",
@@ -38,6 +39,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
+        <Analytics />
         <Header />
         {children}
       </body>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,24 @@
+"use client";
+
 import { MdOutlineKeyboardArrowDown } from "react-icons/md";
+import { BiCheckbox, BiCheckboxChecked } from "react-icons/bi";
+import { useEffect, useState } from "react";
+
+interface CoffeeItem {
+  calories: number;
+  productName: string;
+}
 
 export default function Home() {
+  const [data, setData] = useState<CoffeeItem[]>([]);
+
+  useEffect(() => {
+    fetch("https://websseu.github.io/kcalkor/json/coffee.json")
+      .then((response) => response.json())
+      .then((data) => setData(data))
+      .catch((error) => console.error("데이터 가져오기 실패:", error));
+  }, []);
+
   return (
     <main className="mt-20 p-4">
       <h1 className="text-8xl poppins font-bold">Coffee</h1>
@@ -20,43 +38,13 @@ export default function Home() {
             <ul>
               <li className="pl-4 pb-1 text-xs">
                 <button className="flex items-center gap-2">
-                  <svg
-                    className="size-3"
-                    width="10"
-                    height="9"
-                    viewBox="0 0 10 9"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <title>Checkbox icon</title>
-                    <path
-                      fill-rule="evenodd"
-                      clip-rule="evenodd"
-                      d="M1 1L-3.49691e-07 1L-4.37113e-08 8L1 8L1 9L9 9L9 8L10 8L10 1L9 1L9 -3.93402e-07L1 -4.37114e-08L1 1ZM1 1L9 1L9 8L1 8L1 1ZM7 2L8 2L8 3L7 3L7 2ZM6 4L6 3L7 3L7 4L6 4ZM5 5L5 4L6 4L6 5L5 5ZM4 6L4 5L5 5L5 6L4 6ZM3 6L4 6L4 7L3 7L3 6ZM3 6L2 6L2 5L3 5L3 6Z"
-                      fill="currentColor"
-                    ></path>
-                  </svg>
+                  <BiCheckbox size={14} />
                   <span>Milk</span>
                 </button>
               </li>
               <li className="pl-4 text-xs">
                 <button className="flex items-center gap-2">
-                  <svg
-                    className="size-3"
-                    width="10"
-                    height="9"
-                    viewBox="0 0 10 9"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <title>Checkbox icon</title>
-                    <path
-                      fill-rule="evenodd"
-                      clip-rule="evenodd"
-                      d="M1 1L-3.49691e-07 1L-4.37113e-08 8L1 8L1 9L9 9L9 8L10 8L10 1L9 1L9 -3.93402e-07L1 -4.37114e-08L1 1ZM1 1L9 1L9 8L1 8L1 1Z"
-                      fill="currentColor"
-                    ></path>
-                  </svg>
+                  <BiCheckboxChecked size={14} />
                   <span>Coffee</span>
                 </button>
               </li>
@@ -74,8 +62,13 @@ export default function Home() {
             </span>
           </h2>
           <div className="kcal-list">
-            <ul>
-              <li></li>
+            <ul className="flex flex-col">
+              {data.map((item, index) => (
+                <li key={index} className="flex justify-between py-2 text-sm">
+                  <span>{item.calories} kcal</span>
+                  <span>{item.productName}</span>
+                </li>
+              ))}
             </ul>
           </div>
         </section>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@vercel/analytics": "^1.3.2",
     "next": "15.0.1",
     "react": "19.0.0-rc-69d4b800-20241021",
     "react-dom": "19.0.0-rc-69d4b800-20241021",