💄 Design: 알림모달 디자인 수정 및 불필요한 주석 삭제 #97

src/api/alerts.ts

@@ -1,4 +1,3 @@
-// src/api/alerts.ts
 import axios from '@/lib/axios';
 import type { ApiResponse, PaginatedResponse } from '@/types/api';
 import type { Notice } from '@/types/notice';

src/components/layout/header/nav.tsx

@@ -52,10 +52,10 @@ const Nav = () => {
     });
   };
 
-  // ✅ role이 초기 undefined일 수 있어 방어
+  // role이 초기 undefined일 수 있어 방어
   const currentRole: UserRole = (role ?? 'guest') as UserRole;
 
-  // ✅ 아이콘은 "패널 열림 상태"로만 토글
+  // 아이콘은 "패널 열림 상태"로만 토글
   const bellIcon: 'notificationOn' | 'notificationOff' = open
     ? 'notificationOn'
     : 'notificationOff';
@@ -69,17 +69,18 @@ const Nav = () => {
       ))}
 
       {isLogin && (
-        <>
-          <button
-            type='button'
-            onClick={e => {
-              e.preventDefault();
-              logout('/');
-            }}
-          >
-            로그아웃
-          </button>
-
+        <button
+          type='button'
+          onClick={e => {
+            e.preventDefault();
+            logout('/');
+          }}
+        >
+          로그아웃
+        </button>
+      )}
+      {role === 'employee' && (
+        <div className='relative'>
           {/* 알림 버튼: 토글 */}
           <button
             type='button'
@@ -101,29 +102,14 @@ const Nav = () => {
 
           {/* 패널: 열릴 때만 렌더 + 사이즈 고정(피그마) */}
           {open && (
-            <div
-              id='notification-panel'
-              role='dialog'
-              aria-modal='true'
-              className={cn(
-                'absolute right-2 top-[64px] z-[50]',
-                // 모바일 기본 375 x 812
-                'h-[812px] w-[375px]',
-                // 태블릿/데스크탑 368 x 419
-                'tablet:h-[419px] tablet:w-[368px]',
-                'desktop:h-[419px] desktop:w-[368px]',
-                'overflow-auto rounded-xl'
-              )}
-            >
-              <Notification
-                alerts={alerts}
-                onRead={handleRead}
-                isOpen={open}
-                onClose={() => setOpen(false)} // 내부 닫기와 연동
-              />
-            </div>
+            <Notification
+              alerts={alerts}
+              onRead={handleRead}
+              isOpen={open}
+              onClose={() => setOpen(false)} // 내부 닫기와 연동
+            />
           )}
-        </>
+        </div>
       )}
     </nav>
   );

src/components/ui/dropdown/dropdown.stories.tsx

@@ -1,4 +1,3 @@
-// src/components/ui/dropdown/dropdown.stories.tsx
 import { ADDRESS_CODE, CATEGORY_CODE, SORT_CODE } from '@/constants/dropdown';
 import type { Meta, StoryObj } from '@storybook/nextjs';
 import { useState } from 'react';

src/components/ui/input/input.stories.tsx

@@ -1,4 +1,3 @@
-// src/components/ui/input/input.stories.tsx
 import Button from '@/components/ui/button/button';
 import type { Meta, StoryObj } from '@storybook/nextjs';
 import { useState } from 'react';

src/components/ui/modal/notification/Notification.tsx

@@ -5,6 +5,10 @@ import { Shop } from '@/types/shop';
 import { useState } from 'react';
 import NotificationMessage from './NotificationMessage';
 
+const NOTI_STYLE = {
+  controlled: '',
+  uncontrolled: '',
+};
 export interface Alert {
   id: string;
   createdAt: string;
@@ -49,28 +53,30 @@ export default function Notification({ alerts, onRead, isOpen, onClose }: Notifi
       )}
 
       <div
+        role='dialog'
+        aria-modal='true'
         className={cn(
-          'scroll-bar mt-2 w-full overflow-hidden bg-red-100 transition-all duration-300',
-          open ? 'max-h-[700px] px-5 py-6 opacity-100' : 'max-h-0 opacity-0',
-          'md:absolute md:right-0 md:top-1 md:max-h-[400px] md:rounded-xl md:border md:border-gray-300 md:py-6',
-          'fixed left-0 top-0 z-50 h-screen'
+          'w-full overflow-hidden bg-red-100',
+          'fixed right-0 top-0 z-10 h-dvh max-h-dvh border border-gray-300',
+          open ? 'px-5 py-6 opacity-100 md:max-h-[700px]' : 'max-h-0 opacity-0',
+          'md:absolute md:top-[calc(100%+8px)] md:max-h-[460px] md:w-[368px] md:rounded-xl'
         )}
       >
-        <div className='flex justify-between'>
-          <div className='text-[20px] font-bold'>알림 {notificationCount}개</div>
-          <div>
-            <button onClick={() => (controlled ? onClose?.() : setInternalOpen(false))}>
-              <Icon iconName='close' iconSize='lg' ariaLabel='닫기' />
-            </button>
-          </div>
+        <div className='mb-4 flex items-center justify-between'>
+          <div className='text-heading-s font-bold'>알림 {notificationCount}개</div>
+          <button
+            className='icon-btn'
+            onClick={() => (controlled ? onClose?.() : setInternalOpen(false))}
+          >
+            <Icon iconName='close' iconSize='lg' ariaLabel='닫기' />
+          </button>
         </div>
-        <div></div>
         {SORTED_ALERTS.length === 0 ? (
           <div className='flex flex-1 items-center justify-center'>
             <p className='font-medium'>알림이 없습니다.</p>
           </div>
         ) : (
-          <div className='flex w-full flex-col items-center gap-4 overflow-y-auto md:max-h-[368px] md:flex-1'>
+          <div className='scroll-bar flex h-full w-full flex-col items-center gap-4 max-h-[calc(100%-48px)] md:max-h-[calc(460px-96px)]'>
             {SORTED_ALERTS.map(alert => (
               <NotificationMessage key={alert.id} alert={alert} onRead={onRead} />
             ))}

src/context/userApplicationsProvider.tsx

@@ -1,4 +1,4 @@
-// context/UserApplicationsProvider.tsx
+
 import { getAllUserApplications, postApplication, putApplication } from '@/api/applications';
 import useAuth from '@/hooks/useAuth';
 import { ApiResponse } from '@/types/api';