Skip to content

Commit

Permalink
Merge branch 'main' into 1269-add-bruno-docs-convention
Browse files Browse the repository at this point in the history
  • Loading branch information
dotoleeoak authored Jan 31, 2024
2 parents f3ea640 + e1ed6e2 commit 39ee885
Show file tree
Hide file tree
Showing 16 changed files with 863 additions and 193 deletions.
108 changes: 0 additions & 108 deletions frontend-client/app/problem/[id]/_components/Description.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import Skeleton from '@/components/ui/skeleton'

export default function DescriptionLoading() {
return (
<div className="flex h-fit flex-col gap-4 p-6 text-lg">
<Skeleton className="h-7 w-32 bg-slate-900" />
<div className="flex flex-col gap-1 ">
<Skeleton className="h-4 w-full bg-slate-900" />
<Skeleton className="h-4 w-full bg-slate-900" />
<Skeleton className="h-4 w-full bg-slate-900" />
</div>

{/*input*/}
<Skeleton className="h-7 w-16 bg-slate-900" />
<div className="flex flex-col gap-1">
<Skeleton className="h-4 w-full bg-slate-900" />
<Skeleton className="h-4 w-full bg-slate-900" />
<Skeleton className="h-4 w-full bg-slate-900" />
</div>
{/*output*/}
<Skeleton className="h-7 w-20 bg-slate-900" />
<div className="flex flex-col gap-1">
<Skeleton className="h-4 w-full bg-slate-900" />
<Skeleton className="h-4 w-full bg-slate-900" />
<Skeleton className="h-4 w-full bg-slate-900" />
</div>
{/*sample input*/}
<div className="flex items-center justify-between">
<Skeleton className="h-7 w-40 bg-slate-900" />
<Skeleton className="h-[23px] w-5 bg-slate-900" />
</div>
<Skeleton className="h-24 w-full bg-slate-900" />
{/*sample output*/}
<Skeleton className="h-7 w-40 bg-slate-900" />
<Skeleton className="h-24 w-full bg-slate-900" />
{/*other things*/}
<Skeleton className="h-7 w-40 bg-slate-900" />
<Skeleton className="h-7 w-40 bg-slate-900" />
<Skeleton className="h-7 w-40 bg-slate-900" />
<div className="mt-5 flex gap-2 ">
<Skeleton className="h-7 w-12 bg-slate-900" />
<Skeleton className="h-7 w-12 rounded-full bg-slate-900" />
</div>
<br />
<div className="mt-5 flex gap-3">
<Skeleton className="h-8 w-8 bg-slate-900" />
<Skeleton className="h-8 w-20 bg-slate-900" />
</div>
</div>
)
}
50 changes: 50 additions & 0 deletions frontend-client/app/problem/[id]/_components/EditorHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
'use client'

import SelectScrollable from '@/app/problem/[id]/_components/SelectScrollable'
import { Button } from '@/components/ui/button'
import { fetcherWithAuth } from '@/lib/utils'
import type { ProblemDetail } from '@/types/type'
import { TbReload } from 'react-icons/tb'

interface ProblemEditorProps {
data: ProblemDetail
langValue: string | undefined
}

export default function Editor({ data, langValue }: ProblemEditorProps) {
return (
<div className="flex shrink-0 items-center justify-between border-b border-b-slate-600 px-5">
<div className="cursor-pointer text-lg font-bold">Editor</div>
<div className="flex items-center gap-3">
<Button size="icon" className="size-7 shrink-0 rounded-md bg-slate-500">
<TbReload className="size-4" />
</Button>
<Button
className="bg-primary h-7 shrink-0 rounded-md px-2 font-semibold"
onClick={async () => {
const res = await fetcherWithAuth.post('submission', {
json: {
language: langValue,
code: [
{
id: 1,
text: '#include <stdio.h>\nint main() { int a, b; scanf("%d%d", &a, &b); printf("%d\\n", a + b);}',
locked: false
}
]
},
searchParams: {
problemId: data.id // 문제 ID
}
})
const submission = await res.json()
return submission
}}
>
Submit
</Button>
<SelectScrollable languages={data.languages} />
</div>
</div>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ interface HeaderEditorProps {
export default function HeaderEditor({ id, title }: HeaderEditorProps) {
const [eng, setEng] = useState(false) // FIXME: query로 받아오기
return (
<header className="flex h-12 shrink-0 justify-between bg-slate-800 px-4">
<header className="flex justify-between bg-slate-800 px-4">
<div className="flex items-center justify-center gap-6 font-bold text-slate-500">
<Link href="/">
<Image src={icon} alt="코드당" width={33} />
Expand Down
130 changes: 72 additions & 58 deletions frontend-client/app/problem/[id]/_components/MainResizablePanel.tsx
Original file line number Diff line number Diff line change
@@ -1,102 +1,116 @@
'use client'

import SelectScrollable from '@/app/problem/[id]/_components/SelectScrollable'
import { Button } from '@/components/ui/button'
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup
} from '@/components/ui/resizable'
import { useStorage } from '@/lib/hooks'
import type { ProblemDetail } from '@/types/type'
import { tags as t } from '@lezer/highlight'
// import { loadLanguage } from '@uiw/codemirror-extensions-langs'
import type { LanguageName } from '@uiw/codemirror-extensions-langs'
import { loadLanguage } from '@uiw/codemirror-extensions-langs'
import { createTheme } from '@uiw/codemirror-themes'
import type { Extension } from '@uiw/react-codemirror'
import CodeMirror from '@uiw/react-codemirror'
import { TbReload } from 'react-icons/tb'
import { Suspense } from 'react'
import Loading from '../loading'
import EditorHeader from './EditorHeader'
import Tab from './Tab'

// 우선 Editor 페이지에서 사용할 데이터들만 받아옴
interface ProblemEditorProps {
data: ProblemDetail
tabs: React.ReactNode
children: React.ReactNode
}

export default function MainResizablePanel({
data,
// children
tabs
children
}: {
data: ProblemEditorProps['data']
tabs: React.ReactNode
children: React.ReactNode
}) {
// code editor에 사용할 언어 선택
// const [selectLang, setSelectLang] = useState(data.languages[0].toLowerCase())
const editorTheme = createTheme({
theme: 'dark',
settings: {
background: '#1E293B',
backgroundImage: '',
foreground: '#75baff',
caret: '#5d00ff',
selection: '#036dd626',
selectionMatch: '#036dd626',
lineHighlight: '#8a91991a',
foreground: '#9cdcfe',
caret: '#c6c6c6',
selection: '#6199ff2f',
selectionMatch: '#72a1ff59',
lineHighlight: '#ffffff0f',
gutterBackground: '#1E293B',
gutterForeground: '#8a919966'
gutterActiveForeground: '#fff'
},
styles: [
{ tag: t.comment, color: '#787b8099' },
{ tag: t.variableName, color: '#0080ff' },
{ tag: [t.string, t.special(t.brace)], color: '#5c6166' },
{ tag: t.number, color: '#5c6166' },
{ tag: t.bool, color: '#5c6166' },
{ tag: t.null, color: '#5c6166' },
{ tag: t.keyword, color: '#5c6166' },
{ tag: t.operator, color: '#5c6166' },
{ tag: t.className, color: '#5c6166' },
{ tag: t.definition(t.typeName), color: '#5c6166' },
{ tag: t.typeName, color: '#5c6166' },
{ tag: t.angleBracket, color: '#5c6166' },
{ tag: t.tagName, color: '#5c6166' },
{ tag: t.attributeName, color: '#5c6166' }
]
{ tag: [t.standard(t.tagName), t.tagName], color: '#7ee787' },
{ tag: [t.comment, t.bracket], color: '#8b949e' },
{ tag: [t.className, t.propertyName], color: '#d2a8ff' },
{
tag: [t.variableName, t.attributeName, t.number, t.operator],
color: '#79c0ff'
},
{
tag: [t.keyword, t.typeName, t.typeOperator, t.typeName],
color: '#ff7b72'
},
{ tag: [t.string, t.meta, t.regexp], color: '#a5d6ff' },
{ tag: [t.name, t.quote], color: '#7ee787' },
{ tag: [t.heading, t.strong], color: '#d2a8ff', fontWeight: 'bold' },
{ tag: [t.emphasis], color: '#d2a8ff', fontStyle: 'italic' },
{ tag: [t.deleted], color: '#ffdcd7', backgroundColor: 'ffeef0' },
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#ffab70' },
{ tag: t.link, textDecoration: 'underline' },
{ tag: t.strikethrough, textDecoration: 'line-through' },
{ tag: t.invalid, color: '#f97583' }
],
theme: 'dark'
})
// get programming language from localStorage
const [langValue, setValue] = useStorage(
'programming_lang',
data.languages[0]
)

const editorLang =
langValue === 'Python3' ? 'python' : langValue?.toLowerCase()

// if langValue in storage is not in languages, set langValue to the first language
if (langValue && !data.languages.includes(langValue))
setValue(data.languages[0])

return (
<ResizablePanelGroup direction="horizontal" className="h-full">
<ResizablePanelGroup
direction="horizontal"
className="border border-slate-600"
>
<ResizablePanel
defaultSize={35}
style={{ overflowY: 'auto', minWidth: '400px' }}
style={{ minWidth: '400px' }}
minSize={20}
>
<Tab id={data.id} />
{tabs}
<div className="grid-rows-editor grid h-full">
<Tab id={data.id} />
<Suspense fallback={<Loading />}>{children}</Suspense>
</div>
</ResizablePanel>

<ResizableHandle withHandle />
<ResizablePanel
defaultSize={65}
className="bg-slate-800"
style={{ overflowY: 'auto' }}
>
<div className="flex h-[51px] shrink-0 items-center justify-between border-b border-b-slate-600 px-5">
<div className="cursor-pointer text-lg font-bold">Editor</div>
<div className="flex items-center gap-3">
<Button size="icon" className="size-7 rounded-md bg-slate-500">
<TbReload className="size-4" />
</Button>
<Button className="bg-primary h-7 rounded-md px-2 font-semibold">
Submit
</Button>
<SelectScrollable
languages={data.languages}
// setLang={setSelectLang}

<ResizablePanel defaultSize={65} className="shrink-0 bg-slate-800">
<div className="grid-rows-editor grid h-full">
<EditorHeader data={data} langValue={langValue} />
<div className="h-full overflow-auto">
<CodeMirror
theme={editorTheme}
className="h-full"
extensions={
[loadLanguage(editorLang as LanguageName)] as Extension[]
}
height="100%"
/>
</div>
</div>
<CodeMirror
theme={editorTheme}
// extensions={[loadLanguage(selectLang)] as any}
/>
</ResizablePanel>
</ResizablePanelGroup>
)
Expand Down
Loading

0 comments on commit 39ee885

Please sign in to comment.