From d355c35a603d52cf30e49212d4e4ffb8ad259575 Mon Sep 17 00:00:00 2001 From: "Jungkyun Woo(Woody)" <73513965+woo-jk@users.noreply.github.com> Date: Sat, 31 Aug 2024 05:39:42 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=95=8C=EB=A6=BC=EC=B0=BD=20=ED=94=84?= =?UTF-8?q?=EB=A0=88=EC=9E=84=20(#73)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 알림 * fix --- .../(my-info)/apis/useGetOnboadaStatus.ts | 1 - src/app/(sidebar)/(my-info)/page.tsx | 9 +--- src/app/(sidebar)/layout.tsx | 17 +++++--- .../Notification/NotificationWindow.tsx | 41 +++++++++++++++++++ src/components/Notification/context.tsx | 33 +++++++++++++++ src/container/Sidebar/Sidebar.tsx | 13 +++++- src/system/components/Icon/Icon.tsx | 2 + .../components/Icon/SVG/IllustAlarm.tsx | 31 ++++++++++++++ 8 files changed, 130 insertions(+), 17 deletions(-) delete mode 100644 src/app/(sidebar)/(my-info)/apis/useGetOnboadaStatus.ts create mode 100644 src/components/Notification/NotificationWindow.tsx create mode 100644 src/components/Notification/context.tsx create mode 100644 src/system/components/Icon/SVG/IllustAlarm.tsx diff --git a/src/app/(sidebar)/(my-info)/apis/useGetOnboadaStatus.ts b/src/app/(sidebar)/(my-info)/apis/useGetOnboadaStatus.ts deleted file mode 100644 index 4bd4d9f..0000000 --- a/src/app/(sidebar)/(my-info)/apis/useGetOnboadaStatus.ts +++ /dev/null @@ -1 +0,0 @@ -const getOnboardStatus = () => {}; diff --git a/src/app/(sidebar)/(my-info)/page.tsx b/src/app/(sidebar)/(my-info)/page.tsx index f3c1fa3..dc776a7 100644 --- a/src/app/(sidebar)/(my-info)/page.tsx +++ b/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(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 (
diff --git a/src/app/(sidebar)/layout.tsx b/src/app/(sidebar)/layout.tsx index e0b3f48..cb4a2a7 100644 --- a/src/app/(sidebar)/layout.tsx +++ b/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 (
- -
- - {children} - -
+ + +
+ + {children} + + +
+
); } diff --git a/src/components/Notification/NotificationWindow.tsx b/src/components/Notification/NotificationWindow.tsx new file mode 100644 index 0000000..32f8df6 --- /dev/null +++ b/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 ( + + {isOpen && ( + +
+

알림

+ + + +
+
+
+ +
+

지금은 알림이 없어요

+

알림은 30일 뒤에 자동으로 사라져요

+
+
+
+ + + )} + + ); +} diff --git a/src/components/Notification/context.tsx b/src/components/Notification/context.tsx new file mode 100644 index 0000000..76fcd9a --- /dev/null +++ b/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({ + 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 ( + + {children} + + ); +} + +export { NotificatinProvider, useNotificationContext }; diff --git a/src/container/Sidebar/Sidebar.tsx b/src/container/Sidebar/Sidebar.tsx index efc172b..7424dc1 100644 --- a/src/container/Sidebar/Sidebar.tsx +++ b/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)}> @@ -81,7 +84,13 @@ export function Sidebar() {
- + {/* */}
diff --git a/src/system/components/Icon/Icon.tsx b/src/system/components/Icon/Icon.tsx index ad52fd5..1c59118 100644 --- a/src/system/components/Icon/Icon.tsx +++ b/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; diff --git a/src/system/components/Icon/SVG/IllustAlarm.tsx b/src/system/components/Icon/SVG/IllustAlarm.tsx new file mode 100644 index 0000000..cf8037b --- /dev/null +++ b/src/system/components/Icon/SVG/IllustAlarm.tsx @@ -0,0 +1,31 @@ +export function IllustAlarm() { + return ( + + + + + + + + + + ); +}