-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
188 additions
and
130 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,59 @@ | ||
| import MainLayout from "@/components/MainLayout"; | ||
| import ProductCard from "@/components/ProductCard"; | ||
| import MainLayout from '@/components/MainLayout' | ||
| import ProductCard from '@/components/ProductCard' | ||
|
|
||
| export default function MarketPage() { | ||
| return ( | ||
| <MainLayout> | ||
|
|
||
| <div className="flex flex-col items-stretch gap-6 px-32 py-8"> | ||
| <div className="text-4xl font-bold"> | ||
| 밀로그 마켓 | ||
| </div> | ||
| <div className="text-gray-400 text-gl"> | ||
| 사용자를 위해 건강한 식단을 판매합니다. | ||
| </div> | ||
| <div className="grid grid-cols-4 gap-6"> | ||
| <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} /> | ||
| <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} /> | ||
| <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} /> | ||
| <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} /> | ||
| <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} /> | ||
| <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} /> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| </MainLayout> | ||
| ) | ||
| } | ||
| return ( | ||
| <MainLayout> | ||
| <div className="container mx-auto flex flex-col items-stretch gap-6 px-32 py-8"> | ||
| <div className="text-4xl font-bold">밀로그 마켓</div> | ||
| <div className="text-gray-400 text-gl"> | ||
| 사용자를 위해 건강한 식단을 판매합니다. | ||
| </div> | ||
| <div className="grid grid-cols-4 gap-6"> | ||
| <ProductCard | ||
| productImage={'/0.jpeg'} | ||
| productId={1} | ||
| productDetail="It's time to wake up!" | ||
| productName="체크오 아르타민" | ||
| productPrice={12000} | ||
| /> | ||
| <ProductCard | ||
| productImage={'/1.webp'} | ||
| productId={1} | ||
| productDetail="뉴질랜드산, 2000mg" | ||
| productName="비타민C 보충제" | ||
| productPrice={12000} | ||
| /> | ||
| <ProductCard | ||
| productImage={'/2.webp'} | ||
| productId={1} | ||
| productDetail="미국산" | ||
| productName="초코맛 단백질 쉐이크" | ||
| productPrice={35000} | ||
| /> | ||
| <ProductCard | ||
| productImage={'/3.webp'} | ||
| productId={1} | ||
| productDetail="캐나다산" | ||
| productName="저칼로리 에너지바" | ||
| productPrice={3000} | ||
| /> | ||
| <ProductCard | ||
| productImage={'/4.webp'} | ||
| productId={1} | ||
| productDetail="독일산" | ||
| productName="멀티비타민 젤리" | ||
| productPrice={15000} | ||
| /> | ||
| <ProductCard | ||
| productImage={'/5.webp'} | ||
| productId={1} | ||
| productDetail="국산" | ||
| productName="저당고단백 닭가슴살 도시락" | ||
| productPrice={8500} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </MainLayout> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,77 @@ | ||
| import { IconBaguette, IconDroplet, IconMeat } from "@tabler/icons-react" | ||
|
|
||
| import { | ||
| IconBaguette, | ||
| IconDroplet, | ||
| IconLollipop, | ||
| IconMeat, | ||
| } from '@tabler/icons-react' | ||
|
|
||
| interface NutrientProps extends React.HTMLAttributes<HTMLDivElement> { | ||
| carbs: number | ||
| protein: number | ||
| fat: number | ||
| sugars: number | ||
| } | ||
|
|
||
| export default function Nutrient({ | ||
| carbs, | ||
| protein, | ||
| fat, | ||
| sugars, | ||
| ...props | ||
| }: NutrientProps) { | ||
| const totalNutrient = carbs + protein + fat | ||
| return ( | ||
| <div {...props} className="w-full"> | ||
| <div className="flex flex-row gap-2"> | ||
| <div className="flex flex-col justify-between gap-3 px-3 py-3 bg-orange-300 rounded-lg" style={{ width: (carbs / totalNutrient * 100) + "%" }}> | ||
| <div className="w-full flex flex-col justify-between gap-3 px-3 py-3 bg-primary-500 rounded-lg"> | ||
| <div className="flex items-center justify-between gap-1"> | ||
| <IconBaguette size={32} color="white" /> | ||
| <div className="text-xl font-bold leading-7 text-white"> | ||
| {(carbs / totalNutrient * 100).toFixed(0)}% | ||
| {((carbs / totalNutrient) * 100).toFixed(0)}% | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-wrap items-end justify-between gap-1"> | ||
| <div className="text-2xl font-bold text-white"> | ||
| 탄수화물 | ||
| </div> | ||
| <div className="text-xl text-white"> | ||
| {carbs}g | ||
| </div> | ||
| <div className="text-lg font-bold text-white">탄수화물</div> | ||
| <div className="text-white">{carbs.toFixed(1)}g</div> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-col justify-between gap-3 px-3 py-3 bg-red-600 rounded-lg" style={{ width: (protein / totalNutrient * 100) + "%" }}> | ||
| <div className="w-full flex flex-col justify-between gap-3 px-3 py-3 bg-red-600 rounded-lg"> | ||
| <div className="flex items-center justify-between gap-1"> | ||
| <IconMeat size={32} color="white" /> | ||
| <div className="text-xl font-bold leading-7 text-white"> | ||
| {(protein / totalNutrient * 100).toFixed(0)}% | ||
| {((protein / totalNutrient) * 100).toFixed(0)}% | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-wrap items-end justify-between gap-1"> | ||
| <div className="text-2xl font-bold text-white"> | ||
| 단백질 | ||
| </div> | ||
| <div className="text-xl text-white"> | ||
| {protein}g | ||
| <div className="text-lg font-bold text-white">단백질</div> | ||
| <div className="text-white">{protein.toFixed(1)}g</div> | ||
| </div> | ||
| </div> | ||
| <div className="w-full flex flex-col justify-between gap-3 px-3 py-3 bg-pink-500 rounded-lg"> | ||
| <div className="flex items-center justify-between gap-1"> | ||
| <IconLollipop size={32} color="white" /> | ||
| <div className="text-xl font-bold leading-7 text-white"> | ||
| {((sugars / totalNutrient) * 100).toFixed(0)}% | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-wrap items-end justify-between gap-1"> | ||
| <div className="text-lg font-bold text-white">당류</div> | ||
| <div className="text-white">{sugars.toFixed(1)}g</div> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-col justify-between gap-3 px-3 py-3 bg-yellow-500 rounded-lg" style={{ width: (fat / totalNutrient * 100) + "%" }}> | ||
| <div className="w-full flex flex-col justify-between gap-3 px-3 py-3 bg-yellow-500 rounded-lg"> | ||
| <div className="flex items-center justify-between gap-1"> | ||
| <IconDroplet size={32} color="white" /> | ||
| <div className="text-xl font-bold leading-7 text-white"> | ||
| {(fat / totalNutrient * 100).toFixed(0)}% | ||
| {((fat / totalNutrient) * 100).toFixed(0)}% | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-wrap items-end justify-between gap-1"> | ||
| <div className="text-2xl font-bold text-white"> | ||
| 지방 | ||
| </div> | ||
| <div className="text-xl text-white"> | ||
| {fat}g | ||
| </div> | ||
| <div className="text-lg font-bold text-white">지방</div> | ||
| <div className="text-white">{fat.toFixed(1)}g</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| } |
Oops, something went wrong.