feat: 알림창 프레임 (#73)

* 알림

* fix

src/app/(sidebar)/(my-info)/page.tsx

@@ -17,7 +17,6 @@ import { Onboarding } from './containers/Onboarding/Onboarding';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useGetOnboardStatus } from './apis/useGetOnboadStatus';
 
-
 const getType = (typeParam: string | null) => {
   if (typeParam && INFO_TYPES.includes(typeParam as InfoType)) {
     return typeParam as InfoType;
@@ -33,23 +32,17 @@ export default function MyInfo() {
   const [showHeader, setShowHeader] = useState(false);
   const headerRef = useRef<HTMLDivElement>(null);
 
-
-  const { isOnboardComplete } = useGetOnboardStatus().data;
-
-
   const typeParam = searchParams.get('type');
   const currentCardType = getType(typeParam);
 
+  const { isOnboardComplete } = useGetOnboardStatus().data;
   const { data: cardCount } = useGetCardTypeCount();
 
   const handleTypeChange = (type: InfoType) => {
     router.replace(`?type=${type}`);
   };
-
   useScroll(headerRef, (y) => setShowHeader(y > 192));
 
-  const params = useSearchParams();
-
   return (
     <div ref={headerRef} className="max-h-[100vh] w-full overflow-auto">
       <div className="mx-auto max-w-[1700px] py-[64px] px-[80px] bg-neutral-1">

src/app/(sidebar)/layout.tsx

@@ -2,16 +2,21 @@ import { Sidebar } from '@/container/Sidebar/Sidebar';
 import { PropsWithChildren } from 'react';
 import { CardWindowLayout } from '@/components/CardWindow/context';
 import AuthRedirect from '../AuthRedirect';
+import { NotificationWindow } from '@/components/Notification/NotificationWindow';
+import { NotificatinProvider } from '@/components/Notification/context';
 
 export default function SidebarLayout({ children }: PropsWithChildren) {
   return (
     <div className="flex">
-      <Sidebar />
-      <div className="flex-grow relative">
-        <AuthRedirect>
-          <CardWindowLayout>{children}</CardWindowLayout>
-        </AuthRedirect>
-      </div>
+      <NotificatinProvider>
+        <Sidebar />
+        <div className="flex-grow relative">
+          <AuthRedirect>
+            <CardWindowLayout>{children}</CardWindowLayout>
+            <NotificationWindow />
+          </AuthRedirect>
+        </div>
+      </NotificatinProvider>
     </div>
   );
 }

src/components/Notification/NotificationWindow.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { Icon } from '@/system/components';
+import { TouchButton } from '../TouchButton';
+import { color } from '@/system/token/color';
+import { useNotificationContext } from './context';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Spacing } from '@/system/utils/Spacing';
+
+export function NotificationWindow() {
+  const { isOpen, close } = useNotificationContext();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0, x: -100 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -30 }}
+          className="z-[10000] absolute top-16 left-16 bottom-16 w-368 bg-neutral-90 rounded-20 p-20 flex flex-col">
+          <div className="flex justify-between">
+            <h1 className="text-neutral-1 text-heading2 font-semibold">알림</h1>
+            <TouchButton onClick={close}>
+              <Icon name="x" color={color.neutral40} />
+            </TouchButton>
+          </div>
+          <div className="flex-1 flex items-center justify-center">
+            <div className="flex flex-col gap-24">
+              <Icon name="IllustAlarm" />
+              <div className="flex flex-col items-center gap-4">
+                <h2 className="text-neutral-10 text-body1 font-normal">지금은 알림이 없어요</h2>
+                <p className="text-caption2 font-regular text-neutral-35">알림은 30일 뒤에 자동으로 사라져요</p>
+              </div>
+            </div>
+          </div>
+          <Spacing size={100} />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

src/components/Notification/context.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { generateContext } from '@/lib';
+import { useState } from 'react';
+
+interface NotificationContext {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+const [NotificationWrapper, useNotificationContext] = generateContext<NotificationContext>({
+  name: 'Notification',
+});
+
+function NotificatinProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = () => setIsOpen(true);
+
+  const close = () => setIsOpen(false);
+
+  const toggle = () => setIsOpen((prev) => !prev);
+
+  return (
+    <NotificationWrapper isOpen={isOpen} open={open} close={close} toggle={toggle}>
+      {children}
+    </NotificationWrapper>
+  );
+}
+
+export { NotificatinProvider, useNotificationContext };

src/container/Sidebar/Sidebar.tsx

@@ -17,6 +17,7 @@ import { motion } from 'framer-motion';
 import { usePathname, useRouter } from 'next/navigation';
 import { PropsWithChildren, useState } from 'react';
 import { Collapsible } from './Collapsible/Collapsible';
+import { useNotificationContext } from '@/components/Notification/context';
 
 export function Sidebar() {
   const router = useRouter();
@@ -25,6 +26,8 @@ export function Sidebar() {
   const [myInfoCollapsed, setMyInfoCollapsed] = useState(true);
   const [myJDCollapsed, setMyJDCollapsed] = useState(true);
 
+  const { isOpen: isNotificationOpen, toggle: toggleNotification } = useNotificationContext();
+
   const { data: typeCounts } = useGetCardTypeCount();
   const { data: recruiteTitles } = useGetRecruitTitles();
 
@@ -62,7 +65,7 @@ export function Sidebar() {
           aria-label={expanded ? '사이드바 축소' : '사이드바 확장'}
           className={cn(
             'absolute top-[50%] translate-y-[-50%] p-6 rounded-6',
-            expanded ? 'right-0 hover:bg-neutral-80' : 'right-[-68px] border hover:bg-neutral-3',
+            expanded ? 'right-0 hover:bg-neutral-80' : 'right-[-68px] bg-neutral-1 border hover:bg-neutral-3',
           )}
           onClick={() => setExpanded(!expanded)}>
           <Icon name="division" color={expanded ? '#5A5C63' : '#AEB0B6'} />
@@ -81,7 +84,13 @@ export function Sidebar() {
             </div>
           </Dialog.Content>
         </Dialog>
-        <SidebarButton iconName="bell" selected={false} expanded={expanded} expandedText="알림" />
+        <SidebarButton
+          iconName="bell"
+          selected={isNotificationOpen}
+          expanded={expanded}
+          expandedText="알림"
+          onClick={toggleNotification}
+        />
         {/* <SidebarButton iconName="memo" selected={false} expanded={expanded} expandedText="메모 모아보기" /> */}
         <div className="w-full px-[16px] h-[1px] bg-[#37383C]" />
         <Collapsible collapsed={expanded ? myInfoCollapsed : true} onCollapsedChange={setMyInfoCollapsed}>

src/system/components/Icon/Icon.tsx

@@ -49,6 +49,7 @@ import { Up } from './SVG/Up';
 import Warning from './SVG/Warning';
 import { WorkFill } from './SVG/WorkFill';
 import { X } from './SVG/X';
+import { IllustAlarm } from './SVG/IllustAlarm';
 
 const iconMap = {
   bell: Bell,
@@ -100,6 +101,7 @@ const iconMap = {
   profileFill: ProfileFill,
   folder: Folder,
   announcementFolder: AnnouncementFolder,
+  IllustAlarm: IllustAlarm,
   warning: Warning,
 } as const;
 

src/system/components/Icon/SVG/IllustAlarm.tsx

@@ -0,0 +1,31 @@
+export function IllustAlarm() {
+  return (
+    <svg width="170" height="170" viewBox="0 0 170 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M71.2695 29.2046L72.6879 41.0839L82.6168 42.8569L83.326 27.6089L76.9432 25.1267L71.2695 29.2046Z"
+        fill="#5A5C63"
+      />
+      <path
+        d="M63.7634 128.543L72.5976 117.45L84.7537 113.73L95.5535 126.38L94.251 139.691L75.3398 146.097L65.4554 139.226L63.7634 128.543Z"
+        fill="#5A5C63"
+      />
+      <path
+        d="M42.3687 73.7064L45.9148 104.911L39 116.968L41.3049 123.351L79.2475 124.237L117.722 120.514V112.535L109.566 103.493L111.871 73.7064L106.552 54.3805L90.2402 39.8418H65.2406L48.5743 54.3805L42.3687 73.7064Z"
+        fill="#5A5C63"
+      />
+      <path
+        d="M100.699 62.7135L93.4297 55.4441L97.8622 64.8411L99.6352 74.9473L105.486 74.4154L100.699 62.7135Z"
+        fill="#989BA2"
+      />
+      <path
+        d="M72.8394 116.991H39.0664L41.0928 124.421L77.5677 125.096L118.095 121.043V112.262L95.8051 114.964L72.8394 116.991Z"
+        fill="#46474C"
+      />
+      <path
+        d="M105.569 24.9761L119.692 10.6904L124.011 20.3306L113.573 26.7086L118.933 33.974L110.102 40.9215L108.021 38.6438L112.037 32.7859L105.569 24.9761Z"
+        fill="#25A778"
+      />
+      <path d="M117.168 51.6198L135.247 49.9999L132.646 40.4662L116.087 46.7327L117.168 51.6198Z" fill="#186D50" />
+    </svg>
+  );
+}