[FN-5] 자세히 보기 활성화

.github/workflows/storybook.yaml

@@ -30,7 +30,7 @@ jobs:
             ${{ runner.os }}-playwright-
 
       - name: Install Playwright's dependencies
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        # if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: npx playwright install --with-deps
 
       - name: Build Storybook

components/compositions/dashboard/best-worth/index.tsx

@@ -11,6 +11,7 @@ import { FilterType } from '@/hooks/use-filter'
 import { RANK_COLOR } from '@/constants'
 import Button from '@/components/button'
 import useDetailDrawer from '@/hooks/use-detail-drawer'
+import { BEST_WORTH } from '@/model/dashboard.entity'
 export interface Payload {
   percent: number
   name: number
@@ -138,7 +139,7 @@ function BestWorth({ filter }: { filter: FilterType }) {
         (item) => item.dashboardType === 'BEST_WORTH',
       )
 
-      return bestWorth
+      return bestWorth as BEST_WORTH
     },
   })
 

components/compositions/dashboard/character/index.tsx

@@ -1,12 +1,13 @@
-import Link from 'next/link'
 import { m, LazyMotion, domAnimation } from 'framer-motion'
 import { fadeInProps } from '@/variants'
 import { useInViewRef } from '@/hooks/use-in-view-ref'
 import { useSession } from '@/provider/session-provider'
 import { FilterType } from '@/hooks/use-filter'
 import { useQuery } from '@tanstack/react-query'
 import { getDashboardQuery } from '@/queries/dashboard'
-import { Statistic } from '@/model/dashboard.entity'
+import { CHARACTER_NAMES, CHARACTER_TYPE } from '@/model/dashboard.entity'
+import { useMemo } from 'react'
+import Link from 'next/link'
 
 const characterMap = {
   busy: [
@@ -57,13 +58,28 @@ const Character = ({ filter }: { filter: FilterType }) => {
     select(data) {
       return data.data?.statistics.find(
         (item) => item.dashboardType === 'CHARACTER',
-      )
+      ) as CHARACTER_TYPE
     },
   })
+
+  const parsedStatistics = useMemo(() => {
+    if (!statisics?.characters?.length) return null
+    return Object.fromEntries(
+      statisics.characters.map((item) => {
+        return [item.name, { value: item.value, questionId: item.questionId }]
+      }),
+    ) as {
+      [key in CHARACTER_NAMES]: {
+        value: boolean
+        questionId: string
+      }
+    }
+  }, [statisics])
+
   return (
     <LazyMotion features={domAnimation}>
       <div>
-        {isLoading || !statisics ? (
+        {isLoading || !parsedStatistics ? (
           <>
             <div className="text-mainTitle2-bold font-bold h-8 skeleton w-3/4" />
             <div className="grid grid-cols-2 gap-4 mt-5">
@@ -74,7 +90,7 @@ const Character = ({ filter }: { filter: FilterType }) => {
             </div>
           </>
         ) : (
-          <CharacterInfo statisics={statisics} />
+          <CharacterInfo statisics={parsedStatistics} />
         )}
       </div>
     </LazyMotion>
@@ -97,8 +113,14 @@ const cardPickingVariants = {
     },
   },
 }
+type ParsedStatistics = {
+  [key in CHARACTER_NAMES]: {
+    value: boolean
+    questionId: string
+  }
+}
 
-function CharacterInfo({ statisics }: { statisics: Statistic }) {
+function CharacterInfo({ statisics }: { statisics: ParsedStatistics }) {
   const { data } = useSession()
   const { inView, ref } = useInViewRef<HTMLDivElement>({ once: true })
 
@@ -123,32 +145,62 @@ function CharacterInfo({ statisics }: { statisics: Statistic }) {
         }}
         className="grid grid-cols-2 gap-4 mt-5"
       >
-        {statisics.busy}
         <CharacterBlock
-          emoji={characterMap.friendly[+Boolean(statisics.friendly)]?.emoji}
-          topText={characterMap.friendly[+Boolean(statisics.friendly)]?.top}
+          emoji={
+            characterMap.friendly[+Boolean(statisics.FRIENDLINESS_LEVEL.value)]
+              ?.emoji
+          }
+          topText={
+            characterMap.friendly[+Boolean(statisics.FRIENDLINESS_LEVEL.value)]
+              ?.top
+          }
           bottomText={
-            characterMap.friendly[+Boolean(statisics.friendly)]?.bottom
+            characterMap.friendly[+Boolean(statisics.FRIENDLINESS_LEVEL.value)]
+              ?.bottom
           }
-          href="/"
+          href={`?id=${statisics.FRIENDLINESS_LEVEL.questionId}&type=TWO_CHOICE`}
         />
         <CharacterBlock
-          emoji={characterMap.similar[+Boolean(statisics.similar)]?.emoji}
-          topText={characterMap.similar[+Boolean(statisics.similar)]?.top}
-          bottomText={characterMap.similar[+Boolean(statisics.similar)]?.bottom}
-          href="/"
+          emoji={
+            characterMap.similar[+Boolean(statisics.PERSONALITY_TYPE.value)]
+              ?.emoji
+          }
+          topText={
+            characterMap.similar[+Boolean(statisics.PERSONALITY_TYPE.value)]
+              ?.top
+          }
+          bottomText={
+            characterMap.similar[+Boolean(statisics.PERSONALITY_TYPE.value)]
+              ?.bottom
+          }
+          href={`?id=${statisics.PERSONALITY_TYPE.questionId}&type=TWO_CHOICE`}
         />
         <CharacterBlock
-          emoji={characterMap.mbti[+Boolean(statisics.mbti)]?.emoji}
-          topText={characterMap.mbti[+Boolean(statisics.mbti)]?.top}
-          bottomText={characterMap.mbti[+Boolean(statisics.mbti)]?.bottom}
-          href="/"
+          emoji={
+            characterMap.mbti[+Boolean(statisics.MBTI_IMMERSION.value)]?.emoji
+          }
+          topText={
+            characterMap.mbti[+Boolean(statisics.MBTI_IMMERSION.value)]?.top
+          }
+          bottomText={
+            characterMap.mbti[+Boolean(statisics.MBTI_IMMERSION.value)]?.bottom
+          }
+          href={`?id=${statisics.MBTI_IMMERSION.questionId}&type=TWO_CHOICE`}
         />
         <CharacterBlock
-          emoji={characterMap.busy[+Boolean(statisics.busy)]?.emoji}
-          topText={characterMap.busy[+Boolean(statisics.busy)]?.top}
-          bottomText={characterMap.busy[+Boolean(statisics.busy)]?.bottom}
-          href="/"
+          emoji={
+            characterMap.busy[+Boolean(statisics.WEEKEND_COMMITMENTS.value)]
+              ?.emoji
+          }
+          topText={
+            characterMap.busy[+Boolean(statisics.WEEKEND_COMMITMENTS.value)]
+              ?.top
+          }
+          bottomText={
+            characterMap.busy[+Boolean(statisics.WEEKEND_COMMITMENTS.value)]
+              ?.bottom
+          }
+          href={`?id=${statisics.WEEKEND_COMMITMENTS.questionId}&type=TWO_CHOICE`}
         />
       </m.div>
     </>
@@ -182,12 +234,12 @@ function CharacterBlock({
           <br />
           <b className="text-body1-bold">{bottomText}</b>
         </p>
-        {/* <Link
+        <Link
           className="text-xs underline underline-offset-2 leading-4 text-text-main-black11"
           href={href}
         >
           자세히 보기
-        </Link> */}
+        </Link>
       </div>
     </m.div>
   )

components/compositions/dashboard/happy/index.tsx

@@ -4,6 +4,7 @@ import useDetailDrawer from '@/hooks/use-detail-drawer'
 import { FilterType } from '@/hooks/use-filter'
 import { useInViewRef } from '@/hooks/use-in-view-ref'
 import { cn } from '@/lib/client/utils'
+import { HAPPY_OR_SAD } from '@/model/dashboard.entity'
 import { getDashboardQuery } from '@/queries/dashboard'
 import { useQuery } from '@tanstack/react-query'
 import { HTMLMotionProps, m, LazyMotion, domAnimation } from 'framer-motion'
@@ -16,7 +17,7 @@ const Happy = ({ filter }: { filter: FilterType }) => {
     select(data) {
       return data.data?.statistics.find(
         (item) => item.dashboardType === 'HAPPY',
-      )
+      ) as HAPPY_OR_SAD
     },
   })
 

components/compositions/dashboard/money/index.tsx

@@ -56,7 +56,6 @@ const Money = ({ filter }: { filter: FilterType }) => {
               </b>
               에게
               <br />
-              평균{' '}
               <b className="text-brand-main-green400">
                 {statisics.average.toLocaleString()}원
               </b>{' '}

components/compositions/dashboard/sad/index.tsx

@@ -4,6 +4,7 @@ import useDetailDrawer from '@/hooks/use-detail-drawer'
 import { FilterType } from '@/hooks/use-filter'
 import { useInViewRef } from '@/hooks/use-in-view-ref'
 import { cn } from '@/lib/client/utils'
+import { HAPPY_OR_SAD } from '@/model/dashboard.entity'
 import { DetailQsContext } from '@/pages/dashboard'
 import { getDashboardQuery } from '@/queries/dashboard'
 import { useQuery } from '@tanstack/react-query'
@@ -15,7 +16,9 @@ const Sad = ({ filter }: { filter: FilterType }) => {
   const { data: statisics, isLoading } = useQuery({
     ...getDashboardQuery(filter),
     select(data) {
-      return data.data?.statistics.find((item) => item.dashboardType === 'SAD')
+      return data.data?.statistics.find(
+        (item) => item.dashboardType === 'SAD',
+      ) as HAPPY_OR_SAD
     },
   })
   const { inView, ref } = useInViewRef<HTMLDivElement>({

components/compositions/dashboard/tree-info.tsx

@@ -106,7 +106,7 @@ const TreeInfo = ({ filter }: { filter: FilterType }) => {
               <Badge
                 key={item.id}
                 onClick={() => {
-                  handle(item.id)
+                  handle(item.id, 'SHORT_ANSWER')
                 }}
                 title={SHORT_FILTER[item.name]}
               />
@@ -116,7 +116,7 @@ const TreeInfo = ({ filter }: { filter: FilterType }) => {
             {short.slice(short.length / 2, short.length).map((item) => (
               <Badge
                 key={item.id}
-                onClick={() => handle(item.id)}
+                onClick={() => handle(item.id, 'SHORT_ANSWER')}
                 title={SHORT_FILTER[item.name]}
               />
             ))}