(tabs[0].value)
+ const active = tabs.find((t) => t.value === activeValue) ?? tabs[0]
+
+ const boxStyle = 'border-cool-neutral-40 rounded-[16px] border px-6 py-7'
+
+ return (
+
+
setActiveValue(v as TabValue)}
+ >
+
+ {tabs.map((t) => (
+
+ {t.label}
+
+ ))}
+
+
+ {active.cards.map((Card, i) => (
+
+
+
+ ))}
+
This is Validator page
-}
diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/CheckerTab.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/CheckerTab.tsx
new file mode 100644
index 0000000000..245deb28c8
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/CheckerTab.tsx
@@ -0,0 +1,9 @@
+function CheckerCard1() {
+ return 특수 채점 first div content
+}
+
+export const CheckerTab = {
+ value: 'checker' as const,
+ label: '특수 채점',
+ cards: [CheckerCard1]
+}
diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcAutoTab.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcAutoTab.tsx
new file mode 100644
index 0000000000..4e064c3408
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcAutoTab.tsx
@@ -0,0 +1,21 @@
+function TcAutoCard1() {
+ return TC 자동 생성 first div content
+}
+
+function TcAutoCard2() {
+ return TC 자동 생성 second div content
+}
+
+function TcAutoCard3() {
+ return TC 자동 생성 third div content
+}
+
+function TcAutoCard4() {
+ return TC 자동 생성 fourth div content
+}
+
+export const TcAutoTab = {
+ value: 'tc-auto' as const,
+ label: 'TC 자동 생성',
+ cards: [TcAutoCard1, TcAutoCard2, TcAutoCard3, TcAutoCard4]
+}
diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcInputTab.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcInputTab.tsx
new file mode 100644
index 0000000000..0d1112570a
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcInputTab.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import { FileUpload } from '@/app/(client)/(main)/(create)/problem/create/_components/FileUpload'
+import { useState } from 'react'
+
+function TcInputCard1() {
+ const [, setFiles] = useState([])
+ return (
+
+ )
+}
+
+function TcInputCard2() {
+ return TC 인풋 생성 second div content
+}
+
+export const TcInputTab = {
+ value: 'tc-input' as const,
+ label: 'TC 인풋 생성',
+ cards: [TcInputCard1, TcInputCard2]
+}
diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcManualTab.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcManualTab.tsx
new file mode 100644
index 0000000000..121767ae5e
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcManualTab.tsx
@@ -0,0 +1,13 @@
+function TcManualCard1() {
+ return TC 수동 생성 first div content
+}
+
+function TcManualCard2() {
+ return TC 수동 생성 second div content
+}
+
+export const TcManualTab = {
+ value: 'tc-manual' as const,
+ label: 'TC 수동 생성',
+ cards: [TcManualCard1, TcManualCard2]
+}
diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcOutputTab.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcOutputTab.tsx
new file mode 100644
index 0000000000..b234f7dbb2
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/TcOutputTab.tsx
@@ -0,0 +1,17 @@
+function TcOutputCard1() {
+ return TC 아웃풋 생성 first div content
+}
+
+function TcOutputCard2() {
+ return TC 아웃풋 생성 second div content
+}
+
+function TcOutputCard3() {
+ return TC 아웃풋 생성 third div content
+}
+
+export const TcOutputTab = {
+ value: 'tc-output' as const,
+ label: 'TC 아웃풋 생성',
+ cards: [TcOutputCard1, TcOutputCard2, TcOutputCard3]
+}
diff --git a/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/ValidationTab.tsx b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/ValidationTab.tsx
new file mode 100644
index 0000000000..71dc3bdb2b
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/(create)/problem/create/_components/tabs/ValidationTab.tsx
@@ -0,0 +1,13 @@
+function ValidationCard1() {
+ return 입력 검증 first div content
+}
+
+function ValidationCard2() {
+ return 입력 검증 second div content
+}
+
+export const ValidationTab = {
+ value: 'validation' as const,
+ label: '입력 검증',
+ cards: [ValidationCard1, ValidationCard2]
+}
diff --git a/apps/frontend/components/shadcn/tabs.tsx b/apps/frontend/components/shadcn/tabs.tsx
index 54edcaf0c6..2216194f70 100644
--- a/apps/frontend/components/shadcn/tabs.tsx
+++ b/apps/frontend/components/shadcn/tabs.tsx
@@ -14,7 +14,8 @@ const tabsListVariants = cva('inline-flex', {
outline: 'gap-0 rounded-full border-2 border-color-line p-1',
problem:
'items-center gap-0 rounded-full border border-color-line bg-white p-1',
- editor: 'gap-1 rounded bg-editor-background-1 py-1 px-1.5' // 수정: 넓은 간격, 둥근 모서리, 어두운 배경, 패딩
+ editor: 'gap-1 rounded bg-editor-background-1 py-1 px-1.5', // 수정: 넓은 간격, 둥근 모서리, 어두운 배경, 패딩
+ underline: 'gap-0 border-b border-color-line w-full'
}
},
defaultVariants: {
@@ -46,6 +47,11 @@ const tabsTriggerVariants = cva(
'rounded-sm text-xs font-normal px-2 py-1',
'data-[state=active]:bg-[#334155] data-[state=active]:text-primary-light',
'data-[state=inactive]:bg-transparent data-[state=inactive]:text-slate-100'
+ ],
+ underline: [
+ 'px-3 pb-4 text-sub3_sb_16 border-b-2',
+ 'data-[state=active]:border-primary data-[state=active]:text-primary',
+ 'data-[state=inactive]:border-transparent data-[state=inactive]:text-color-cool-neutral-40'
]
}
},