Skip to content

알림 UI 수정 #375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HA-SEUNG-JEONG merged 5 commits into from
Feb 4, 2026
Merged

알림 UI 수정 #375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4194321
feat: 알림 클릭 시 읽음 상태 업데이트 기능 추가
HA-SEUNG-JEONG Jan 20, 2026
6c518d3
fix: 알림 클릭 핸들러 및 버튼 텍스트 수정
HA-SEUNG-JEONG Jan 20, 2026
7dd1cae
Merge branch 'develop' of https://github.com/code-zero-to-one/study-p…
HA-SEUNG-JEONG Jan 20, 2026
f3d30d2
Merge branch 'develop' of https://github.com/code-zero-to-one/study-p…
HA-SEUNG-JEONG Feb 4, 2026
a4c56fb
fix: 알림 클릭 핸들러 및 JSX 포맷팅 개선
HA-SEUNG-JEONG Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions src/app/(service)/(my)/notification/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import { useState } from 'react';

import { MemberNotificationResponse } from '@/api/openapi';
import type { GetMemberNotificationsTopicTypeEnum } from '@/api/openapi/api/notification-api';
import NotificationList from '@/components/lists/notification-list';
import Button from '@/components/ui/button';
Expand Down Expand Up @@ -61,6 +62,14 @@ export default function NotificationPage() {
readNotifications(ids);
};

const handleNotificationClick = (
notification: MemberNotificationResponse,
) => {
if (!notification.isRead) {
readNotifications([notification.id]);
}
};

return (
<div className="flex flex-col gap-300">
{/* Header */}
Expand All @@ -83,7 +92,7 @@ export default function NotificationPage() {
<div className="flex gap-100">
<Button
color="outlined"
className="font-designer-13r h-[32px]"
className="font-designer-13r h-400"
onClick={handleMarkAllAsRead}
>
모두 읽음 처리
Expand All @@ -104,7 +113,10 @@ export default function NotificationPage() {
</div>
</div>

<NotificationList notifications={notifications} />
<NotificationList
notifications={notifications}
onNotificationClick={handleNotificationClick}
/>

{/* Pagination */}
<div className="mt-200">
Expand Down
13 changes: 9 additions & 4 deletions src/components/lists/notification-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,20 @@ const getBadgeColor = (

interface NotificationListProps {
notifications?: MemberNotificationResponse[];
onNotificationClick?: (notification: MemberNotificationResponse) => void;
}

export default function NotificationList({
notifications,
onNotificationClick,
}: NotificationListProps) {
return (
<ul>
{notifications?.map((notification) => (
<li
key={notification.id}
className="border-bottom-border-default bg-background-default flex items-center justify-between border-b py-150"
className="border-bottom-border-default bg-background-default hover:bg-background-neutral-subtle flex cursor-pointer items-center justify-between border-b py-150"
onClick={() => onNotificationClick?.(notification)}
>
<div className="flex items-center gap-150">
<Badge
Expand All @@ -50,9 +53,11 @@ export default function NotificationList({
{notification.title}
</span>
</div>
<span className="font-designer-11r text-text-subtlest whitespace-nowrap">
{format(notification.createdAt, 'yyyy.MM.dd HH:mm')}
</span>
<div className="flex items-center gap-100">
<span className="font-designer-11r text-text-subtlest whitespace-nowrap">
{format(notification.createdAt, 'yyyy.MM.dd HH:mm')}
</span>
</div>
Comment on lines +56 to +60
Copy link

@coderabbitai coderabbitai bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

notification.createdAt이 undefined일 경우 런타임 에러가 발생할 수 있습니다.

MemberNotificationResponse.createdAt은 optional 필드입니다. date-fns의 format 함수에 undefined가 전달되면 런타임 에러가 발생합니다.

🛡️ 제안된 수정 
  <div className="flex items-center gap-100">
    <span className="font-designer-11r text-text-subtlest whitespace-nowrap">
-     {format(notification.createdAt, 'yyyy.MM.dd HH:mm')}
+     {notification.createdAt
+       ? format(notification.createdAt, 'yyyy.MM.dd HH:mm')
+       : '-'}
    </span>
  </div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="flex items-center gap-100">
<span className="font-designer-11r text-text-subtlest whitespace-nowrap">
{format(notification.createdAt, 'yyyy.MM.dd HH:mm')}
</span>
</div>
<div className="flex items-center gap-100">
<span className="font-designer-11r text-text-subtlest whitespace-nowrap">
{notification.createdAt
? format(notification.createdAt, 'yyyy.MM.dd HH:mm')
: '-'}
</span>
</div>
🤖 Prompt for AI Agents 
In `@src/components/lists/notification-list.tsx` around lines 56 - 60, The code
calls date-fns format with notification.createdAt which is optional
(MemberNotificationResponse.createdAt) and can be undefined, causing a runtime
error; update the render in the component that uses format (the span showing
format(notification.createdAt, 'yyyy.MM.dd HH:mm')) to first check that
notification.createdAt is present and a valid Date (or can be safely parsed) and
only call format when valid, otherwise render a safe fallback (e.g., empty
string or a placeholder like '-') to prevent passing undefined into format.

</li>
))}
</ul>
Expand Down
23 changes: 17 additions & 6 deletions src/components/modals/notification-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
import { DotIcon } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { MemberNotificationResponse } from '@/api/openapi';
import NotificationList from '@/components/lists/notification-list';

import {
useGetNotifications,
useHasNewNotification,
useReadNotifications,
} from '@/hooks/queries/notification-api';
import NotiIcon from 'public/icons/notifications_none.svg';
import {
Expand All @@ -30,9 +31,16 @@ export default function NotificationDropdown() {
size: 5,
hasRead: false,
});
const { data: newData } = useHasNewNotification();

const isRead = newData?.isRead;
const { mutate: readNotifications } = useReadNotifications();

const handleNotificationClick = (
notification: MemberNotificationResponse,
) => {
if (!notification.isRead) {
readNotifications([notification.id]);
}
};

const notifications =
mode === 'all'
Expand All @@ -48,8 +56,8 @@ export default function NotificationDropdown() {
<div className="relative cursor-pointer">
<NotiIcon />

{!isRead && (
<DotIcon className="absolute -top-100 -left-100 fill-red-500 stroke-red-500" />
{totalUnreadCount !== undefined && totalUnreadCount > 0 && (
<DotIcon className="absolute -top-100 -right-100 fill-red-500 stroke-red-500" />
)}
</div>
</DropdownMenuTrigger>
Expand Down Expand Up @@ -87,7 +95,10 @@ export default function NotificationDropdown() {
</p>
</div>
) : (
<NotificationList notifications={notifications} />
<NotificationList
notifications={notifications}
onNotificationClick={handleNotificationClick}
/>
)}
</div>

Expand Down
Loading