Merge pull request #99 from DDD-Community/feature/98

[Feature/98] 마이페이지

src/app/mypage/_components/GotoBoardsBtn.tsx

@@ -0,0 +1,67 @@
+import Link from 'next/link'
+import { ReactNode } from 'react'
+import { twMerge } from 'tailwind-merge'
+import MyBoardIcon from 'public/icons/sketchIcons-4.svg'
+import JoinedBoardIcon from 'public/icons/sketchIcons-1.svg'
+import { getMyBoards } from '@/lib'
+
+interface GoToBoardsBtnProps {
+  name: string
+  icon: ReactNode
+  number: number
+  className?: React.ComponentProps<'a'>['className']
+}
+
+const GoToBoardsBtn = ({
+  name,
+  icon,
+  number,
+  className = '',
+}: GoToBoardsBtnProps) => {
+  return (
+    // TODO: JoinedBoard는 /mypage/boards 두번째 탭으로 이동
+    <Link href="/mypage/boards">
+      <div
+        className={twMerge(
+          'relative flex flex-col items-center gap-2 rounded-[4px] bg-gray-50 px-6 py-3 font-semiBold shadow-myPageBox',
+          className,
+        )}
+      >
+        <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
+          {icon}
+        </div>
+        <span className="text-sm">{name}</span>
+        <span className="text-2xl leading-8">{number}</span>
+      </div>
+    </Link>
+  )
+}
+
+export const MyBoard = async () => {
+  const {
+    pagination: { totalCount },
+  } = await getMyBoards()
+  return (
+    <div className="flex h-[108px] w-[120px] items-center justify-center">
+      <GoToBoardsBtn
+        name="내 보드"
+        icon={<MyBoardIcon />}
+        number={totalCount}
+        className="-rotate-[5deg] transform"
+      />
+    </div>
+  )
+}
+
+export const JoinedBoard = () => {
+  return (
+    <div className="flex h-[108px] w-[140px] items-center justify-center">
+      <GoToBoardsBtn
+        name="참여한 보드"
+        icon={<JoinedBoardIcon className="-rotate-90 transform" />}
+        number={23}
+        className="rotate-[3deg] transform"
+      />
+    </div>
+  )
+}

src/app/mypage/_components/ProfilePic.tsx

@@ -0,0 +1,11 @@
+import DefaultPic from 'public/icons/surprised.svg'
+
+const ProfilePic = () => {
+  return (
+    <div className="flex h-[58px] w-[58px] items-center justify-center overflow-hidden rounded-full bg-[#686868]">
+      <DefaultPic />
+    </div>
+  )
+}
+
+export default ProfilePic

src/app/mypage/page.tsx

@@ -0,0 +1,47 @@
+import { auth } from '@/auth'
+import MenuLink from '@/components/Menu/MenuLink'
+import ExternalLinkContainer from '@/components/Menu/ExternalLinkContainer'
+import Header from '@/components/Header'
+import PinIcon from 'public/icons/sketchIcons-4.svg'
+import ClipIcon from 'public/icons/sketchIcons-paperclip.svg'
+import { JoinedBoard, MyBoard } from './_components/GotoBoardsBtn'
+import ProfilePic from './_components/ProfilePic'
+
+const MyPage = async () => {
+  const session = await auth()
+
+  return (
+    <div className="flex min-h-dvh flex-col">
+      <Header title="마이페이지" leftButton={<Header.BackButton />} />
+      <div className="flex flex-col items-center pt-7">
+        <ProfilePic />
+        <div className="my-4 text-xl font-semiBold">
+          {session?.profile.nickName}
+        </div>
+        <div className="flex gap-1">
+          <MyBoard />
+          <JoinedBoard />
+        </div>
+      </div>
+      <div className="my-7 h-[6px] w-full bg-gray-100" />
+      <div className="mx-4">
+        <div className="flex flex-col gap-3 pl-3">
+          <MenuLink
+            icon={<ClipIcon />}
+            text="프로필 수정"
+            linkTo="/mypage/profileEdit"
+          />
+          <MenuLink
+            icon={<PinIcon />}
+            text="내 보드 목록"
+            linkTo="/mypage/boards"
+          />
+        </div>
+        <div className="my-[26px] h-px w-full bg-gray-200" />
+        <ExternalLinkContainer className="gap-5 pl-3" />
+      </div>
+    </div>
+  )
+}
+
+export default MyPage

src/components/HamburgerMenu/index.tsx

@@ -3,7 +3,7 @@
 import HamburgerIcon from 'public/icons/hamburger.svg'
 import { useState } from 'react'
 import Drawer from './Drawer'
-import Menu from './Menu'
+import Menu from '../Menu'
 import { DrawerProvider } from './DrawerContext'
 
 const Hamburger = ({

src/components/Menu/ExternalLinkContainer.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link'
+import { twMerge } from 'tailwind-merge'
+
+const ExternalLink = ({ text, linkTo }: { text: string; linkTo: string }) => (
+  <Link className="cursor-pointer text-sm text-gray-700" href={linkTo}>
+    {text}
+  </Link>
+)
+
+const ExternalLinkContainer = ({
+  className = '',
+}: {
+  className?: React.ComponentProps<'div'>['className']
+}) => (
+  <div className={twMerge('flex flex-col gap-3 pl-[30px]', className)}>
+    <ExternalLink
+      text="POLABO 소개"
+      linkTo="https://hwanheejung.notion.site/POLABO-39ac5a850dcb46bd83168043acea5bbc?pvs=74"
+    />
+    <ExternalLink
+      text="서비스 이용약관"
+      linkTo="https://hwanheejung.notion.site/POLABO-292cb07b2fd74d7488aa4b684c67eb9a?pvs=74"
+    />
+    <ExternalLink
+      text="개인정보 처리방침"
+      linkTo="https://hwanheejung.notion.site/POLABO-3c07098b731e419a92da9916c81c35f1"
+    />
+    <ExternalLink
+      text="문의하기"
+      linkTo="https://forms.gle/ya9HVMSJWVSKYyV77"
+    />
+  </div>
+)
+
+export default ExternalLinkContainer

src/components/Menu/MenuLink.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link'
+import { ReactNode } from 'react'
+
+const MenuLink = ({
+  icon,
+  text,
+  linkTo,
+}: {
+  icon: ReactNode
+  text: string
+  linkTo: string
+}) => (
+  <Link
+    href={linkTo}
+    className="flex cursor-pointer items-center gap-[6px] text-gray-700"
+  >
+    {icon}
+    <span className="text-md font-semiBold">{text}</span>
+  </Link>
+)
+
+export default MenuLink