diff --git a/app/login/page.jsx b/app/login/page.jsx index 82d015c..b1efa6f 100644 --- a/app/login/page.jsx +++ b/app/login/page.jsx @@ -20,8 +20,8 @@ const LoginPage = () => { if (res.ok) { const data = await res.json(); - alert("Login successful!"); // 사용자 정보를 저장하고 필요한 페이지로 이동 + window.location.href = "/mypage"; // 로그인 성공 시 마이페이지로 이동 } else { const data = await res.json(); alert(data.message); diff --git a/app/modal/page.jsx b/app/modal/page.jsx index cabc51d..7b4f07a 100644 --- a/app/modal/page.jsx +++ b/app/modal/page.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react"; import ModalComponent from '../../components/modal/modal-component'; +import {Bell, Settings} from "lucide-react"; export default function ModalPage() { const [isMounted, setIsMounted] = useState(false); @@ -13,8 +14,20 @@ export default function ModalPage() { if (!isMounted) return null; return ( -
- +
+ {/* Header */} +
+
+
+

마이페이지

+
+ + +
+
+
+
+
); } \ No newline at end of file diff --git a/app/mypage/page.jsx b/app/mypage/page.jsx index 052b617..fdbc94a 100644 --- a/app/mypage/page.jsx +++ b/app/mypage/page.jsx @@ -1,101 +1,9 @@ import React from 'react'; -import { - User, Settings, Bell, Edit, BarChart2, - ListChecks, Calendar, CheckCircle, Heart, - ChevronLeft, ChevronRight -} from 'lucide-react'; -import { Card, CardContent } from '@/components/ui/card'; -import { Button } from '@/components/ui/bottom'; -import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; - -const StudyCalendar = () => { - const studiedDays = [1, 3, 5, 7, 8, 9, 10, 12, 15, 16, 20, 21, 22, 23]; - const days = Array.from({ length: 31 }, (_, i) => i + 1); - const today = new Date(); // 현재 날짜에서 일자를 추출 - - const year = 2025; - const month = 0; // 1월은 0 - const firstDayOfMonth = new Date(year, month, 1).getDay(); // 2025년 1월 1일의 요일 (0: 일요일, 1: 월요일, ...) - - return ( -
-
-
-

2025년 1월

- 학습 캘린더 -
-
- - -
-
- -
-
- {['일', '월', '화', '수', '목', '금', '토'].map((day, idx) => ( -
- {day} -
- ))} -
- -
- {Array.from({ length: firstDayOfMonth }).map((_, idx) => ( -
- ))} - {days.map((day) => { - const isStudied = studiedDays.includes(day); - const isToday = day === today; - - return ( -
- - {day} - - {isStudied && ( - - )} -
- ); - })} -
-
- -
-
- - 학습 완료 -
-
- 이번 달 학습: - {studiedDays.length}일 -
-
-
- ); -}; +import { Bell, Settings } from 'lucide-react'; +import ProfileSection from '@/components/mypage/profileSection'; +import StudyCalendar from '@/components/mypage/study-calendar'; +import QuickStats from '@/components/mypage/quock-stats'; +import RecentActivity from '@/components/mypage/recent-activity'; const Page = () => { return ( @@ -115,133 +23,14 @@ const Page = () => { {/* Main Content */}
- {/* Profile Section */} - - -
- - - - - - -
-
-
-

사용자님

-

상태 메시지를 입력해주세요

-
- -
-
-
-

연속 학습

-

7일

-
-
-

해결한 문제

-

42개

-
-
-

정답률

-

85%

-
-
-
-
- - - - {/* Calendar and Features Grid */} +
- {/* Study Calendar */} - - - - - - - {/* Quick Stats */} -
- - -
- -
-
-

차트 통계

-

학습 진행도 확인

-
- - - - - -
- -
-
-

문제 리스트

-

전체 문제 보기

-
- - - - - -
- -
-
-

오늘의 문제

-

일일 학습하기

-
- - - - - -
- -
-
-

오늘의 문제 정답

-

정답 확인하기

-
- - +
+
+
- - {/* Recent Activity */} - - -
-

최근 활동

- -
-
- {[ - { action: "오늘의 문제를 해결했습니다", time: "2시간 전" }, - { action: "3일 연속 학습 달성!", time: "어제" }, - { action: "2일 전 모든 문제을 맞췄습니다!", time: "2일 전" } - ].map((item, index) => ( -
-
-
-

{item.action}

-

{item.time}

-
-
- ))} -
- - +
); diff --git a/app/problem-list/page.jsx b/app/problem-list/page.jsx index 7c7ec5b..89d2241 100644 --- a/app/problem-list/page.jsx +++ b/app/problem-list/page.jsx @@ -5,6 +5,7 @@ import SearchBar from '../../components/problem-list/searchBar'; import FilterBar from '../../components/problem-list/filterBar'; import ProblemList from '../../components/problem-list/problemList'; import Title from '../../components/landing/Title'; +import {Bell, Settings} from "lucide-react"; const ProblemListPage = () => { // 초기 더미 데이터 @@ -57,12 +58,25 @@ const ProblemListPage = () => { }; return ( -
- + <div className="min-h-screen bg-gray-50"> + {/* Header */} + <header className="bg-[#6DB1B2] text-white py-6"> + <div className="container mx-auto px-4"> + <div className="flex items-center justify-between"> + <h1 className="text-2xl font-bold">문제 리스트</h1> + <div className="flex gap-4"> + <Bell className="w-6 h-6 cursor-pointer hover:opacity-80"/> + <Settings className="w-6 h-6 cursor-pointer hover:opacity-80"/> + </div> + </div> + </div> + </header> + <Title/> <div className="p-5 max-w-4xl mx-auto text-center"> - <SearchBar onSearch={() => {}} /> - <FilterBar onFilterChange={handleFilterChange} /> - <ProblemList problems={initialProblems} filters={filters} />{/* 필터링된 문제 전달 */} + <SearchBar onSearch={() => { + }}/> + <FilterBar onFilterChange={handleFilterChange}/> + <ProblemList problems={initialProblems} filters={filters}/>{/* 필터링된 문제 전달 */} </div> </div> ); diff --git a/app/signup/page.jsx b/app/signup/page.jsx index 2468039..cec71e1 100644 --- a/app/signup/page.jsx +++ b/app/signup/page.jsx @@ -9,6 +9,11 @@ const SignupPage = () => { const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); + const handleCardClick = (path) => { + console.log(`Navigating to ${path}`); + window.location.href = path; + }; + const handleSignup = async (event) => { event.preventDefault(); if (password !== confirmPassword) { @@ -27,7 +32,7 @@ const SignupPage = () => { }); if (res.ok) { - alert("Signup successful!"); + handleCardClick('../modal'); } else { const data = await res.json(); alert(data.message); diff --git a/app/statistics/page.js b/app/statistics/page.js index 0e356ba..652a6bb 100644 --- a/app/statistics/page.js +++ b/app/statistics/page.js @@ -31,6 +31,7 @@ import CategorySolvedChart from "@/components/statistics/category/category-solve import CategoryAccuracyChart from "@/components/statistics/category/category-accuracy"; import WeeklyTrendChart from "@/components/statistics/weekly/weekly-trend"; import { statisticUtils } from "@/utils/statisticUtils"; +import {Bell, Settings} from "lucide-react"; const ResponsiveGridLayout = WidthProvider(Responsive); @@ -77,77 +78,92 @@ export default function StatisticsPage() { }; return ( - <Container maxWidth={false} disableGutters sx={{ p: 3, height: "100vh" }}> - <Typography variant="h4" gutterBottom sx={{ mb: 4 }}> - 나의 학습 통계 - </Typography> + <div className="min-h-screen bg-gray-50"> + {/* Header */} + <header className="bg-[#6DB1B2] text-white py-6"> + <div className="container mx-auto px-4"> + <div className="flex items-center justify-between"> + <h1 className="text-2xl font-bold">나의 학습통계</h1> + <div className="flex gap-4"> + <Bell className="w-6 h-6 cursor-pointer hover:opacity-80"/> + <Settings className="w-6 h-6 cursor-pointer hover:opacity-80"/> + </div> + </div> + </div> + </header> - <ResponsiveGridLayout - className="layout" - layouts={layouts} - breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }} - cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }} - rowHeight={50} - margin={[16, 16]} - compactType="vertical" - preventCollision={false} - isResizable={true} - isDraggable={true} - onLayoutChange={(currentLayout, allLayouts) => { - setLayouts(allLayouts); - }} - > - <div key="category" style={gridItemStyle}> - <CategorySolvedChart data={mockCategoryStatisticsData} /> - </div> + <Container maxWidth={false} disableGutters sx={{p: 3, height: "100vh"}}> + {/*<Typography variant="h4" gutterBottom sx={{mb: 4}}>*/} + {/* 나의 학습 통계*/} + {/*</Typography>*/} - <div key="weekly" style={gridItemStyle}> - <WeeklyTrendChart data={mockWeeklyStatisticsData} /> - </div> + <ResponsiveGridLayout + className="layout" + layouts={layouts} + breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}} + cols={{lg: 12, md: 12, sm: 6, xs: 4, xxs: 2}} + rowHeight={50} + margin={[16, 16]} + compactType="vertical" + preventCollision={false} + isResizable={true} + isDraggable={true} + onLayoutChange={(currentLayout, allLayouts) => { + setLayouts(allLayouts); + }} + > + <div key="category" style={gridItemStyle}> + <CategorySolvedChart data={mockCategoryStatisticsData}/> + </div> - <div key="summary-solved" style={gridItemStyle}> - <Typography variant="h6" color="primary" gutterBottom> - 총 해결한 문제 - </Typography> - <Typography variant="h3"> - {mockSummaryStatisticsData.data.user.totalSolved}문제 - </Typography> - </div> - <div key="summary-accuracy" style={gridItemStyle}> - <Typography variant="h6" color="primary" gutterBottom> - 나의 정답률 - </Typography> - <Typography variant="h3"> - {mockSummaryStatisticsData.data.user.correctRate}% - </Typography> - </div> - <div key="summary-time" style={gridItemStyle}> - <Typography variant="h6" color="primary" gutterBottom> - 평균 풀이 시간 - </Typography> - <Typography variant="h3"> - {statisticUtils.formatters.timeInSeconds( - mockSummaryStatisticsData.data.user.timeStats.averageTime - )} - </Typography> - </div> + <div key="weekly" style={gridItemStyle}> + <WeeklyTrendChart data={mockWeeklyStatisticsData}/> + </div> - <div key="problem-solved" style={gridItemStyle}> - <TotalSolvedChart data={mockSummaryStatisticsData} /> - </div> + <div key="summary-solved" style={gridItemStyle}> + <Typography variant="h6" color="primary" gutterBottom> + 총 해결한 문제 + </Typography> + <Typography variant="h3"> + {mockSummaryStatisticsData.data.user.totalSolved}문제 + </Typography> + </div> + <div key="summary-accuracy" style={gridItemStyle}> + <Typography variant="h6" color="primary" gutterBottom> + 나의 정답률 + </Typography> + <Typography variant="h3"> + {mockSummaryStatisticsData.data.user.correctRate}% + </Typography> + </div> + <div key="summary-time" style={gridItemStyle}> + <Typography variant="h6" color="primary" gutterBottom> + 평균 풀이 시간 + </Typography> + <Typography variant="h3"> + {statisticUtils.formatters.timeInSeconds( + mockSummaryStatisticsData.data.user.timeStats.averageTime + )} + </Typography> + </div> - <div key="correct-rate" style={gridItemStyle}> - <CorrectRateChart data={mockSummaryStatisticsData} /> - </div> + <div key="problem-solved" style={gridItemStyle}> + <TotalSolvedChart data={mockSummaryStatisticsData}/> + </div> - <div key="distribution" style={gridItemStyle}> - <CorrectDistributionChart data={mockSummaryStatisticsData} /> - </div> + <div key="correct-rate" style={gridItemStyle}> + <CorrectRateChart data={mockSummaryStatisticsData}/> + </div> - <div key="category-accuracy" style={gridItemStyle}> - <CategoryAccuracyChart data={mockCategoryStatisticsData} /> - </div> - </ResponsiveGridLayout> - </Container> - ); -} + <div key="distribution" style={gridItemStyle}> + <CorrectDistributionChart data={mockSummaryStatisticsData}/> + </div> + + <div key="category-accuracy" style={gridItemStyle}> + <CategoryAccuracyChart data={mockCategoryStatisticsData}/> + </div> + </ResponsiveGridLayout> + </Container> + </div> + ); + } diff --git a/components/modal/modal-component.jsx b/components/modal/modal-component.jsx index dc01b37..05735a6 100644 --- a/components/modal/modal-component.jsx +++ b/components/modal/modal-component.jsx @@ -22,6 +22,11 @@ export default function ModalComponent() { setSelectedCategories((prev) => prev.filter((c) => c.id !== category.id)); }; + const handleCardClick = (path) => { + console.log(`Navigating to ${path}`); + window.location.href = path; + }; + const handleSubmit = async () => { const formData = { categories: selectedCategories.map((c) => c.id), @@ -41,7 +46,8 @@ export default function ModalComponent() { if (response.ok) { const result = await response.json(); console.log("Server Response:", result); - } else { + handleCardClick('/mypage'); + }else { console.error("Failed to send data:", response.status, response.statusText); } } catch (error) { @@ -61,7 +67,7 @@ export default function ModalComponent() { <QuestionInput value={questionCount} onChange={setQuestionCount} /> <div className="flex justify-center"> <button - className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 w-60 mt-1" + className="bg-[#6DB1B2] text-white px-4 py-2 rounded-md hover:bg-[#6DB1B2] w-60 mt-1" onClick={handleSubmit} > 설정 완료 diff --git a/components/mypage/profileSection.jsx b/components/mypage/profileSection.jsx new file mode 100644 index 0000000..8870437 --- /dev/null +++ b/components/mypage/profileSection.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { User, Edit } from 'lucide-react'; +import { Card, CardContent } from '@/components/ui/card'; +import { Button } from '../ui/button'; +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; + +const ProfileSection = () => { + return ( + <Card className="mb-8"> + <CardContent className="p-6"> + <div className="flex items-center gap-6"> + <Avatar className="w-24 h-24"> + <AvatarImage src="/api/placeholder/150/150" /> + <AvatarFallback className="bg-[#6DB1B2]"> + <User className="w-12 h-12 text-white" /> + </AvatarFallback> + </Avatar> + <div className="flex-1"> + <div className="flex items-center justify-between mb-2"> + <div> + <h2 className="text-xl font-bold">사용자님</h2> + <p className="text-gray-600">상태 메시지를 입력해주세요</p> + </div> + <Button variant="outline" className="flex items-center gap-4"> + <Edit className="w-4 h-4" /> + 프로필 수정 + </Button> + </div> + <div className="mt-4 flex gap-4"> + <div className="text-center"> + <p className="text-sm text-gray-600">연속 학습</p> + <p className="font-bold text-[#6DB1B2]">7일</p> + </div> + <div className="text-center"> + <p className="text-sm text-gray-600">해결한 문제</p> + <p className="font-bold text-[#6DB1B2]">42개</p> + </div> + <div className="text-center"> + <p className="text-sm text-gray-600">정답률</p> + <p className="font-bold text-[#6DB1B2]">85%</p> + </div> + </div> + </div> + </div> + </CardContent> + </Card> + ); +}; + +export default ProfileSection; \ No newline at end of file diff --git a/components/mypage/quock-stats.jsx b/components/mypage/quock-stats.jsx new file mode 100644 index 0000000..1d3aa70 --- /dev/null +++ b/components/mypage/quock-stats.jsx @@ -0,0 +1,68 @@ +'use client'; + +import React from 'react'; +import { BarChart2, ListChecks, Calendar, CheckCircle } from 'lucide-react'; +import { Card, CardContent } from '@/components/ui/card'; + + +const QuickStats = ({ user }) => { + const handleCardClick = (path) => { + console.log(`Navigating to ${path}`); + window.location.href = path; + }; + + return ( + <div className="space-y-4"> + <Card className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => handleCardClick('/statistics')}> + <CardContent className="p-6 flex items-center gap-4"> + <div className="p-3 rounded-full bg-[#6DB1B2]/10"> + <BarChart2 className="w-6 h-6 text-[#6DB1B2]" /> + </div> + <div> + <h3 className="font-medium">차트 통계</h3> + <p className="text-sm text-gray-600">학습 진행도 확인</p> + </div> + </CardContent> + </Card> + + <Card className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => handleCardClick('/problem-list')}> + <CardContent className="p-6 flex items-center gap-4"> + <div className="p-3 rounded-full bg-[#6DB1B2]/10"> + <ListChecks className="w-6 h-6 text-[#6DB1B2]" /> + </div> + <div> + <h3 className="font-medium">문제 리스트</h3> + <p className="text-sm text-gray-600">전체 문제 보기</p> + </div> + </CardContent> + </Card> + + + <Card className="hover:shadow-lg transition-shadow cursor-pointer" onClick={() => handleCardClick('/questions')}> + <CardContent className="p-6 flex items-center gap-4"> + <div className="p-3 rounded-full bg-[#6DB1B2]/10"> + <Calendar className="w-6 h-6 text-[#6DB1B2]" /> + </div> + <div> + <h3 className="font-medium">오늘의 문제</h3> + <p className="text-sm text-gray-600">일일 학습하기</p> + </div> + </CardContent> + </Card> + + <Card className="hover:shadow-lg transition-shadow cursor-pointer" > + <CardContent className="p-6 flex items-center gap-4"> + <div className="p-3 rounded-full bg-[#6DB1B2]/10"> + <CheckCircle className="w-6 h-6 text-[#6DB1B2]" /> + </div> + <div> + <h3 className="font-medium">오늘의 문제 정답</h3> + <p className="text-sm text-gray-600">정답 확인하기</p> + </div> + </CardContent> + </Card> + </div> + ); +}; + +export default QuickStats; \ No newline at end of file diff --git a/components/mypage/recent-activity.jsx b/components/mypage/recent-activity.jsx new file mode 100644 index 0000000..7018268 --- /dev/null +++ b/components/mypage/recent-activity.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Card, CardContent } from '@/components/ui/card'; +import { Button } from '../ui/button'; + +const RecentActivity = () => { + const activities = [ + { action: "오늘의 문제를 해결했습니다", time: "2시간 전" }, + { action: "3일 연속 학습 달성!", time: "어제" }, + { action: "2일 전 모든 문제을 맞췄습니다!", time: "2일 전" } + ]; + + return ( + <Card> + <CardContent className="p-6"> + <div className="flex items-center justify-between mb-4"> + <h3 className="text-lg font-bold">최근 활동</h3> + <Button variant="ghost" size="sm" className="text-gray-600"> + 전체보기 + </Button> + </div> + <div className="space-y-4"> + {activities.map((item, index) => ( + <div key={index} className="flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50"> + <div className="w-2 h-2 rounded-full bg-[#6DB1B2]" /> + <div className="flex-1"> + <p className="font-medium">{item.action}</p> + <p className="text-sm text-gray-600">{item.time}</p> + </div> + </div> + ))} + </div> + </CardContent> + </Card> + ); +}; + +export default RecentActivity; \ No newline at end of file diff --git a/components/mypage/study-calendar.jsx b/components/mypage/study-calendar.jsx new file mode 100644 index 0000000..1285f2a --- /dev/null +++ b/components/mypage/study-calendar.jsx @@ -0,0 +1,94 @@ +import React from 'react'; +import { ChevronLeft, ChevronRight, Heart } from 'lucide-react'; +import { Button } from '../ui/button'; + +const StudyCalendar = () => { + const studiedDays = [1, 3, 5, 7, 8, 9, 10, 12, 15, 16, 20, 21, 22, 23]; + const days = Array.from({ length: 31 }, (_, i) => i + 1); + const today = new Date(); // 현재 날짜에서 일자를 추출 + + const year = 2025; + const month = 0; // 1월은 0 + const firstDayOfMonth = new Date(year, month, 1).getDay(); // 2025년 1월 1일의 요일 (0: 일요일, 1: 월요일, ...) + + return ( + <div className="w-full"> + <div className="flex items-center justify-between mb-6"> + <div className="flex items-baseline gap-2"> + <h3 className="text-2xl font-bold text-[#6DB1B2]">2025년 1월</h3> + <span className="text-gray-500">학습 캘린더</span> + </div> + <div className="flex gap-1"> + <Button variant="ghost" size="icon" className="hover:text-[#6DB1B2] rounded-full w-8 h-8"> + <ChevronLeft className="w-4 h-4" /> + </Button> + <Button variant="ghost" size="icon" className="hover:text-[#6DB1B2] rounded-full w-8 h-8"> + <ChevronRight className="w-4 h-4" /> + </Button> + </div> + </div> + + <div className="border rounded-lg overflow-hidden"> + <div className="grid grid-cols-7 border-b bg-gray-50"> + {['일', '월', '화', '수', '목', '금', '토'].map((day, idx) => ( + <div key={day} + className={` + text-sm font-medium p-3 text-center + ${idx === 0 ? 'text-red-400' : idx === 6 ? 'text-blue-400' : 'text-gray-600'} + ${idx !== 6 ? 'border-r' : ''} + `} + > + {day} + </div> + ))} + </div> + + <div className="grid grid-cols-7"> + {Array.from({ length: firstDayOfMonth }).map((_, idx) => ( + <div key={`empty-${idx}`} className="border-r border-b p-3"></div> + ))} + {days.map((day) => { + const isStudied = studiedDays.includes(day); + const isToday = day === today; + + return ( + <div + key={day.toString()} + className={` + p-3 aspect-square flex items-center justify-center relative + ${(firstDayOfMonth + day - 1) % 7 !== 6 ? 'border-r' : ''} + border-b + ${isStudied ? 'bg-[#6DB1B2]/5' : 'hover:bg-gray-50'} + ${isToday ? 'ring-2 ring-inset ring-[#6DB1B2]' : ''} + transition-all duration-200 + `} + > + <span className={`text-sm ${isStudied ? 'text-[#6DB1B2] font-medium' : 'text-gray-600'}`}> + {day} + </span> + {isStudied && ( + <Heart + className="w-5 h-5 absolute bottom-1 right-1 fill-[#6DB1B2] text-[#6DB1B2]" + /> + )} + </div> + ); + })} + </div> + </div> + + <div className="mt-6 flex justify-between items-center"> + <div className="flex items-center gap-2"> + <Heart className="w-5 h-5 fill-[#6DB1B2] text-[#6DB1B2]" /> + <span className="text-sm text-gray-600">학습 완료</span> + </div> + <div className="flex items-center gap-2"> + <span className="text-sm text-gray-600">이번 달 학습:</span> + <span className="text-sm font-medium text-[#6DB1B2]">{studiedDays.length}일</span> + </div> + </div> + </div> + ); +}; + +export default StudyCalendar; \ No newline at end of file diff --git a/components/ui/bottom.jsx b/components/ui/button.jsx similarity index 100% rename from components/ui/bottom.jsx rename to components/ui/button.jsx diff --git a/components/ui/card.jsx b/components/ui/card.jsx index 611c94c..5d2a74f 100644 --- a/components/ui/card.jsx +++ b/components/ui/card.jsx @@ -1,8 +1,10 @@ +'use client'; + import React from 'react'; -export const Card = ({ children, className }) => { +export const Card = ({ children, className, onClick }) => { return ( - <div className={`bg-white shadow rounded-lg ${className}`}> + <div className={`bg-white shadow rounded-lg ${className}`} onClick={onClick}> {children} </div> ); diff --git a/pages/api/placeholder/[width]/[height].js b/pages/api/placeholder/[width]/[height].js new file mode 100644 index 0000000..c0688df --- /dev/null +++ b/pages/api/placeholder/[width]/[height].js @@ -0,0 +1,9 @@ +export default function handler(req, res) { + const { width, height } = req.query; + + // 예시: 단순히 JSON 응답을 반환 + res.status(200).json({ message: `Placeholder image with width ${width} and height ${height}` }); + + // 실제 이미지 생성 로직을 추가할 수 있습니다. + // 예를 들어, Canvas를 사용하여 동적으로 이미지를 생성할 수 있습니다. +} \ No newline at end of file