Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into feat/FN-3
Browse files Browse the repository at this point in the history
  • Loading branch information
raymondanythings committed Mar 5, 2024
2 parents 8343674 + 0396128 commit b4f03e8
Show file tree
Hide file tree
Showing 19 changed files with 488 additions and 212 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/storybook.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion components/compositions/dashboard/best-worth/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -138,7 +139,7 @@ function BestWorth({ filter }: { filter: FilterType }) {
(item) => item.dashboardType === 'BEST_WORTH',
)

return bestWorth
return bestWorth as BEST_WORTH
},
})

Expand Down
102 changes: 77 additions & 25 deletions components/compositions/dashboard/character/index.tsx
Original file line number Diff line number Diff line change
@@ -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: [
Expand Down Expand Up @@ -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">
Expand All @@ -74,7 +90,7 @@ const Character = ({ filter }: { filter: FilterType }) => {
</div>
</>
) : (
<CharacterInfo statisics={statisics} />
<CharacterInfo statisics={parsedStatistics} />
)}
</div>
</LazyMotion>
Expand All @@ -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 })

Expand All @@ -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>
</>
Expand Down Expand Up @@ -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>
)
Expand Down
3 changes: 2 additions & 1 deletion components/compositions/dashboard/happy/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -16,7 +17,7 @@ const Happy = ({ filter }: { filter: FilterType }) => {
select(data) {
return data.data?.statistics.find(
(item) => item.dashboardType === 'HAPPY',
)
) as HAPPY_OR_SAD
},
})

Expand Down
1 change: 0 additions & 1 deletion components/compositions/dashboard/money/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ const Money = ({ filter }: { filter: FilterType }) => {
</b>
์—๊ฒŒ
<br />
ํ‰๊ท {' '}
<b className="text-brand-main-green400">
{statisics.average.toLocaleString()}์›
</b>{' '}
Expand Down
5 changes: 4 additions & 1 deletion components/compositions/dashboard/sad/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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>({
Expand Down
4 changes: 2 additions & 2 deletions components/compositions/dashboard/tree-info.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
/>
Expand All @@ -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]}
/>
))}
Expand Down
Loading

0 comments on commit b4f03e8

Please sign in to comment.