diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
new file mode 100644
index 000000000..6741f386c
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.module.scss
@@ -0,0 +1,6 @@
+@import '../../../styles/utilities';
+
+.breadcrumbCommon {
+ @apply spacing-horizontal-left;
+ color: var(--text-base);
+}
\ No newline at end of file
diff --git a/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
new file mode 100644
index 000000000..2dca6b714
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/BreadcrumbCommon.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import s from './BreadcrumbCommon.module.scss'
+
+import BreadcrumbItem from './components/BreadcrumbItem/BreadcrumbItem'
+import BreadcrumbSeparator from './components/BreadcrumbSeparator/BreadcrumbSeparator'
+
+interface BreadcrumbCommonProps {
+ crumbs: { link:string, name:string }[];
+ showHomePage?: boolean;
+}
+
+const BreadcrumbCommon = ({ crumbs, showHomePage=false } : BreadcrumbCommonProps) => {
+ if (showHomePage) {
+ crumbs.unshift({link: "/", name: "Home"});
+ }
+ return (
+
+ {
+ crumbs.map((crumb, i) => {
+ if (i === 0) {
+ return (
+
+ )
+ }
+ if (i === crumbs.length-1) {
+ return (
+
+
+
+ )
+ }
+ return (
+
+
+
+ )
+ })
+ }
+
+ )
+}
+
+export default BreadcrumbCommon
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
new file mode 100644
index 000000000..f807de555
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbItem/BreadcrumbItem.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import Link from 'next/link'
+
+interface BreadcrumbItemProps {
+ text: string;
+ href: string;
+}
+
+const BreadcrumbItem = ({ text, href }: BreadcrumbItemProps) => {
+ return (
+
+ {text}
+
+ )
+}
+
+export default BreadcrumbItem
diff --git a/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
new file mode 100644
index 000000000..f84bc3a51
--- /dev/null
+++ b/src/components/common/BreadcrumbCommon/components/BreadcrumbSeparator/BreadcrumbSeparator.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface BreadcrumbSeparatorProps {
+ children?: React.ReactNode;
+}
+
+const BreadcrumbSeparator = ({ children }: BreadcrumbSeparatorProps) => {
+ return (
+
+ / {children}
+
+ )
+}
+
+export default BreadcrumbSeparator
diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss
new file mode 100644
index 000000000..9e5fbc1df
--- /dev/null
+++ b/src/components/common/TabCommon/TabCommon.module.scss
@@ -0,0 +1,15 @@
+@import '../../../styles/utilities';
+
+.tabCommonOutSide {
+ @apply spacing-horizontal;
+
+ .tabCommon {
+ @apply flex;
+ position: relative;
+ border-bottom: 2px solid #FBFBFB;
+ padding-top: 1.6rem;
+ padding-bottom: 1.6rem;
+ width: 100%;
+ }
+}
+
diff --git a/src/components/common/TabCommon/TabCommon.tsx b/src/components/common/TabCommon/TabCommon.tsx
new file mode 100644
index 000000000..67fe107a6
--- /dev/null
+++ b/src/components/common/TabCommon/TabCommon.tsx
@@ -0,0 +1,75 @@
+import React, { useState, RefObject, useEffect, useRef } from "react"
+import s from './TabCommon.module.scss'
+
+import TabItem from './TabItem/TabItem'
+
+interface TabCommonProps {
+ changeTab: (target:string) => void;
+}
+
+const TabCommon = ({ changeTab } : TabCommonProps) => {
+ const active = "active", unActive = "";
+ const [item1Active, setItem1Active] = useState(active);
+ const [item2Active, setItem2Active] = useState(unActive);
+ const [item3Active, setItem3Active] = useState(unActive);
+
+ const item1 = useRef(null);
+ const item2 = useRef(null);
+ const item3 = useRef(null);
+ const slider = useRef(null);
+
+ function slide(ref: RefObject) {
+ const width = ref.current.offsetWidth;
+ const left = ref.current.offsetLeft;
+
+ slider.current.style.width = (width-48).toString()+"px";
+ slider.current.style.left = left.toString()+"px";
+ }
+
+ function toggleItem1():void {
+ setItem1Active(active)
+ changeTab("waiting")
+
+ setItem2Active(unActive)
+ setItem3Active(unActive)
+ slide(item1)
+ }
+
+ function toggleItem2():void {
+ setItem2Active(active)
+ changeTab("delivering")
+
+ setItem1Active(unActive)
+ setItem3Active(unActive)
+ slide(item2)
+ }
+ function toggleItem3():void {
+ setItem3Active(active)
+ changeTab("delivered")
+
+ setItem1Active(unActive)
+ setItem2Active(unActive)
+ slide(item3)
+ }
+
+ useEffect(() => {
+ slide(item1);
+ }, [])
+
+ return (
+
+ -
+ Wait for Comfirmation
+
+ -
+ Delivering
+
+ -
+ Delivered
+
+
+
+ )
+}
+
+export default TabCommon;
\ No newline at end of file
diff --git a/src/components/common/TabCommon/TabItem/TabItem.module.scss b/src/components/common/TabCommon/TabItem/TabItem.module.scss
new file mode 100644
index 000000000..efb10f1f4
--- /dev/null
+++ b/src/components/common/TabCommon/TabItem/TabItem.module.scss
@@ -0,0 +1,16 @@
+@import '../../../../styles/utilities';
+
+.tabItem {
+ margin-right: 4.8rem;
+ padding-top: 1.6rem;
+ padding-bottom: 1.6rem;
+
+ &.active {
+ @apply font-bold;
+ border-bottom: 2px solid var(--primary);
+ }
+
+ &:hover {
+ @apply cursor-pointer;
+ }
+}
diff --git a/src/components/common/TabCommon/TabItem/TabItem.tsx b/src/components/common/TabCommon/TabItem/TabItem.tsx
new file mode 100644
index 000000000..62de3c595
--- /dev/null
+++ b/src/components/common/TabCommon/TabItem/TabItem.tsx
@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import React from "react"
+import s from './TabItem.module.scss'
+
+interface TabItemProps {
+ active: string;
+ children: string;
+ onClick: () => void;
+}
+
+const TabItem = ({ active = "", children, onClick } : TabItemProps) => {
+
+ return (
+
+ {children}
+
+ )
+}
+
+export default TabItem;
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
new file mode 100644
index 000000000..22c885238
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
@@ -0,0 +1,5 @@
+@import '../../../../styles/utilities';
+
+.accountNavigation {
+ @apply spacing-horizontal;
+}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
new file mode 100644
index 000000000..15ecd3a31
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx
@@ -0,0 +1,69 @@
+import React, { useState, useRef, RefObject, useEffect } from "react"
+import s from './AccountNavigation.module.scss'
+
+import AccountNavigationItem from './components/AccountNavigationItem'
+
+interface AccountNavigationProps {
+
+}
+
+const AccountNavigation = ({ } : AccountNavigationProps) => {
+ const active = "active", unActive = "";
+
+ const [item1Active, setItem1Active] = useState(unActive);
+ const [item2Active, setItem2Active] = useState(active);
+ const [item3Active, setItem3Active] = useState(unActive);
+
+ const item1 = useRef(null);
+ const item2 = useRef(null);
+ const item3 = useRef(null);
+ const slider = useRef(null);
+
+ function slide(ref: RefObject) {
+ const top = ref.current.offsetTop;
+ slider.current.style.top = top.toString()+"px";
+ }
+
+ function toggleItem1():void {
+ setItem1Active(active)
+
+ setItem2Active(unActive)
+ setItem3Active(unActive)
+ slide(item1);
+ }
+ function toggleItem2():void {
+ setItem2Active(active)
+
+ setItem1Active(unActive)
+ setItem3Active(unActive)
+ slide(item2);
+ }
+ function toggleItem3():void {
+ setItem3Active(active)
+
+ setItem1Active(unActive)
+ setItem2Active(unActive)
+ slide(item3);
+ }
+
+ useEffect(() => {
+ slide(item2);
+ }, [])
+
+ return (
+
+ )
+}
+
+export default AccountNavigation
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
new file mode 100644
index 000000000..01fc0e1cc
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
@@ -0,0 +1,19 @@
+@import '../../../../../styles/utilities';
+
+.accountNavigationItem {
+ @apply bg-gray;
+ width: 28rem;
+ padding: 1.2rem 0 1.2rem 1.6rem;
+ margin-bottom: 1.2rem;
+
+
+ &:hover {
+ @apply cursor-pointer;
+ }
+
+ &.active {
+ background-color: #FBFBFB;
+ border-radius: 0 1.6rem 1.6rem 0;
+ border-left: 2px solid var(--primary);
+ }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
new file mode 100644
index 000000000..8bb18cb58
--- /dev/null
+++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx
@@ -0,0 +1,22 @@
+import React, { RefObject } from "react";
+import classNames from "classnames";
+import s from './AccountNavigationItem.module.scss'
+
+interface AccountNavigationItemProps {
+ children?: string;
+ active?: string;
+ target?: string;
+ onClick: () => void;
+}
+
+const AccountNavigationItem = ({ children, active="", onClick } : AccountNavigationItemProps) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export default AccountNavigationItem
\ No newline at end of file