-
-
- {overline &&
{overline}
}
-
{title}
- {description && (
-
{description}
- )}
+
+
+
+ {overline &&
{overline}
}
+
{title}
+ {description && (
+
+ {description}
+
+ )}
+
+ {showArrow &&
}
- {showArrow && (
-
- )}
+ {children}
-
-
+ {onPrimaryClick && (
+
+ )}
+ {onSecondaryClick && (
+
+ )}
);
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 3968f22..a0e3f4b 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -3,12 +3,12 @@
import * as React from 'react';
import type { ReactNode } from 'react';
import { Dialog as DialogPrimitive } from 'radix-ui';
-import type { StaticImageData } from 'next/image';
+import { DeleteIcon } from '@/assets/icons';
import { cn } from '@/lib/cn';
import { Button } from '@/components/ui/Button';
import { Divider } from '@/components/ui/Divider';
-import deleteIcon from '@/assets/icons/delete.svg';
+import { Icon } from '@/components/ui/Icon';
function Dialog({ ...props }: React.ComponentProps
) {
return ;
@@ -34,7 +34,7 @@ function DialogOverlay({
-
- Close
+
)}
@@ -88,6 +77,7 @@ function DialogContent({
}
interface DialogHeaderProps extends React.HTMLAttributes {
+ icon?: ReactNode;
overline?: string;
title?: string;
description?: string;
@@ -97,6 +87,7 @@ interface DialogHeaderProps extends React.HTMLAttributes {
}
function DialogHeader({
+ icon,
overline,
title,
description,
@@ -106,6 +97,14 @@ function DialogHeader({
className,
...props
}: DialogHeaderProps) {
+ const closeButton = showClose && (
+
+
+
+ );
+
// If children provided, use custom content mode
if (children) {
return (
@@ -116,20 +115,7 @@ function DialogHeader({
>
Dialog
{children}
- {showClose && onClose && (
-
- )}
+ {closeButton}
);
}
@@ -137,34 +123,24 @@ function DialogHeader({
return (
- {overline &&
{overline}
}
- {title ? (
-
- {title}
-
- ) : (
-
Dialog
- )}
- {description &&
{description}
}
+ {icon &&
{icon}
}
+
+ {overline &&
{overline}
}
+ {title ? (
+
+ {title}
+
+ ) : (
+
Dialog
+ )}
+ {description &&
{description}
}
+
- {showClose && onClose && (
-
- )}
+ {closeButton}
);
}
@@ -201,10 +177,10 @@ function DialogFooter({
return (
{showDivider &&
}
-
+
{children}
{description && (
-
{description}
+
{description}
)}
{showCloseButton && (
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index eb0c3f6..848b41d 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -5,4 +5,5 @@ export { useDragScroll } from './useDragScroll';
export { useGenerationConfirm } from './useGenerationConfirm';
export { useFileAttach } from './useFileAttach';
export { useScrollIntoView } from './useScrollIntoView';
+export { useRemainingTime } from './useRemainingTime';
export { useScrollOnGrow } from './useScrollOnGrow';
diff --git a/src/hooks/useRemainingTime.ts b/src/hooks/useRemainingTime.ts
new file mode 100644
index 0000000..6fbfae7
--- /dev/null
+++ b/src/hooks/useRemainingTime.ts
@@ -0,0 +1,38 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+/**
+ * 종료 시각까지 남은 시간을 1초 간격으로 카운트다운하는 훅
+ *
+ * @param endTime - ISO 8601 형식의 종료 시각 문자열
+ * @returns minutes - 남은 분 (2자리, 예: "05")
+ * @returns seconds - 남은 초 (2자리, 예: "09")
+ * @returns isExpired - 시간 만료 여부
+ */
+function getRemainingSeconds(endTime: string) {
+ const end = new Date(endTime).getTime();
+ if (Number.isNaN(end)) return 0;
+ return Math.max(0, Math.floor((end - Date.now()) / 1000));
+}
+
+function useRemainingTime(endTime: string) {
+ const [remaining, setRemaining] = useState(() => getRemainingSeconds(endTime));
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ const seconds = getRemainingSeconds(endTime);
+ setRemaining(seconds);
+ if (seconds <= 0) clearInterval(interval);
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, [endTime]);
+
+ const minutes = String(Math.floor(remaining / 60)).padStart(2, '0');
+ const seconds = String(remaining % 60).padStart(2, '0');
+
+ return { minutes, seconds, isExpired: remaining <= 0 };
+}
+
+export { useRemainingTime };
diff --git a/src/lib/formatTime.ts b/src/lib/formatTime.ts
new file mode 100644
index 0000000..98d51f9
--- /dev/null
+++ b/src/lib/formatTime.ts
@@ -0,0 +1,35 @@
+/**
+ * Date 객체를 "7:00 PM" 형식의 문자열로 변환
+ */
+function formatTime(date: Date) {
+ return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
+}
+
+/**
+ * "2026년 3월 20일" 형식의 날짜 문자열로 변환
+ */
+function formatKoreanDate(date: Date) {
+ return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
+}
+
+/**
+ * 출석 카드용 설명 문자열 생성
+ * "날짜 : 2026년 3월 20일 (7:00 PM~9:00 PM)\n장소 : 동아리방"
+ */
+function formatAttendanceDescription(start: string, end: string, location: string) {
+ const startDate = new Date(start);
+ const endDate = new Date(end);
+
+ return `날짜 : ${formatKoreanDate(startDate)} (${formatTime(startDate)}~${formatTime(endDate)})\n장소 : ${location}`;
+}
+
+/**
+ * 출석 모달용 설명 문자열 생성
+ * "2026년 3월 20일 · 동아리방"
+ */
+function formatModalDescription(start: string, location: string) {
+ const date = new Date(start);
+ return `${formatKoreanDate(date)} · ${location}`;
+}
+
+export { formatTime, formatKoreanDate, formatAttendanceDescription, formatModalDescription };
diff --git a/src/types/attendance.ts b/src/types/attendance.ts
new file mode 100644
index 0000000..7ae5534
--- /dev/null
+++ b/src/types/attendance.ts
@@ -0,0 +1,17 @@
+import type { ApiResponse } from '@/types/common';
+
+type AttendanceStatus = 'ATTEND' | 'ABSENT' | 'PENDING';
+
+interface AttendanceData {
+ attendanceRate: number;
+ title: string;
+ status: AttendanceStatus;
+ code: string;
+ start: string;
+ end: string;
+ location: string;
+}
+
+type AttendanceResponse = ApiResponse;
+
+export type { AttendanceStatus, AttendanceData, AttendanceResponse };
diff --git a/src/types/common.ts b/src/types/common.ts
index 092ba4f..c67b5b8 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -1,3 +1,9 @@
+export interface ApiResponse {
+ code: number;
+ message: string;
+ data: T;
+}
+
export type MutationCallbacks = {
onSuccess?: () => void;
onError?: (error: TError) => void;
diff --git a/src/types/index.ts b/src/types/index.ts
index e4cf5fe..c1116f4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,2 +1,2 @@
// types index file
-export type { MutationCallbacks } from './common';
+export type { ApiResponse, MutationCallbacks } from './common';