알림 컴포넌트 구현

src/app/globals.css

@@ -31,6 +31,7 @@
     --emerald4: rgb(101, 206, 156);
     --emerald3: rgb(138, 227, 185);
     --emerald1: rgb(216, 248, 230);
+    --emerald05: rgb(239, 252, 245);
     --red9: rgb(118, 39, 32);
     --red7: rgb(172, 49, 35);
     --red6: rgb(205, 62, 46);
@@ -63,6 +64,7 @@
     --emerald4: rgb(62, 146, 107);
     --emerald3: rgb(48, 117, 88);
     --emerald1: rgb(30, 76, 60);
+    --emerald05: rgb(20, 42, 46);
     --red9: rgb(250, 227, 226);
     --red7: rgb(242, 170, 166);
     --red6: rgb(234, 123, 116);

src/components/common/Notification/Notification.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { cls } from '@/utils'
+import { XMarkIcon } from '@heroicons/react/24/solid'
+import Button from '../Button/Button'
+import { NOTIFICATION_MSG } from './constants'
+
+export interface NotificationProps {
+  type: 'follow' | 'comment' | 'space'
+  userName: string
+  spaceName?: string
+  isRead?: boolean
+  isAccept?: boolean
+  onAccept?: (e?: React.MouseEvent<HTMLButtonElement>) => void
+  onClose?: (e?: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+const Notification = ({
+  type,
+  userName,
+  spaceName,
+  isRead = false,
+  isAccept = false,
+  onAccept,
+  onClose,
+}: NotificationProps) => {
+  return (
+    <div
+      className={cls(
+        'rounded-md border border-slate3 p-3',
+        isRead ? 'bg-bgColor' : 'bg-emerald05',
+      )}>
+      <div className="flex w-full items-start justify-between text-sm font-medium text-gray9">
+        {type === 'follow' && (
+          <div>
+            <span className="font-bold">{userName}</span>
+            {NOTIFICATION_MSG.FOLLOW}
+          </div>
+        )}
+        {type === 'comment' && (
+          <div>
+            <span className="font-bold">{userName}</span>
+            {NOTIFICATION_MSG.USER}
+            <span className="font-bold">{spaceName}</span>
+            {NOTIFICATION_MSG.COMMENT}
+          </div>
+        )}
+        {type === 'space' && (
+          <div className="flex w-full flex-col gap-6">
+            <div className="flex items-start justify-between">
+              <div>
+                <span className="font-bold">{userName}</span>
+                {NOTIFICATION_MSG.USER}
+                <span className="font-bold">{spaceName}</span>
+                {NOTIFICATION_MSG.SPACE}
+              </div>
+              <Button onClick={onClose}>
+                <XMarkIcon className="h-5 w-5 p-0.5 text-slate6" />
+              </Button>
+            </div>
+            <div className="flex justify-end">
+              {isAccept ? (
+                <div className="text-sm font-semibold text-slate6">
+                  {NOTIFICATION_MSG.APPROVE}
+                </div>
+              ) : (
+                <Button
+                  className="button button-emerald px-2.5 py-1.5"
+                  onClick={onAccept}>
+                  {NOTIFICATION_MSG.APPROVE_BUTTON}
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+        {type !== 'space' && 'comment' && (
+          <Button onClick={onClose}>
+            <XMarkIcon className="h-5 w-5 p-0.5 text-slate6" />
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Notification

src/components/common/Notification/constants/index.ts

@@ -0,0 +1,8 @@
+export const NOTIFICATION_MSG = {
+  APPROVE_BUTTON: '수락',
+  APPROVE: '수락 완료',
+  USER: ' 님이 ',
+  FOLLOW: ' 님이 팔로우했습니다.',
+  COMMENT: ' 스페이스에 댓글을 남겼습니다.',
+  SPACE: ' 스페이스에 초대했습니다.',
+}

src/components/index.ts

@@ -16,3 +16,4 @@ export { default as Dropdown } from './common/Dropdown/Dropdown'
 export { default as SpaceMemberList } from './common/SpaceMemberList/SpaceMemberList'
 export { default as Sidebar } from './common/Sidebar/Sidebar'
 export { default as Comment } from './Comment/Comment'
+export { default as Notification } from './common/Notification/Notification'

tailwind.config.ts

@@ -33,6 +33,7 @@ const config: Config = {
         emerald4: 'var(--emerald4)',
         emerald3: 'var(--emerald3)',
         emerald1: 'var(--emerald1)',
+        emerald05: 'var(--emerald05)',
         red9: 'var(--red9)',
         red7: 'var(--red7)',
         red6: 'var(--red6)',