-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
28 changed files
with
225 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 0 additions & 27 deletions
27
app/(sub-page)/result/components/result-category-detail-container.tsx
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,27 @@ | ||
import { DialogKey } from '../utils/key/dialog.key'; | ||
import { DialogKey } from '../utils/key/dialog-key.util'; | ||
import { updateDialogAtom } from '../store/dialog'; | ||
import { useAtom } from 'jotai'; | ||
|
||
export default function useDialog(key: DialogKey) { | ||
export default function useDialog(key: DialogKey, onClose?: () => void) { | ||
const [isOpenDialogList, setOpenDialogList] = useAtom(updateDialogAtom); | ||
|
||
const isOpen = isOpenDialogList[key]; | ||
|
||
const open = () => { | ||
setOpenDialogList([key, true]); | ||
}; | ||
|
||
const close = () => { | ||
setOpenDialogList([key, false]); | ||
onClose?.(); | ||
}; | ||
|
||
const toggle = () => { | ||
const prevState = isOpenDialogList[key]; | ||
setOpenDialogList([key, !prevState]); | ||
|
||
if (prevState) onClose?.(); | ||
}; | ||
|
||
return { isOpen, close, toggle }; | ||
return { isOpen, open, close, toggle }; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
app/ui/result/result-category-detail-content/result-category-detail-content.skeleton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import LabelContainerSkeleton from '@/app/ui/view/atom/label-container/label-container.skeleton'; | ||
import Skeleton from '@/app/ui/view/atom/skeleton'; | ||
|
||
export default function ResultCategoryDetailContentSkeleton() { | ||
return ( | ||
<div className="md:w-[80vw] max-w-[1200px] p-2"> | ||
<div className="flex justify-between mb-14"> | ||
<div className="flex flex-col gap-4"> | ||
<Skeleton className="h-10 w-40" /> | ||
<Skeleton className="h-4 w-80" /> | ||
</div> | ||
<Skeleton className="h-10 w-28" /> | ||
</div> | ||
{Array.from({ length: 3 }).map((_, index) => ( | ||
<div className="my-4 flex flex-col gap-4" key={index}> | ||
<LabelContainerSkeleton rightElement={<Skeleton className="h-10 w-28" />} /> | ||
<Skeleton className="h-40 w-30" /> | ||
</div> | ||
))} | ||
</div> | ||
); | ||
} |
36 changes: 36 additions & 0 deletions
36
app/ui/result/result-category-detail-content/result-category-detail-content.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import { expect, userEvent } from '@storybook/test'; | ||
import { mockDatabase } from '@/app/mocks/db.mock'; | ||
import ResultCategoryDetailContent from './result-category-detail-content'; | ||
import { screen } from '@storybook/testing-library'; | ||
import { delay } from 'msw'; | ||
|
||
const meta = { | ||
title: 'ui/result-category/ResultCategoryDetailContent', | ||
component: ResultCategoryDetailContent, | ||
args: { info: mockDatabase.getResultCategoryDetailInfo() }, | ||
decorators: [(Story) => <Story />], | ||
} as Meta<typeof ResultCategoryDetailContent>; | ||
|
||
export default meta; | ||
|
||
type Story = StoryObj<typeof meta>; | ||
|
||
export const Default: Story = { | ||
play: async ({ step }) => { | ||
await step('미이수 과목을 노출합니다.', async () => { | ||
await delay(2000); | ||
|
||
expect(screen.getByText('영어2')).toBeInTheDocument(); | ||
}); | ||
|
||
await step('토글을 클릭하면 기이수 과목을 노출합니다.', async () => { | ||
const lectureToggle = await screen.findAllByTestId('lecture-toggle'); | ||
await userEvent.click(lectureToggle[0]); | ||
|
||
await delay(3000); | ||
|
||
expect(screen.queryByText('성서와 인간 이해')).not.toBeInTheDocument(); | ||
}); | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
41 changes: 41 additions & 0 deletions
41
app/ui/result/result-category-detail/result-category-detail-dialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
'use client'; | ||
import Modal from '../../view/molecule/modal/modal'; | ||
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 useDialog from '@/app/hooks/useDialog'; | ||
import { useRouter } from 'next/navigation'; | ||
|
||
interface ResultCategoryDetailDialogProp { | ||
children: React.ReactNode; | ||
querystring?: string; | ||
} | ||
|
||
export default function ResultCategoryDetailDialog({ children, querystring }: ResultCategoryDetailDialogProp) { | ||
const { replace } = useRouter(); | ||
const { isOpen, open } = useDialog(DIALOG_KEY.RESULT_CATEGORY); | ||
|
||
useEffect(() => { | ||
if (querystring && !isOpen) open(); | ||
}, []); | ||
|
||
const handleCloseDialog = () => { | ||
replace('/result'); | ||
}; | ||
|
||
return ( | ||
<> | ||
<Responsive maxWidth={767}> | ||
<Drawer drawerKey={DIALOG_KEY.RESULT_CATEGORY} onClose={handleCloseDialog} className="h-[90vh]"> | ||
{children} | ||
</Drawer> | ||
</Responsive> | ||
<Responsive minWidth={768}> | ||
<Modal modalKey={DIALOG_KEY.RESULT_CATEGORY} onClose={handleCloseDialog}> | ||
{children} | ||
</Modal> | ||
</Responsive> | ||
</> | ||
); | ||
} |
20 changes: 20 additions & 0 deletions
20
app/ui/result/result-category-detail/result-category-detail.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import ResultCategoryDetailContent from '@/app/ui/result/result-category-detail-content/result-category-detail-content'; | ||
import { fetchResultCategoryDetailInfo } from '@/app/business/result/result.query'; | ||
import ResultCategoryDetailContentSkeleton from '@/app/ui/result/result-category-detail-content/result-category-detail-content.skeleton'; | ||
import ResultCategoryDetailDialog from './result-category-detail-dialog'; | ||
import { Suspense } from 'react'; | ||
|
||
export default function ResultCategoryDetail({ category }: { category: string }) { | ||
return ( | ||
<ResultCategoryDetailDialog querystring={category}> | ||
<Suspense fallback={<ResultCategoryDetailContentSkeleton />}> | ||
<ResultCategoryDetailInfo category={category} /> | ||
</Suspense> | ||
</ResultCategoryDetailDialog> | ||
); | ||
} | ||
|
||
async function ResultCategoryDetailInfo({ category }: { category: string }) { | ||
const data = await fetchResultCategoryDetailInfo(category); | ||
return <ResultCategoryDetailContent info={data} />; | ||
} |
Oops, something went wrong.