Merge pull request #70 from DDD-Community/feature/67

[FEATURE/67] 헤더 컴포넌트 추가
DDD-Community · Aug 7, 2024 · dbc1982 · dbc1982
2 parents 301285b + 7fb9f38
commit dbc1982
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 0 deletions.
diff --git a/src/app/mypage/boards/page.tsx 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,38 @@
+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 = null,
+  rightButton = null,
+}: HeaderProps) => {
+  return (
+    <>
+      <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>
+        <div className="justify-self-end">{rightButton}</div>
+      </header>
+      <div className="block h-16 w-full" />
+    </>
+  )
+}
+
+Header.BackButton = HeaderBackButton
+
+export default Header
diff --git 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)'],