From dcc7a5fa46424bee91f541149dda105ecbe2d252 Mon Sep 17 00:00:00 2001 From: Kang Gyu Song Date: Sun, 24 May 2026 12:48:52 +0000 Subject: [PATCH 1/7] feat(fe): create some components for TCManagePage --- .../create/_components/ExecutionCard.tsx | 158 ++++++++++++++++++ .../create/_components/TCDownloadCard.tsx | 48 ++++++ .../(create)/problem/create/test/page.tsx | 56 +++++++ 3 files changed, 262 insertions(+) create mode 100644 apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx create mode 100644 apps/frontend/app/(client)/(main)/(create)/problem/create/_components/TCDownloadCard.tsx create mode 100644 apps/frontend/app/(client)/(main)/(create)/problem/create/test/page.tsx diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx new file mode 100644 index 0000000000..7f6dc9dc76 --- /dev/null +++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx @@ -0,0 +1,158 @@ +import { Button } from '@/components/shadcn/button' +import { cn, dateFormatter } from '@/libs/utils' +import CheckCircle from '@/public/icons/check-circle.svg' + +export type StateType = 'SUCCESS' | 'FAIL' | 'NONE' + +export interface GeneratedResult { + state: StateType + date?: Date + totalCnt: number + successCnt: number +} + +interface ExecutionCardProps { + disabled?: boolean + loading: boolean + onGenerate: () => void + canDownload?: boolean + onDownload?: () => void + genResult: GeneratedResult +} + +export function ExecutionCard({ + disabled = false, + loading, + onGenerate, + canDownload = false, + onDownload, + genResult +}: ExecutionCardProps) { + return ( +
+
+
+ + 자동 생성 실행하기 + + + 업로드한 파일을 이용해서 생성을 시도합니다 + +
+
+ + {canDownload && ( + + )} +
+
+ {loading ? ( + + ) : ( +
+ +
+ + { + { + SUCCESS: '아웃풋 생성 성공', + FAIL: '아웃풋 생성 실패', + NONE: '파일 업로드 이후 실행 필요' + }[genResult.state] + } + +
+ {genResult.state !== 'NONE' ? ( + <> + {genResult.date && ( + {dateFormatter(genResult.date, 'YYYY-MM-DD')} + )} +
+
+
+ + {genResult.successCnt}/{genResult.totalCnt} 솔루션 테스트 + 통과 + {genResult.state === 'SUCCESS' ? ' 완료' : ' 실패'} + + + ) : ( + <> + - +
+
+
+ - + + )} +
+
+
+ )} +
+ ) +} + +function StateSkeleton() { + return ( +
+
+
+
+
+
+
+ ) +} diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/TCDownloadCard.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/TCDownloadCard.tsx new file mode 100644 index 0000000000..3138d98e3c --- /dev/null +++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/TCDownloadCard.tsx @@ -0,0 +1,48 @@ +'use client' + +import { Button } from '@/components/shadcn/button' + +interface TCDownloadCardProps { + onDelete: () => void + onDownload: () => void + disabled?: boolean +} + +export function TCDownloadCard({ + onDelete, + onDownload, + disabled = false +}: TCDownloadCardProps) { + return ( +
+
+
+

+ TC 삭제 및 다운로드 +

+

+ 생성한 TC 파일을 삭제 및 다운로드 할 수 있어요 +

+
+
+ + +
+
+
+ ) +} diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/test/page.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/test/page.tsx new file mode 100644 index 0000000000..bf93c066db --- /dev/null +++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/test/page.tsx @@ -0,0 +1,56 @@ +'use client' + +import { useState } from 'react' +import { + ExecutionCard, + type GeneratedResult, + type StateType +} from '../_components/ExecutionCard' +import { TCDownloadCard } from '../_components/TCDownloadCard' + +export default function Page() { + const [genResult, setGenResult] = useState({ + state: 'FAIL', + date: new Date(2020, 1, 1), + totalCnt: 2, + successCnt: 2 + }) + + const [loading, setLoading] = useState(false) + + // 임시 생성하기 버튼 동작 함수: 문제 생성 상태 변경 + const onGenerate = () => { + setLoading(true) + setTimeout(() => { + setGenResult((prev) => { + const nextState: StateType = ( + { + SUCCESS: 'FAIL', + FAIL: 'NONE', + NONE: 'SUCCESS' + } as const + )[prev.state] + + return { ...prev, state: nextState } + }) + setLoading(false) + }, 1000) + } + + return ( +
+ + alert('Delete')} + onDownload={() => alert('Download')} + disabled={loading} + /> +
+ ) +} From cf008b2c1a6b3847ad3f31e8ed34946d3dca5c04 Mon Sep 17 00:00:00 2001 From: Kang Gyu Song Date: Sun, 24 May 2026 12:50:23 +0000 Subject: [PATCH 2/7] fix(fe): change it to client component --- .../(create)/problem/create/_components/ExecutionCard.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx index 7f6dc9dc76..452f199d91 100644 --- a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx +++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx @@ -1,3 +1,5 @@ +'use client' + import { Button } from '@/components/shadcn/button' import { cn, dateFormatter } from '@/libs/utils' import CheckCircle from '@/public/icons/check-circle.svg' From 1b08f8d29359f33a893b9498588e8378ae4355bc Mon Sep 17 00:00:00 2001 From: Song Kang Gyu <37824301+sONg20NOW@users.noreply.github.com> Date: Sun, 24 May 2026 22:29:04 +0900 Subject: [PATCH 3/7] feat(fe): unify h3 Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- .../(create)/problem/create/_components/ExecutionCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx index 452f199d91..f141339367 100644 --- a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx +++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx @@ -34,9 +34,9 @@ export function ExecutionCard({
- +

자동 생성 실행하기 - +

업로드한 파일을 이용해서 생성을 시도합니다 From 8b2e7d006734e989b5f5ca432844cbba6b3f498b Mon Sep 17 00:00:00 2001 From: Song Kang Gyu <37824301+sONg20NOW@users.noreply.github.com> Date: Sun, 24 May 2026 23:31:14 +0900 Subject: [PATCH 4/7] Apply suggestion from @gemini-code-assist[bot] Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- .../(create)/problem/create/_components/ExecutionCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx index f141339367..330138f4e7 100644 --- a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx +++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx @@ -67,7 +67,7 @@ export function ExecutionCard({ ) : (
Date: Sun, 24 May 2026 23:31:49 +0900 Subject: [PATCH 5/7] Apply suggestion from @gemini-code-assist[bot] Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- .../(create)/problem/create/_components/ExecutionCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx index 330138f4e7..bf3d42ba58 100644 --- a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx +++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx @@ -149,7 +149,7 @@ export function ExecutionCard({ function StateSkeleton() { return ( -
+
From 06b44314ac4549a253e2f73e0fd8815002116d87 Mon Sep 17 00:00:00 2001 From: Song Kang Gyu <37824301+sONg20NOW@users.noreply.github.com> Date: Sun, 24 May 2026 23:32:05 +0900 Subject: [PATCH 6/7] Apply suggestion from @gemini-code-assist[bot] Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- .../(create)/problem/create/_components/TCDownloadCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/TCDownloadCard.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/TCDownloadCard.tsx index 3138d98e3c..13df24b6a4 100644 --- a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/TCDownloadCard.tsx +++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/TCDownloadCard.tsx @@ -14,7 +14,7 @@ export function TCDownloadCard({ disabled = false }: TCDownloadCardProps) { return ( -
+

From f08bc73bb5a3e8eeb9ca9e18d79abf8369a6ca17 Mon Sep 17 00:00:00 2001 From: Kang Gyu Song Date: Sun, 24 May 2026 14:55:58 +0000 Subject: [PATCH 7/7] fix(fe): make the layout logic much easier --- .../create/_components/ExecutionCard.tsx | 93 +++++++++++-------- 1 file changed, 54 insertions(+), 39 deletions(-) diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx index bf3d42ba58..e5ff0b141a 100644 --- a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx +++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/ExecutionCard.tsx @@ -6,6 +6,43 @@ import CheckCircle from '@/public/icons/check-circle.svg' export type StateType = 'SUCCESS' | 'FAIL' | 'NONE' +const STATE_MAP = { + SUCCESS: { + container: 'border-primary-light bg-color-blue-95', + icon: 'text-primary', + text: 'text-primary-strong', + description: 'text-primary', + dot: 'bg-primary', + title: '아웃풋 생성 성공' + }, + FAIL: { + container: 'border-error bg-color-red-95', + icon: 'text-error', + text: 'text-error', + description: 'text-error', + dot: 'bg-error', + title: '아웃풋 생성 실패' + }, + NONE: { + container: 'border-line bg-color-neutral-99', + icon: 'text-color-neutral-50', + text: 'text-color-neutral-30', + description: '', + dot: 'bg-color-neutral-30', + title: '파일 업로드 이후 실행 필요' + } +} as const satisfies Record< + StateType, + { + container: string + icon: string + text: string + description: string + dot: string + title: string + } +> + export interface GeneratedResult { state: StateType date?: Date @@ -67,47 +104,22 @@ export function ExecutionCard({ ) : (
-
+
- { - { - SUCCESS: '아웃풋 생성 성공', - FAIL: '아웃풋 생성 실패', - NONE: '파일 업로드 이후 실행 필요' - }[genResult.state] - } + {STATE_MAP[genResult.state].title}
{genResult.state !== 'NONE' ? ( <> @@ -118,9 +130,7 @@ export function ExecutionCard({
@@ -134,7 +144,12 @@ export function ExecutionCard({ <> -
-
+
- @@ -149,7 +164,7 @@ export function ExecutionCard({ function StateSkeleton() { return ( -
+