Skip to content

Feat/126 알림 표시 기능 구현 #129

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
minimo-9 merged 2 commits into from
Aug 3, 2025
Merged

Feat/126 알림 표시 기능 구현 #129

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5e5558a
feat: 알림 표시 기능 구현
minimo-9 Aug 3, 2025
d4143ed
Merge branch 'develop' into feat/126
minimo-9 Aug 3, 2025
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
15 changes: 12 additions & 3 deletions src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import useLogout from '@/hooks/useLogout';
import { toast } from 'sonner';
import { useState } from 'react';
import NotificationDropdown from './Notification/NotificationDropdown';
import { useNotifications } from '@/hooks/useNotification';

export default function Header() {
const router = useRouter();
Expand All @@ -20,6 +21,9 @@ export default function Header() {

const toggleOpen = () => setIsOpen((prev) => !prev);

const { data } = useNotifications({ size: 10 });
const hasNotification = (data?.totalCount ?? 0) > 0;

const handleLogoClick = () => {
router.push('/'); // 쿼리 제거됨 → 검색어 초기화됨
};
Expand Down Expand Up @@ -51,8 +55,8 @@ export default function Header() {

{/* 우측 placeholder (스켈레톤 박스) */}
<div className='flex gap-24'>
<div className='h-32 w-32 rounded-full bg-gray-200 animate-pulse' />
<div className='h-32 w-80 rounded-md bg-gray-200 animate-pulse' />
<div className='h-32 w-32 animate-pulse rounded-full bg-gray-200' />
<div className='h-32 w-80 animate-pulse rounded-md bg-gray-200' />
</div>
</div>
</header>
Expand All @@ -78,9 +82,14 @@ export default function Header() {
<button
aria-label='알림'
onClick={toggleOpen}
className='hover:text-primary'
className='hover:text-primary relative'
Copy link

@coderabbitai coderabbitai bot Aug 3, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

버튼에 명시적인 type 속성을 추가하세요.

relative 포지셔닝 추가는 알림 배지를 위해 적절하지만, 버튼에 명시적인 type="button" 속성을 추가해야 합니다.

              <button
                aria-label='알림'
                onClick={toggleOpen}
-                className='hover:text-primary relative'
+                type="button"
+                className='hover:text-primary relative'
              >
🧰 Tools
🪛 Biome (2.1.2)

[error] 85-89: Provide an explicit type prop for the button element.

The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset

(lint/a11y/useButtonType)

🤖 Prompt for AI Agents 
In src/components/Header.tsx at line 85, the button element lacks an explicit
type attribute, which can cause unintended form submissions. Add the attribute
type="button" to the button element to clearly specify its behavior as a button
and prevent default form submission.

>
<IconBell />
{hasNotification && (
<span className='font-regular absolute top-[-11px] right-[-3px] text-[10px] text-red-500'>
{data?.totalCount}
</span>
)}
Comment on lines +88 to +92
Copy link

@coderabbitai coderabbitai bot Aug 3, 2025

Choose a reason for hiding this comment

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

🧹 Nitpick (assertive)

알림 배지 구현이 기능적으로 올바르지만 개선사항이 있습니다.

조건부 렌더링과 위치 지정이 적절하게 구현되었습니다. 다음 개선사항을 고려해보세요:

  1. 큰 숫자에 대한 최대 표시 제한 (예: 99+)
  2. 접근성을 위한 최소 폰트 크기 준수

큰 알림 개수에 대한 처리를 위해 다음과 같이 개선할 수 있습니다:

                {hasNotification && (
-                  <span className='font-regular absolute top-[-11px] right-[-3px] text-[10px] text-red-500'>
-                    {data?.totalCount}
+                  <span className='font-regular absolute top-[-11px] right-[-3px] text-[11px] text-red-500'>
+                    {(data?.totalCount ?? 0) > 99 ? '99+' : data?.totalCount}
                  </span>
                )}
📝 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
{hasNotification && (
<span className='font-regular absolute top-[-11px] right-[-3px] text-[10px] text-red-500'>
{data?.totalCount}
</span>
)}
{hasNotification && (
<span className='font-regular absolute top-[-11px] right-[-3px] text-[11px] text-red-500'>
{(data?.totalCount ?? 0) > 99 ? '99+' : data?.totalCount}
</span>
)}
🤖 Prompt for AI Agents 
In src/components/Header.tsx around lines 88 to 92, the notification badge
currently displays the totalCount directly, which can cause layout issues with
large numbers. Modify the rendering logic to cap the displayed number at a
maximum value like "99+" when totalCount exceeds 99. Also, increase the font
size to meet accessibility standards by setting a minimum font size of at least
12px or as per design guidelines.

</button>

{isOpen && (
Expand Down