diff --git a/src/app/meal/detail/detail.module.scss b/src/app/meal/detail/detail.module.scss new file mode 100644 index 0000000..df388c0 --- /dev/null +++ b/src/app/meal/detail/detail.module.scss @@ -0,0 +1,195 @@ +.detailPage { + padding: 24px; + background: #fff; + min-height: 100vh; + } + + .header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + + .backBtn { + background: none; + font-size: 20px; + cursor: pointer; + } + + .spacer { + width: 24px; + } + } + + .timeKcalWrap { + display: flex; + justify-content: space-between; + margin-bottom: 16px; + + .mealTime { + font-weight: 600; + } + + .kcalInfo { + display: flex; + align-items: center; + gap: 4px; + + .kcalText { + font-size: 14px; + } + } + } + + .imageWrap { + text-align: center; + position: relative; + + .mealImage { + width: 200px; + border-radius: 12px; + margin-bottom: 20px; + } + } + + .foodList { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; + margin-bottom: 16px; + + .foodButton { + padding: 6px 12px; + border-radius: 20px; + font-size: 14px; + border: 1px solid #ccc; + } + + .success { + border-color: #000; + } + + .fail { + border-color: #f00; + color: #f00; + } + + .close { + margin-left: 4px; + } + } + + .addButton { + background: none; + border: 1px solid #aaa; + padding: 6px 12px; + border-radius: 20px; + margin: 10px auto; + display: block; + font-size: 14px; + } + + .nutrientBox { + padding: 20px; + + margin-bottom: 24px; + + .kcalRow { + + margin-bottom: 12px; + + span { + font-size: 14px; + color: #D9D9D9; + } + + .kcalValue { + display: flex; + align-items: center; + gap: 30px; + + font-size: 16px; + font-weight: 800; + line-height: 24px; + width: 135px; + letter-spacing: 0; + position: relative; + border: 1px solid #eee; + border-radius: 12px; + background-color: #fafafa; + + padding: 10px 16px; + margin-top: 20px; + align-items: center; + + .kcalNumber { + font-size: 16px; + font-weight: 800; + color: #000; + + } + + .kcalUnit { + + font-size: 16px; + font-weight: 700; + color: #c4c4c4; + } + + + + } + } + + .macroRow { + display: flex; + justify-content: space-between; + gap: 30px; + + .nutrient { + flex: 1; + + p:first-child { + font-size: 13px; + color: #666; + margin-bottom: 6px; + } + + .macroValue { + font-size: 16px; + font-weight: 800; + position: relative; + border: 1px solid #eee; + border-radius: 12px; + background-color: #fafafa; + padding: 10px 16px; + line-height: 24px; + letter-spacing: 0; + display: flex; + align-items: center; + gap: 30px; + + + span { + font-size: 14px; + color: #D9D9D9; + } + } + } + } + } + + + .completeBtn { + width: 100%; + margin-top: 24px; + padding: 14px; + font-size: 16px; + background: #ccc; + color: #fff; + border: none; + border-radius: 30px; + cursor: pointer; + } + \ No newline at end of file diff --git a/src/app/meal/detail/page.tsx b/src/app/meal/detail/page.tsx new file mode 100644 index 0000000..d5e5cf8 --- /dev/null +++ b/src/app/meal/detail/page.tsx @@ -0,0 +1,108 @@ +"use client"; + +import { useSearchParams, useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; +import styles from "./detail.module.scss"; +import Balloon from "@/components/common/balloon/balloon"; +import GaugeIcon, { GaugeStep } from "@/components/common/caloriesgauge/caloriesgauge"; + +const calorieGoals: Record = { + 아침: 435, + 점심: 700, + 저녁: 550, +}; + +export default function MealDetailPage() { + const searchParams = useSearchParams(); + const router = useRouter(); + const mealType = searchParams.get("type") || "아침"; + + const [imageUrl, setImageUrl] = useState(""); + const [foods, setFoods] = useState([]); + const [followedPlan, setFollowedPlan] = useState(true); + + useEffect(() => { + const savedImage = localStorage.getItem(`mealImage-${mealType}`) || ""; + const savedFoods = JSON.parse(localStorage.getItem(`mealFoods-${mealType}`) || "[]"); + + setImageUrl(savedImage); + setFoods(savedFoods); + setFollowedPlan(!!savedImage && savedFoods.length > 0); + }, [mealType]); + + const handleAddOtherFoods = () => { + router.push(`/meal/search?type=${mealType}`); + }; + + const goal = calorieGoals[mealType] || 0; + const kcal = followedPlan ? goal : "?"; + + // 게이지 단계 계산 + const step = followedPlan ? Math.floor((goal / 1445) * 8) : 0; + const gaugeStep = Math.max(0, Math.min(8, step)) as GaugeStep; + + return ( +
+
+ +

{mealType}

+
+
+ +
+ {mealType} 9:00 +
+ + + {followedPlan ? goal : "?"}/{goal} + +
+
+ +
+ + 식단 이미지 +
+ +
+ {foods.map((food, idx) => ( + + ))} +
+ + + +
+
+ 총 칼로리 +
{kcal} kcal
+
+
+
+

탄수화물

+

{followedPlan ? "12.8" : "?"} g

+
+
+

단백질

+

{followedPlan ? "6.5" : "?"} g

+
+
+

지방

+

{followedPlan ? "5" : "?"} g

+
+
+
+ + {!followedPlan && ( + + )} +
+ ); +} diff --git a/src/app/meal/layout.module.scss b/src/app/meal/layout.module.scss new file mode 100644 index 0000000..57abbec --- /dev/null +++ b/src/app/meal/layout.module.scss @@ -0,0 +1,6 @@ +.container { + font-size: 1.6rem; + min-height: 100vh; + height: 100%; + padding-top: $header-height; +} \ No newline at end of file diff --git a/src/app/meal/layout.tsx b/src/app/meal/layout.tsx new file mode 100644 index 0000000..e53e0eb --- /dev/null +++ b/src/app/meal/layout.tsx @@ -0,0 +1,6 @@ +import React from "react" +import styles from "./layout.module.scss" + +export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { + return
{children}
+} diff --git a/src/app/meal/page.module.scss b/src/app/meal/page.module.scss new file mode 100644 index 0000000..871f236 --- /dev/null +++ b/src/app/meal/page.module.scss @@ -0,0 +1,38 @@ + + + /* 캘린더 */ + .diet_calendar { + margin-top: 16px; + } + + /* 식단 요약 */ + .summarySection { + margin-top: 24px; + padding: 15px; + padding-bottom: 32px; + } + + .summaryTitleWrap { + display: flex; + align-items: baseline; + justify-content: space-between; + } + + .summaryTitle { + font-size: 20px; + font-weight: 600; + } + + .kcalCount { + font-size: 14px; + color: #888; + padding-left: 10px; + } + + /* 식단 카드 */ + .mealsSection { + display: flex; + flex-direction: column; + //gap: 16px; + } + \ No newline at end of file diff --git a/src/app/meal/page.tsx b/src/app/meal/page.tsx new file mode 100644 index 0000000..00dcf3e --- /dev/null +++ b/src/app/meal/page.tsx @@ -0,0 +1,79 @@ +"use client" +import DefaultHeader from "@/components/layout/header/DefaultHeader" +import Navigation from "@/components/layout/Navigation" +import styles from "./page.module.scss" +import SmallCalendar from "@/components/common/smallcalendar/smallcalendar" +import TopSheet from "@/components/common/topsheet/topsheet" +import MealCard from "@/components/common/mealcard/mealcard" +import GaugeIcon, { GaugeStep } from "@/components/common/caloriesgauge/caloriesgauge" +import { useEffect, useState } from "react" + +export default function MealPage() { + const [mealImages, setMealImages] = useState<{ [key: string]: string }>({ + breakfast: "", + lunch: "", + dinner: "", + snack: "", + }) + + const meals = [ + { type: "아침", time: "7:00", kcal: 450, foods: ["사과", "계란", "우유"], key: "breakfast" }, + { type: "점심", time: "12:00", kcal: 550, foods: ["닭가슴살", "현미밥", "채소볶음"], key: "lunch", balloon: true }, + { type: "저녁", time: "18:00", kcal: 400, foods: ["고구마", "두부 샐러드"], key: "dinner" }, + { type: "후식", time: "20:00", kcal: 150, foods: ["요거트", "견과류"], key: "snack" }, + ] + + const goalKcal = 1445 + const totalKcal = meals.reduce((sum, meal) => sum + meal.kcal, 0) + + const step = Math.floor((totalKcal / goalKcal) * 8) + const gaugeStep = Math.max(0, Math.min(8, step)) as GaugeStep + + useEffect(() => { + const updatedImages: { [key: string]: string } = {} + meals.forEach(meal => { + updatedImages[meal.key] = localStorage.getItem(`mealImage-${meal.key}`) || "" + }) + setMealImages(updatedImages) + }, []) + + return ( +
+ + +
+ + + +
+ +
+
+

오늘의 식단

+
+ + + {totalKcal}/{goalKcal} kcal + +
+
+
+ +
+ {meals.map(({ type, time, kcal, foods, key, balloon }) => ( + + ))} +
+ + +
+ ) +} diff --git a/src/app/meal/upload/page.tsx b/src/app/meal/upload/page.tsx new file mode 100644 index 0000000..abc2c66 --- /dev/null +++ b/src/app/meal/upload/page.tsx @@ -0,0 +1,81 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { useSearchParams } from "next/navigation"; +import styles from "./upload.module.scss" +import AddBox from "@/components/common/addbox/addbox"; +import Balloon from "@/components/common/balloon/balloon"; + + +export default function UploadPage() { + const searchParams = useSearchParams(); + const mealType = searchParams.get("type") || "아침"; + + const [selectedFoods, setSelectedFoods] = useState([]); + const [imageUrl, setImageUrl] = useState(""); + + const foodOptions = ["반미 샌드위치", "닭가슴살 샐러드", "현미밥", "채소볶음"]; + + const handleSelect = (food: string) => { + setSelectedFoods((prev) => + prev.includes(food) ? prev.filter((f) => f !== food) : [...prev, food] + ); + }; + + const handleImageUpload = () => { + // 임시 이미지 URL 저장 + const tempUrl = "/temp/meal-image.jpg"; + setImageUrl(tempUrl); + + // 로컬스토리지 저장 + localStorage.setItem(`mealImage-${mealType}`, tempUrl); + }; + + const handleComplete = () => { + // 로컬스토리지 저장 + localStorage.setItem(`mealFoods-${mealType}`, JSON.stringify(selectedFoods)); + window.history.back(); + }; + + return ( +
+
+
+
식단 업로드
+ +
+ +
+ + +
+ +

{mealType} 메뉴

+

먹은 음식을 선택해주세요.

+ +
+ {foodOptions.map((food) => ( + + ))} +
+ + +
+
+ ); +} diff --git a/src/app/meal/upload/upload.module.scss b/src/app/meal/upload/upload.module.scss new file mode 100644 index 0000000..5499223 --- /dev/null +++ b/src/app/meal/upload/upload.module.scss @@ -0,0 +1,123 @@ +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); // 어두운 배경 + z-index: 1000; + + display: flex; + align-items: center; + justify-content: center; + } + +.uploadPage { + padding: 24px; + background: #fff; + min-height: 100vh; + } + + .titleSection { + display: flex; + //justify-content: space-between; + align-items: center; + text-align: center; + margin-bottom: 32px; + } + + .title { + font-size: 20px; + font-weight: bold; + text-align: center; + flex: 1; + } + + .closeBtn { + background: none; + border: none; + font-size: 22px; + font-weight: bold; + cursor: pointer; + } + + .imageSection { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 24px; + } + + .balloon { + background: #fff; + border: 1px solid #1a1a1a; + padding: 8px 12px; + border-radius: 16px; + font-size: 14px; + position: relative; + margin-bottom: 30px; + &::after { + content: ""; + position: absolute; + bottom: -6px; + left: 50%; + transform: translateX(-50%); + border-width: 6px 6px 0 6px; + border-style: solid; + border-color: #1a1a1a transparent transparent transparent; + } + } + + .mealTypeTitle { + font-size: 18px; + font-weight: 600; + text-align: center; + } + + .subtitle { + font-size: 14px; + color: #888; + text-align: center; + margin-bottom: 30px; + } + + .foodList { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin-bottom: 24px; + } + + .foodButton { + padding: 8px 14px; + border: 1px solid #ccc; + border-radius: 20px; + background: #fff; + font-size: 14px; + cursor: pointer; + } + + .selected { + background: #3a8dff; + color: #fff; + border: none; + } + + .completeBtn { + width: 100%; + padding: 14px; + font-size: 16px; + border-radius: 30px; + border: none; + background: #ccc; + color: white; + cursor: not-allowed; + + } + + .active { + background: #000; + cursor: pointer; + } + \ No newline at end of file diff --git a/src/assets/icons/today_calorie.svg b/src/assets/icons/today_calorie.svg new file mode 100644 index 0000000..74a65de --- /dev/null +++ b/src/assets/icons/today_calorie.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/common/addbox/addbox.module.scss b/src/components/common/addbox/addbox.module.scss new file mode 100644 index 0000000..0627daf --- /dev/null +++ b/src/components/common/addbox/addbox.module.scss @@ -0,0 +1,12 @@ +.box { + width: 100px; + height: 100px; + background-color: #eef3ff; + border-radius: 16px; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + } + \ No newline at end of file diff --git a/src/components/common/addbox/addbox.tsx b/src/components/common/addbox/addbox.tsx new file mode 100644 index 0000000..1975be5 --- /dev/null +++ b/src/components/common/addbox/addbox.tsx @@ -0,0 +1,20 @@ +import Image from "next/image"; +import AddIcon from "@/assets/icons/common/icon-add-skyblue.svg"; +import styles from "./addbox.module.scss"; + +interface Props { + imageUrl?: string; + onClick: () => void; +} + +export default function MealImageBox({ imageUrl, onClick }: Props) { + return ( +
+ {imageUrl ? ( + 식단 이미지 + ) : ( + + )} +
+ ); +} diff --git a/src/components/common/balloon/balloon.module.scss b/src/components/common/balloon/balloon.module.scss new file mode 100644 index 0000000..3029cab --- /dev/null +++ b/src/components/common/balloon/balloon.module.scss @@ -0,0 +1,20 @@ +.balloon { + background: #fff; + border: 1px solid #1a1a1a; + padding: 8px 12px; + border-radius: 16px; + font-size: 14px; + position: relative; + margin-bottom: 30px; + + &::after { + content: ""; + position: absolute; + bottom: -6px; + left: 50%; + transform: translateX(-50%); + border-width: 6px 6px 0 6px; + border-style: solid; + border-color: #1a1a1a transparent transparent transparent; + } +} diff --git a/src/components/common/balloon/balloon.tsx b/src/components/common/balloon/balloon.tsx new file mode 100644 index 0000000..0157ca7 --- /dev/null +++ b/src/components/common/balloon/balloon.tsx @@ -0,0 +1,15 @@ +import styles from "./balloon.module.scss"; + +interface BalloonProps { + text: string; + className?: string; +} + +export default function Balloon({ text, className = "" }: BalloonProps) { + return ( +
+ {text} +
+ ); +} + diff --git a/src/components/common/balloonmessage/balloonmessage.module.scss b/src/components/common/balloonmessage/balloonmessage.module.scss deleted file mode 100644 index 3a3db4f..0000000 --- a/src/components/common/balloonmessage/balloonmessage.module.scss +++ /dev/null @@ -1,35 +0,0 @@ -.balloon { - position: absolute; - bottom: -11px; - left: 50%; - transform: translateX(-50%); - border: 1px solid $gray-30; - border-radius: 30px; - padding: 11px 16px; - background: #ffffff; - font-weight: 700; - white-space: nowrap; - - &::after { - content: ""; - position: absolute; - bottom: 100%; - left: 50%; - margin-left: -12px; - border-width: 12px; - border-style: solid; - border-color: transparent transparent $gray-30 transparent; // 테두리용 바깥 삼각형 - } - - &::before { - content: ""; - position: absolute; - bottom: 100%; - left: 50%; - margin-left: -10px; - border-width: 10px; - border-style: solid; - border-color: transparent transparent #ffffff transparent; // 내부 삼각형' - z-index: 1; - } -} \ No newline at end of file diff --git a/src/components/common/balloonmessage/balloonmessage.tsx b/src/components/common/balloonmessage/balloonmessage.tsx deleted file mode 100644 index 4b8e130..0000000 --- a/src/components/common/balloonmessage/balloonmessage.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import styles from "./balloonmessage.module.scss" - -export const BalloonMessage = () => { - return
식단을 올려주세요!
-} diff --git a/src/components/common/caloriesgauge/calories.module.scss b/src/components/common/caloriesgauge/calories.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/common/caloriesgauge/caloriesgauge.tsx b/src/components/common/caloriesgauge/caloriesgauge.tsx new file mode 100644 index 0000000..58a01ab --- /dev/null +++ b/src/components/common/caloriesgauge/caloriesgauge.tsx @@ -0,0 +1,33 @@ +import CalGauge0 from "@/assets/icons/calories/calorie-9.svg" +import CalGauge1 from "@/assets/icons/calories/calorie-1.svg" +import CalGauge2 from "@/assets/icons/calories/calorie-2.svg" +import CalGauge3 from "@/assets/icons/calories/calorie-3.svg" +import CalGauge4 from "@/assets/icons/calories/calorie-4.svg" +import CalGauge5 from "@/assets/icons/calories/calorie-5.svg" +import CalGauge6 from "@/assets/icons/calories/calorie-6.svg" +import CalGauge7 from "@/assets/icons/calories/calorie-7.svg" +import CalGauge8 from "@/assets/icons/calories/calorie-8.svg" + +export type GaugeStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 + +interface Props { + step: GaugeStep; + className?: string; +} + +const gaugeMap: Record>> = { + 0: CalGauge0, + 1: CalGauge1, + 2: CalGauge2, + 3: CalGauge3, + 4: CalGauge4, + 5: CalGauge5, + 6: CalGauge6, + 7: CalGauge7, + 8: CalGauge8 +}; + +export default function GaugeIcon({ step, className }: Props) { + const CalGauge = gaugeMap[step]; + return ; + } \ No newline at end of file diff --git a/src/components/common/goalgauge/goalgauge.tsx b/src/components/common/goalgauge/goalgauge.tsx index df88a56..2b08035 100644 --- a/src/components/common/goalgauge/goalgauge.tsx +++ b/src/components/common/goalgauge/goalgauge.tsx @@ -5,8 +5,8 @@ import Gauge2 from "@/assets/icons/gauge bars/gauage_bar/gauge bar-2.svg" import Gauge3 from "@/assets/icons/gauge bars/gauage_bar/gauge bar-3.svg" import Gauge4 from "@/assets/icons/gauge bars/gauage_bar/gauge bar-4.svg" import Gauge5 from "@/assets/icons/gauge bars/gauage_bar/gauge bar-5.svg" -import Gauge6 from "@/assets/icons/gauge bars/gauage_bar/gauge bar-6.svg" -import Gauge7 from "@/assets/icons/gauge bars/gauage_bar/gauge bar-7.svg" +import Gauge6 from "@/assets/icons/gauge bars/gauage_bar/gauge bar-7.svg" +import Gauge7 from "@/assets/icons/gauge bars/gauage_bar/gauge bar-6.svg" import Gauge8 from "@/assets/icons/gauge bars/gauage_bar/gauge bar-8.svg" import Gauge9 from "@/assets/icons/gauge bars/gauage_bar/gauge bar-9.svg" import Gauge10 from "@/assets/icons/gauge bars/gauage_bar/gauge bar-10.svg" diff --git a/src/components/common/meal/mealdetail.module.scss b/src/components/common/meal/mealdetail.module.scss new file mode 100644 index 0000000..391349e --- /dev/null +++ b/src/components/common/meal/mealdetail.module.scss @@ -0,0 +1,116 @@ +.container { + padding: 20px; + background: #fff; + min-height: 100vh; + } + + .header { + display: flex; + justify-content: space-between; + align-items: center; + font-weight: bold; + font-size: 18px; + } + + .timeAndKcal { + display: flex; + justify-content: space-between; + margin-top: 16px; + color: #888; + } + + .kcal { + font-weight: bold; + color: #1a1a1a; + } + + .imageWrap { + position: relative; + margin: 16px 0; + text-align: center; + } + + .image { + width: 100%; + border-radius: 12px; + } + + .balloon { + position: absolute; + top: -24px; + left: 50%; + transform: translateX(-50%); + background: white; + border: 1px solid #1a1a1a; + padding: 6px 12px; + border-radius: 20px; + font-size: 14px; + } + + .foodChips { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 8px 0; + justify-content: center; + } + + .foodChip { + border: 1px solid #ccc; + padding: 6px 12px; + border-radius: 20px; + background: #f0f0f0; + } + + .addBtn { + background: none; + border: none; + color: #1a1a1a; + font-weight: bold; + margin-top: 12px; + } + + .summary { + margin-top: 24px; + text-align: center; + + .calorieRow { + font-size: 14px; + margin-bottom: 12px; + + .kcalBox { + font-weight: bold; + margin-left: 12px; + } + } + + .nutrition { + display: flex; + justify-content: space-around; + + div { + display: flex; + flex-direction: column; + align-items: center; + + strong { + font-size: 16px; + } + + span { + font-size: 12px; + color: #999; + } + } + } + } + + .completeBtn { + width: 100%; + margin-top: 24px; + padding: 12px; + border-radius: 30px; + background: #ccc; + font-weight: bold; + } + \ No newline at end of file diff --git a/src/components/common/meal/mealdetail.tsx b/src/components/common/meal/mealdetail.tsx new file mode 100644 index 0000000..52ad3a2 --- /dev/null +++ b/src/components/common/meal/mealdetail.tsx @@ -0,0 +1,68 @@ +"use client"; + +import { useSearchParams } from "next/navigation"; +import styles from "./MealDetail.module.scss"; + +export default function MealDetail() { + const searchParams = useSearchParams(); + const type = searchParams.get("type") || "아침"; + + const isSuccess = true; // TODO: 조건부로 바꿔줘야 함 (식단 준수 여부) + const imageUrl = "/images/sample.jpg"; + const selectedFoods = ["반미 샌드위치", "닭가슴살 샐러드"]; // 임시 + + return ( +
+
+ +

{type}

+
+ +
+
+ {type} 9:00 + 435/435 kcal +
+ +
+ {isSuccess &&
식단을 잘지켰어요! ✕
} + meal +
+ +
+ {selectedFoods.map((food, i) => ( +
+ {food} {isSuccess && "✔️"} + {!isSuccess && "✕"} +
+ ))} +
+ + + +
+
+ 총 칼로리 + 435 kcal +
+
+
+ 12.8 + 탄수화물 +
+
+ 6.5 + 단백질 +
+
+ 5 + 지방 +
+
+
+
+ + {!isSuccess && } +
+ ); +} diff --git a/src/components/common/mealcard/mealcard.module.scss b/src/components/common/mealcard/mealcard.module.scss new file mode 100644 index 0000000..b10331f --- /dev/null +++ b/src/components/common/mealcard/mealcard.module.scss @@ -0,0 +1,52 @@ +.card { + display: flex; + padding: 16px; + background: #fff; + border-radius: 12px; + padding-bottom: 32px; + } + + + .timeWrap { + display: flex; + flex-direction: column; + padding-right: 20px; + } + + .mealType { + font-size: 18px; + font-weight: bold; + } + + .time { + color: #999; + font-size: 14px; + } + + .right { + flex-direction: column; + align-items: flex-end; + gap: 6px; + flex: 1; + } + + .foodList { + display: flex; + align-items: flex-end; + text-align: right; + gap: 6px; + flex: 1; + } + + .kcal { + color: #999; + } + + .balloon { + margin-top: 8px; + background: #f0f8ff; + padding: 4px 8px; + border-radius: 8px; + font-size: 12px; + } + \ No newline at end of file diff --git a/src/components/common/mealcard/mealcard.tsx b/src/components/common/mealcard/mealcard.tsx new file mode 100644 index 0000000..14ea0e1 --- /dev/null +++ b/src/components/common/mealcard/mealcard.tsx @@ -0,0 +1,45 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import AddBox from "@/components/common/addbox/addbox"; +import styles from "./MealCard.module.scss"; + +interface Props { + type: string; + time: string; + kcal: number; + foods: string[]; + imageUrl?: string; + balloon?: boolean; +} + +export default function MealCard({ type, time, kcal, foods, imageUrl, balloon }: Props) { + const router = useRouter(); + + const handleClick = () => { + if (imageUrl) { + router.push(`/meal/detail?type=${type}`); + } else { + router.push(`/meal/upload?type=${type}`); + } + }; + + return ( +
+
+

{type}

+ {time} +
+
+
    + {foods.map((food, idx) => ( +
  • {food}
    • + ))} +
+

{kcal} kcal

+ {balloon &&
추천 식단이에요!
} + +
+
+ ); +} diff --git a/src/components/features/home/GoalCardList/GoalCardList.tsx b/src/components/features/home/GoalCardList/GoalCardList.tsx index 6adffcd..d662657 100644 --- a/src/components/features/home/GoalCardList/GoalCardList.tsx +++ b/src/components/features/home/GoalCardList/GoalCardList.tsx @@ -1,7 +1,7 @@ import GoalCard from "./GoalCard" import styles from "./GoalCardList.module.scss" import Img1 from "@/assets/icons/img-1.svg" -import Img2 from "@/assets/icons/img.svg" +import Img2 from "@/assets/icons/today_calorie.svg" const cardData = [