✨ add today status API integration

potenday-project · Dec 15, 2023 · 16ce311 · 16ce311
1 parent 0ebf334
commit 16ce311
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 35 deletions.
diff --git a/app/(route)/(index)/page.tsx b/app/(route)/(index)/page.tsx
@@ -2,28 +2,39 @@
 
 import Image from 'next/image'
 
-import { useChallengesQuery } from './queries'
+import { useTodayStatusQuery } from './queries'
+
+export const CHAMPION = {
+  RED: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/red.png',
+  YELLOW: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/yellow.png',
+  GREEN: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/green.png',
+  BLUE: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/blue.png',
+  BEIGE: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/beige.png',
+  PINK: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/pink.png',
+}
 
 export default function HomePage() {
-  const challengesQuery = useChallengesQuery()
+  const todayStatusQuery = useTodayStatusQuery()
 
-  if (!challengesQuery.isSuccess) {
+  if (!todayStatusQuery.isSuccess) {
     return null
   }
 
+  const { champion, certificatedCount, explorationCount } = todayStatusQuery.data.data
+
   return (
     <div className='relative h-full px-8 py-4 pt-16'>
       <h1 className='text-2xl'>오늘의 도달률</h1>
       <div className='mb-7 flex items-end'>
         <div className='h-[88px] text-[88px] font-extrabold leading-[88px] text-[#8A72FF]'>100</div>
         <span className='text-[40px] font-extrabold'>%</span>
       </div>
-      <div className='text-xl'>🌙 탐사 필요 0</div>
-      <div className='mt-3 text-xl'>🌕 탐사 완료 5</div>
+      <div className='text-xl'>🌙 탐사 필요 {explorationCount}</div>
+      <div className='mt-3 text-xl'>🌕 탐사 완료 {certificatedCount}</div>
 
       <div className='absolute bottom-[7%] right-2'>
-        <div className='relative aspect-[297/529] h-[50vh] w-full'>
-          <Image src='/images/RED1.png' fill alt='' />
+        <div className='relative aspect-[297/529] h-[60vh] w-full'>
+          <Image src={CHAMPION[champion]} fill alt='' />
         </div>
       </div>
     </div>

diff --git a/app/(route)/(index)/queries.ts b/app/(route)/(index)/queries.ts
@@ -1,14 +1,14 @@
 import { useQuery } from '@tanstack/react-query'
 
-import { getChallenges } from '@/app/_service/challenge'
+import { getTodayStatus } from '@/app/_service/challenge'
 
 const QUERY_KEY = {
-  challenges: ['challenges'],
+  todayStatus: ['todayStatus'],
 }
 
-export const useChallengesQuery = () => {
+export const useTodayStatusQuery = () => {
   return useQuery({
-    queryKey: QUERY_KEY.challenges,
-    queryFn: () => getChallenges(),
+    queryKey: QUERY_KEY.todayStatus,
+    queryFn: () => getTodayStatus(),
   })
 }
diff --git a/app/(route)/login/page.tsx b/app/(route)/login/page.tsx
@@ -6,7 +6,12 @@ export default function Home() {
   return (
     <main className='flex h-full min-h-screen flex-col items-center justify-between bg-login-background bg-cover bg-center bg-no-repeat pb-24 pt-28'>
       <div className='flex flex-col items-center gap-5'>
-        <Image src='/images/logo.png' width={155} height={155} alt='도달 로고' />
+        <Image
+          src='https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/dodal_logo.png'
+          width={155}
+          height={155}
+          alt='도달 로고'
+        />
         <span>1:1 매칭 목표 달성 서비스</span>
       </div>
       <a

diff --git a/app/(route)/sign-up/page.tsx b/app/(route)/sign-up/page.tsx
@@ -13,30 +13,30 @@ import { getKakaoAccessToken, removeKakaoAccessToken, setAccessToken } from '@/a
 
 import { useLoginQuery, useSignUpMutation } from './queries'
 
-const PROFILES = {
+const CHAMPION = {
   DEFAULT: {
-    RED: '/images/profile-red-1.png',
-    YELLOW: '/images/profile-yellow-1.png',
-    GREEN: '/images/profile-green-1.png',
-    BLUE: '/images/profile-blue-1.png',
-    BEIGE: '/images/profile-beige-1.png',
-    PINK: '/images/profile-pink-1.png',
+    RED: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/profile_red.png',
+    YELLOW: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/profile_yellow.png',
+    GREEN: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/profile_green.png',
+    BLUE: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/profile_blue.png',
+    BEIGE: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/profile_beige.png',
+    PINK: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/profile_pink.png',
   },
   SELECTED: {
-    RED: '/images/profile-red-1-selected.png',
-    YELLOW: '/images/profile-yellow-1-selected.png',
-    GREEN: '/images/profile-green-1-selected.png',
-    BLUE: '/images/profile-blue-1-selected.png',
-    BEIGE: '/images/profile-beige-1-selected.png',
-    PINK: '/images/profile-pink-1-selected.png',
+    RED: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/selected_profile_red.png',
+    YELLOW: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/selected_profile_yellow.png',
+    GREEN: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/selected_profile_green.png',
+    BLUE: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/selected_profile_blue.png',
+    BEIGE: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/selected_profile_beige.png',
+    PINK: 'https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/selected_profile_pink.png',
   },
 }
 
 interface Inputs {
   nickname: string
 }
 
-export default function Register() {
+export default function SignUp() {
   const router = useRouter()
 
   const [selectedChampion, setSelectedChampion] = useState<Champion>('RED')
@@ -104,7 +104,7 @@ export default function Register() {
           <div className='mt-10 flex flex-col items-center'>
             <Image
               className='rounded-full bg-white'
-              src={PROFILES.DEFAULT[selectedChampion]}
+              src={CHAMPION.DEFAULT[selectedChampion]}
               width={187}
               height={187}
               alt=''
@@ -128,7 +128,7 @@ export default function Register() {
             </div>
           </div>
           <div className='mx-auto grid w-fit grid-cols-3 gap-x-3 gap-y-4'>
-            {Object.keys(PROFILES.DEFAULT).map((champion) => (
+            {Object.keys(CHAMPION.DEFAULT).map((champion) => (
               <button
                 key={champion}
                 onClick={() => {
@@ -139,8 +139,8 @@ export default function Register() {
                   className='rounded-full bg-white'
                   src={
                     selectedChampion === champion
-                      ? PROFILES.SELECTED[champion as Champion]
-                      : PROFILES.DEFAULT[champion as Champion]
+                      ? CHAMPION.SELECTED[champion as Champion]
+                      : CHAMPION.DEFAULT[champion as Champion]
                   }
                   width={80}
                   height={80}

diff --git a/app/_service/challenge/challenge.types.ts b/app/_service/challenge/challenge.types.ts
@@ -0,0 +1,7 @@
+import { type Champion } from '../auth/auth.types'
+
+export interface GetTodayStatus {
+  champion: Champion
+  explorationCount: number
+  certificatedCount: number
+}
diff --git a/app/_service/challenge/index.ts b/app/_service/challenge/index.ts
@@ -1,5 +1,7 @@
 import api from '../core/api'
 
-export const getChallenges = () => {
-  return api.get('/challenges')
+import { type GetTodayStatus } from './challenge.types'
+
+export const getTodayStatus = () => {
+  return api.get<GetTodayStatus>('/challenges/today')
 }
diff --git a/next.config.js b/next.config.js
@@ -6,6 +6,16 @@ const nextConfig = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'dodals3.s3.ap-northeast-2.amazonaws.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
   async rewrites() {
     return [
       {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -8,8 +8,8 @@ const config: Config = {
   theme: {
     extend: {
       backgroundImage: {
-        'login-background': "url('/images/login_background.png')",
-        'home-background': "url('/images/home_background.png')",
+        'login-background': "url('https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/login_background.png')",
+        'home-background': "url('https://dodals3.s3.ap-northeast-2.amazonaws.com/asset/home_background.png')",
       },
       backgroundColor: {
         'dodal-main': '#140A29',