feat(fe): create my-problem tab

apps/frontend/app/(client)/(main)/problem/_components/MyProblem.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { Skeleton } from '@/components/shadcn/skeleton'
+import type { Problem } from '@/types/type'
+import { useSearchParams } from 'next/navigation'
+import { MyProblemDataTable } from './MyProblemDataTable'
+
+export interface MyProblemCardItem extends Problem {
+  state: 'Draft' | 'Ready' | 'Published'
+  timeLimit: number
+  memoryLimit: number
+  updatedAt: string
+}
+
+interface MyProblemProps {
+  forceEmpty?: boolean
+}
+
+const MOCK_MY_PROBLEMS: MyProblemCardItem[] = Array.from(
+  { length: 48 },
+  (_, index) => {
+    const id = 3000 + index + 1
+    const difficulty = `Level${(index % 5) + 1}` as Problem['difficulty']
+    const submissionCount = 24 + index * 7
+    const acceptedRate = ((index % 9) + 2) / 12
+    const states: MyProblemCardItem['state'][] = ['Published', 'Draft', 'Ready']
+
+    return {
+      id,
+      title: `글자 수 상관 없음. 단, 한 줄로만 노출되는 Mock My Problem ${index + 1}`,
+      difficulty,
+      submissionCount,
+      acceptedRate,
+      tags: [],
+      languages: ['C', 'Cpp', 'Java', 'Python3'],
+      hasPassed: null,
+      state: states[index % states.length],
+      timeLimit: 1000 + (index % 4) * 500,
+      memoryLimit: 128 + (index % 3) * 64,
+      updatedAt: `2024-01-${String((index % 24) + 1).padStart(2, '0')} 19:00`
+    }
+  }
+)
+
+export function MyProblem({ forceEmpty = false }: MyProblemProps) {
+  const searchParams = useSearchParams()
+  const search = searchParams.get('search') ?? ''
+  const normalizedSearch = search.trim().toLowerCase()
+
+  const filteredProblems = MOCK_MY_PROBLEMS.filter((problem) => {
+    if (!normalizedSearch) {
+      return true
+    }
+
+    return (
+      problem.title.toLowerCase().includes(normalizedSearch) ||
+      String(problem.id).includes(normalizedSearch)
+    )
+  })
+
+  const data = forceEmpty ? [] : filteredProblems
+
+  return <MyProblemDataTable data={data} search={search} />
+}
+
+export function MyProblemFallback() {
+  return (
+    <div className="flex w-full flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-10 w-40 rounded-xl" />
+        <div className="flex gap-3">
+          <Skeleton className="h-12 w-28 rounded-full" />
+          <Skeleton className="h-12 w-72 rounded-full" />
+          <Skeleton className="h-12 w-36 rounded-full" />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+        {[...Array(8)].map((_, i) => (
+          <div
+            key={i}
+            className="border-line overflow-hidden rounded-[24px] border"
+          >
+            <Skeleton className="h-40 w-full rounded-none" />
+            <div className="space-y-4 p-5">
+              <Skeleton className="h-7 w-20 rounded-md" />
+              <Skeleton className="h-7 w-full rounded-md" />
+              <Skeleton className="h-6 w-2/3 rounded-md" />
+              <Skeleton className="h-5 w-1/2 rounded-md" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

apps/frontend/app/(client)/(main)/problem/_components/MyProblemDataTable.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import { SearchBar } from '@/components/SearchBar'
+import { Button } from '@/components/shadcn/button'
+import { cn } from '@/libs/utils'
+import ClockGray from '@/public/icons/clock_gray.svg'
+import Memory from '@/public/icons/memory.svg'
+import PlusCircle from '@/public/icons/plus-circle-blue.svg'
+import type { Route } from 'next'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useState } from 'react'
+import type { MyProblemCardItem } from './MyProblem'
+import {
+  MyProblemStateFilter,
+  STATE_FILTER_OPTIONS
+} from './MyProblemStateFilter'
+
+interface MyProblemDataTableProps {
+  data: MyProblemCardItem[]
+  search: string
+}
+
+const stateBadgeClassName = {
+  Draft: {
+    container: 'border border-line bg-color-neutral-99',
+    text: 'text-color-neutral-70'
+  },
+  Ready: {
+    container: 'border border-color-green-50 bg-white',
+    text: 'text-color-green-40'
+  },
+  Published: {
+    container: 'bg-[#EDF4FF]',
+    text: 'text-primary'
+  }
+} as const
+
+function getStateBadgeClassName(state: string) {
+  if (state === 'Draft' || state === 'DRAFT') {
+    return stateBadgeClassName.Draft
+  }
+
+  if (state === 'Ready' || state === 'READY') {
+    return stateBadgeClassName.Ready
+  }
+
+  return stateBadgeClassName.Published
+}
+
+export function MyProblemDataTable({ data, search }: MyProblemDataTableProps) {
+  const [selectedStates, setSelectedStates] = useState<
+    MyProblemCardItem['state'][]
+  >([])
+
+  const filteredData =
+    selectedStates.length === 0 ||
+    selectedStates.length === STATE_FILTER_OPTIONS.length
+      ? data
+      : data.filter((problem) => selectedStates.includes(problem.state))
+
+  return (
+    <div className="flex w-full flex-col items-center">
+      <div className="flex w-full items-center justify-between self-stretch">
+        <div className="flex shrink-0 items-center justify-start">
+          <p className="text-head3_sb_28 whitespace-nowrap">내가 만든 문제</p>
+        </div>
+        <div className="flex w-full flex-col gap-3 lg:flex-row lg:items-center lg:justify-end">
+          <MyProblemStateFilter
+            selectedStates={selectedStates}
+            onSelectedStatesChange={setSelectedStates}
+          />
+          <SearchBar className="w-60" sizeVariant="lg" />
+          <Button
+            asChild
+            className="text-body1_m_16 bg-primary h-[46px] shrink-0 whitespace-nowrap rounded-full px-[22px] py-2.5"
+          >
+            <Link
+              href="/problem/create"
+              className="flex items-center justify-center gap-1.5 whitespace-nowrap"
+            >
+              <Image
+                src={PlusCircle}
+                alt="plus circle"
+                width={20}
+                height={20}
+              />
+              새 문제 생성
+            </Link>
+          </Button>
+        </div>
+      </div>
+      {filteredData.length ? (
+        <div className="mb-30 mt-5 grid w-full grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+          {filteredData.map((problem) => {
+            const href =
+              `/problem/my-problem/${problem.id}${search ? `?search=${search}` : ''}` as Route
+            const badgeClassName = getStateBadgeClassName(problem.state)
+
+            return (
+              <Link
+                key={problem.id}
+                href={href}
+                className="bg-background outline-color-cool-neutral-90 inline-flex w-full flex-col items-start gap-5 rounded-2xl p-5 outline outline-1 outline-offset-[-1px] transition-transform duration-200 hover:-translate-y-1"
+              >
+                <div className="flex w-full flex-col items-start gap-3">
+                  <div
+                    className={cn(
+                      'inline-flex items-center justify-center gap-2.5 rounded px-2.5 py-1',
+                      badgeClassName.container
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        'text-caption1_m_13 text-center',
+                        badgeClassName.text
+                      )}
+                    >
+                      {problem.state}
+                    </span>
+                  </div>
+                  <p className="text-title1_sb_20 line-clamp-1 self-stretch">
+                    {problem.title}
+                  </p>
+                </div>
+                <div className="flex w-full flex-col items-start gap-2">
+                  <div className="inline-flex items-start justify-start gap-2 self-stretch">
+                    <div className="flex items-center justify-start gap-1">
+                      <Image
+                        src={ClockGray}
+                        alt="clock gray"
+                        width={20}
+                        height={20}
+                      />
+                      <span className="text-caption3_r_13">
+                        {problem.timeLimit}ms
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-start gap-1">
+                      <Image src={Memory} alt="memory" width={20} height={20} />
+                      <span className="text-caption3_r_13">
+                        {problem.memoryLimit}MB
+                      </span>
+                    </div>
+                  </div>
+                  <div className="inline-flex items-center justify-start gap-1">
+                    <span className="text-caption3_r_13 text-color-neutral-90 justify-start text-right">
+                      Last Modified:
+                    </span>
+                    <span className="text-caption3_r_13 justify-start text-right text-gray-500">
+                      {problem.updatedAt}
+                    </span>
+                  </div>
+                </div>
+              </Link>
+            )
+          })}
+        </div>
+      ) : (
+        <MyProblemEmptyState />
+      )}
+    </div>
+  )
+}
+
+function MyProblemEmptyState() {
+  return (
+    <div className="border-line mb-30 mt-5 flex h-[266px] w-full items-center justify-center rounded-xl border bg-white py-20">
+      <div className="flex flex-col items-center gap-[16px] text-center">
+        <p className="text-sub1_sb_18 text-color-neutral-30">
+          내가 만든 문제가
+          <br />
+          존재하지 않습니다.
+        </p>
+        <Button
+          asChild
+          className="text-sub4_sb_14 bg-primary h-10 shrink-0 whitespace-nowrap rounded-lg px-3 py-2.5"
+        >
+          <Link href="/problem/create">새 문제 생성하기</Link>
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/frontend/app/(client)/(main)/problem/_components/MyProblemStateFilter.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { Badge } from '@/components/shadcn/badge'
+import { Button } from '@/components/shadcn/button'
+import { Checkbox } from '@/components/shadcn/checkbox'
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList
+} from '@/components/shadcn/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '@/components/shadcn/popover'
+import { Separator } from '@/components/shadcn/separator'
+import { IoFilter } from 'react-icons/io5'
+import type { MyProblemCardItem } from './MyProblem'
+
+export const STATE_FILTER_OPTIONS: MyProblemCardItem['state'][] = [
+  'Published',
+  'Ready',
+  'Draft'
+]
+
+interface MyProblemStateFilterProps {
+  selectedStates: MyProblemCardItem['state'][]
+  onSelectedStatesChange: (states: MyProblemCardItem['state'][]) => void
+}
+
+export function MyProblemStateFilter({
+  selectedStates,
+  onSelectedStatesChange
+}: MyProblemStateFilterProps) {
+  const selectedValues = new Set(selectedStates)
+
+  const handleFilterSelect = (value: MyProblemCardItem['state']) => {
+    const nextSelectedValues = new Set(selectedValues)
+
+    if (nextSelectedValues.has(value)) {
+      nextSelectedValues.delete(value)
+    } else {
+      nextSelectedValues.add(value)
+    }
+
+    onSelectedStatesChange(Array.from(nextSelectedValues))
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className="border-line text-body1_m_16 h-[46px] min-w-28 justify-center rounded-full border px-5 py-[11px] text-black"
+        >
+          <IoFilter className="text-color-cool-neutral-30 mr-2 h-5 w-5" />
+          State
+          {selectedValues.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <div className="flex gap-1">
+                {selectedValues.size === STATE_FILTER_OPTIONS.length ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-xs px-1 font-normal"
+                  >
+                    All
+                  </Badge>
+                ) : (
+                  STATE_FILTER_OPTIONS.filter((state) =>
+                    selectedValues.has(state)
+                  ).map((state) => (
+                    <Badge
+                      key={state}
+                      variant="secondary"
+                      className="rounded-xs px-1 font-normal"
+                    >
+                      {state}
+                    </Badge>
+                  ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-[112px] p-0" align="start">
+        <Command>
+          <CommandList>
+            <CommandGroup>
+              {STATE_FILTER_OPTIONS.map((state) => (
+                <CommandItem
+                  key={state}
+                  value={state}
+                  className="gap-x-1"
+                  onSelect={() => handleFilterSelect(state)}
+                >
+                  <Checkbox checked={selectedValues.has(state)} />
+                  {state}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}