feat(fe): make notice page

.devcontainer/devcontainer-lock.json

@@ -0,0 +1,24 @@
+{
+  "features": {
+    "ghcr.io/devcontainers-extra/features/pnpm:2": {
+      "version": "2.0.5",
+      "resolved": "ghcr.io/devcontainers-extra/features/pnpm@sha256:694c2b6182435c9e9c06f6071728b087c1181b38c18cecf0defe2ab8c11cddd6",
+      "integrity": "sha256:694c2b6182435c9e9c06f6071728b087c1181b38c18cecf0defe2ab8c11cddd6"
+    },
+    "ghcr.io/devcontainers/features/go:1": {
+      "version": "1.3.4",
+      "resolved": "ghcr.io/devcontainers/features/go@sha256:d85e921f91b41340055bb12b325d9d551170ed04b3b832e33530bf42f167c032",
+      "integrity": "sha256:d85e921f91b41340055bb12b325d9d551170ed04b3b832e33530bf42f167c032"
+    },
+    "ghcr.io/devcontainers/features/java:1": {
+      "version": "1.8.0",
+      "resolved": "ghcr.io/devcontainers/features/java@sha256:9663ce0219ff85786e87901ce5f0a59f488edd5f99b46015192cda48468b233a",
+      "integrity": "sha256:9663ce0219ff85786e87901ce5f0a59f488edd5f99b46015192cda48468b233a"
+    },
+    "ghcr.io/devcontainers/features/terraform:1": {
+      "version": "1.4.2",
+      "resolved": "ghcr.io/devcontainers/features/terraform@sha256:250d08e39c99d9e959e091e74527c22c04eeae728b424da99f002423c7902f82",
+      "integrity": "sha256:250d08e39c99d9e959e091e74527c22c04eeae728b424da99f002423c7902f82"
+    }
+  }
+}

apps/backend/apps/admin/src/group/group.resolver.ts

@@ -98,6 +98,7 @@ export class GroupResolver {
 }
 
 @Resolver(() => CourseNotice)
+@UseGroupLeaderGuard()
 export class CourseNoticeResolver {
   constructor(private readonly courseNoticeService: CourseNoticeService) {}
 

apps/backend/apps/client/src/group/group.service.ts

@@ -1235,9 +1235,7 @@ export class GroupService {
         ) {
           comment = {
             ...comment,
-            content: '',
-            createdBy: null,
-            createdById: null
+            content: ''
           }
         }
         if (!comment.replyOnId) {

apps/backend/libs/auth/src/roles/group-leader.guard.ts

@@ -26,12 +26,10 @@ export class GroupLeaderGuard implements CanActivate {
     let groupId: number
     if (context.getType<GqlContextType>() === 'graphql') {
       request = GqlExecutionContext.create(context).getContext().req
-      groupId = parseInt(
-        context
-          .getArgs()
-          .find((arg) => typeof arg === 'object' && 'groupId' in arg)
-          ?.groupId ?? 0
-      )
+      const gqlArg = context
+        .getArgs()
+        .find((arg) => typeof arg === 'object' && arg !== null)
+      groupId = parseInt(gqlArg?.groupId ?? gqlArg?.input?.groupId ?? 0)
     } else {
       request = context.switchToHttp().getRequest()
       groupId = parseInt(request.params.groupId)

apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseNoticeColumns.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { cn, dateFormatter } from '@/libs/utils'
+import type { ColumnDef } from '@tanstack/react-table'
+
+export interface CourseNoticeRow {
+  id: number
+  no: string
+  title: string
+  createdBy: string
+  date: string
+  isRead: boolean
+  isFixed: boolean
+}
+
+export const courseNoticeColumns: ColumnDef<CourseNoticeRow>[] = [
+  {
+    accessorKey: 'no',
+    header: 'NO',
+    cell: ({ row }) => (
+      <div
+        className={cn(
+          'relative w-full text-center text-sm text-[#666666]',
+          row.original.isFixed &&
+            "before:bg-primary before:absolute before:left-[-16px] before:top-[-18px] before:h-[57px] before:w-[3px] before:rounded-full before:content-['']"
+        )}
+      >
+        {row.original.no}
+      </div>
+    ),
+    enableSorting: false
+  },
+  {
+    accessorKey: 'title',
+    header: 'Title',
+    cell: ({ row }) => (
+      <div className="flex items-center justify-start gap-2 overflow-hidden text-sm text-black">
+        <span className="line-clamp-1">{row.original.title}</span>
+        {!row.original.isRead && (
+          <span className="bg-primary h-[6px] w-[6px] shrink-0 rounded-full" />
+        )}
+      </div>
+    ),
+    enableSorting: false
+  },
+  {
+    accessorKey: 'date',
+    header: 'Date',
+    cell: ({ row }) => (
+      <span className="text-sm text-[#666666]">
+        {row.original.date
+          ? dateFormatter(row.original.date, 'YY-MM-DD HH:mm')
+          : '-'}
+      </span>
+    ),
+    enableSorting: false
+  },
+  {
+    accessorKey: 'createdBy',
+    header: 'Writer',
+    cell: ({ row }) => (
+      <span className="text-sm text-[#666666]">{row.original.createdBy}</span>
+    ),
+    enableSorting: false
+  }
+]

apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseNoticeTable.tsx

@@ -0,0 +1,192 @@
+'use client'
+
+import {
+  DataTable,
+  DataTablePagination,
+  DataTableRoot
+} from '@/app/admin/_components/table'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/shadcn/dropdown-menu'
+import { cn, safeFetcherWithAuth } from '@/libs/utils'
+import ArrowDownIcon from '@/public/icons/arrow-down.svg'
+import type {
+  CourseNoticeListItem,
+  CourseNoticeListResponse
+} from '@/types/type'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo, useState } from 'react'
+import {
+  courseNoticeColumns,
+  type CourseNoticeRow
+} from './CourseNoticeColumns'
+
+type FilterType = 'all' | 'unread'
+type OrderType = 'latest' | 'oldest'
+
+interface CourseNoticeTableProps {
+  courseId: number
+}
+
+const getTime = (notice: CourseNoticeListItem) =>
+  new Date(notice.createTime ?? notice.updateTime ?? 0).getTime()
+
+export function CourseNoticeTable({ courseId }: CourseNoticeTableProps) {
+  const [filterType, setFilterType] = useState<FilterType>('all')
+  const [orderType, setOrderType] = useState<OrderType | undefined>()
+
+  let orderLabel = 'Order'
+
+  if (orderType === 'latest') {
+    orderLabel = 'Latest'
+  } else if (orderType === 'oldest') {
+    orderLabel = 'Oldest'
+  }
+
+  const { data: notices = [] } = useQuery<CourseNoticeListItem[]>({
+    queryKey: ['courseNotices', courseId],
+    queryFn: async () => {
+      const [fixedRes, normalRes] = await Promise.all([
+        safeFetcherWithAuth
+          .get(`course/${courseId}/notice/all`, {
+            searchParams: {
+              take: '100',
+              fixed: 'true',
+              readFilter: 'all',
+              order: 'createTime-desc'
+            }
+          })
+          .json<CourseNoticeListResponse>(),
+        safeFetcherWithAuth
+          .get(`course/${courseId}/notice/all`, {
+            searchParams: {
+              take: '100',
+              fixed: 'false',
+              readFilter: 'all',
+              order: 'createTime-desc'
+            }
+          })
+          .json<CourseNoticeListResponse>()
+      ])
+      return [...fixedRes.data, ...normalRes.data]
+    },
+    enabled: Boolean(courseId)
+  })
+
+  const tableData: CourseNoticeRow[] = useMemo(() => {
+    const filtered =
+      filterType === 'unread' ? notices.filter((n) => !n.isRead) : notices
+    const noMap = new Map(
+      [...filtered]
+        .sort((a, b) => getTime(a) - getTime(b))
+        .map((n, i) => [n.id, i + 1])
+    )
+    return [...filtered]
+      .sort((a, b) => {
+        if (a.isFixed !== b.isFixed) {
+          return a.isFixed ? -1 : 1
+        }
+        return orderType === 'oldest'
+          ? getTime(a) - getTime(b)
+          : getTime(b) - getTime(a)
+      })
+      .map((n) => ({
+        id: n.id,
+        no: String(noMap.get(n.id) ?? 0).padStart(2, '0'),
+        title: n.title,
+        createdBy: n.createdBy ?? 'Unknown',
+        date: n.createTime ?? n.updateTime ?? '',
+        isRead: n.isRead,
+        isFixed: n.isFixed
+      }))
+  }, [notices, filterType, orderType])
+
+  return (
+    <DataTableRoot
+      data={tableData}
+      columns={courseNoticeColumns}
+      defaultPageSize={10}
+      defaultSortState={[]}
+    >
+      <div className="mb-6 flex items-center justify-between">
+        <span className="text-2xl font-semibold leading-[33.6px] tracking-[-0.48px]">
+          NOTICE
+        </span>
+
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                className="text-color-neutral-50 w-30 border-line flex h-[46px] items-center justify-center gap-2 rounded-full border bg-white text-sm font-medium leading-[22.4px] tracking-[-0.48px] outline-none"
+              >
+                <span>{orderLabel}</span>
+                <ArrowDownIcon className="h-4 w-4" />
+              </button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+              align="end"
+              className="border-line min-w-[108px] rounded-[16px] border bg-white p-1"
+            >
+              <DropdownMenuItem
+                onClick={() => setOrderType('latest')}
+                className="cursor-pointer rounded-[10px] text-sm leading-[22.4px] text-neutral-500"
+              >
+                Latest
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => setOrderType('oldest')}
+                className="cursor-pointer rounded-[10px] text-sm leading-[22.4px] text-neutral-500"
+              >
+                Oldest
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <div className="border-line flex h-[46px] w-[250px] items-center rounded-full border bg-white p-[5px]">
+            {(['all', 'unread'] as const).map((type) => (
+              <button
+                key={type}
+                type="button"
+                onClick={() => setFilterType(type)}
+                className={cn(
+                  'text-body1_m_16 w-30 flex h-9 items-center justify-center rounded-full',
+                  filterType === type
+                    ? 'bg-primary text-white'
+                    : 'text-[#808080]'
+                )}
+              >
+                {type === 'all' ? 'All' : 'Unread'}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <DataTable
+        size="md"
+        headerStyle={{
+          no: 'w-[80px]',
+          title: '',
+          date: 'w-[180px]',
+          createdBy: 'w-[110px]'
+        }}
+        bodyStyle={{
+          no: 'text-center',
+          title: 'justify-start',
+          date: 'text-center',
+          createdBy: 'text-center'
+        }}
+        getHref={(row) => `/course/${courseId}/notice/${row.id}`}
+      />
+
+      <div className="mt-10">
+        <DataTablePagination showRowsPerPage={false} />
+      </div>
+    </DataTableRoot>
+  )
+}

apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseSidebar.tsx

@@ -9,6 +9,7 @@ import { usePathname } from 'next/navigation'
 import { useState } from 'react'
 import { FaAnglesLeft, FaAnglesRight } from 'react-icons/fa6'
 import {
+  NoticeIcon,
   AssignmentIcon,
   ExerciseIcon,
   QnaIcon
@@ -24,6 +25,11 @@ export function CourseSidebar({ courseId }: CourseSidebarProps) {
   const pathname = usePathname()
 
   const navItems = [
+    {
+      name: 'Notice',
+      path: `/course/${courseId}/notice` as const,
+      icon: NoticeIcon
+    },
     {
       name: 'Assignment',
       path: `/course/${courseId}/assignment` as const,