From 104ea1b5370a1bfc5bfb3c76d4c35f11d4bd0608 Mon Sep 17 00:00:00 2001
From: yougyung <youkyeongs@naver.com>
Date: Fri, 26 Apr 2024 12:08:02 +0900
Subject: [PATCH 1/8] feat: implement color type based on complete

---
 .../result/result-category/result-category-card.tsx |  6 +++---
 app/ui/view/molecule/pie-chart/pie-chart.css        | 12 +++++++++++-
 app/ui/view/molecule/pie-chart/pie-chart.tsx        | 13 +++++++++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/ui/result/result-category/result-category-card.tsx b/app/ui/result/result-category/result-category-card.tsx
index 26a5c75f..8c1356d1 100644
--- a/app/ui/result/result-category/result-category-card.tsx
+++ b/app/ui/result/result-category/result-category-card.tsx
@@ -11,7 +11,7 @@ import Button from '../../view/atom/button/button';
 
 function ResultCategoryCard() {
   const { toggle } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
-
+  const percentage = 100;
   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]')}
@@ -21,7 +21,7 @@ function ResultCategoryCard() {
         전공필수
       </div>
       <div className="m-auto">
-        <PieChart percentage={90} />
+        <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>
@@ -31,7 +31,7 @@ function ResultCategoryCard() {
           </div>
           <div className={cn('flex', 'md:gap-2')}>
             <span>이수학점</span>
-            <span className="font-bold text-point-blue">18</span>
+            <span className={cn('font-bold', percentage === 100 ? 'text-point-blue' : 'text-etc-pink')}>18</span>
           </div>
         </div>
         <Button size="sm" label="과목 확인" onClick={toggle} />
diff --git a/app/ui/view/molecule/pie-chart/pie-chart.css b/app/ui/view/molecule/pie-chart/pie-chart.css
index c4e283c9..f297034b 100644
--- a/app/ui/view/molecule/pie-chart/pie-chart.css
+++ b/app/ui/view/molecule/pie-chart/pie-chart.css
@@ -17,6 +17,12 @@
   position: absolute;
   border-radius: 50%;
   inset: 0;
+  background:
+    radial-gradient(farthest-side, #ff6d6d 98%, #0000) top/1.1rem 1.5rem no-repeat,
+    conic-gradient(#ff6d6d calc(var(--percentage) * 1%), #0000 0);
+}
+
+.piechart.complete::before {
   background:
     radial-gradient(farthest-side, #7590ff 98%, #0000) top/1.1rem 1.5rem no-repeat,
     conic-gradient(#7590ff calc(var(--percentage) * 1%), #0000 0);
@@ -28,6 +34,10 @@
   border-radius: 46%;
   inset: calc(50% - 0.74rem);
   position: absolute;
-  background: #7590ff;
+  background: #ff6d6d;
   transform: rotate(calc(var(--percentage) * 3.6deg)) translateY(calc(50% - 9rem / 2));
 }
+
+.piechart.complete::after {
+  background: #7590ff;
+}
diff --git a/app/ui/view/molecule/pie-chart/pie-chart.tsx b/app/ui/view/molecule/pie-chart/pie-chart.tsx
index 03dd6567..5f2c0e1d 100644
--- a/app/ui/view/molecule/pie-chart/pie-chart.tsx
+++ b/app/ui/view/molecule/pie-chart/pie-chart.tsx
@@ -1,4 +1,5 @@
 import '@/app/ui/view/molecule/pie-chart/pie-chart.css';
+import { cn } from '@/app/utils/shadcn/utils';
 
 export interface PieChartProp {
   percentage: number;
@@ -9,10 +10,18 @@ function PieChart({ percentage }: PieChartProp) {
 
   return (
     <div
-      className={`piechart relative aspect-square rounded-full bg-light-blue-1 w-[9rem] h-[9rem]`}
+      className={cn(
+        'piechart relative aspect-square rounded-full  w-[9rem] h-[9rem]',
+        percentage === 100 ? 'bg-light-blue-1 complete' : 'bg-etc-pink',
+      )}
       style={{ '--percentage': percentage }}
     >
-      <div className="absolute rounded-full bg-white text-light-blue-6 font-bold text-xl w-[6rem] h-[6rem] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex justify-center items-center">
+      <div
+        className={cn(
+          'absolute rounded-full bg-white  font-bold text-xl w-[6rem] h-[6rem] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+          percentage === 100 ? 'text-light-blue-6' : 'text-etc-red',
+        )}
+      >
         {filterdPercentage}%
       </div>
     </div>

From df0ddce6b8ca834157846922644aab32a2a6ffb1 Mon Sep 17 00:00:00 2001
From: yougyung <youkyeongs@naver.com>
Date: Fri, 26 Apr 2024 12:43:40 +0900
Subject: [PATCH 2/8] feat: add outlined button

---
 app/ui/view/atom/button/button.stories.tsx | 12 ++++++++++--
 app/ui/view/atom/button/button.tsx         |  3 ++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/ui/view/atom/button/button.stories.tsx b/app/ui/view/atom/button/button.stories.tsx
index dbb08050..9479c596 100644
--- a/app/ui/view/atom/button/button.stories.tsx
+++ b/app/ui/view/atom/button/button.stories.tsx
@@ -10,7 +10,7 @@ const meta = {
     docs: {
       description: {
         component: `
-- variant값으로 "primary" | "secondary" |  "text" | "delete" 중 하나를 선택할 수 있습니다.\n
+- variant값으로 "primary" | "secondary" |  "list" | "outlined" 중 하나를 선택할 수 있습니다.\n
 - size값으로 "lg" | "md" |  "sm" | "xs" | "default"  중 하나를 선택할 수 있습니다.\n
 - label 값으로 button 태그에 존재하는 text를 의미하고 필수적으로 할당해야 합니다
 `,
@@ -24,7 +24,7 @@ const meta = {
         type: { summary: 'ButtonVariant' },
         defaultValue: { summary: 'primary' },
       },
-      options: ['primary', 'secondary', 'text', 'delete'],
+      options: ['primary', 'secondary', 'text', 'list', 'outlined'],
       control: {
         type: 'radio',
       },
@@ -69,6 +69,14 @@ export const SecondaryButton: Story = {
   },
 };
 
+export const OutlinedButton: Story = {
+  args: {
+    size: 'sm',
+    variant: 'outlined',
+    label: '주전공',
+  },
+};
+
 export const ListActionButton: Story = {
   args: {
     size: 'default',
diff --git a/app/ui/view/atom/button/button.tsx b/app/ui/view/atom/button/button.tsx
index b91cce34..2c0b3c5e 100644
--- a/app/ui/view/atom/button/button.tsx
+++ b/app/ui/view/atom/button/button.tsx
@@ -7,7 +7,7 @@ export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'default';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   label: string;
-  variant?: 'primary' | 'secondary' | 'text' | 'list';
+  variant?: 'primary' | 'secondary' | 'text' | 'list' | 'outlined';
   size?: ButtonSize;
   loading?: boolean;
   disabled?: boolean;
@@ -17,6 +17,7 @@ export const ButtonVariants = cva(`flex justify-center items-center`, {
   variants: {
     variant: {
       primary: 'bg-primary rounded-[100px] text-white border-0 hover:bg-primary-hover',
+      outlined: 'rounded-[100px] text-primary border-solid border-[1px] border-primary',
       secondary: 'bg-white rounded-[100px] border-solid border-[1px] border-gray-6 hover:bg-white-hover',
       text: 'font-medium text-slate-400 text-sm hover:text-slate-600',
       list: 'py-1 px-3 bg-blue-500 rounded-[7px] text-white leading-5 font-medium text-base hover:bg-blue-500',

From 78c2802fffe6e7cea102f3d651e74dbb28b1c50a Mon Sep 17 00:00:00 2001
From: yougyung <youkyeongs@naver.com>
Date: Fri, 26 Apr 2024 12:59:42 +0900
Subject: [PATCH 3/8] feat: add major button in ResultCategoryComponent

---
 .../result-category-detail-container.tsx      |  1 -
 .../result-category/result-category-card.tsx  | 26 ++++++++++++++++---
 app/utils/key/result-category.key.ts          | 16 ++++++++++++
 3 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 app/utils/key/result-category.key.ts

diff --git a/app/(sub-page)/result/components/result-category-detail-container.tsx b/app/(sub-page)/result/components/result-category-detail-container.tsx
index fa657898..ad596679 100644
--- a/app/(sub-page)/result/components/result-category-detail-container.tsx
+++ b/app/(sub-page)/result/components/result-category-detail-container.tsx
@@ -1,5 +1,4 @@
 import Modal from '../../../ui/view/molecule/modal/modal';
-import { useMediaQuery } from 'usehooks-ts';
 import { DIALOG_KEY } from '@/app/utils/key/dialog.key';
 import Drawer from '../../../ui/view/molecule/drawer/drawer';
 import ResultCategoryDetailContent from '@/app/ui/result/result-category/result-category-detail-content';
diff --git a/app/ui/result/result-category/result-category-card.tsx b/app/ui/result/result-category/result-category-card.tsx
index 8c1356d1..c2f5198e 100644
--- a/app/ui/result/result-category/result-category-card.tsx
+++ b/app/ui/result/result-category/result-category-card.tsx
@@ -8,17 +8,37 @@ import * as React from 'react';
 import { DIALOG_KEY } from '@/app/utils/key/dialog.key';
 import PieChart from '../../view/molecule/pie-chart/pie-chart';
 import Button from '../../view/atom/button/button';
+import { RESULT_CATEGORY, ResultCategoryKey } from '@/app/utils/key/result-category.key';
 
 function ResultCategoryCard() {
   const { toggle } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
   const percentage = 100;
+  const category = RESULT_CATEGORY.COMMON_CULTURE;
+
+  const filterSeveralMajor = (category: ResultCategoryKey) => {
+    const { DUAL_MANDATORY_MAJOR, DUAL_ELECTIVE_MAJOR, SUB_MAJOR } = RESULT_CATEGORY;
+
+    switch (category) {
+      case DUAL_MANDATORY_MAJOR:
+      case DUAL_ELECTIVE_MAJOR:
+        return <Button label="복수전공" variant="outlined" size="xs" />;
+      case SUB_MAJOR:
+        return <Button label="부전공" variant="outlined" size="xs" />;
+      default:
+        return <></>;
+    }
+  };
+
   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={cn('flex gap-4 font-bold text-sm', 'md:text-xl')}>
-        <Image src={Book} width={24} height={24} alt="category-img" />
-        전공필수
+      <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>전공필수</h3>
+        </div>
+        {filterSeveralMajor(category)}
       </div>
       <div className="m-auto">
         <PieChart percentage={percentage} />
diff --git a/app/utils/key/result-category.key.ts b/app/utils/key/result-category.key.ts
new file mode 100644
index 00000000..b327ab04
--- /dev/null
+++ b/app/utils/key/result-category.key.ts
@@ -0,0 +1,16 @@
+export const RESULT_CATEGORY = {
+  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];

From 7829983c1c950f1f7613d252cc5b6c0a99eb7cf5 Mon Sep 17 00:00:00 2001
From: yougyung <youkyeongs@naver.com>
Date: Fri, 26 Apr 2024 16:26:58 +0900
Subject: [PATCH 4/8] feat: add storybook test ResultCategoryComponent

---
 app/(sub-page)/result/page.tsx                | 15 ++++++-
 .../result-category-card.stories.tsx          | 40 +++++++++++++++++++
 .../result-category/result-category-card.tsx  | 26 ++++++++----
 app/utils/key/result-category.key.ts          | 15 +++++++
 4 files changed, 87 insertions(+), 9 deletions(-)
 create mode 100644 app/ui/result/result-category/result-category-card.stories.tsx

diff --git a/app/(sub-page)/result/page.tsx b/app/(sub-page)/result/page.tsx
index 31c8c681..1c41de4a 100644
--- a/app/(sub-page)/result/page.tsx
+++ b/app/(sub-page)/result/page.tsx
@@ -2,8 +2,16 @@ import ResultCategoryCard from '@/app/ui/result/result-category/result-category-
 import UserInfoCard from '@/app/ui/user/user-info-card/user-info-card';
 import ContentContainer from '@/app/ui/view/atom/content-container';
 import { cn } from '@/app/utils/shadcn/utils';
+import { RESULT_CATEGORY, ResultCategoryKey } from '@/app/utils/key/result-category.key';
 
 function ResultPage() {
+  const DUMMY_DATA = {
+    category: 'COMMON_CULTURE' as keyof typeof RESULT_CATEGORY,
+    totalCredit: 70,
+    takenCredit: 68,
+    completed: false,
+  };
+
   return (
     <div className="flex justify-center items-end">
       <ContentContainer className="md:w-[700px] p-8">
@@ -16,7 +24,12 @@ function ResultPage() {
         )}
       >
         {Array.from({ length: 8 }).map((_, index) => (
-          <ResultCategoryCard key={index} />
+          <ResultCategoryCard
+            key={index}
+            category={RESULT_CATEGORY[DUMMY_DATA.category]}
+            totalCredit={DUMMY_DATA.totalCredit}
+            takenCredit={DUMMY_DATA.takenCredit}
+          />
         ))}
       </div>
     </div>
diff --git a/app/ui/result/result-category/result-category-card.stories.tsx b/app/ui/result/result-category/result-category-card.stories.tsx
new file mode 100644
index 00000000..4c89b26f
--- /dev/null
+++ b/app/ui/result/result-category/result-category-card.stories.tsx
@@ -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,
+  },
+};
diff --git a/app/ui/result/result-category/result-category-card.tsx b/app/ui/result/result-category/result-category-card.tsx
index c2f5198e..201e3e6c 100644
--- a/app/ui/result/result-category/result-category-card.tsx
+++ b/app/ui/result/result-category/result-category-card.tsx
@@ -8,19 +8,27 @@ import * as React from 'react';
 import { DIALOG_KEY } from '@/app/utils/key/dialog.key';
 import PieChart from '../../view/molecule/pie-chart/pie-chart';
 import Button from '../../view/atom/button/button';
-import { RESULT_CATEGORY, ResultCategoryKey } from '@/app/utils/key/result-category.key';
+import { RESULT_CATEGORY, RESULT_CATEGORY_KO, ResultCategoryKey } from '@/app/utils/key/result-category.key';
 
-function ResultCategoryCard() {
+interface ResultCategoryCardProps {
+  category: ResultCategoryKey;
+  totalCredit: number;
+  takenCredit: number;
+  completed?: boolean;
+}
+
+function ResultCategoryCard({ category, totalCredit, takenCredit }: ResultCategoryCardProps) {
   const { toggle } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
-  const percentage = 100;
-  const category = RESULT_CATEGORY.COMMON_CULTURE;
+
+  const percentage = Number(((takenCredit / totalCredit) * 100).toFixed(0));
 
   const filterSeveralMajor = (category: ResultCategoryKey) => {
-    const { DUAL_MANDATORY_MAJOR, DUAL_ELECTIVE_MAJOR, SUB_MAJOR } = RESULT_CATEGORY;
+    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" />;
       case SUB_MAJOR:
         return <Button label="부전공" variant="outlined" size="xs" />;
@@ -36,7 +44,7 @@ function ResultCategoryCard() {
       <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>전공필수</h3>
+          <h3>{RESULT_CATEGORY_KO[category]}</h3>
         </div>
         {filterSeveralMajor(category)}
       </div>
@@ -47,11 +55,13 @@ function ResultCategoryCard() {
         <div>
           <div className={cn('flex', 'md:gap-2')}>
             <span>기준학점</span>
-            <span className="font-bold">18</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-pink')}>18</span>
+            <span className={cn('font-bold', percentage === 100 ? 'text-point-blue' : 'text-etc-red')}>
+              {takenCredit}
+            </span>
           </div>
         </div>
         <Button size="sm" label="과목 확인" onClick={toggle} />
diff --git a/app/utils/key/result-category.key.ts b/app/utils/key/result-category.key.ts
index b327ab04..b7a8f8bb 100644
--- a/app/utils/key/result-category.key.ts
+++ b/app/utils/key/result-category.key.ts
@@ -1,4 +1,19 @@
 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;
+
+export const RESULT_CATEGORY_KO = {
   COMMON_CULTURE: '일반교양',
   CORE_CULTURE: '핵심교양',
   PRIMARY_MANDATORY_MAJOR: '전공필수',

From 63a0933cc2d057f2c054ab6d742e7040d5c5eab4 Mon Sep 17 00:00:00 2001
From: yougyung <youkyeongs@naver.com>
Date: Sat, 27 Apr 2024 18:58:10 +0900
Subject: [PATCH 5/8] fix: change to component outside filterSeveralMajor

---
 .../result-category/result-category-card.tsx  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/ui/result/result-category/result-category-card.tsx b/app/ui/result/result-category/result-category-card.tsx
index 201e3e6c..efa3b0e5 100644
--- a/app/ui/result/result-category/result-category-card.tsx
+++ b/app/ui/result/result-category/result-category-card.tsx
@@ -17,26 +17,26 @@ interface ResultCategoryCardProps {
   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" />;
+    case SUB_MAJOR:
+      return <Button label="부전공" variant="outlined" size="xs" />;
+    default:
+      return <></>;
+  }
+};
+
 function ResultCategoryCard({ category, totalCredit, takenCredit }: ResultCategoryCardProps) {
   const { toggle } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
 
   const percentage = Number(((takenCredit / totalCredit) * 100).toFixed(0));
 
-  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" />;
-      case SUB_MAJOR:
-        return <Button label="부전공" variant="outlined" size="xs" />;
-      default:
-        return <></>;
-    }
-  };
-
   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]')}

From 8272373bceda6b9cd9a3e4c929f2167fd3ab78d3 Mon Sep 17 00:00:00 2001
From: yougyung <youkyeongs@naver.com>
Date: Tue, 30 Apr 2024 12:21:17 +0900
Subject: [PATCH 6/8] fix: add role attr in several major button

---
 app/ui/result/result-category/result-category-card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/ui/result/result-category/result-category-card.tsx b/app/ui/result/result-category/result-category-card.tsx
index efa3b0e5..d18b9b8d 100644
--- a/app/ui/result/result-category/result-category-card.tsx
+++ b/app/ui/result/result-category/result-category-card.tsx
@@ -24,9 +24,9 @@ const filterSeveralMajor = (category: ResultCategoryKey) => {
     case DUAL_MANDATORY_MAJOR:
     case DUAL_ELECTIVE_MAJOR:
     case DUAL_BASIC_ACADEMICAL_CULTURE:
-      return <Button label="복수전공" variant="outlined" size="xs" />;
+      return <Button label="복수전공" variant="outlined" size="xs" role="none presentation" />;
     case SUB_MAJOR:
-      return <Button label="부전공" variant="outlined" size="xs" />;
+      return <Button label="부전공" variant="outlined" size="xs" role="none presentation" />;
     default:
       return <></>;
   }

From f548a853522d72579a79fb4748fb53f58e7a1d26 Mon Sep 17 00:00:00 2001
From: yougyung <youkyeongs@naver.com>
Date: Wed, 1 May 2024 10:33:52 +0900
Subject: [PATCH 7/8] rename: change test title

---
 .../result-category-detail-content.stories.tsx                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/result/result-category-detail-content/result-category-detail-content.stories.tsx b/app/ui/result/result-category-detail-content/result-category-detail-content.stories.tsx
index 24d4e5e7..7e3579bb 100644
--- a/app/ui/result/result-category-detail-content/result-category-detail-content.stories.tsx
+++ b/app/ui/result/result-category-detail-content/result-category-detail-content.stories.tsx
@@ -6,7 +6,7 @@ import { screen } from '@storybook/testing-library';
 import { delay } from 'msw';
 
 const meta = {
-  title: 'ui/result-category/ResultCategoryDetailContent',
+  title: 'ui/result/result-category-detail-content',
   component: ResultCategoryDetailContent,
   args: { info: mockDatabase.getResultCategoryDetailInfo() },
   decorators: [(Story) => <Story />],

From 50e168c3b941da115310feb470005b61ecdd0386 Mon Sep 17 00:00:00 2001
From: yougyung <youkyeongs@naver.com>
Date: Thu, 2 May 2024 16:44:11 +0900
Subject: [PATCH 8/8] fix: remove to useRouter category query parameter

---
 app/store/dialog.ts                           |  2 ++
 .../result-category-card.tsx                  | 24 +++++++++++++------
 .../result-category-detail-dialog.tsx         |  9 ++++---
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/app/store/dialog.ts b/app/store/dialog.ts
index 680b9d37..a58023ca 100644
--- a/app/store/dialog.ts
+++ b/app/store/dialog.ts
@@ -9,6 +9,8 @@ const initialState = {
 
 const dialogAtom = atom(initialState);
 
+export const isDialogOpenAtom = atom(false);
+
 export const updateDialogAtom = atom(
   (get) => get(dialogAtom),
   (get, set, [key, value]) => {
diff --git a/app/ui/result/result-category-card/result-category-card.tsx b/app/ui/result/result-category-card/result-category-card.tsx
index 1862c034..50355f57 100644
--- a/app/ui/result/result-category-card/result-category-card.tsx
+++ b/app/ui/result/result-category-card/result-category-card.tsx
@@ -5,11 +5,13 @@ 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 Link from 'next/link';
+import { useSetAtom } from 'jotai';
+import { isDialogOpenAtom } from '@/app/store/dialog';
 import Button from '../../view/atom/button/button';
-import { useRouter } from 'next/navigation';
+import PieChart from '../../view/molecule/pie-chart/pie-chart';
+import { RESULT_CATEGORY, RESULT_CATEGORY_KO, ResultCategoryKey } from '@/app/utils/key/result-category.key';
 
 interface ResultCategoryCardProps {
   category: ResultCategoryKey;
@@ -35,13 +37,13 @@ const filterSeveralMajor = (category: ResultCategoryKey) => {
 
 function ResultCategoryCard({ category, totalCredit, takenCredit }: ResultCategoryCardProps) {
   const { toggle } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
-  const { replace } = useRouter();
+  const setIsOpenDialog = useSetAtom(isDialogOpenAtom);
 
   const percentage = Number(((takenCredit / totalCredit) * 100).toFixed(0));
 
   function handleClickButton() {
     toggle();
-    replace('/result?category=COMMON_CULTURE');
+    setIsOpenDialog(true);
   }
   return (
     <div
@@ -70,8 +72,16 @@ function ResultCategoryCard({ category, totalCredit, takenCredit }: ResultCatego
             </span>
           </div>
         </div>
-
-        <Button size="sm" label="과목 확인" onClick={handleClickButton} />
+        <Link
+          href={{
+            pathname: '/result',
+            query: {
+              category: 'COMMON_CULTURE',
+            },
+          }}
+        >
+          <Button size="sm" label="과목 확인" onClick={handleClickButton} />
+        </Link>
       </div>
     </div>
   );
diff --git a/app/ui/result/result-category-detail/result-category-detail-dialog.tsx b/app/ui/result/result-category-detail/result-category-detail-dialog.tsx
index 5ca865d7..fc6a7ae1 100644
--- a/app/ui/result/result-category-detail/result-category-detail-dialog.tsx
+++ b/app/ui/result/result-category-detail/result-category-detail-dialog.tsx
@@ -4,8 +4,9 @@ import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import Drawer from '../../view/molecule/drawer/drawer';
 import Responsive from '@/app/ui/responsive';
 import React, { useEffect } from 'react';
+import { useAtomValue } from 'jotai';
+import { isDialogOpenAtom } from '@/app/store/dialog';
 import useDialog from '@/app/hooks/useDialog';
-import { useRouter } from 'next/navigation';
 
 interface ResultCategoryDetailDialogProp {
   children: React.ReactNode;
@@ -13,7 +14,8 @@ interface ResultCategoryDetailDialogProp {
 }
 
 export default function ResultCategoryDetailDialog({ children, querystring }: ResultCategoryDetailDialogProp) {
-  const { replace } = useRouter();
+  const isOpenDialog = useAtomValue(isDialogOpenAtom);
+
   const { isOpen, open } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
 
   useEffect(() => {
@@ -21,7 +23,8 @@ export default function ResultCategoryDetailDialog({ children, querystring }: Re
   }, []);
 
   const handleCloseDialog = () => {
-    replace('/result');
+    if (isOpenDialog) window.history.go(-1);
+    window.history.replaceState({}, '', '/result');
   };
 
   return (