From 3584e5ecc8ab71681ae0dc3a3df50a92f4a1df38 Mon Sep 17 00:00:00 2001
From: junseublim <junslim11@gmail.com>
Date: Mon, 5 Aug 2024 23:22:18 +0900
Subject: [PATCH 1/3] =?UTF-8?q?#67=20feature:=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20-?=
 =?UTF-8?q?=20=EB=82=B4=20=EB=B3=B4=EB=93=9C,=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84=20=EC=88=98=EC=A0=95,=20=ED=83=88=ED=87=B4=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/boards/page.tsx             | 96 ++++++++++++++++++++++
 src/app/mypage/leave/page.tsx              | 16 ++++
 src/app/mypage/profileEdit/page.tsx        | 16 ++++
 src/components/Header/HeaderBackButton.tsx | 12 +++
 src/components/Header/index.tsx            | 36 ++++++++
 5 files changed, 176 insertions(+)
 create mode 100644 src/app/mypage/boards/page.tsx
 create mode 100644 src/app/mypage/leave/page.tsx
 create mode 100644 src/app/mypage/profileEdit/page.tsx
 create mode 100644 src/components/Header/HeaderBackButton.tsx
 create mode 100644 src/components/Header/index.tsx

diff --git a/src/app/mypage/boards/page.tsx b/src/app/mypage/boards/page.tsx
new file mode 100644
index 0000000..cdbd221
--- /dev/null
+++ b/src/app/mypage/boards/page.tsx
@@ -0,0 +1,96 @@
+import Header from '@/components/Header'
+
+const Page = () => {
+  return (
+    <div className="min-h-dvh">
+      <Header
+        title="내 보드 목록"
+        description="총 4개"
+        leftButton={<Header.BackButton />}
+      />
+
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+    </div>
+  )
+}
+
+export default Page
diff --git a/src/app/mypage/leave/page.tsx b/src/app/mypage/leave/page.tsx
new file mode 100644
index 0000000..c00092d
--- /dev/null
+++ b/src/app/mypage/leave/page.tsx
@@ -0,0 +1,16 @@
+import Header from '@/components/Header'
+
+const Page = () => {
+  return (
+    <div className="min-h-dvh">
+      <Header title="탈퇴하기" leftButton={<Header.BackButton />} />
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+    </div>
+  )
+}
+
+export default Page
diff --git a/src/app/mypage/profileEdit/page.tsx b/src/app/mypage/profileEdit/page.tsx
new file mode 100644
index 0000000..1973579
--- /dev/null
+++ b/src/app/mypage/profileEdit/page.tsx
@@ -0,0 +1,16 @@
+import Header from '@/components/Header'
+
+const Page = () => {
+  return (
+    <div className="min-h-dvh">
+      <Header title="프로필 수정" leftButton={<Header.BackButton />} />
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet
+        atque consectetur culpa, doloribus earum eius eos eum fuga fugiat harum
+        ipsam laborum omnis quae sint tenetur totam ut voluptates.
+      </div>
+    </div>
+  )
+}
+
+export default Page
diff --git a/src/components/Header/HeaderBackButton.tsx b/src/components/Header/HeaderBackButton.tsx
new file mode 100644
index 0000000..7495843
--- /dev/null
+++ b/src/components/Header/HeaderBackButton.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import BackIcon from 'public/icons/arrow_back_ios.svg'
+import { useRouter } from 'next/navigation'
+
+const HeaderBackButton = () => {
+  const router = useRouter()
+
+  return <BackIcon onClick={() => router.back()} />
+}
+
+export default HeaderBackButton
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 0000000..f50daf6
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1,36 @@
+import { ReactNode } from 'react'
+import HeaderBackButton from '@/components/Header/HeaderBackButton'
+
+interface HeaderProps {
+  title: string
+  description?: string
+  leftButton?: ReactNode
+  rightButton?: ReactNode
+}
+
+const Header = ({
+  title,
+  description = '',
+  leftButton = <div />,
+  rightButton = <div />,
+}: HeaderProps) => {
+  return (
+    <>
+      <header className="fixed flex h-16 w-full max-w-md justify-between bg-gray-0 p-5 shadow-[0_1px_2px_0_rgba(0,0,0,0.10)]">
+        {leftButton}
+        <div className="flex flex-col items-center">
+          <div className="text-md font-semiBold leading-6">{title}</div>
+          <div className="mt-1 text-xs font-regular leading-4 text-gray-700">
+            {description}
+          </div>
+        </div>
+        {rightButton}
+      </header>
+      <div className="block h-16 w-full" />
+    </>
+  )
+}
+
+Header.BackButton = HeaderBackButton
+
+export default Header

From dfb933d35d0cb5add003cec353e1265b0bef839e Mon Sep 17 00:00:00 2001
From: junseublim <junslim11@gmail.com>
Date: Mon, 5 Aug 2024 23:25:07 +0900
Subject: [PATCH 2/3] =?UTF-8?q?#67=20style:=20min-h-dvh=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tailwind.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index adcf1e3..5983fa8 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -62,6 +62,9 @@ const config: Config = {
       height: {
         dvh: 'var(--dynamic-vh)',
       },
+      minHeight: {
+        dvh: 'var(--dynamic-vh)',
+      },
       fontFamily: {
         pretendard: ['var(--font-pretendard-variable)'],
         jooree: ['var(--font-jooree)'],

From 7fb9f38bb0392530b5c23f22c337b5a8f53e9808 Mon Sep 17 00:00:00 2001
From: junseublim <junslim11@gmail.com>
Date: Tue, 6 Aug 2024 22:43:40 +0900
Subject: [PATCH 3/3] #67 Feat: header style - title optional - grid -
 shadow-header

---
 src/components/Header/index.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index f50daf6..97c1bfd 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -2,29 +2,31 @@ import { ReactNode } from 'react'
 import HeaderBackButton from '@/components/Header/HeaderBackButton'
 
 interface HeaderProps {
-  title: string
+  title?: string
   description?: string
   leftButton?: ReactNode
   rightButton?: ReactNode
 }
 
 const Header = ({
-  title,
+  title = '',
   description = '',
-  leftButton = <div />,
-  rightButton = <div />,
+  leftButton = null,
+  rightButton = null,
 }: HeaderProps) => {
   return (
     <>
-      <header className="fixed flex h-16 w-full max-w-md justify-between bg-gray-0 p-5 shadow-[0_1px_2px_0_rgba(0,0,0,0.10)]">
-        {leftButton}
-        <div className="flex flex-col items-center">
-          <div className="text-md font-semiBold leading-6">{title}</div>
-          <div className="mt-1 text-xs font-regular leading-4 text-gray-700">
+      <header className="fixed grid h-16 w-full max-w-md grid-cols-3 justify-between bg-gray-0 p-5 shadow-header">
+        <div className="justify-self-start">{leftButton}</div>
+        <div className="justify-self-center">
+          <div className="text-center text-md font-semiBold leading-6">
+            {title}
+          </div>
+          <div className="mt-1 text-center text-xs font-regular leading-4 text-gray-700">
             {description}
           </div>
         </div>
-        {rightButton}
+        <div className="justify-self-end">{rightButton}</div>
       </header>
       <div className="block h-16 w-full" />
     </>