styles: add spacing

pages/notification.tsx

@@ -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;

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;

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;
+    }
+}

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

src/components/modules/Notification/NotificationEmptyPage/NotificationEmptyPage.module.scss

@@ -6,9 +6,7 @@
         padding-bottom: 2.6rem;
     }
     .emptyContent {
-        font-size: 2.4rem;
+        @apply sub-headline;
-        line-height: 3.2rem;
-        letter-spacing: -0.01em;
         align-content: center;
         color: var(--disabled);
     }

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 {

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}>
+            <Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`}>
-                <div className={s.contentWrapper}>
+                <a>
-                    <div className={s.title}>
+                    <div className={s.contentWrapper}>
-                        {title}
+                        <div className={s.title}>
+                            {title}
+                        </div>
+                        <div className={s.content}>
+                            {content}
+                        </div>
+                        <div className={s.date}>
+                            {date}
+                        </div>
                     </div>
-                    <div className={s.content}>
+                </a>
-                        {content}
-                    </div>
-                    <div className={s.date}>
-                        {date}
-                    </div>
-                </div>
             </Link>
 
         </section>

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}/>
                     )
                 })
             }

src/components/modules/Notification/index.tsx

@@ -1,2 +1,4 @@
 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'