diff --git a/apps/onboarding/src/app/result/components/ResultContents.tsx b/apps/onboarding/src/app/result/components/ResultContents.tsx index 137eb37..4743132 100644 --- 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 ( { `} > 당신은... - - axios - .get<{ title: TitleDto }>( - `https://sulsul.app/api/v1/drinkingLimit?drinkType=${drinkType}&glass=${glasses}` - ) - .then((response) => response.data), - }} - > - {(query) => { - const { title } = query.data; - return ( - - ); - }} - - + 다른 술은 얼마나 마실 수 있을까? axios .get<{ drinks: DrinkReq[] }>( diff --git a/apps/onboarding/src/app/result/service.ts b/apps/onboarding/src/app/result/service.ts deleted file mode 100644 index 16906ef..0000000 --- a/apps/onboarding/src/app/result/service.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { AlcoholResultDetails } from '~/constants/alcohol'; - -export const getLevelDetails = (glasses: number) => { - if (glasses <= 7) { - return AlcoholResultDetails.Baby; - } - if (glasses <= 15) { - return AlcoholResultDetails.Common; - } - if (glasses <= 23) { - return AlcoholResultDetails.Master; - } - if (glasses <= 31) { - return AlcoholResultDetails.Ghost; - } - if (glasses <= 39) { - return AlcoholResultDetails.Heaven; - } - return AlcoholResultDetails.God; -}; diff --git a/apps/onboarding/src/constants/alcohol.tsx b/apps/onboarding/src/constants/alcohol.tsx index 6acc82d..bbd1376 100644 --- 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,21 +40,9 @@ 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: , image: '/metadata/images/baby.png', description: '귀엽네', @@ -62,8 +50,8 @@ export const AlcoholResultDetails = { color1: '#F97C7280', color2: '#4C94FF80', }, - [AlcoholResultType.Common]: { - name: '술반인', + [TitleDtoTitleEnum.술반인]: { + name: TitleDtoTitleEnum.술반인, svg: , image: '/metadata/images/common.png', description: '가자~', @@ -71,8 +59,8 @@ export const AlcoholResultDetails = { color1: '#F97C7280', color2: '#4C94FF80', }, - [AlcoholResultType.Master]: { - name: '이쯤되면 술잘알', + [TitleDtoTitleEnum.이쯤되면술잘알]: { + name: TitleDtoTitleEnum.이쯤되면술잘알, svg: , image: '/metadata/images/master.png', description: '술 좀 치네', @@ -80,8 +68,8 @@ export const AlcoholResultDetails = { color1: '#4C94FF80', color2: '#F97C7280', }, - [AlcoholResultType.Ghost]: { - name: '알코올이 낳은 괴물', + [TitleDtoTitleEnum.알낳괴]: { + name: TitleDtoTitleEnum.알낳괴, svg: , image: '/metadata/images/monster.png', description: '미쳤다..', @@ -89,8 +77,8 @@ export const AlcoholResultDetails = { color1: '#E05FFE80', color2: '#F97C7280', }, - [AlcoholResultType.Heaven]: { - name: '음주가무 천상계', + [TitleDtoTitleEnum.음주가무천상계]: { + name: TitleDtoTitleEnum.음주가무천상계, svg: , image: '/metadata/images/heaven.png', description: '알콜 마스터', @@ -98,8 +86,8 @@ export const AlcoholResultDetails = { color1: '#4C94FF80', color2: '#E05FFE80', }, - [AlcoholResultType.God]: { - name: 'Alcohol God', + [TitleDtoTitleEnum.AlcoholGod]: { + name: TitleDtoTitleEnum.AlcoholGod, svg: , image: '/metadata/images/god.png', description: '무서울 게 없다',