diff --git a/frontend b/frontend new file mode 160000 index 0000000..0c26d8f --- /dev/null +++ b/frontend @@ -0,0 +1 @@ +Subproject commit 0c26d8f7dd10aa1e0de237567d255880c2543dd7 diff --git a/next.config.mjs b/next.config.mjs index 469e486..10ea5d5 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -23,6 +23,11 @@ const nextConfig = { return config; }, + images: { + domains: ['github.com'], + dangerouslyAllowSVG: true, + contentSecurityPolicy: "default-src 'self'; img-src 'self' data: https:;", + }, }; export default nextConfig; diff --git a/src/app/mobile/admin/dashboard/_components/DashboardItem.tsx b/src/app/mobile/admin/dashboard/_components/DashboardItem.tsx new file mode 100644 index 0000000..5805804 --- /dev/null +++ b/src/app/mobile/admin/dashboard/_components/DashboardItem.tsx @@ -0,0 +1,75 @@ +import Image from 'next/image'; +import convertTime from '@/utils/convertTime'; + +interface DashboardItemProps { + itemName: string; + imageUrl: string; + renterName: string; + studentId: number; + status: string; + applicatedAt: string; +} + +export default function DashboardItem({ + itemName, + imageUrl, + renterName, + studentId, + status, + applicatedAt, +}: DashboardItemProps) { + const RentalBtnText: Record = { + PENDING: '대여', + RETURN_PENDING: '반납', + }; + + const applicatedTime = convertTime(applicatedAt); + + return ( +
+
+
+ 물품 아이콘 +
+ +
+
{itemName}
+ +
+
+
신청자
+
+ {studentId} {renterName} +
+
+ +
+
신청 시간
+
+ {applicatedTime.formattedDate} {applicatedTime.formattedTime} +
+
+
+
+
+ +
+ {/* TODO : API 보고 onClick 연결하기 */} + + +
+
+ ); +} diff --git a/src/app/mobile/admin/dashboard/page.tsx b/src/app/mobile/admin/dashboard/page.tsx new file mode 100644 index 0000000..eebe93e --- /dev/null +++ b/src/app/mobile/admin/dashboard/page.tsx @@ -0,0 +1,104 @@ +'use client'; + +import { useState } from 'react'; +import MobileLayout from '@/components/mobile/layout'; +import Header from '@/components/mobile/Header'; +import Dropdown from '@/components/mobile/Dropdown'; +import useDropdown from '@/hooks/useDropdown'; +import IconArrow from 'public/assets/icon-arrow.svg'; +import { cn } from '@/lib/utils'; +import DashboardItem from './_components/DashboardItem'; + +const RentalApplicationDetail = [ + { + id: 0, + itemName: '우산', + imageUrl: + 'https://github.com/user-attachments/assets/1b8c9ae9-a840-4756-a87d-c092958a2854', + renterName: '윤신지', + studentId: 20213102, + status: 'PENDING', + applicatedAt: '2025-02-16T08:44:45.476Z', + }, + { + id: 1, + itemName: '타이레놀', + imageUrl: + 'https://github.com/user-attachments/assets/159ee697-5a2e-43c8-a5a0-8ab73ae869fd', + renterName: '황현진', + studentId: 20213102, + status: 'RETURN_PENDING', + applicatedAt: '2025-02-13T08:44:45.476Z', + }, +]; + +export default function Dashboard() { + const RentalFilterText: Record = { + ALL: '전체', + PENDING: '대여 신청', + RETURN_PENDING: '반납 신청', + }; + + const [filter, setFilter] = useState('ALL'); + + const { showDropdown, hideDropdown, isDropdownVisible } = useDropdown(); + + const handleDropdown = () => { + return isDropdownVisible ? hideDropdown() : showDropdown(); + }; + + const handleFilter = (filterText: string) => { + setFilter(filterText); + // 여기에 필터링 GET 쏘는 API 추가 + }; + + const dropdownActions = [ + { title: '전체', func: () => handleFilter('ALL') }, + { title: '대여 신청', func: () => handleFilter('PENDING') }, + { title: '반납 신청', func: () => handleFilter('RETURN_PENDING') }, + ]; + + return ( + +
+ +
+
+ 신청 내역 +
+ +
+ {RentalApplicationDetail.map((item) => ( + + ))} + + + + ); +} diff --git a/src/utils/convertTime.ts b/src/utils/convertTime.ts new file mode 100644 index 0000000..c7cfe93 --- /dev/null +++ b/src/utils/convertTime.ts @@ -0,0 +1,14 @@ +const convertTime = (date: string) => { + const TIME_ZONE = 9 * 60 * 60 * 1000; + const dateObj = new Date(date); + + const formattedDate = new Date(dateObj.getTime() + TIME_ZONE) + .toISOString() + .split('T')[0]; + + const formattedTime = dateObj.toTimeString().split(' ')[0]; + + return { formattedDate, formattedTime }; +}; + +export default convertTime;