From 56cba86a1d6403d0a13aa2b0b0d26cebec8c088f Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Tue, 14 Sep 2021 17:26:47 +0700
Subject: [PATCH] feat: Notifications title

---
 pages/notifications.tsx                        |  3 ++-
 .../NotificationHeading.module.scss            |  9 +++++++++
 .../NotificationHeading.tsx                    | 18 ++++++++++++++++++
 .../NotificationPage.module.scss               |  6 ++++++
 .../NotificationPage/NotificationPage.tsx      |  6 +++---
 src/components/modules/Notification/index.tsx  |  3 ++-
 6 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss
 create mode 100644 src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx
 create mode 100644 src/components/modules/Notification/NotificationPage/NotificationPage.module.scss

diff --git a/pages/notifications.tsx b/pages/notifications.tsx
index 235a60005..f124519f9 100644
--- a/pages/notifications.tsx
+++ b/pages/notifications.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { Layout } from 'src/components/common';
-import { NotificationBreadcrumb, NotificationPage } from 'src/components/modules/Notification';
+import { NotificationBreadcrumb, NotificationHeading, NotificationPage } from 'src/components/modules/Notification';
 
 const Notification = () => {
     return (
         <>
             <NotificationBreadcrumb />
+            <NotificationHeading />
             <NotificationPage />
         </>
     )
diff --git a/src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss b/src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss
new file mode 100644
index 000000000..2833c5f10
--- /dev/null
+++ b/src/components/modules/Notification/NotificationHeading/NotificationHeading.module.scss
@@ -0,0 +1,9 @@
+@import "../../../../styles/utilities";
+
+.headingWrapper {
+    @apply flex spacing-horizontal-left pb-16;
+    .heading{
+        max-width: 121.6rem;
+        flex-grow: 1;
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx b/src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx
new file mode 100644
index 000000000..573bac2a9
--- /dev/null
+++ b/src/components/modules/Notification/NotificationHeading/NotificationHeading.tsx
@@ -0,0 +1,18 @@
+import { HeadingCommon } from "src/components/common"
+import s from './NotificationHeading.module.scss'
+
+interface NotificationHeadingProps {
+    children?: React.ReactNode,
+    heading?: string,
+}
+
+const NotificationHeading = ({heading = "NOTIFICATIONS"}: NotificationHeadingProps) => {
+    return (
+        <section className={s.headingWrapper}>
+            <div className={s.heading}>
+                <HeadingCommon>{heading}</HeadingCommon>
+            </div>
+        </section>
+    )
+}
+export default NotificationHeading
\ No newline at end of file
diff --git a/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss b/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss
new file mode 100644
index 000000000..1a214dccc
--- /dev/null
+++ b/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss
@@ -0,0 +1,6 @@
+.notificationPage {
+    padding-bottom: 5.4rem;
+    @screen md {
+        padding-bottom: 12.8rem;
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx
index c5c274ee0..954b7727c 100644
--- a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx
+++ b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import NotificationEmptyPage from '../NotificationEmptyPage/NotificationEmptyPage'
 import NotificationItem, { NotificationItemProps } from '../NotificationItem/NotificationItem'
-
+import s from './NotificationPage.module.scss'
 
 interface NotificationPageProps {
     isEmpty?: boolean,
@@ -34,7 +34,7 @@ const NOTIFICATION_DATA = [
 
 const NotificationPage = ({ isEmpty=false, data = NOTIFICATION_DATA }: NotificationPageProps) => {
     return (
-        <>
+        <div className={s.notificationPage}>
         {
         isEmpty ? 
         <NotificationEmptyPage /> 
@@ -49,7 +49,7 @@ const NotificationPage = ({ isEmpty=false, data = NOTIFICATION_DATA }: Notificat
             }
         </>
         }
-        </>
+        </div>
     )
 }
 
diff --git a/src/components/modules/Notification/index.tsx b/src/components/modules/Notification/index.tsx
index dbc87c8cc..413535595 100644
--- a/src/components/modules/Notification/index.tsx
+++ b/src/components/modules/Notification/index.tsx
@@ -1,4 +1,5 @@
 export { default as NotificationPage } from './NotificationPage/NotificationPage'
 export { default as NotificationEmptyPage } from './NotificationEmptyPage/NotificationEmptyPage'
 export { default as NotificationItem } from './NotificationItem/NotificationItem'
-export { default as NotificationBreadcrumb } from './NotificationBreadcrum/NotificationBreadcrumb'
\ No newline at end of file
+export { default as NotificationBreadcrumb } from './NotificationBreadcrum/NotificationBreadcrumb'
+export { default as NotificationHeading } from './NotificationHeading/NotificationHeading'
\ No newline at end of file