✨ add badges UI

potenday-project · Dec 17, 2023 · 9140ba2 · 9140ba2
1 parent d9e2ac0
commit 9140ba2
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/app/(route)/me/_components/badge-card.tsx b/app/(route)/me/_components/badge-card.tsx
@@ -1,18 +1,18 @@
 import Image from 'next/image'
 
-export default function BadgeCard() {
+interface BadgeCardProps {
+  imageUrl: string
+  title: string
+  description: string
+}
+
+export default function BadgeCard({ imageUrl, title, description }: BadgeCardProps) {
   return (
     <div className='flex w-[144px] flex-col items-center gap-2 rounded-xl bg-white px-2 py-4'>
-      <Image
-        className='rounded-[10px] bg-[#DEDEDE]'
-        src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/profile_red.png'
-        width={90}
-        height={80}
-        alt=''
-      />
+      <Image className='rounded-[10px] bg-[#DEDEDE]' src={imageUrl} width={90} height={80} alt='' />
       <div className='flex flex-col justify-center'>
-        <span className='text-center text-sm font-semibold text-[#140A29]'>탐사 자격증 보유자</span>
-        <span className='text-center text-xs text-[#848484]'>도달 여행을 시작했어요</span>
+        <span className='text-center text-sm font-semibold text-[#140A29]'>{title}</span>
+        <span className='text-center text-xs text-[#848484]'>{description}</span>
       </div>
     </div>
   )

diff --git a/app/(route)/me/page.tsx b/app/(route)/me/page.tsx
@@ -1,15 +1,35 @@
 'use client'
 
 import Image from 'next/image'
+import Link from 'next/link'
 
 import RightArrowCircleIcon from '@/app/_components/icons/RightArrowCircleIcon'
 import { useUserContext } from '@/app/_components/providers/UserProvider'
+import { ROUTE } from '@/app/_constants/route'
 
 import { CHAMPION } from '../sign-up/page'
 
 import BadgeCard from './_components/badge-card'
 import { useUserStatusQuery } from './queries'
 
+const BADGES = [
+  {
+    imageUrl: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/badge1.png',
+    title: '달 탐사 자격증',
+    description: '도달 여행을 시작했어요',
+  },
+  {
+    imageUrl: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/badge2.png',
+    title: 'Jr.암스트롱',
+    description: '다섯 걸음 걸었어요',
+  },
+  {
+    imageUrl: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/badge3.png',
+    title: '마이 퍼스트 문',
+    description: '도달 챌린지 첫 우승',
+  },
+]
+
 export default function MePage() {
   const userStatusQuery = useUserStatusQuery()
   const { user } = useUserContext()
@@ -54,11 +74,13 @@ export default function MePage() {
       <div className='flex flex-col gap-4'>
         <div className='flex justify-between px-2'>
           <span className='text-xl font-semibold'>달달 뱃지</span>
-          <RightArrowCircleIcon />
+          <Link href={ROUTE.BADGES}>
+            <RightArrowCircleIcon />
+          </Link>
         </div>
         <div className='flex gap-2'>
-          {new Array(3).fill(0).map((_, index) => {
-            return <BadgeCard key={index} />
+          {BADGES.map((badge) => {
+            return <BadgeCard key={badge.title} {...badge} />
           })}
         </div>
       </div>

diff --git a/app/_constants/route.ts b/app/_constants/route.ts
@@ -6,6 +6,7 @@ export const ROUTE = {
   CHALLENGE_DETAIL: (id: number) => `/challenge/${id}`,
   ALARM: '/alarm',
   ME: '/me',
+  BADGES: '/badges',
   OAUTH: {
     KAKAO: {
       CALLBACK: '/oauth/callback/kakao',