fix(result): fix type with result api

mash-up-kr · Aug 3, 2023 · 9228bd6 · 9228bd6
1 parent 164e2ba
commit 9228bd6
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 74 deletions.
diff --git a/apps/onboarding/src/app/result/components/ResultContents.tsx b/apps/onboarding/src/app/result/components/ResultContents.tsx
@@ -5,11 +5,10 @@ import styled from '@emotion/styled';
 import { colors } from '@sulsul/token/src/colors';
 import { text } from '@sulsul/token/src/text';
 import { Button } from '@sulsul/ui';
-import { DrinkReq, TitleDto } from '~/api';
-import { AlcoholDetails } from '~/constants/alcohol';
+import { DrinkReq, TitleDto, TitleDtoTitleEnum } from '~/api';
+import { AlcoholDetails, AlcoholResultDetails } from '~/constants/alcohol';
 import { ResultCard } from './ResultCard';
 import { useSearchParams } from 'next/navigation';
-import { getLevelDetails } from '../service';
 import axios from 'axios';
 import { css } from '@emotion/react';
 import { shareResult } from '~/app/utils/share';
@@ -23,6 +22,7 @@ import {
   useTransform,
 } from 'framer-motion';
 import { useRef } from 'react';
+import { useSuspenseQuery } from '@suspensive/react-query';
 
 const Heading2 = styled.h2`
   ${text.heading[2]}
@@ -89,7 +89,18 @@ export const ResultContents = () => {
     );
   });
 
-  const { svg, mainColor, color1, color2 } = getLevelDetails(glasses);
+  const resultQuery = useSuspenseQuery(['result', { drinkType, glasses }], () =>
+    axios
+      .get<{ title: TitleDto }>(
+        `https://sulsul.app/api/v1/drinkingLimit?drinkType=${drinkType}&glass=${glasses}`
+      )
+      .then((response) => response.data)
+  );
+
+  const resultTitleData = resultQuery.data?.title;
+  const resultTitle = resultTitleData?.title as TitleDtoTitleEnum;
+  const resultSubTitle = resultTitleData?.subTitle;
+  const { svg, mainColor, color1, color2 } = AlcoholResultDetails[resultTitle];
 
   return (
     <Stack.Vertical
@@ -175,35 +186,17 @@ export const ResultContents = () => {
               `}
             >
               <Heading2>당신은...</Heading2>
-              <SuspenseQuery
-                options={{
-                  queryKey: ['result'],
-                  queryFn: () =>
-                    axios
-                      .get<{ title: TitleDto }>(
-                        `https://sulsul.app/api/v1/drinkingLimit?drinkType=${drinkType}&glass=${glasses}`
-                      )
-                      .then((response) => response.data),
-                }}
-              >
-                {(query) => {
-                  const { title } = query.data;
-                  return (
-                    <ResultCard
-                      name={title.title}
-                      svg={svg}
-                      description={title.subTitle}
-                      mainColor={mainColor}
-                    />
-                  );
-                }}
-              </SuspenseQuery>
-
+              <ResultCard
+                name={resultTitle}
+                svg={svg}
+                description={resultSubTitle}
+                mainColor={mainColor}
+              />
               <Heading3>다른 술은 얼마나 마실 수 있을까?</Heading3>
               <DrinkLists>
                 <SuspenseQuery
                   options={{
-                    queryKey: ['result'],
+                    queryKey: ['result', { drinkType, glasses }],
                     queryFn: () =>
                       axios
                         .get<{ drinks: DrinkReq[] }>(

diff --git a/apps/onboarding/src/app/result/service.ts b/apps/onboarding/src/app/result/service.ts
diff --git a/apps/onboarding/src/constants/alcohol.tsx b/apps/onboarding/src/constants/alcohol.tsx
@@ -10,7 +10,7 @@ import CardMaster from '~/assets/card/card-master.svg';
 import CardGhost from '~/assets/card/card-ghost.svg';
 import CardHeaven from '~/assets/card/card-heaven.svg';
 import CardGod from '~/assets/card/card-god.svg';
-import { PostDrinkingLimitReqDrinkTypeEnum } from '~/api';
+import { PostDrinkingLimitReqDrinkTypeEnum, TitleDtoTitleEnum } from '~/api';
 
 export const AlcoholDetails = {
   [PostDrinkingLimitReqDrinkTypeEnum.소주]: {
@@ -40,66 +40,54 @@ export const AlcoholDetails = {
   },
 } as const;
 
-// 술 결과 목록
-export const AlcoholResultType = {
-  Baby: 'Baby',
-  Common: 'Common',
-  Master: 'Master',
-  Ghost: 'Ghost',
-  Heaven: 'Heaven',
-  God: 'God',
-} as const;
-
-export type AlcoholResultType = typeof AlcoholResultType[keyof typeof AlcoholResultType];
-
 export const AlcoholResultDetails = {
-  [AlcoholResultType.Baby]: {
-    name: '술요미',
+  [TitleDtoTitleEnum.술요미]: {
+    name: TitleDtoTitleEnum.술요미,
     svg: <CardBaby />,
     image: '/metadata/images/baby.png',
     description: '귀엽네',
     mainColor: '#FF884533',
     color1: '#F97C7280',
     color2: '#4C94FF80',
   },
-  [AlcoholResultType.Common]: {
-    name: '술반인',
+  [TitleDtoTitleEnum.술반인]: {
+    name: TitleDtoTitleEnum.술반인,
     svg: <CardCommon />,
     image: '/metadata/images/common.png',
     description: '가자~',
     mainColor: '#FFEDE333',
     color1: '#F97C7280',
     color2: '#4C94FF80',
   },
-  [AlcoholResultType.Master]: {
-    name: '이쯤되면 술잘알',
+  [TitleDtoTitleEnum.이쯤되면술잘알]: {
+    name: TitleDtoTitleEnum.이쯤되면술잘알,
     svg: <CardMaster />,
     image: '/metadata/images/master.png',
     description: '술 좀 치네',
     mainColor: '#FFD02C33',
     color1: '#4C94FF80',
     color2: '#F97C7280',
   },
-  [AlcoholResultType.Ghost]: {
-    name: '알코올이 낳은 괴물',
+  [TitleDtoTitleEnum.알낳괴]: {
+    name: TitleDtoTitleEnum.알낳괴,
     svg: <CardGhost />,
     image: '/metadata/images/monster.png',
     description: '미쳤다..',
     mainColor: '#FF2C2C33',
     color1: '#E05FFE80',
     color2: '#F97C7280',
   },
-  [AlcoholResultType.Heaven]: {
-    name: '음주가무 천상계',
+  [TitleDtoTitleEnum.음주가무천상계]: {
+    name: TitleDtoTitleEnum.음주가무천상계,
     svg: <CardHeaven />,
     image: '/metadata/images/heaven.png',
     description: '알콜 마스터',
     mainColor: '#4C94FF80',
     color1: '#4C94FF80',
     color2: '#E05FFE80',
   },
-  [AlcoholResultType.God]: {
-    name: 'Alcohol God',
+  [TitleDtoTitleEnum.AlcoholGod]: {
+    name: TitleDtoTitleEnum.AlcoholGod,
     svg: <CardGod />,
     image: '/metadata/images/god.png',
     description: '무서울 게 없다',