2024.10.29

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.gitignore

@@ -3,8 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
-.yarn/install-state.gz
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -25,8 +29,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# local env files
-.env*.local
+# env files (can opt-in for commiting if needed)
+.env*
 
 # vercel
 .vercel

README.md

@@ -1,48 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-# 칼로리(carolies)
-칼로리사이트는 식음료에 대한 칼로리 정보와 영양 정보를 제공합니다.
+## Getting Started
 
-```
-"nutritionFacts": {
-    "sodium": "130mg (7%)", // 나트륨
-    "carbohydrates": "17g (5%)",    // 탄수화물
-    "sugar": "13g (13%)",   // 당류
-    "lactose": "0g",    // 유당
-    "fat": "3.9g (7%)", // 지방
-    "transFat": "0g", // 트랜스 지방
-    "saturatedFat": "3.9g (26%)",   // 포화지방
-    "cholesterol": "20mg (7%)", // 콜레스테롤
-    "protein": "5g (9%)"    // 단백질
-},
-```
+First, run the development server:
 
-1. 나트륨 (Sodium)
-   나트륨은 체액의 균형을 유지하고 근육과 신경의 기능을 돕는 중요한 미네랄입니다. 주로 우리가 먹는 소금(NaCl)의 주성분 중 하나인데요. 과잉 섭취하면 고혈압을 유발할 수 있어 심혈관 질환의 위험을 높일 수 있습니다. 하루 나트륨 섭취량은 2,000mg 이하로 유지하는 것이 좋습니다.​
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-2. 탄수화물 (Carbohydrates)
-   탄수화물은 신체의 주요 에너지원입니다. 특히 뇌와 신경계는 주로 탄수화물에서 나오는 포도당을 에너지원으로 사용하죠. 탄수화물은 단순 탄수화물(당류)과 복합 탄수화물(식이섬유, 전분)로 나뉘는데요. 식이섬유는 소화되지 않지만, 혈당과 콜레스테롤 수치를 조절하는 데 도움이 됩니다. 그러나 단순 탄수화물의 과잉 섭취는 체중 증가와 대사 질환을 유발할 수 있으니 주의해야 합니다.​
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-3. 당류 (Sugars)
-   당류는 탄수화물의 한 형태로, 빠르게 에너지원으로 사용됩니다. 과일이나 우유에 자연적으로 존재하는 당과 가공식품에 첨가되는 당이 있습니다. 당류를 과다 섭취하면 혈당이 급격히 상승하고, 비만, 당뇨병, 충치 등의 문제를 유발할 수 있습니다. 세계보건기구(WHO)는 첨가당 섭취를 총 열량의 10% 미만으로 유지할 것을 권장하고 있습니다.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-4. 유당 (Lactose)
-   유당은 주로 우유와 유제품에 들어 있는 천연 이당류입니다. 락타아제(lactase)라는 효소에 의해 분해되어 포도당과 갈락토스로 변환되죠. 하지만 유당 불내증이 있는 사람들은 이 효소가 부족해 유당을 소화하지 못하고 복통, 설사, 가스 등의 증상을 겪을 수 있습니다.
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-5. 지방 (Fat)
-   지방은 세포막을 구성하고, 비타민 A, D, E, K의 흡수를 돕는 등 여러 중요한 역할을 합니다. 지방은 크게 포화 지방과 불포화 지방으로 나뉘는데요. 포화 지방은 주로 동물성 식품에 많이 들어 있고, 과잉 섭취 시 심장병의 위험을 높일 수 있습니다. 반면에, 불포화 지방은 식물성 기름과 견과류에서 많이 발견되며, 심장 건강에 긍정적인 영향을 미칩니다.​
+## Learn More
 
-6. 트랜스 지방 (Trans fat)
-   트랜스 지방은 인공적으로 가공된 불포화 지방으로, 주로 가공식품이나 튀긴 음식에서 발견됩니다. 트랜스 지방은 나쁜 콜레스테롤(LDL)을 증가시키고 좋은 콜레스테롤(HDL)을 감소시켜 심혈관 질환의 위험을 크게 높입니다. 그래서 여러 나라에서 트랜스 지방의 사용을 제한하고 있습니다.
+To learn more about Next.js, take a look at the following resources:
 
-7. 포화 지방 (Saturated fat)
-   포화 지방은 주로 동물성 식품에서 발견되며, 특히 고기, 치즈, 우유 등에 많이 포함되어 있습니다. 포화 지방의 과다 섭취는 혈중 콜레스테롤 수치를 높여 심장병과 뇌졸중의 위험을 증가시킬 수 있습니다. 하루 섭취 열량의 10% 미만으로 포화 지방 섭취를 제한하는 것이 좋습니다.​
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-8. 콜레스테롤 (Cholesterol)
-   콜레스테롤은 세포막의 중요한 구성 요소이며, 비타민 D와 여러 호르몬을 만드는 데 필요합니다. 다만, 과도한 콜레스테롤 섭취는 혈중 콜레스테롤 수치를 높여 심혈관 질환의 위험을 증가시킬 수 있습니다. 특히 음식으로 섭취하는 콜레스테롤이 혈중 콜레스테롤에 미치는 영향은 개인에 따라 다를 수 있습니다.​
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
-9. 단백질 (Protein)
-   단백질은 우리 몸의 근육, 피부, 장기 등 주요 조직을 구성하는 중요한 영양소입니다. 단백질은 신체의 기능을 유지하고 성장과 회복을 돕습니다. 인체가 필요로 하는 필수 아미노산은 음식에서 섭취해야 하며, 동물성 식품과 식물성 식품에서 고르게 얻을 수 있습니다. 일반적으로 하루 칼로리 섭취량의 10-35%를 단백질로 섭취하는 것이 권장됩니다.
+## Deploy on Vercel
 
-### 커피(carolie_coffee.json)
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-커피에 대한 영양정보를 제공합니다.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/globals.css

@@ -0,0 +1,72 @@
+@import url("https://websseu.github.io/fontkor/fonts/NanumSquareNeo/NanumSquareNeo.css"); /* 나눔스퀘어네오 */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  height: 100vh;
+  background-image: linear-gradient(
+    20deg,
+    rgb(185, 185, 255),
+    rgb(249, 241, 241),
+    rgb(241, 249, 241)
+  );
+  background-size: cover;
+}
+
+body {
+  font-family: "NanumSquareNeo", Helvetica, sans-serif;
+}
+
+.poppins {
+  font-family: "Poppins";
+}
+
+.w100 {
+  font-weight: 100;
+}
+.w200 {
+  font-weight: 200;
+}
+.w300 {
+  font-weight: 300;
+}
+
+@layer components {
+  .header {
+    @apply fixed top-0 z-10 w-full flex items-center p-2;
+  }
+  .aside {
+    @apply w-[300px] h-full mr-8;
+  }
+  .list {
+    @apply w-full h-full flex-1;
+  }
+}
+
+@layer utilities {
+  .line {
+    position: relative;
+    padding-left: 10px;
+  }
+  .line::before {
+    content: "";
+    width: 1px;
+    height: 10px;
+    background-color: #535353;
+    position: absolute;
+    left: 0;
+    top: 4px;
+    transform: rotate(15deg);
+  }
+  .bg-arrow {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    background-image: url("/public/images/nemo01.jpg");
+    background-size: cover;
+    background-position: center;
+  }
+}

app/layout.tsx

@@ -0,0 +1,46 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import Header from "@/components/Header";
+
+export const metadata: Metadata = {
+  title: "칼로리 정보 허브",
+  description: "다양한 음식과 음료의 칼로리 및 영양 정보를 제공합니다.",
+  keywords: [
+    "칼로리 정보",
+    "영양 성분",
+    "음식 칼로리",
+    "음료 칼로리",
+    "다이어트 정보",
+  ],
+  openGraph: {
+    title: "칼로리 정보 허브",
+    description: "음식과 음료에 대한 칼로리 및 영양 데이터의 종합 정보 사이트",
+    url: "https://fontkor.vercel.app/",
+    siteName: "칼로리 정보 허브",
+    images: [
+      {
+        url: "/images/og-image.jpg",
+        width: 800,
+        height: 600,
+        alt: "칼로리 정보 허브 배너 이미지",
+      },
+    ],
+    locale: "ko_KR",
+    type: "website",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <Header />
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,85 @@
+import { MdOutlineKeyboardArrowDown } from "react-icons/md";
+
+export default function Home() {
+  return (
+    <main className="mt-20 p-4">
+      <h1 className="text-8xl poppins font-bold">Coffee</h1>
+
+      <div className="flex mt-8">
+        <aside className="aside">
+          <h2 className="border-b border-gray-400">
+            <span className="text-sm text-gray-600 poppins w200 line">
+              FILTERS
+            </span>
+          </h2>
+          <div className="filter">
+            <button className="flex items-center gap-2 mt-2 mb-2">
+              <MdOutlineKeyboardArrowDown className="text-gray-600" />
+              <span className="text-sm text-gray-700">Topic</span>
+            </button>
+            <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>
+                  <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>
+                  <span>Coffee</span>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </aside>
+
+        <section className="list">
+          <h2 className="border-b border-gray-400">
+            <span className="text-sm mr-10 text-gray-600 poppins w200 line">
+              KCAL
+            </span>
+            <span className="text-sm text-gray-600 poppins w200 line">
+              NAME
+            </span>
+          </h2>
+          <div className="kcal-list">
+            <ul>
+              <li></li>
+            </ul>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}