From d6f0ef298de9f5b3f39f32c33b5ff04d34d1a59d Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Tue, 14 Sep 2021 17:15:40 +0700
Subject: [PATCH] styles: add spacing

---
 pages/notification.tsx                        | 13 ---------
 pages/notifications.tsx                       | 16 +++++++++++
 .../NotificationBreadcrumb.module.scss        |  7 +++++
 .../NotificationBreadcrumb.tsx                | 16 +++++++++++
 .../NotificationEmptyPage.module.scss         |  4 +--
 .../NotificationItem.module.scss              |  7 ++---
 .../NotificationItem/NotificationItem.tsx     | 28 ++++++++++---------
 .../NotificationPage/NotificationPage.tsx     |  6 +---
 src/components/modules/Notification/index.tsx |  4 ++-
 9 files changed, 61 insertions(+), 40 deletions(-)
 delete mode 100644 pages/notification.tsx
 create mode 100644 pages/notifications.tsx
 create mode 100644 src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss
 create mode 100644 src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx

diff --git a/pages/notification.tsx b/pages/notification.tsx
deleted file mode 100644
index df76e6c58..000000000
--- a/pages/notification.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { Layout } from 'src/components/common';
-import { NotificationPage } from 'src/components/modules/Notification';
-
-const Notification = () => {
-    return (
-        <NotificationPage />
-    )
-}
-
-Notification.Layout = Layout
-
-export default Notification;
\ No newline at end of file
diff --git a/pages/notifications.tsx b/pages/notifications.tsx
new file mode 100644
index 000000000..235a60005
--- /dev/null
+++ b/pages/notifications.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Layout } from 'src/components/common';
+import { NotificationBreadcrumb, NotificationPage } from 'src/components/modules/Notification';
+
+const Notification = () => {
+    return (
+        <>
+            <NotificationBreadcrumb />
+            <NotificationPage />
+        </>
+    )
+}
+
+Notification.Layout = Layout
+
+export default Notification;
\ No newline at end of file
diff --git a/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss
new file mode 100644
index 000000000..d347ad872
--- /dev/null
+++ b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.module.scss
@@ -0,0 +1,7 @@
+@import "../../../../styles/utilities";
+.breadCrumbWrapper {
+    @apply py-12 spacing-horizontal;
+    @screen lg {
+        padding-left: 3.2rem;
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx
new file mode 100644
index 000000000..5f713e2db
--- /dev/null
+++ b/src/components/modules/Notification/NotificationBreadcrum/NotificationBreadcrumb.tsx
@@ -0,0 +1,16 @@
+import { BreadcrumbCommon } from "src/components/common"
+import s from './NotificationBreadcrumb.module.scss'
+
+const NOTIFICATION_DATA = [
+    {link: "/notifications", name: "Notifications"},
+];
+
+const NotificationBreadcrumb = () => {
+    return (
+        <section className={s.breadCrumbWrapper}>
+            <BreadcrumbCommon crumbs={NOTIFICATION_DATA} showHomePage={true}/>
+        </section>
+    )
+}
+
+export default NotificationBreadcrumb
\ No newline at end of file
diff --git a/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss
index 457b22e77..21c4e9cc3 100644
--- a/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss
+++ b/src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss
@@ -6,9 +6,7 @@
         padding-bottom: 2.6rem;
     }
     .emptyContent {
-        font-size: 2.4rem;
-        line-height: 3.2rem;
-        letter-spacing: -0.01em;
+        @apply sub-headline;
         align-content: center;
         color: var(--disabled);
     }
diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss
index 3ffaf1499..ac064e19f 100644
--- a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss
+++ b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss
@@ -1,9 +1,8 @@
 @import '../../../../styles/utilities';
 
 .notificationItem {
-    @apply flex flex-row;
+    @apply flex flex-row spacing-horizontal;
     padding-top: 1.2rem;
-    padding-left: 1.6rem;
     &:hover{
         cursor: pointer;
     }
@@ -16,10 +15,8 @@
             color: var(--text-active);
         }
         .date {
+            @apply caption;
             color: #828282;
-            font-size: 1.2rem;
-            line-height: 2rem;
-            letter-spacing: 0.01em;
         }
     }
     &.isChecked {
diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.tsx b/src/components/modules/Notification/NotificationItem/NotificationItem.tsx
index 83de0ff8f..402575daf 100644
--- a/src/components/modules/Notification/NotificationItem/NotificationItem.tsx
+++ b/src/components/modules/Notification/NotificationItem/NotificationItem.tsx
@@ -3,17 +3,17 @@ import s from '../NotificationItem/NotificationItem.module.scss'
 import ClassNames from 'classnames'
 import { IconBill } from 'src/components/icons'
 import Link from 'next/link'
+import {ROUTE , QUERY_KEY, ACCOUNT_TAB } from 'src/utils/constanst.utils'
 
 export interface NotificationItemProps {
     ID?: string,
     title?: string,
     content?: string,
     date?: string,
-    link: string,
     checked?: boolean,
 }
 
-const NotificationItem = ({ ID, title, content, date, link, checked}: NotificationItemProps) => {
+const NotificationItem = ({ ID, title, content, date, checked}: NotificationItemProps) => {
     const [isChecked, setChecked] = useState(checked)
     const Check = () => {
         setChecked(true)
@@ -28,18 +28,20 @@ const NotificationItem = ({ ID, title, content, date, link, checked}: Notificati
             <div className={s.icon}>
                 <IconBill />
             </div>
-            <Link href={link}>
-                <div className={s.contentWrapper}>
-                    <div className={s.title}>
-                        {title}
+            <Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`}>
+                <a>
+                    <div className={s.contentWrapper}>
+                        <div className={s.title}>
+                            {title}
+                        </div>
+                        <div className={s.content}>
+                            {content}
+                        </div>
+                        <div className={s.date}>
+                            {date}
+                        </div>
                     </div>
-                    <div className={s.content}>
-                        {content}
-                    </div>
-                    <div className={s.date}>
-                        {date}
-                    </div>
-                </div>
+                </a>
             </Link>
 
         </section>
diff --git a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx
index 8abd39d9f..c5c274ee0 100644
--- a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx
+++ b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import NotificationEmptyPage from '../NotificationEmptyPage/NotificationEmptyPage'
 import NotificationItem, { NotificationItemProps } from '../NotificationItem/NotificationItem'
-import {ROUTE , QUERY_KEY, ACCOUNT_TAB } from 'src/utils/constanst.utils'
 
 
 interface NotificationPageProps {
@@ -14,7 +13,6 @@ const NOTIFICATION_DATA = [
         title: "Your order ID33455",
         content: "The order has been deliveried successfully!",
         date: "2 days ago",
-        link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`,
         checked: false,
     },
     {
@@ -22,7 +20,6 @@ const NOTIFICATION_DATA = [
         title: "Your order ID33456",
         content: "The order has been deliveried successfully!",
         date: "2 days ago",
-        link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`,
         checked: false,
     },
     {
@@ -30,7 +27,6 @@ const NOTIFICATION_DATA = [
         title: "Your order ID33457",
         content: "The order has been deliveried successfully!",
         date: "2 days ago",
-        link: `${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`,
         checked: true,
     }
 ]
@@ -47,7 +43,7 @@ const NotificationPage = ({ isEmpty=false, data = NOTIFICATION_DATA }: Notificat
             {
                 data.map(item => {
                     return (
-                        <NotificationItem key={`${item.ID}-${item.title}`} title={item.title} content={item.content} date={item.date} link={item.link} checked={item.checked}/>
+                        <NotificationItem key={`${item.ID}-${item.title}`} title={item.title} content={item.content} date={item.date} checked={item.checked}/>
                     )
                 })
             }
diff --git a/src/components/modules/Notification/index.tsx b/src/components/modules/Notification/index.tsx
index 64413501a..dbc87c8cc 100644
--- a/src/components/modules/Notification/index.tsx
+++ b/src/components/modules/Notification/index.tsx
@@ -1,2 +1,4 @@
 export { default as NotificationPage } from './NotificationPage/NotificationPage'
-export { default as NotificationEmptyPage } from './NotificationEmptyPage/NotificationEmptyPage'
\ No newline at end of file
+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