-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Implement several major in ResultCategoryCard/#87 #89
Changes from 7 commits
104ea1b
df0ddce
78c2802
7829983
63a0933
8272373
6bd06f5
f548a85
50e168c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import ResultCategoryCard from './result-category-card'; | ||
import { RESULT_CATEGORY } from '@/app/utils/key/result-category.key'; | ||
|
||
const meta = { | ||
title: 'ui/result/category-card', | ||
component: ResultCategoryCard, | ||
decorators: [(Story) => <Story />], | ||
} as Meta<typeof ResultCategoryCard>; | ||
|
||
export default meta; | ||
|
||
type Story = StoryObj<typeof meta>; | ||
|
||
export const Default: Story = { | ||
args: { | ||
category: RESULT_CATEGORY.COMMON_CULTURE, | ||
totalCredit: 40, | ||
takenCredit: 30, | ||
completed: false, | ||
}, | ||
}; | ||
|
||
export const CompletedSubMajor: Story = { | ||
args: { | ||
category: RESULT_CATEGORY.SUB_MAJOR, | ||
totalCredit: 40, | ||
takenCredit: 40, | ||
completed: true, | ||
}, | ||
}; | ||
|
||
export const UncompletedDualMajor = { | ||
args: { | ||
category: RESULT_CATEGORY.DUAL_BASIC_ACADEMICAL_CULTURE, | ||
totalCredit: 70, | ||
takenCredit: 40, | ||
completed: false, | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
'use client'; | ||
import { cn } from '@/app/utils/shadcn/utils'; | ||
|
||
import Book from '@/public/assets/book.svg'; | ||
import Image from 'next/image'; | ||
import useDialog from '@/app/hooks/useDialog'; | ||
import * as React from 'react'; | ||
import { RESULT_CATEGORY, RESULT_CATEGORY_KO, ResultCategoryKey } from '@/app/utils/key/result-category.key'; | ||
import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util'; | ||
import PieChart from '../../view/molecule/pie-chart/pie-chart'; | ||
import Button from '../../view/atom/button/button'; | ||
import { useRouter } from 'next/navigation'; | ||
|
||
interface ResultCategoryCardProps { | ||
category: ResultCategoryKey; | ||
totalCredit: number; | ||
takenCredit: number; | ||
completed?: boolean; | ||
} | ||
|
||
const filterSeveralMajor = (category: ResultCategoryKey) => { | ||
const { DUAL_MANDATORY_MAJOR, DUAL_ELECTIVE_MAJOR, DUAL_BASIC_ACADEMICAL_CULTURE, SUB_MAJOR } = RESULT_CATEGORY; | ||
|
||
switch (category) { | ||
case DUAL_MANDATORY_MAJOR: | ||
case DUAL_ELECTIVE_MAJOR: | ||
case DUAL_BASIC_ACADEMICAL_CULTURE: | ||
return <Button label="๋ณต์์ ๊ณต" variant="outlined" size="xs" role="none presentation" />; | ||
case SUB_MAJOR: | ||
return <Button label="๋ถ์ ๊ณต" variant="outlined" size="xs" role="none presentation" />; | ||
default: | ||
return <></>; | ||
} | ||
}; | ||
|
||
function ResultCategoryCard({ category, totalCredit, takenCredit }: ResultCategoryCardProps) { | ||
const { toggle } = useDialog(DIALOG_KEY.RESULT_CATEGORY); | ||
const { replace } = useRouter(); | ||
|
||
const percentage = Number(((takenCredit / totalCredit) * 100).toFixed(0)); | ||
|
||
function handleClickButton() { | ||
toggle(); | ||
replace('/result?category=COMMON_CULTURE'); | ||
} | ||
return ( | ||
<div | ||
className={cn('flex flex-col gap-6 zIndex-1 rounded-xl shadow-lg bg-white p-[0.4rem]', 'md:w-80 md:p-[1.8rem]')} | ||
> | ||
<div className="flex justify-between items-center"> | ||
<div className={cn('flex gap-4 font-bold text-sm', 'md:text-xl')}> | ||
<Image src={Book} width={24} height={24} alt="category-img" /> | ||
<h3>{RESULT_CATEGORY_KO[category]}</h3> | ||
</div> | ||
{filterSeveralMajor(category)} | ||
</div> | ||
<div className="m-auto"> | ||
<PieChart percentage={percentage} /> | ||
</div> | ||
<div className={cn('flex text-xs font-medium justify-between items-end', 'md:gap-4 md:text-base md:px-2')}> | ||
<div> | ||
<div className={cn('flex', 'md:gap-2')}> | ||
<span>๊ธฐ์คํ์ </span> | ||
<span className="font-bold">{totalCredit}</span> | ||
</div> | ||
<div className={cn('flex', 'md:gap-2')}> | ||
<span>์ด์ํ์ </span> | ||
<span className={cn('font-bold', percentage === 100 ? 'text-point-blue' : 'text-etc-red')}> | ||
{takenCredit} | ||
</span> | ||
</div> | ||
</div> | ||
|
||
<Button size="sm" label="๊ณผ๋ชฉ ํ์ธ" onClick={handleClickButton} /> | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
export default ResultCategoryCard; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
export const RESULT_CATEGORY = { | ||
COMMON_CULTURE: 'COMMON_CULTURE', | ||
CORE_CULTURE: 'CORE_CULTURE', | ||
PRIMARY_MANDATORY_MAJOR: 'PRIMARY_MANDATORY_MAJOR', | ||
PRIMARY_ELECTIVE_MAJOR: 'PRIMARY_ELECTIVE_MAJOR', | ||
DUAL_MANDATORY_MAJOR: 'DUAL_MANDATORY_MAJOR', | ||
DUAL_ELECTIVE_MAJOR: 'DUAL_ELECTIVE_MAJOR', | ||
SUB_MAJOR: 'SUB_MAJOR', | ||
PRIMARY_BASIC_ACADEMICAL_CULTURE: 'PRIMARY_BASIC_ACADEMICAL_CULTURE', | ||
DUAL_BASIC_ACADEMICAL_CULTURE: 'DUAL_BASIC_ACADEMICAL_CULTURE', | ||
NORMAL_CULTURE: 'NORMAL_CULTURE', | ||
FREE_ELECTIVE: 'FREE_ELECTIVE', | ||
CHAPEL: 'CHAPEL', | ||
} as const; | ||
Comment on lines
+1
to
+14
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ๋จ์ด ๋ป์ ์์๋ ๋ฐ๋ก ์๋ฟ์ง ์์ ๊ฒ๋ค์ด ์ข ์๋ ๊ฒ ๊ฐ์์ ์๋ฅผ ๋ค์ด basic academical culture,,, There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ํ์์ RESULT_CATEGORY_KO๋ฅผ ํตํด ๋งค์นญ๋๋ ํ๊ธ์๋ฏธ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค. |
||
|
||
export const RESULT_CATEGORY_KO = { | ||
COMMON_CULTURE: '์ผ๋ฐ๊ต์', | ||
CORE_CULTURE: 'ํต์ฌ๊ต์', | ||
PRIMARY_MANDATORY_MAJOR: '์ ๊ณตํ์', | ||
PRIMARY_ELECTIVE_MAJOR: '์ ๊ณต์ ํ', | ||
DUAL_MANDATORY_MAJOR: '์ ๊ณตํ์', | ||
DUAL_ELECTIVE_MAJOR: '์ ๊ณต์ ํ', | ||
SUB_MAJOR: '์ ๊ณต์ ํ', | ||
PRIMARY_BASIC_ACADEMICAL_CULTURE: 'ํ๋ฌธ๊ธฐ์ด๊ต์', | ||
DUAL_BASIC_ACADEMICAL_CULTURE: 'ํ๋ฌธ๊ธฐ์ด๊ต์', | ||
NORMAL_CULTURE: '์ผ๋ฐ๊ต์', | ||
FREE_ELECTIVE: '์์ ์ ํ', | ||
CHAPEL: '์ฑํ', | ||
} as const; | ||
|
||
export type ResultCategoryKey = (typeof RESULT_CATEGORY)[keyof typeof RESULT_CATEGORY]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ํด๋น ๋ค์ด๋ฐ์ ๊ธฐ์กด์ ์กด์ฌํ๋ variant๋ก ์๋กญ๊ฒ ์ถ๊ฐ ๋ ๊ฒ์ด ์๋๋๋ค
outlined๋ฅผ ์ถ๊ฐํ๋ฉฐ ํจ๊ป ์ ๋ฐ์ดํธ๋ง ์งํํ์ด์ !