Merge pull request dnd-side-project#120 from dnd-side-project/feat/dn…

…d-side-project#85

feat: 프로필수정 페이지 레이아웃 추가 및 상태관리

src/app/mypage/layout.tsx

@@ -0,0 +1,14 @@
+import Header from '@/components/shared/Header'
+import React from 'react'
+
+type LayoutProps = {
+  children: React.ReactNode
+}
+export default function MyPageLayout({ children }: LayoutProps) {
+  return (
+    <div className="pb-4 h-full">
+      <Header title={'마이페이지'} />
+      <div className="h-[calc(100%-80px)]">{children}</div>
+    </div>
+  )
+}

src/app/mypage/page.tsx

@@ -0,0 +1,25 @@
+import { GotoCard, Information } from '@/components/domain/mypage'
+import { gotoCardData } from '@/constants/gotoCardData'
+
+function MyPage() {
+  return (
+    <div className="px-4 flex flex-col gap-5">
+      <Information />
+      <div className="flex flex-col gap-5">
+        {gotoCardData.map((data, idx) => {
+          return (
+            <GotoCard
+              icon={data.icon}
+              text={data.text}
+              subText={data.subText}
+              key={idx}
+              route={data.route}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default MyPage

src/components/domain/mypage/GotoCard/GotoCard.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+
+interface GotoCardProps {
+  icon: string
+  text: string
+  subText?: string
+  route: string
+}
+
+function GotoCard({ icon, text, subText, route }: GotoCardProps) {
+  const router = useRouter()
+
+  const handleNavigation = () => {
+    router.push(route)
+  }
+
+  return (
+    <div className="px-5 py-4 bg-gray-800 flex justify-between gap-6 rounded-2xl">
+      <Image src={`/icons/${icon}`} width={50} height={50} alt="goto.svg" />
+      <div className="flex flex-col justify-center ">
+        {subText && <p className="text-body3 text-onSurface-300">{subText}</p>}
+        <p className="text-sub1 text-onSurface-300">{text}</p>
+      </div>
+      <Image
+        src={'/icons/right_arrow.svg'}
+        width={24}
+        height={24}
+        alt="right_arrow.svg"
+        onClick={handleNavigation}
+        className="cursor-pointer"
+      />
+    </div>
+  )
+}
+
+export default GotoCard

src/components/domain/mypage/GotoCard/index.ts

@@ -0,0 +1 @@
+export { default as GotoCard } from './GotoCard'

src/components/domain/mypage/QuizStatus/QuizStatus.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+interface Props {
+  colorClass: string
+  label: string
+  count: number
+}
+
+function QuizStatus({ colorClass, label, count }: Props) {
+  return (
+    <div
+      className={`flex flex-col gap-1 w-full ${label !== '전체' && 'border-l-[1px] border-outline'}`}
+    >
+      <div className="flex items-center m-auto gap-1">
+        <span className={colorClass}>
+          <svg width="6" height="6" viewBox="0 0 6 6" fill="currentColor">
+            <circle cx="3" cy="3" r="3" />
+          </svg>
+        </span>
+        {label !== '전체'}
+        <p className="text-body3 text-onSurface-300">{label}</p>
+      </div>
+      <div className="flex items-center m-auto">
+        <p className={`${colorClass} text-h3`}>{count}</p>
+        <p className="text-onSurface-200 text-caption">회</p>
+      </div>
+      <p className="m-auto text-onSurface-200 text-caption">퀴즈 완료</p>
+    </div>
+  )
+}
+
+export default QuizStatus

src/components/domain/mypage/QuizStatus/index.ts

@@ -0,0 +1 @@
+export { default as QuizStatus } from './QuizStatus'

src/components/domain/mypage/index.ts

@@ -0,0 +1,3 @@
+export * from './information'
+export * from './GotoCard'
+export * from './QuizStatus'

src/components/domain/mypage/information/Information.tsx

@@ -0,0 +1,66 @@
+import Image from 'next/image'
+import Button from '@/components/common/Button'
+import { accountData } from '@/constants/account'
+import { QuizStatus } from '../QuizStatus'
+
+function Information() {
+  return (
+    <div className="flex flex-col gap-5 bg-gray-800 px-4 py-6 rounded-2xl">
+      <div className="flex gap-2">
+        <Image
+          src={accountData.profileImage}
+          alt="profile.svg"
+          width={40}
+          height={40}
+        />
+        <div className='flex flex-col gap-1'>
+          <p className="text-body2 text-onSurface-300">
+            {accountData.nickname}
+          </p>
+          <p className="flex text-onSurface-200 text-body3">
+            {accountData.careerInfo.jobGroup}
+            <span className="px-1 py-2">
+              <svg width="2" height="2" viewBox="0 0 2 2" fill="none">
+                <circle cx="1" cy="1" r="1" fill="white" fillOpacity="0.6" />
+              </svg>
+            </span>
+            {accountData.careerInfo.company}
+            <span className="px-1 py-2">
+              <svg width="2" height="2" viewBox="0 0 2 2" fill="none">
+                <circle cx="1" cy="1" r="1" fill="white" fillOpacity="0.6" />
+              </svg>
+            </span>
+            {accountData.careerInfo.experience}
+          </p>
+        </div>
+      </div>
+      <Button isFullWidth type={'light'}>
+        프로필 편집하기
+      </Button>
+      <div className="flex justify-between">
+        <QuizStatus
+          colorClass="text-secondary-200"
+          label="전체"
+          count={accountData.quizInfo.totalCategoryQuizCount}
+        />
+        <QuizStatus
+          colorClass="text-devBlue-200"
+          label="개발"
+          count={accountData.quizInfo.developQuizCount}
+        />
+        <QuizStatus
+          colorClass="text-designPurple-200"
+          label="디자인"
+          count={accountData.quizInfo.designQuizCount}
+        />
+        <QuizStatus
+          colorClass="text-primary-200"
+          label="비즈니스"
+          count={accountData.quizInfo.businessQuizCount}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Information

src/components/domain/mypage/information/index.ts

@@ -0,0 +1 @@
+export { default as Information } from './Information'

src/constants/account.ts

@@ -0,0 +1,31 @@
+export interface Account {
+  nickname: string
+  profileImage: string
+  careerInfo: {
+    jobGroup: string
+    company: string
+    experience: string
+  }
+  quizInfo: {
+    totalCategoryQuizCount: number
+    designQuizCount: number
+    businessQuizCount: number
+    developQuizCount: number
+  }
+}
+
+export const accountData: Account = {
+  nickname: '상큼한화성009',
+  profileImage: '/images/profile.svg',
+  careerInfo: {
+    jobGroup: '개발자',
+    company: '비공개',
+    experience: '1년 차 미만',
+  },
+  quizInfo: {
+    totalCategoryQuizCount: 0,
+    designQuizCount: 0,
+    businessQuizCount: 0,
+    developQuizCount: 0,
+  },
+}

src/constants/gotoCardData.ts

@@ -0,0 +1,24 @@
+export interface GotoCard {
+  icon: string
+  text: string
+  route: string
+  subText?: string
+}
+export const gotoCardData: GotoCard[] = [
+  {
+    icon: 'goto_01.svg',
+    text: '작성한 댓글 보러가기',
+    route: '/mypage/writecomment',
+  },
+  {
+    icon: 'goto_02.svg',
+    text: '좋아요한 댓글 보러가기',
+    route: '/mypage/likecomment',
+  },
+  {
+    icon: 'goto_03.svg',
+    text: '피드백 남기러 가기',
+    route: 'https://www.naver.com', // 구글 폼 링크 대체하기
+    subText: '서비스의 피드백을 남겨주세요!',
+  },
+]