diff --git a/.devcontainer/devcontainer-lock.json b/.devcontainer/devcontainer-lock.json
new file mode 100644
index 0000000000..ef595a51f6
--- /dev/null
+++ b/.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"
+    }
+  }
+}
diff --git a/apps/backend/apps/admin/src/group/group.resolver.ts b/apps/backend/apps/admin/src/group/group.resolver.ts
index 25aeba63f6..98f3207170 100644
--- a/apps/backend/apps/admin/src/group/group.resolver.ts
+++ b/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) {}
 
diff --git a/apps/backend/apps/client/src/group/group.service.ts b/apps/backend/apps/client/src/group/group.service.ts
index c8cc7adb49..f75f534d9c 100644
--- a/apps/backend/apps/client/src/group/group.service.ts
+++ b/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) {
diff --git a/apps/backend/libs/auth/src/roles/group-leader.guard.ts b/apps/backend/libs/auth/src/roles/group-leader.guard.ts
index 722cdefe84..87f9950893 100644
--- a/apps/backend/libs/auth/src/roles/group-leader.guard.ts
+++ b/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)
diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseNoticeColumns.tsx b/apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseNoticeColumns.tsx
new file mode 100644
index 0000000000..6c8ace8ee2
--- /dev/null
+++ b/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
+  }
+]
diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseNoticeTable.tsx b/apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseNoticeTable.tsx
new file mode 100644
index 0000000000..ced3409845
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseSidebar.tsx b/apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseSidebar.tsx
index c8a82b6da5..139887acab 100644
--- a/apps/frontend/app/(client)/(main)/course/[courseId]/_components/CourseSidebar.tsx
+++ b/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,
diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeCommentCard.tsx b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeCommentCard.tsx
new file mode 100644
index 0000000000..ca141512bf
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeCommentCard.tsx
@@ -0,0 +1,326 @@
+'use client'
+
+import { cn, dateFormatter } from '@/libs/utils'
+import ExclamationMarkIcon from '@/public/icons/exclamation_mark.svg'
+import LockBlueIcon from '@/public/icons/lock_blue.svg'
+import TrashcanIcon from '@/public/icons/trashcan2_grey.svg'
+import type { CourseNoticeCommentItem } from '@/types/type'
+import { BiSolidPencil } from 'react-icons/bi'
+import { IoTime } from 'react-icons/io5'
+
+interface NoticeCommentCardProps {
+  comment: CourseNoticeCommentItem
+  replyCount?: number
+  isReply?: boolean
+  profileUsername?: string
+  isAdmin?: boolean
+  isReplyOpen: boolean
+  editingCommentId: number | null
+  onReplyToggle: (commentId: number) => void
+  onEditStart: (comment: CourseNoticeCommentItem) => void
+  onDelete: (commentId: number) => void
+  renderEditEditor: () => React.ReactNode
+  hasReplySection?: boolean
+}
+
+export function NoticeCommentCard({
+  comment,
+  replyCount = 0,
+  isReply = false,
+  profileUsername,
+  isAdmin = false,
+  hasReplySection = false,
+  isReplyOpen,
+  editingCommentId,
+  onReplyToggle,
+  onEditStart,
+  onDelete,
+  renderEditEditor
+}: NoticeCommentCardProps) {
+  const writerUsername = comment.createdBy?.username ?? ''
+  const writerStudentId = comment.createdBy?.studentId ?? ''
+
+  const maskedStudentId = writerStudentId
+    ? `${writerStudentId.slice(0, 4)}${'#'.repeat(
+        Math.max(writerStudentId.length - 4, 0)
+      )}`
+    : ''
+
+  const isMine = Boolean(
+    profileUsername && writerUsername && profileUsername === writerUsername
+  )
+
+  const isEdited =
+    new Date(comment.createdTime).getTime() !==
+    new Date(comment.updateTime).getTime()
+
+  const isDeleted = comment.isDeleted
+  const isHiddenMasked =
+    comment.isSecret && !comment.isDeleted && comment.content === ''
+  const isMasked = isDeleted || isHiddenMasked
+
+  const canEdit = isMine && !isDeleted && Boolean(comment.createdBy)
+  const canDelete =
+    !isDeleted && Boolean(comment.createdBy) && (isMine || isAdmin)
+
+  const displayWriter = (() => {
+    if (isDeleted) {
+      return ''
+    }
+
+    if (!writerUsername) {
+      return ''
+    }
+
+    if (maskedStudentId) {
+      return `${writerUsername} (${maskedStudentId})`
+    }
+
+    return writerUsername
+  })()
+
+  const displayContent = (() => {
+    if (isDeleted) {
+      return comment.replyOnId
+        ? 'This is a Deleted Reply'
+        : 'This is a Deleted Comment'
+    }
+
+    if (isHiddenMasked) {
+      return comment.replyOnId
+        ? 'This is a Hidden Reply'
+        : 'This is a Hidden Comment'
+    }
+
+    return comment.content
+  })()
+
+  if (isReply && isDeleted) {
+    return (
+      <div className="bg-color-neutral-95 rounded-xl px-6 py-4">
+        {displayWriter && (
+          <div className="text-sub2_m_18 mb-2">{displayWriter}</div>
+        )}
+        <div className="text-body1_m_16 text-color-neutral-60 flex items-center gap-2">
+          <ExclamationMarkIcon className="relative top-[-4px] mr-3 h-4 w-4 shrink-0 overflow-visible" />
+          {displayContent}
+        </div>
+      </div>
+    )
+  }
+
+  if (isReply && isHiddenMasked) {
+    return (
+      <div className="bg-color-neutral-95 rounded-xl px-6 py-4">
+        {displayWriter && (
+          <div className="text-sub2_m_18 mb-[2px]">{displayWriter}</div>
+        )}
+        <div className="text-caption3_r_13 text-color-cool-neutral-50 mb-5 flex items-center gap-1">
+          <IoTime className="text-color-blue-50 h-[14px] w-[14px]" />
+          <span>
+            {dateFormatter(comment.createdTime, 'YYYY-MM-DD HH:mm:ss')}
+          </span>
+        </div>
+        <div className="text-body1_m_16 text-color-neutral-60 flex items-center gap-2">
+          <ExclamationMarkIcon className="relative top-[-4px] mr-3 h-4 w-4 shrink-0 overflow-visible" />
+          {displayContent}
+        </div>
+      </div>
+    )
+  }
+
+  if (!isReply && isHiddenMasked) {
+    return (
+      <div
+        className={cn(
+          'border px-6 py-6',
+          hasReplySection ? 'rounded-b-none rounded-t-xl' : 'rounded-xl',
+          'border-color-neutral-95'
+        )}
+      >
+        {displayWriter && (
+          <div className="mb-[2px] flex items-center gap-2">
+            <span className="text-sub2_m_18">{displayWriter}</span>
+            <span className="bg-color-blue-90 text-caption1_m_13 text-primary rounded-[4px] px-2 py-1">
+              <LockBlueIcon
+                width={14}
+                height={14}
+                className="mr-1 inline-block align-[-2px]"
+              />
+              Hidden
+            </span>
+          </div>
+        )}
+        <div className="text-caption3_r_13 text-color-cool-neutral-50 flex items-center gap-1">
+          <IoTime className="text-color-blue-50 h-[14px] w-[14px]" />
+          <span>
+            {dateFormatter(comment.createdTime, 'YYYY-MM-DD HH:mm:ss')}
+          </span>
+        </div>
+        <div className="text-body1_m_16 text-color-neutral-60 mt-5 flex items-center">
+          <ExclamationMarkIcon className="relative top-[-4px] mr-3 h-4 w-4 shrink-0 overflow-visible" />
+          {displayContent}
+        </div>
+        <button
+          type="button"
+          onClick={() => onReplyToggle(comment.id)}
+          className="text-caption3_r_13 text-color-neutral-70 border-line mt-2 border-b"
+        >
+          {isReplyOpen ? 'Hide Reply' : 'Reply'}
+          {!isReplyOpen && (
+            <span className="text-primary ml-1">{replyCount}</span>
+          )}
+        </button>
+      </div>
+    )
+  }
+
+  const isEditing = editingCommentId === comment.id
+
+  const containerClassName = (() => {
+    if (isReply && isEditing) {
+      return 'bg-color-neutral-99 rounded-xl px-6 py-6'
+    }
+
+    if (isReply) {
+      return 'bg-transparent p-6'
+    }
+
+    return cn(
+      'border px-6 py-6',
+      hasReplySection ? 'rounded-b-none rounded-t-xl' : 'rounded-xl'
+    )
+  })()
+
+  const borderClassName = (() => {
+    if (isReply) {
+      return ''
+    }
+
+    if (!isMasked && isMine) {
+      return 'border-primary'
+    }
+
+    return 'border-color-neutral-95'
+  })()
+
+  return (
+    <div className={cn(containerClassName, borderClassName)}>
+      {!isDeleted && (
+        <div className="flex items-start justify-between gap-6">
+          <div className="flex min-w-0 flex-1 flex-col gap-[2px]">
+            {displayWriter ? (
+              <div className="flex items-center gap-2">
+                <span className="text-sub2_m_18">{displayWriter}</span>
+
+                {comment.isSecret && Boolean(comment.createdBy) && (
+                  <span className="bg-color-blue-90 text-caption1_m_13 text-primary rounded-[4px] px-2 py-1">
+                    <LockBlueIcon
+                      width={14}
+                      height={14}
+                      className="mr-1 inline-block align-[-2px]"
+                    />
+                    Hidden
+                  </span>
+                )}
+              </div>
+            ) : null}
+
+            <div className="text-caption3_r_13 text-color-cool-neutral-50 flex items-center gap-1">
+              <IoTime className="text-color-blue-50 h-[14px] w-[14px]" />
+              <span>
+                {dateFormatter(
+                  isEdited ? comment.updateTime : comment.createdTime,
+                  'YYYY-MM-DD HH:mm:ss'
+                )}
+              </span>
+
+              {isEdited && (
+                <span className="bg-color-cool-neutral-95 text-color-cool-neutral-60 text-caption3_r_13 rounded-[4px] px-2 py-1">
+                  Modified
+                </span>
+              )}
+            </div>
+          </div>
+
+          {(canEdit || canDelete) && (
+            <div className="flex items-center gap-2">
+              {canEdit && (
+                <button
+                  type="button"
+                  onClick={() => onEditStart(comment)}
+                  className="text-caption2_m_12 border-primary text-primary flex h-9 items-center justify-center gap-1 rounded-full border py-[9px] pl-[18px] pr-[22px]"
+                >
+                  <BiSolidPencil className="mr-1 h-[18px] w-[18px]" />
+                  Edit
+                </button>
+              )}
+
+              {canDelete && (
+                <button
+                  type="button"
+                  onClick={() => onDelete(comment.id)}
+                  className="w-13 border-color-neutral-90 bg-color-neutral-99 flex h-10 items-center justify-center rounded-full border px-4 py-[10px]"
+                >
+                  <TrashcanIcon width={20} height={20} />
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {!isReply && (
+        <div
+          className={cn(
+            'whitespace-pre-wrap',
+            isMasked
+              ? 'text-color-neutral-60 text-body1_m_16 flex items-center'
+              : 'text-body1_m_16 mt-5'
+          )}
+        >
+          {isMasked ? (
+            <ExclamationMarkIcon className="relative top-[-4px] mr-3 h-4 w-4 shrink-0 overflow-visible" />
+          ) : (
+            comment.isSecret &&
+            !comment.isDeleted &&
+            !comment.createdBy && (
+              <LockBlueIcon
+                width={14}
+                height={14}
+                className="mr-2 inline-block align-[-2px]"
+              />
+            )
+          )}
+          {displayContent}
+        </div>
+      )}
+
+      {isReply && !isDeleted && (
+        <div className="text-body1_m_16 mt-5 whitespace-pre-wrap">
+          {comment.content}
+        </div>
+      )}
+
+      {!isReply && (
+        <button
+          type="button"
+          onClick={() => onReplyToggle(comment.id)}
+          className={cn(
+            'text-caption3_r_13 text-color-neutral-70 border-line border-b',
+            isMasked ? 'mt-2' : 'mt-5'
+          )}
+        >
+          {isReplyOpen ? 'Hide Reply' : 'Reply'}
+          {!isReplyOpen && (
+            <span className="text-primary ml-1">{replyCount}</span>
+          )}
+        </button>
+      )}
+
+      {editingCommentId === comment.id && (
+        <div className="mt-4">{renderEditEditor()}</div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeCommentEditor.tsx b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeCommentEditor.tsx
new file mode 100644
index 0000000000..6cc10f28d7
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeCommentEditor.tsx
@@ -0,0 +1,130 @@
+'use client'
+
+import { Button } from '@/components/shadcn/button'
+import { useEffect, useRef } from 'react'
+import { BiSolidPencil } from 'react-icons/bi'
+
+interface NoticeCommentEditorProps {
+  value: string
+  setValue: (value: string) => void
+  secret: boolean
+  setSecret: (value: boolean) => void
+  onSubmit: () => void
+  placeholder: string
+  submitText: string
+  disabled: boolean
+  compact?: boolean
+  autoResize?: boolean
+  isReplyEdit?: boolean
+}
+
+export function NoticeCommentEditor({
+  value,
+  setValue,
+  secret,
+  setSecret,
+  onSubmit,
+  placeholder,
+  compact = false,
+  autoResize = false,
+  submitText = 'Post',
+  disabled = false,
+  isReplyEdit = false
+}: NoticeCommentEditorProps) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+
+  useEffect(() => {
+    if (!autoResize || !textareaRef.current) {
+      return
+    }
+    textareaRef.current.style.height = 'auto'
+    textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`
+  }, [value, autoResize])
+
+  return (
+    <div
+      className={
+        compact
+          ? `rounded-xl ${isReplyEdit ? 'bg-color-neutral-99' : 'bg-white'}`
+          : 'border-color-neutral-95 rounded-xl border bg-white p-6'
+      }
+    >
+      <div className="flex flex-col">
+        <div className={compact ? 'flex items-center gap-2' : 'relative gap-3'}>
+          <div
+            className={
+              compact
+                ? 'border-color-neutral-95 flex flex-1 items-center justify-between gap-2 rounded-xl border px-4 py-[11px]'
+                : 'relative gap-3'
+            }
+          >
+            <textarea
+              ref={textareaRef}
+              rows={compact ? 1 : 6}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              placeholder={placeholder}
+              maxLength={1000}
+              className={
+                compact
+                  ? 'text-body1_m_16 placeholder:text-color-neutral-90 h-6 min-h-0 flex-1 resize-none overflow-hidden border-none bg-transparent p-0 focus:outline-none'
+                  : 'text-body1_m_16 placeholder:text-color-neutral-90 min-h-[96px] w-full resize-none focus:outline-none'
+              }
+            />
+
+            {compact && (
+              <div className="text-caption1_m_13 text-color-cool-neutral-50 shrink-0">
+                {value.length}/1000
+              </div>
+            )}
+
+            {!compact && (
+              <div className="text-caption1_m_13 text-color-neutral-90 absolute right-0">
+                {value.length}/1000
+              </div>
+            )}
+          </div>
+
+          {compact && (
+            <Button
+              type="button"
+              onClick={onSubmit}
+              disabled={disabled}
+              className="text-caption2_m_12 flex h-10 rounded-full px-6 py-3"
+            >
+              <BiSolidPencil className="mr-[6px] h-4 w-4" />
+              {submitText}
+            </Button>
+          )}
+        </div>
+
+        <label
+          className={`text-caption2_m_12 flex items-center gap-[6px] ${compact ? 'mt-2' : 'mt-3'} ${
+            secret ? 'text-primary' : 'text-color-neutral-80'
+          }`}
+        >
+          <input
+            type="checkbox"
+            checked={secret}
+            onChange={(e) => setSecret(e.target.checked)}
+          />
+          Hide from other Students
+        </label>
+
+        {!compact && (
+          <div className="mt-4 flex items-center gap-2">
+            <Button
+              type="button"
+              onClick={onSubmit}
+              disabled={disabled}
+              className="text-caption2_m_12 flex h-10 flex-1 rounded-full px-6 py-3"
+            >
+              <BiSolidPencil className="mr-[6px] h-4 w-4" />
+              {submitText}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeCommentsSection.tsx b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeCommentsSection.tsx
new file mode 100644
index 0000000000..fec772c385
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeCommentsSection.tsx
@@ -0,0 +1,262 @@
+'use client'
+
+import type {
+  CourseNoticeCommentGroup,
+  CourseNoticeCommentItem
+} from '@/types/type'
+import { useState } from 'react'
+import { NoticeCommentCard } from './NoticeCommentCard'
+import { NoticeCommentEditor } from './NoticeCommentEditor'
+
+interface ReplyInputSectionProps {
+  commentId: number
+  onCreateReply: (commentId: number, content: string, isSecret: boolean) => void
+  isCreatingComment: boolean
+}
+
+function ReplyInputSection({
+  commentId,
+  onCreateReply,
+  isCreatingComment
+}: ReplyInputSectionProps) {
+  const [content, setContent] = useState('')
+  const [secret, setSecret] = useState(false)
+
+  const handleSubmit = () => {
+    onCreateReply(commentId, content, secret)
+    setContent('')
+    setSecret(false)
+  }
+
+  return (
+    <NoticeCommentEditor
+      value={content}
+      setValue={setContent}
+      secret={secret}
+      setSecret={setSecret}
+      compact
+      autoResize
+      onSubmit={handleSubmit}
+      placeholder="Write a reply"
+      submitText="Post"
+      disabled={!content.trim() || isCreatingComment}
+    />
+  )
+}
+
+interface NoticeCommentsSectionProps {
+  commentCount: number
+  isCommentsLoading: boolean
+  groupedComments: CourseNoticeCommentGroup[]
+  profileUsername?: string
+  isInstructor?: boolean
+
+  commentContent: string
+  setCommentContent: (value: string) => void
+  commentSecret: boolean
+  setCommentSecret: (value: boolean) => void
+  isCreatingComment: boolean
+  onCreateComment: () => void
+
+  openReplyIds: Set<number>
+  toggleReplyId: (id: number) => void
+  onCreateReply: (commentId: number, content: string, isSecret: boolean) => void
+
+  editingCommentId: number | null
+  setEditingCommentId: (value: number | null) => void
+  editingContent: string
+  setEditingContent: (value: string) => void
+  editingSecret: boolean
+  setEditingSecret: (value: boolean) => void
+  isUpdatingComment: boolean
+  onUpdateComment: (commentId: number) => void
+
+  onDeleteComment: (commentId: number) => void
+}
+
+export function NoticeCommentsSection({
+  commentCount,
+  isCommentsLoading,
+  groupedComments,
+  profileUsername,
+  isInstructor = false,
+  commentContent,
+  setCommentContent,
+  commentSecret,
+  setCommentSecret,
+  isCreatingComment,
+  onCreateComment,
+  openReplyIds,
+  toggleReplyId,
+  onCreateReply,
+  editingCommentId,
+  setEditingCommentId,
+  editingContent,
+  setEditingContent,
+  editingSecret,
+  setEditingSecret,
+  isUpdatingComment,
+  onUpdateComment,
+  onDeleteComment
+}: NoticeCommentsSectionProps) {
+  const startEdit = (comment: CourseNoticeCommentItem) => {
+    setEditingCommentId(comment.id)
+    setEditingContent(comment.content)
+    setEditingSecret(comment.isSecret)
+  }
+
+  const cancelEdit = () => {
+    setEditingCommentId(null)
+    setEditingContent('')
+    setEditingSecret(false)
+  }
+
+  const renderCommentsBody = () => {
+    if (isCommentsLoading) {
+      return (
+        <div className="bg-color-neutral-99 text-color-neutral-60 flex flex-col items-center justify-center rounded-lg py-10">
+          <span>Loading comments...</span>
+        </div>
+      )
+    }
+
+    if (groupedComments.length === 0) {
+      return (
+        <div className="bg-color-neutral-99 text-color-neutral-60 flex flex-col items-center justify-center gap-[6px] rounded-lg py-10">
+          <span className="text-2xl">!</span>
+          <span>Comments not registered</span>
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex flex-col gap-[10px]">
+        {groupedComments.map((group) => {
+          const hasReplySection = openReplyIds.has(group.comment.id)
+          const deletedReplies = group.replys.filter((r) => r.isDeleted)
+          const hasDeletedReplies = deletedReplies.length > 0
+
+          return (
+            <div key={group.comment.id}>
+              <NoticeCommentCard
+                comment={group.comment}
+                replyCount={group.replys.length}
+                hasReplySection={hasReplySection || hasDeletedReplies}
+                profileUsername={profileUsername}
+                isAdmin={isInstructor}
+                isReplyOpen={hasReplySection}
+                editingCommentId={editingCommentId}
+                onReplyToggle={toggleReplyId}
+                onEditStart={startEdit}
+                onDelete={onDeleteComment}
+                renderEditEditor={() => (
+                  <NoticeCommentEditor
+                    value={editingContent}
+                    setValue={setEditingContent}
+                    secret={editingSecret}
+                    setSecret={setEditingSecret}
+                    onSubmit={() => onUpdateComment(group.comment.id)}
+                    placeholder="Edit comment"
+                    submitText="Save"
+                    disabled={!editingContent.trim() || isUpdatingComment}
+                  />
+                )}
+              />
+
+              {hasDeletedReplies && !hasReplySection && (
+                <div className="bg-color-neutral-99 py-3 pl-10 pr-4">
+                  <div className="flex flex-col">
+                    {deletedReplies.map((reply) => (
+                      <NoticeCommentCard
+                        key={reply.id}
+                        comment={reply}
+                        isReply
+                        profileUsername={profileUsername}
+                        isAdmin={isInstructor}
+                        isReplyOpen={false}
+                        editingCommentId={editingCommentId}
+                        onReplyToggle={toggleReplyId}
+                        onEditStart={startEdit}
+                        onDelete={onDeleteComment}
+                        renderEditEditor={() => null}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {hasReplySection && (
+                <>
+                  <div className="bg-color-neutral-99 py-3 pl-10 pr-4">
+                    <div className="flex flex-col">
+                      {group.replys.map((reply) => (
+                        <NoticeCommentCard
+                          key={reply.id}
+                          comment={reply}
+                          isReply
+                          profileUsername={profileUsername}
+                          isAdmin={isInstructor}
+                          isReplyOpen={false}
+                          editingCommentId={editingCommentId}
+                          onReplyToggle={toggleReplyId}
+                          onEditStart={startEdit}
+                          onDelete={onDeleteComment}
+                          renderEditEditor={() => (
+                            <NoticeCommentEditor
+                              value={editingContent}
+                              setValue={setEditingContent}
+                              secret={editingSecret}
+                              setSecret={setEditingSecret}
+                              compact
+                              autoResize
+                              isReplyEdit
+                              onSubmit={() => onUpdateComment(reply.id)}
+                              placeholder="Edit comment"
+                              submitText="Save"
+                              disabled={
+                                !editingContent.trim() || isUpdatingComment
+                              }
+                            />
+                          )}
+                        />
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="border-line rounded-b-xl border border-t-0 bg-white px-6 py-4">
+                    <ReplyInputSection
+                      commentId={group.comment.id}
+                      onCreateReply={onCreateReply}
+                      isCreatingComment={isCreatingComment}
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-5">
+      <span className="text-head6_m_24">
+        COMMENTS <span className="text-primary">{commentCount}</span>
+      </span>
+
+      {renderCommentsBody()}
+
+      <NoticeCommentEditor
+        value={commentContent}
+        setValue={setCommentContent}
+        secret={commentSecret}
+        setSecret={setCommentSecret}
+        onSubmit={onCreateComment}
+        placeholder="Enter Your Answer"
+        submitText="Post"
+        disabled={!commentContent.trim() || isCreatingComment}
+      />
+    </div>
+  )
+}
diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeDetailView.tsx b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeDetailView.tsx
new file mode 100644
index 0000000000..6f034ca999
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/NoticeDetailView.tsx
@@ -0,0 +1,203 @@
+'use client'
+
+import { ArticleNavigation } from '@/app/(client)/(main)/_components/ArticleNavigation'
+import { profileQueries } from '@/app/(client)/_libs/queries/profile'
+import { AlertModal } from '@/components/AlertModal'
+import { safeFetcherWithAuth, dateFormatter } from '@/libs/utils'
+import type { Course, CourseNoticeDetailResponse } from '@/types/type'
+import { useQuery } from '@tanstack/react-query'
+import DOMPurify from 'isomorphic-dompurify'
+import { useParams } from 'next/navigation'
+import { FaUser } from 'react-icons/fa6'
+import { IoTime } from 'react-icons/io5'
+import { NoticeCommentsSection } from './NoticeCommentsSection'
+import { useNoticeComments } from './useNoticeComments'
+
+const profileInitialData = {
+  username: '',
+  userProfile: { realName: '' },
+  studentId: '',
+  college: '',
+  major: '',
+  email: ''
+}
+
+export function NoticeDetailView() {
+  const { courseId, noticeId } = useParams()
+  const currentId = Number(noticeId)
+  const basePath = `/course/${courseId}/notice`
+
+  const { data: profile } = useQuery({
+    ...profileQueries.fetch(),
+    initialData: profileInitialData,
+    retry: false
+  })
+
+  const { data: courseInfo } = useQuery({
+    queryKey: ['courseInfo', courseId],
+    queryFn: () => safeFetcherWithAuth.get(`course/${courseId}`).json<Course>(),
+    enabled: Boolean(courseId),
+    retry: false
+  })
+
+  const { data: noticeData } = useQuery({
+    queryKey: ['courseNoticeDetail', currentId],
+    queryFn: () =>
+      safeFetcherWithAuth
+        .get(`course/notice/${currentId}`)
+        .json<CourseNoticeDetailResponse>(),
+    enabled: Number.isFinite(currentId)
+  })
+
+  const {
+    groupedComments,
+    isCommentsLoading,
+    commentContent,
+    setCommentContent,
+    commentSecret,
+    setCommentSecret,
+    openReplyIds,
+    toggleReplyId,
+    editingCommentId,
+    setEditingCommentId,
+    editingContent,
+    setEditingContent,
+    editingSecret,
+    setEditingSecret,
+    deletingCommentId,
+    setDeletingCommentId,
+    isCreatingComment,
+    isUpdatingComment,
+    isDeletingComment,
+    createComment,
+    updateComment,
+    deleteComment
+  } = useNoticeComments(currentId, courseId ?? '')
+
+  const isInstructor = courseInfo?.isGroupLeader ?? false
+  const notice = noticeData?.current
+  const prevNotice = noticeData?.prev ?? null
+  const nextNotice = noticeData?.next ?? null
+  const commentCount = notice?._count?.CourseNoticeComment ?? 0
+
+  if (!notice) {
+    return null
+  }
+
+  return (
+    <>
+      <div className="mt-20 flex flex-col gap-[60px] pl-10 pr-[116px]">
+        <div className="flex flex-col gap-6">
+          <div className="bg-color-neutral-99 text-color-neutral-60 flex w-fit items-center gap-2 rounded-full px-4 py-[6px] text-sm">
+            No. {currentId}
+          </div>
+
+          <div className="flex flex-col gap-4 pb-8">
+            <h1 className="text-2xl font-semibold leading-[1.4]">
+              {notice.title}
+            </h1>
+
+            <div className="text-color-neutral-50 flex flex-col gap-[6px] text-[13px]">
+              <div className="flex items-center gap-[10px]">
+                <FaUser className="text-primary h-4 w-4" />
+                {notice.createdBy ?? 'Unknown'}
+              </div>
+              <div className="flex items-center gap-[10px]">
+                <IoTime className="text-primary h-4 w-4" />
+                {dateFormatter(notice.createTime, 'YYYY-MM-DD HH:mm:ss')}
+              </div>
+            </div>
+
+            <div
+              className="prose mt-4 max-w-none whitespace-pre-wrap text-[16px]"
+              dangerouslySetInnerHTML={{
+                __html: DOMPurify.sanitize(notice.content)
+              }}
+            />
+          </div>
+
+          <ArticleNavigation
+            prev={
+              prevNotice
+                ? { id: String(prevNotice.id), title: prevNotice.title }
+                : undefined
+            }
+            next={
+              nextNotice
+                ? { id: String(nextNotice.id), title: nextNotice.title }
+                : undefined
+            }
+            basePath={basePath}
+          />
+        </div>
+
+        <div>
+          <NoticeCommentsSection
+            commentCount={commentCount}
+            isCommentsLoading={isCommentsLoading}
+            groupedComments={groupedComments}
+            profileUsername={profile?.username}
+            isInstructor={isInstructor}
+            commentContent={commentContent}
+            setCommentContent={setCommentContent}
+            commentSecret={commentSecret}
+            setCommentSecret={setCommentSecret}
+            isCreatingComment={isCreatingComment}
+            onCreateComment={() =>
+              createComment({
+                content: commentContent,
+                isSecret: commentSecret
+              })
+            }
+            openReplyIds={openReplyIds}
+            toggleReplyId={toggleReplyId}
+            onCreateReply={(commentId, content, isSecret) =>
+              createComment({
+                content,
+                isSecret,
+                replyOnId: commentId
+              })
+            }
+            editingCommentId={editingCommentId}
+            setEditingCommentId={setEditingCommentId}
+            editingContent={editingContent}
+            setEditingContent={setEditingContent}
+            editingSecret={editingSecret}
+            setEditingSecret={setEditingSecret}
+            isUpdatingComment={isUpdatingComment}
+            onUpdateComment={(commentId) =>
+              updateComment({
+                commentId,
+                content: editingContent,
+                isSecret: editingSecret
+              })
+            }
+            onDeleteComment={setDeletingCommentId}
+          />
+        </div>
+      </div>
+
+      <AlertModal
+        open={deletingCommentId !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDeletingCommentId(null)
+          }
+        }}
+        type="warning"
+        title="Delete comment?"
+        description={
+          'Are you sure you want to delete this comment?\nThis action cannot be undone.'
+        }
+        primaryButton={{
+          text: isDeletingComment ? 'Deleting...' : 'Delete',
+          onClick: () => {
+            if (deletingCommentId !== null) {
+              deleteComment(deletingCommentId)
+            }
+          }
+        }}
+      />
+    </>
+  )
+}
diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/useNoticeComments.ts b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/useNoticeComments.ts
new file mode 100644
index 0000000000..1b4fe9d2f2
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/_components/useNoticeComments.ts
@@ -0,0 +1,182 @@
+import { safeFetcherWithAuth } from '@/libs/utils'
+import type { CourseNoticeCommentGroup } from '@/types/type'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+export function useNoticeComments(
+  currentId: number,
+  courseId: string | string[]
+) {
+  const queryClient = useQueryClient()
+
+  const [commentContent, setCommentContent] = useState('')
+  const [commentSecret, setCommentSecret] = useState(false)
+  const [openReplyIds, setOpenReplyIds] = useState<Set<number>>(new Set())
+
+  const toggleReplyId = (id: number) => {
+    setOpenReplyIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+  const [editingCommentId, setEditingCommentId] = useState<number | null>(null)
+  const [editingContent, setEditingContent] = useState('')
+  const [editingSecret, setEditingSecret] = useState(false)
+  const [deletingCommentId, setDeletingCommentId] = useState<number | null>(
+    null
+  )
+
+  const { data: groupedComments = [], isLoading: isCommentsLoading } = useQuery(
+    {
+      queryKey: ['courseNoticeComments', currentId],
+      queryFn: () =>
+        safeFetcherWithAuth
+          .get(`course/notice/${currentId}/comment`, {
+            searchParams: { take: '100', includeDeleted: 'true' }
+          })
+          .json<CourseNoticeCommentGroup[]>(),
+      enabled: Number.isFinite(currentId)
+    }
+  )
+
+  const invalidateNoticeDetail = () => {
+    queryClient.invalidateQueries({
+      queryKey: ['courseNoticeDetail', currentId]
+    })
+    queryClient.invalidateQueries({ queryKey: ['courseNotices', courseId] })
+  }
+
+  const invalidateComments = () => {
+    queryClient.invalidateQueries({
+      queryKey: ['courseNoticeComments', currentId]
+    })
+  }
+
+  const markDeletedInGroups = (
+    groups: CourseNoticeCommentGroup[],
+    commentId: number
+  ): CourseNoticeCommentGroup[] =>
+    groups.map((group) => {
+      if (group.comment.id === commentId) {
+        return { ...group, comment: { ...group.comment, isDeleted: true } }
+      }
+      return {
+        ...group,
+        replys: group.replys.map((reply) =>
+          reply.id === commentId ? { ...reply, isDeleted: true } : reply
+        )
+      }
+    })
+
+  const resetCreateState = () => {
+    setCommentContent('')
+    setCommentSecret(false)
+  }
+
+  const resetEditState = () => {
+    setEditingCommentId(null)
+    setEditingContent('')
+    setEditingSecret(false)
+  }
+
+  const { mutate: createComment, isPending: isCreatingComment } = useMutation({
+    mutationFn: (payload: {
+      content: string
+      isSecret: boolean
+      replyOnId?: number
+    }) =>
+      safeFetcherWithAuth
+        .post(`course/notice/${currentId}/comment`, { json: payload })
+        .json(),
+    onSuccess: () => {
+      toast.success('Comment posted!')
+      resetCreateState()
+      invalidateComments()
+    },
+    onError: () => toast.error('Failed to post comment.')
+  })
+
+  const { mutate: updateComment, isPending: isUpdatingComment } = useMutation({
+    mutationFn: (payload: {
+      commentId: number
+      content: string
+      isSecret: boolean
+    }) =>
+      safeFetcherWithAuth
+        .patch(`course/notice/${currentId}/comment/${payload.commentId}`, {
+          json: { content: payload.content, isSecret: payload.isSecret }
+        })
+        .json(),
+    onSuccess: () => {
+      toast.success('Comment updated!')
+      resetEditState()
+      invalidateComments()
+    },
+    onError: () => toast.error('Failed to update comment.')
+  })
+
+  const { mutate: deleteComment, isPending: isDeletingComment } = useMutation({
+    mutationFn: (commentId: number) =>
+      safeFetcherWithAuth.delete(
+        `course/notice/${currentId}/comment/${commentId}`
+      ),
+    onMutate: async (commentId: number) => {
+      await queryClient.cancelQueries({
+        queryKey: ['courseNoticeComments', currentId]
+      })
+      const previousComments = queryClient.getQueryData<
+        CourseNoticeCommentGroup[]
+      >(['courseNoticeComments', currentId])
+      queryClient.setQueryData<CourseNoticeCommentGroup[]>(
+        ['courseNoticeComments', currentId],
+        (old) => markDeletedInGroups(old ?? [], commentId)
+      )
+      setDeletingCommentId(null)
+      return { previousComments }
+    },
+    onSuccess: () => {
+      toast.success('Comment deleted!')
+      invalidateNoticeDetail()
+    },
+    onError: (_error, _commentId, context) => {
+      if (context?.previousComments) {
+        queryClient.setQueryData(
+          ['courseNoticeComments', currentId],
+          context.previousComments
+        )
+      }
+      toast.error('Failed to delete comment.')
+    }
+  })
+
+  return {
+    groupedComments,
+    isCommentsLoading,
+    commentContent,
+    setCommentContent,
+    commentSecret,
+    setCommentSecret,
+    openReplyIds,
+    toggleReplyId,
+    editingCommentId,
+    setEditingCommentId,
+    editingContent,
+    setEditingContent,
+    editingSecret,
+    setEditingSecret,
+    deletingCommentId,
+    setDeletingCommentId,
+    isCreatingComment,
+    isUpdatingComment,
+    isDeletingComment,
+    createComment,
+    updateComment,
+    deleteComment
+  }
+}
diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/page.tsx b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/page.tsx
new file mode 100644
index 0000000000..3b4881830d
--- /dev/null
+++ b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/[noticeId]/page.tsx
@@ -0,0 +1,5 @@
+import { NoticeDetailView } from './_components/NoticeDetailView'
+
+export default function NoticeDetailPage() {
+  return <NoticeDetailView />
+}
diff --git a/apps/frontend/app/(client)/(main)/course/[courseId]/notice/page.tsx b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/page.tsx
index d463deea03..84376bc4b3 100644
--- a/apps/frontend/app/(client)/(main)/course/[courseId]/notice/page.tsx
+++ b/apps/frontend/app/(client)/(main)/course/[courseId]/notice/page.tsx
@@ -1,3 +1,18 @@
+'use client'
+
+import { Suspense } from '@suspensive/react'
+import { useParams } from 'next/navigation'
+import { CourseNoticeTable } from '../_components/CourseNoticeTable'
+
 export default function Notice() {
-  return <div className="rounded-xs mt-6 w-full bg-gray-100 p-4">Notice</div>
+  const params = useParams()
+  const courseId = Number(params.courseId)
+
+  return (
+    <div className="mb-12 mt-20 w-full px-10 lg:mt-20">
+      <Suspense>
+        <CourseNoticeTable courseId={courseId} />
+      </Suspense>
+    </div>
+  )
 }
diff --git a/apps/frontend/app/admin/_components/ApolloProvider.tsx b/apps/frontend/app/admin/_components/ApolloProvider.tsx
index 0ad3420928..a4b38061ee 100644
--- a/apps/frontend/app/admin/_components/ApolloProvider.tsx
+++ b/apps/frontend/app/admin/_components/ApolloProvider.tsx
@@ -8,8 +8,10 @@ import {
   InMemoryCache
 } from '@apollo/client'
 import { setContext } from '@apollo/client/link/context'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import createUploadLink from 'apollo-upload-client/createUploadLink.mjs'
 import type { Session } from 'next-auth'
+import { useState } from 'react'
 
 interface Props {
   children: React.ReactNode
@@ -17,6 +19,7 @@ interface Props {
 }
 
 export function ClientApolloProvider({ children, session }: Props) {
+  const [queryClient] = useState(() => new QueryClient())
   const httpLink = createUploadLink({
     uri: adminBaseUrl,
     headers: {
@@ -43,5 +46,9 @@ export function ClientApolloProvider({ children, session }: Props) {
     }
   })
 
-  return <ApolloProvider client={client}>{children}</ApolloProvider>
+  return (
+    <ApolloProvider client={client}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </ApolloProvider>
+  )
 }
diff --git a/apps/frontend/app/admin/_components/ManagementSidebar.tsx b/apps/frontend/app/admin/_components/ManagementSidebar.tsx
index 0713ec3693..9f7d221462 100644
--- a/apps/frontend/app/admin/_components/ManagementSidebar.tsx
+++ b/apps/frontend/app/admin/_components/ManagementSidebar.tsx
@@ -39,6 +39,7 @@ interface NavItem {
   path: string
   icon: IconType | ComponentType<{ className: string }>
 }
+
 // Pending : 2중 사이드바 구조 철회
 // const getCourseNavItems = (courseId: string): NavItem[] => [
 //   {
diff --git a/apps/frontend/app/admin/_components/TextEditor.tsx b/apps/frontend/app/admin/_components/TextEditor.tsx
index 5b4168e4f8..924a0b1824 100644
--- a/apps/frontend/app/admin/_components/TextEditor.tsx
+++ b/apps/frontend/app/admin/_components/TextEditor.tsx
@@ -55,6 +55,8 @@ interface TextEditorProps {
   isDarkMode?: boolean
   isExpanded?: boolean
   onShrink?: (richText: string) => void
+  showToolbar?: boolean
+  showInsertNodeBar?: boolean
 }
 
 export function TextEditor({
@@ -63,7 +65,9 @@ export function TextEditor({
   defaultValue,
   isDarkMode = false,
   isExpanded = false,
-  onShrink
+  onShrink,
+  showToolbar = true,
+  showInsertNodeBar = true
 }: TextEditorProps) {
   const lowlight = createLowlight(common)
 
@@ -218,7 +222,7 @@ export function TextEditor({
         isDarkMode ? 'border-editor-line-1 border bg-transparent' : 'border'
       )}
     >
-      {editor && (
+      {showToolbar && editor && (
         <div
           className={cn(
             'flex flex-wrap items-center border-b px-1 py-2',
@@ -230,7 +234,9 @@ export function TextEditor({
           <TextStyleBar editor={editor} />
           <HeadingStyleBar editor={editor} />
           <ListStyleBar editor={editor} />
-          <InsertNodeBar ref={insertNodeRef} editor={editor} />
+          {showInsertNodeBar && (
+            <InsertNodeBar ref={insertNodeRef} editor={editor} />
+          )}
 
           <div className="ml-auto flex items-center">
             <UndoRedoBar editor={editor} />
diff --git a/apps/frontend/app/admin/course/[courseId]/layout.tsx b/apps/frontend/app/admin/course/[courseId]/layout.tsx
index 0b58560cb7..c33f062ca6 100644
--- a/apps/frontend/app/admin/course/[courseId]/layout.tsx
+++ b/apps/frontend/app/admin/course/[courseId]/layout.tsx
@@ -52,6 +52,12 @@ export default function CourseDetailLayout({
       description: "Here's a exercise list you made",
       href: `/admin/course/${courseId}/exercise`
     },
+    {
+      name: 'Notice',
+      title: 'NOTICE',
+      description: "Here's a notice list you made",
+      href: `/admin/course/${courseId}/notice`
+    },
     {
       name: 'Q&A',
       title: 'Question & Answer',
diff --git a/apps/frontend/app/admin/course/[courseId]/notice/_components/CreateNoticeModal.tsx b/apps/frontend/app/admin/course/[courseId]/notice/_components/CreateNoticeModal.tsx
new file mode 100644
index 0000000000..3039683ab2
--- /dev/null
+++ b/apps/frontend/app/admin/course/[courseId]/notice/_components/CreateNoticeModal.tsx
@@ -0,0 +1,236 @@
+'use client'
+
+import { TextEditor } from '@/app/admin/_components/TextEditor'
+import { Modal } from '@/components/Modal'
+import { Button } from '@/components/shadcn/button'
+import { Checkbox } from '@/components/shadcn/checkbox'
+import { Input } from '@/components/shadcn/input'
+import { Label } from '@/components/shadcn/label'
+import {
+  CREATE_COURSE_NOTICE,
+  UPDATE_COURSE_NOTICE
+} from '@/graphql/course/mutation'
+import { useMutation } from '@apollo/client'
+import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { FaPen } from 'react-icons/fa6'
+import { toast } from 'sonner'
+
+interface CreateNoticeModalProps {
+  courseId: string
+  editData?: {
+    id: number
+    title: string
+    content: string
+    isFixed?: boolean
+    isPublic?: boolean
+  } | null
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function CreateNoticeModal({
+  courseId,
+  editData,
+  open,
+  onOpenChange
+}: CreateNoticeModalProps) {
+  const router = useRouter()
+  const queryClient = useQueryClient()
+  const isEditMode = Boolean(editData)
+
+  const [internalOpen, setInternalOpen] = useState(false)
+  const isControlled =
+    typeof open === 'boolean' && typeof onOpenChange === 'function'
+  const isOpen = isControlled ? open : internalOpen
+  const setIsOpen: (open: boolean) => void = isControlled
+    ? (nextOpen) => onOpenChange(nextOpen)
+    : setInternalOpen
+
+  const [title, setTitle] = useState('')
+  const [mainText, setMainText] = useState('')
+  const [charCount, setCharCount] = useState(0)
+  const [isPublic, setIsPublic] = useState(editData?.isPublic ?? true)
+  const [isFixed, setIsFixed] = useState(editData?.isFixed ?? false)
+
+  const [createCourseNotice, { loading: isCreating }] =
+    useMutation(CREATE_COURSE_NOTICE)
+  const [updateCourseNotice, { loading: isUpdating }] =
+    useMutation(UPDATE_COURSE_NOTICE)
+
+  const isPending = isCreating || isUpdating
+
+  useEffect(() => {
+    if (!isOpen) {
+      return
+    }
+
+    if (editData) {
+      setTitle(editData.title)
+      setMainText(editData.content)
+      setIsPublic(editData.isPublic ?? true)
+      setIsFixed(editData.isFixed ?? false)
+      setCharCount(editData.content.replace(/<[^>]*>/g, '').length)
+      return
+    }
+
+    setTitle('')
+    setMainText('')
+    setIsPublic(true)
+    setIsFixed(false)
+    setCharCount(0)
+  }, [isOpen, editData])
+
+  const handleMainTextChange = (richText: string) => {
+    setMainText(richText)
+    setCharCount(richText.replace(/<[^>]*>/g, '').length)
+  }
+
+  const closeModal = () => {
+    setIsOpen(false)
+  }
+
+  const invalidateAdminNotice = async () => {
+    await queryClient.invalidateQueries({
+      queryKey: ['adminCourseNotices', Number(courseId)]
+    })
+  }
+
+  const handleSubmit = async () => {
+    try {
+      if (isEditMode && editData) {
+        await updateCourseNotice({
+          variables: {
+            courseNoticeId: editData.id,
+            input: {
+              title,
+              content: mainText,
+              isPublic,
+              isFixed
+            }
+          }
+        })
+        toast.success('Notice updated!')
+      } else {
+        await createCourseNotice({
+          variables: {
+            input: {
+              groupId: Number(courseId),
+              title,
+              content: mainText,
+              isPublic,
+              isFixed
+            }
+          }
+        })
+        toast.success('Notice created!')
+      }
+
+      await invalidateAdminNotice()
+      router.refresh()
+      closeModal()
+    } catch {
+      toast.error(
+        isEditMode ? 'Failed to update notice.' : 'Failed to create notice.'
+      )
+    }
+  }
+
+  return (
+    <>
+      {!isControlled && (
+        <Button
+          variant="default"
+          className="h-[46px] w-[126px] rounded-full bg-[#3581FA] px-6 py-[10px] hover:bg-[#3581FA]/90"
+          onClick={() => setIsOpen(true)}
+        >
+          <FaPen className="mr-2 h-5 w-5" />
+          <span className="text-[18px] font-medium leading-[140%] tracking-[-0.03em]">
+            Create
+          </span>
+        </Button>
+      )}
+
+      <Modal
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        size="lg"
+        type="custom"
+        title={isEditMode ? 'Edit Notice' : 'Create Notice'}
+      >
+        <div className="flex flex-col gap-6 pt-4">
+          <div className="flex items-center gap-4">
+            <Label htmlFor="title" className="whitespace-nowrap text-base">
+              Title <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              id="title"
+              placeholder="Enter the Title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="h-10 max-w-[645px] flex-1 rounded-3xl"
+            />
+          </div>
+
+          <div className="flex items-center gap-6">
+            <label className="flex items-center gap-2 text-sm">
+              <Checkbox
+                checked={isPublic}
+                onCheckedChange={(checked) => setIsPublic(Boolean(checked))}
+              />
+              Public
+            </label>
+            <label className="flex items-center gap-2 text-sm">
+              <Checkbox
+                checked={isFixed}
+                onCheckedChange={(checked) => setIsFixed(Boolean(checked))}
+              />
+              Fixed
+            </label>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="mainText" className="text-base">
+              Main Text <span className="text-red-500">*</span>
+            </Label>
+            <div className="relative">
+              <TextEditor
+                placeholder="Enter the Main Text"
+                onChange={handleMainTextChange}
+                defaultValue={editData?.content || ''}
+              />
+              <div className="absolute bottom-4 right-4 text-sm text-gray-500">
+                {charCount}/400
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={closeModal}
+              className="border-[#3581FA] bg-white text-[#3581FA] hover:bg-white"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={handleSubmit}
+              disabled={
+                !title.trim() ||
+                !mainText.trim() ||
+                charCount > 400 ||
+                isPending
+              }
+              className="bg-[#3581FA] text-white hover:bg-[#3581FA]/90"
+            >
+              {isEditMode ? 'Update' : 'Create'}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+}
diff --git a/apps/frontend/app/admin/course/[courseId]/notice/_components/DeleteNoticeModal.tsx b/apps/frontend/app/admin/course/[courseId]/notice/_components/DeleteNoticeModal.tsx
new file mode 100644
index 0000000000..d23435bb39
--- /dev/null
+++ b/apps/frontend/app/admin/course/[courseId]/notice/_components/DeleteNoticeModal.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { AlertModal } from '@/components/AlertModal'
+
+interface DeleteNoticeModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onDelete: () => void
+  isDeleting?: boolean
+}
+
+export function DeleteNoticeModal({
+  open,
+  onOpenChange,
+  onDelete,
+  isDeleting = false
+}: DeleteNoticeModalProps) {
+  return (
+    <AlertModal
+      open={open}
+      onOpenChange={onOpenChange}
+      size="sm"
+      type="warning"
+      title="Delete notice?"
+      description={
+        'Are you sure you want to delete this notice?\nThis action cannot be undone.'
+      }
+      primaryButton={{
+        text: isDeleting ? 'Deleting...' : 'Delete',
+        onClick: onDelete
+      }}
+      onClose={() => onOpenChange(false)}
+    />
+  )
+}
diff --git a/apps/frontend/app/admin/course/[courseId]/notice/_components/ImportNoticeModal.tsx b/apps/frontend/app/admin/course/[courseId]/notice/_components/ImportNoticeModal.tsx
new file mode 100644
index 0000000000..0d24fcaad0
--- /dev/null
+++ b/apps/frontend/app/admin/course/[courseId]/notice/_components/ImportNoticeModal.tsx
@@ -0,0 +1,171 @@
+'use client'
+
+import { DataTableRoot } from '@/app/admin/_components/table'
+import { Modal } from '@/components/Modal'
+import { Button } from '@/components/shadcn/button'
+import { CLONE_COURSE_NOTICES } from '@/graphql/course/mutation'
+import { safeFetcherWithAuth } from '@/libs/utils'
+import PlusIcon from '@/public/icons/plus-line.svg'
+import { useMutation } from '@apollo/client'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useMemo, useState } from 'react'
+import { toast } from 'sonner'
+import { ImportNoticeTableContent } from './ImportNoticeTableContent'
+import {
+  importNoticeColumns,
+  type NoticeItem
+} from './importNoticeTableColumns'
+
+interface ImportNoticeModalProps {
+  courseId: string
+}
+
+interface CourseNoticeListApiItem {
+  id: number
+  title: string
+  createTime?: string
+  updateTime?: string
+  createdBy: string | null
+  isRead: boolean
+  isFixed: boolean
+}
+
+interface CourseNoticeListResponse {
+  data: CourseNoticeListApiItem[]
+  total: number
+}
+
+const getOrderParam = (order: string) =>
+  order === 'oldest' ? 'createTime-asc' : 'createTime-desc'
+
+export function ImportNoticeModal({ courseId }: ImportNoticeModalProps) {
+  const queryClient = useQueryClient()
+
+  const [open, setOpen] = useState(false)
+  const [order, setOrder] = useState('latest')
+  const [sourceCourseId, setSourceCourseId] = useState('')
+
+  const [cloneCourseNotices, { loading: isCloning }] =
+    useMutation(CLONE_COURSE_NOTICES)
+
+  const { data: noticeItems = [], isLoading } = useQuery({
+    queryKey: ['importableCourseNotices', sourceCourseId, order],
+    queryFn: async () => {
+      const sourceId = Number(sourceCourseId)
+      if (!Number.isFinite(sourceId)) {
+        return []
+      }
+
+      const params = {
+        take: '100',
+        readFilter: 'all',
+        order: getOrderParam(order)
+      }
+
+      const [fixedRes, normalRes] = await Promise.all([
+        safeFetcherWithAuth
+          .get(`course/${sourceId}/notice/all`, {
+            searchParams: { ...params, fixed: 'true' }
+          })
+          .json<CourseNoticeListResponse>(),
+        safeFetcherWithAuth
+          .get(`course/${sourceId}/notice/all`, {
+            searchParams: { ...params, fixed: 'false' }
+          })
+          .json<CourseNoticeListResponse>()
+      ])
+
+      return [...fixedRes.data, ...normalRes.data].map<NoticeItem>((n) => ({
+        id: n.id,
+        title: n.title,
+        date: n.createTime ?? n.updateTime ?? '',
+        course: sourceCourseId,
+        creator: n.createdBy ?? 'Unknown'
+      }))
+    },
+    enabled: open && Boolean(sourceCourseId.trim())
+  })
+
+  const sortedItems = useMemo(() => {
+    return [...noticeItems].sort((a, b) => {
+      const aTime = new Date(a.date || 0).getTime()
+      const bTime = new Date(b.date || 0).getTime()
+      return order === 'oldest' ? aTime - bTime : bTime - aTime
+    })
+  }, [noticeItems, order])
+
+  const handleImportSelected = async (selectedIds: number[]) => {
+    try {
+      await cloneCourseNotices({
+        variables: {
+          courseNoticeIds: selectedIds,
+          cloneToId: Number(courseId)
+        }
+      })
+
+      toast.success('Notice imported!')
+
+      await queryClient.invalidateQueries({
+        queryKey: ['adminCourseNotices', Number(courseId)]
+      })
+
+      setOpen(false)
+      setSourceCourseId('')
+    } catch {
+      toast.error('Failed to import notices.')
+    }
+  }
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        className="border-primary text-primary hover:bg-primary/10 h-[46px] w-[123px] rounded-full border px-6 pb-[11px] pt-[10px]"
+        onClick={() => setOpen(true)}
+      >
+        <span className="text-sub2_m_18 flex items-center gap-[6px]">
+          <PlusIcon />
+          Import
+        </span>
+      </Button>
+
+      <Modal
+        open={open}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            setSourceCourseId('')
+            setOpen(false)
+            return
+          }
+
+          setOpen(true)
+        }}
+        size="lg"
+        type="custom"
+        title="Import Notice"
+        className="h-auto! w-[800px]!"
+      >
+        <div className="pt-4">
+          {isLoading ? (
+            <div className="flex h-40 items-center justify-center text-sm text-gray-400">
+              Loading...
+            </div>
+          ) : (
+            <DataTableRoot
+              data={sortedItems}
+              columns={importNoticeColumns}
+              defaultPageSize={6}
+            >
+              <ImportNoticeTableContent
+                order={order}
+                onOrderChange={setOrder}
+                onImportSelected={handleImportSelected}
+                isImporting={isCloning}
+              />
+            </DataTableRoot>
+          )}
+        </div>
+      </Modal>
+    </>
+  )
+}
diff --git a/apps/frontend/app/admin/course/[courseId]/notice/_components/ImportNoticeTableContent.tsx b/apps/frontend/app/admin/course/[courseId]/notice/_components/ImportNoticeTableContent.tsx
new file mode 100644
index 0000000000..5697bc494f
--- /dev/null
+++ b/apps/frontend/app/admin/course/[courseId]/notice/_components/ImportNoticeTableContent.tsx
@@ -0,0 +1,114 @@
+'use client'
+
+import {
+  DataTable,
+  DataTablePagination,
+  DataTableSearchBar
+} from '@/app/admin/_components/table'
+import { useDataTable } from '@/app/admin/_components/table/context'
+import { Button } from '@/components/shadcn/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/shadcn/dropdown-menu'
+import { ChevronDown } from 'lucide-react'
+import { FaCheck } from 'react-icons/fa'
+import type { NoticeItem } from './importNoticeTableColumns'
+
+interface ImportNoticeTableContentProps {
+  order: string
+  onOrderChange: (order: string) => void
+  onImportSelected: (ids: number[]) => void
+  isImporting: boolean
+}
+
+export function ImportNoticeTableContent({
+  order,
+  onOrderChange,
+  onImportSelected,
+  isImporting
+}: ImportNoticeTableContentProps) {
+  const { table } = useDataTable<NoticeItem>()
+  const selectedRows = table.getFilteredSelectedRowModel().rows
+
+  return (
+    <>
+      {/* ── 상단 컨트롤 바 ─────────────────────────────────────────
+          pl-0.5  : Search 포커스 링 왼쪽 잘림 방지
+          gap-2   : Search / Order / Import 간격               */}
+      <div className="flex items-center gap-2 pl-0.5">
+        {/* Search 입력창
+            w-[480px]! : 너비 — 늘리거나 줄여서 Title 컬럼 비율 조절
+            rounded-full : 모서리 스타일 */}
+        <DataTableSearchBar
+          columndId="title"
+          size="sm"
+          className="w-[480px]! rounded-full"
+        />
+
+        {/* Order 드롭다운
+            h-[36px] : 버튼 높이 (Search와 맞춤)
+            px-4     : 좌우 안쪽 여백 */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              className="h-[36px] rounded-full px-4 text-sm font-normal"
+            >
+              Order
+              <ChevronDown className="ml-1 h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuItem
+              onClick={() => onOrderChange('latest')}
+              className={order === 'latest' ? 'font-semibold' : ''}
+            >
+              Latest
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => onOrderChange('oldest')}
+              className={order === 'oldest' ? 'font-semibold' : ''}
+            >
+              Oldest
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* Import 버튼 (오른쪽 끝)
+            bg-[#3581FA] : 버튼 색상
+            px-5         : 좌우 여백 */}
+        <div className="flex-1" />
+        <Button
+          onClick={() =>
+            onImportSelected(selectedRows.map((row) => row.original.id))
+          }
+          disabled={selectedRows.length === 0 || isImporting}
+          className="h-[36px] rounded-full bg-[#3581FA] px-5 text-white hover:bg-[#3581FA]/90"
+        >
+          <FaCheck className="mr-2 h-4 w-4" />
+          Import
+        </Button>
+      </div>
+
+      {/* ── 테이블 본문 ────────────────────────────────────────────
+          [&_tr:last-child_td]:border-0 : 마지막 행 하단 border 제거
+          size="sm"       : 행 높이 (sm=40px / md=57px / lg=76px)
+          isHeaderGrouped : true = 헤더 하나로 합쳐진 바 형태          */}
+      <div className="[&_tr:last-child_td]:border-0">
+        <DataTable
+          size="sm"
+          isHeaderGrouped={true}
+          onRowClick={(_, row) => row.toggleSelected()}
+        />
+      </div>
+
+      {/* ── 페이지네이션 ───────────────────────────────────────────
+          defaultPageSize  : ImportNoticeModal의 defaultPageSize={6} 으로 제어
+          showRowsPerPage  : false = "Rows per page" 셀렉트 숨김          */}
+      <DataTablePagination showRowsPerPage={false} />
+    </>
+  )
+}
diff --git a/apps/frontend/app/admin/course/[courseId]/notice/_components/importNoticeTableColumns.tsx b/apps/frontend/app/admin/course/[courseId]/notice/_components/importNoticeTableColumns.tsx
new file mode 100644
index 0000000000..2ca3708d42
--- /dev/null
+++ b/apps/frontend/app/admin/course/[courseId]/notice/_components/importNoticeTableColumns.tsx
@@ -0,0 +1,94 @@
+import { DataTableColumnHeader } from '@/app/admin/_components/table/DataTableColumnHeader'
+import { Checkbox } from '@/components/shadcn/checkbox'
+import type { ColumnDef } from '@tanstack/react-table'
+
+export interface NoticeItem {
+  id: number
+  title: string
+  date: string
+  course: string
+  creator: string
+}
+
+// ── 컬럼 정의 ──────────────────────────────────────────────────────────────
+// header title=""  : 컬럼 헤더에 표시되는 텍스트 → 직접 수정 가능
+// max-w-[...]      : 셀 최대 너비 (좁히면 텍스트가 truncate 됨)
+// enableSorting    : false = 정렬 불가 / true(기본) = 헤더 클릭으로 정렬 가능
+// ───────────────────────────────────────────────────────────────────────────
+export const importNoticeColumns: ColumnDef<NoticeItem>[] = [
+  // 체크박스 컬럼 (너비 자동)
+  {
+    id: 'select',
+    header: () => <div />,
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(Boolean(value))}
+        onClick={(e) => e.stopPropagation()}
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false
+  },
+
+  // Title 컬럼 — 가장 넓은 컬럼, 검색 대상
+  // max-w-[240px] : 너비 조절
+  {
+    accessorKey: 'title',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Title" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[320px] truncate text-sm">
+        {row.getValue('title')}
+      </span>
+    ),
+    enableSorting: false
+  },
+
+  // Date 컬럼 — 헤더 클릭으로 오름/내림차순 정렬 가능
+  // date.slice(0, 10) : "YYYY-MM-DD" 형식으로 표시
+  {
+    accessorKey: 'date',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Date" />
+    ),
+    cell: ({ row }) => {
+      const date: string = row.getValue('date')
+      return (
+        <span className="text-sm text-[#52525B]">
+          {date ? date.slice(0, 10) : '-'}
+        </span>
+      )
+    }
+  },
+
+  // Course 컬럼 — Source Course ID 값이 표시됨
+  // max-w-[140px] : 너비 조절
+  {
+    accessorKey: 'course',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Course" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[140px] truncate text-sm text-[#52525B]">
+        {row.getValue('course')}
+      </span>
+    ),
+    enableSorting: false
+  },
+
+  // Creator 컬럼 — notice.createdBy 값이 표시됨
+  // max-w-[100px] : 너비 조절
+  {
+    accessorKey: 'creator',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Creator" />
+    ),
+    cell: ({ row }) => (
+      <span className="max-w-[100px] truncate text-sm text-[#52525B]">
+        {row.getValue('creator')}
+      </span>
+    )
+  }
+]
diff --git a/apps/frontend/app/admin/course/[courseId]/notice/page.tsx b/apps/frontend/app/admin/course/[courseId]/notice/page.tsx
index 245cbb27ab..60cda65fca 100644
--- a/apps/frontend/app/admin/course/[courseId]/notice/page.tsx
+++ b/apps/frontend/app/admin/course/[courseId]/notice/page.tsx
@@ -1,7 +1,36 @@
-export default function Page() {
+import { FetchErrorFallback } from '@/components/FetchErrorFallback'
+import { ErrorBoundary } from '@suspensive/react'
+import { Suspense } from 'react'
+import { NoticeTable, NoticeTableFallback } from '../../_components/NoticeTable'
+import { CreateNoticeModal } from './_components/CreateNoticeModal'
+import { ImportNoticeModal } from './_components/ImportNoticeModal'
+
+export const dynamic = 'force-dynamic'
+
+export default async function Page(props: {
+  params: Promise<{ courseId: string }>
+}) {
+  const { courseId } = await props.params
+
   return (
-    <main className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-      <p className="font-medium text-slate-400">TODO: Show notice list</p>
-    </main>
+    <div className="container mx-auto py-10">
+      <div className="flex justify-between">
+        <p className="text-head3_sb_28">NOTICE LIST</p>
+        <div className="flex gap-2">
+          <ImportNoticeModal courseId={courseId} />
+          <CreateNoticeModal courseId={courseId} />
+        </div>
+      </div>
+      <p className="text-body1_m_16 text-color-neutral-50">
+        Here&apos;s a notice list you made
+      </p>
+      <div className="mt-8">
+        <ErrorBoundary fallback={FetchErrorFallback}>
+          <Suspense fallback={<NoticeTableFallback />}>
+            <NoticeTable groupId={courseId} />
+          </Suspense>
+        </ErrorBoundary>
+      </div>
+    </div>
   )
 }
diff --git a/apps/frontend/app/admin/course/_components/NoticeTable.tsx b/apps/frontend/app/admin/course/_components/NoticeTable.tsx
new file mode 100644
index 0000000000..92453b8e4e
--- /dev/null
+++ b/apps/frontend/app/admin/course/_components/NoticeTable.tsx
@@ -0,0 +1,306 @@
+'use client'
+
+import { CreateNoticeModal } from '@/app/admin/course/[courseId]/notice/_components/CreateNoticeModal'
+import { DeleteNoticeModal } from '@/app/admin/course/[courseId]/notice/_components/DeleteNoticeModal'
+import { DELETE_COURSE_NOTICE } from '@/graphql/course/mutation'
+import { cn, safeFetcherWithAuth } from '@/libs/utils'
+import type {
+  CourseNoticeDetailResponse,
+  CourseNoticeListItem
+} from '@/types/type'
+import { useMutation } from '@apollo/client'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { ChevronLeft, ChevronRight, Pencil, Trash2 } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useEffect, useMemo, useState } from 'react'
+import { toast } from 'sonner'
+
+interface NoticeTableProps {
+  groupId: string
+}
+
+interface CourseNoticeListResponse {
+  data: CourseNoticeListItem[]
+  total: number
+}
+
+const PAGE_SIZE = 10
+
+export function NoticeTableFallback() {
+  return (
+    <div className="rounded-[20px] border border-[#E5E7EB] bg-white p-6 text-sm text-[#6B7280]">
+      Loading notices...
+    </div>
+  )
+}
+
+const getNoticeTime = (notice: CourseNoticeListItem) =>
+  new Date(notice.createTime ?? notice.updateTime ?? 0).getTime()
+
+export function NoticeTable({ groupId }: NoticeTableProps) {
+  const router = useRouter()
+  const queryClient = useQueryClient()
+
+  const [currentPage, setCurrentPage] = useState(1)
+  const [editingNotice, setEditingNotice] = useState<{
+    id: number
+    title: string
+    content: string
+    isFixed?: boolean
+    isPublic?: boolean
+  } | null>(null)
+  const [deletingNoticeId, setDeletingNoticeId] = useState<number | null>(null)
+  const [loadingEditId, setLoadingEditId] = useState<number | null>(null)
+
+  const { data: notices = [], isLoading } = useQuery({
+    queryKey: ['adminCourseNotices', Number(groupId)],
+    queryFn: async () => {
+      const [fixedResponse, normalResponse] = await Promise.all([
+        safeFetcherWithAuth
+          .get(`course/${groupId}/notice/all`, {
+            searchParams: {
+              take: '100',
+              fixed: 'true',
+              readFilter: 'all',
+              order: 'createTime-desc'
+            }
+          })
+          .json<CourseNoticeListResponse>(),
+        safeFetcherWithAuth
+          .get(`course/${groupId}/notice/all`, {
+            searchParams: {
+              take: '100',
+              fixed: 'false',
+              readFilter: 'all',
+              order: 'createTime-desc'
+            }
+          })
+          .json<CourseNoticeListResponse>()
+      ])
+      return [...fixedResponse.data, ...normalResponse.data]
+    }
+  })
+
+  const [deleteCourseNotice, { loading: isDeleting }] =
+    useMutation(DELETE_COURSE_NOTICE)
+
+  const sortedNotices = useMemo(() => {
+    return [...notices].sort((a, b) => {
+      if (a.isFixed !== b.isFixed) {
+        return a.isFixed ? -1 : 1
+      }
+      return getNoticeTime(b) - getNoticeTime(a)
+    })
+  }, [notices])
+
+  const totalPages = Math.max(1, Math.ceil(sortedNotices.length / PAGE_SIZE))
+
+  const paginatedNotices = useMemo(() => {
+    const startIndex = (currentPage - 1) * PAGE_SIZE
+    return sortedNotices.slice(startIndex, startIndex + PAGE_SIZE)
+  }, [currentPage, sortedNotices])
+
+  useEffect(() => {
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages)
+    }
+  }, [currentPage, totalPages])
+
+  const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1)
+
+  const handleEditClick = async (notice: CourseNoticeListItem) => {
+    setLoadingEditId(notice.id)
+    try {
+      const detail = await safeFetcherWithAuth
+        .get(`course/notice/${notice.id}`)
+        .json<CourseNoticeDetailResponse>()
+      setEditingNotice({
+        id: notice.id,
+        title: detail.current.title,
+        content: detail.current.content,
+        isFixed: notice.isFixed,
+        isPublic: detail.current.isPublic
+      })
+    } catch {
+      toast.error('Failed to load notice.')
+    } finally {
+      setLoadingEditId(null)
+    }
+  }
+
+  const handleDelete = async (courseNoticeId: number) => {
+    try {
+      await deleteCourseNotice({ variables: { courseNoticeId } })
+      toast.success('Notice deleted!')
+      await queryClient.invalidateQueries({
+        queryKey: ['adminCourseNotices', Number(groupId)]
+      })
+      router.refresh()
+    } catch {
+      toast.error('Failed to delete notice.')
+    }
+  }
+
+  if (isLoading) {
+    return <NoticeTableFallback />
+  }
+
+  return (
+    <>
+      <div className="w-full">
+        <div className="overflow-x-auto">
+          <div className="min-w-[920px]">
+            <div className="grid grid-cols-[88px_minmax(0,1fr)_96px_96px_88px] gap-2">
+              {['No', 'Title', 'Edit', 'Delete', 'Pin'].map((label) => (
+                <div
+                  key={label}
+                  className="flex h-[32px] items-center justify-center rounded-full bg-[#F3F4F6] text-sm font-medium text-[#9CA3AF]"
+                >
+                  {label}
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-3">
+              {paginatedNotices.length > 0 ? (
+                paginatedNotices.map((notice) => (
+                  <div
+                    key={notice.id}
+                    className="grid grid-cols-[88px_minmax(0,1fr)_96px_96px_88px] items-center gap-2 border-b border-[#E5E7EB] py-3"
+                  >
+                    <div className="px-4 text-sm text-[#52525B]">
+                      {notice.id}
+                    </div>
+
+                    <div className="min-w-0 px-2">
+                      <div className="truncate text-sm text-[#18181B]">
+                        {notice.title}
+                      </div>
+                    </div>
+
+                    <div className="flex justify-center">
+                      <button
+                        type="button"
+                        aria-label={`Edit ${notice.title}`}
+                        disabled={loadingEditId === notice.id}
+                        onClick={() => handleEditClick(notice)}
+                        className="flex h-[36px] w-[40px] items-center justify-center rounded-full border border-[#D4D4D8] bg-[#F5F5F5] transition hover:bg-[#EBEBEB] disabled:cursor-not-allowed disabled:opacity-60"
+                      >
+                        <Pencil className="h-4 w-4 text-[#A1A1AA]" />
+                      </button>
+                    </div>
+
+                    <div className="flex justify-center">
+                      <button
+                        type="button"
+                        aria-label={`Delete ${notice.title}`}
+                        disabled={isDeleting}
+                        onClick={() => setDeletingNoticeId(notice.id)}
+                        className="flex h-[36px] w-[40px] items-center justify-center rounded-full border border-[#D4D4D8] bg-[#F5F5F5] transition hover:bg-[#EBEBEB] disabled:cursor-not-allowed disabled:opacity-60"
+                      >
+                        <Trash2 className="h-4 w-4 text-[#A1A1AA]" />
+                      </button>
+                    </div>
+
+                    <div className="flex justify-center">
+                      <input
+                        type="checkbox"
+                        checked={notice.isFixed}
+                        readOnly
+                        className="h-4 w-4 rounded border border-[#D4D4D8]"
+                      />
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <div className="flex h-[160px] items-center justify-center text-sm text-[#9CA3AF]">
+                  No notices found.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {totalPages > 1 && (
+          <div className="mt-10 flex items-center justify-center gap-4">
+            <button
+              type="button"
+              onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+              disabled={currentPage === 1}
+              className={cn(
+                'flex h-7 w-7 items-center justify-center rounded-full',
+                currentPage === 1
+                  ? 'bg-[#E5E7EB] text-[#A1A1AA]'
+                  : 'bg-[#3B82F6] text-white'
+              )}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </button>
+
+            <div className="flex items-center gap-6">
+              {pageNumbers.map((page) => (
+                <button
+                  key={page}
+                  type="button"
+                  onClick={() => setCurrentPage(page)}
+                  className={cn(
+                    'text-sm',
+                    currentPage === page
+                      ? 'font-semibold text-[#2563EB]'
+                      : 'text-[#71717A]'
+                  )}
+                >
+                  {page}
+                </button>
+              ))}
+            </div>
+
+            <button
+              type="button"
+              onClick={() =>
+                setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+              }
+              disabled={currentPage === totalPages}
+              className={cn(
+                'flex h-7 w-7 items-center justify-center rounded-full',
+                currentPage === totalPages
+                  ? 'bg-[#E5E7EB] text-[#A1A1AA]'
+                  : 'bg-[#3B82F6] text-white'
+              )}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      <CreateNoticeModal
+        courseId={groupId}
+        editData={editingNotice}
+        open={Boolean(editingNotice)}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            setEditingNotice(null)
+          }
+        }}
+      />
+
+      <DeleteNoticeModal
+        open={deletingNoticeId !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDeletingNoticeId(null)
+          }
+        }}
+        isDeleting={isDeleting}
+        onDelete={async () => {
+          if (deletingNoticeId === null) {
+            return
+          }
+          await handleDelete(deletingNoticeId)
+          setDeletingNoticeId(null)
+        }}
+      />
+    </>
+  )
+}
diff --git a/apps/frontend/components/AlertModal.tsx b/apps/frontend/components/AlertModal.tsx
index b94ef9ef0a..e48825d47c 100644
--- a/apps/frontend/components/AlertModal.tsx
+++ b/apps/frontend/components/AlertModal.tsx
@@ -76,7 +76,7 @@ export function AlertModal({
         <AlertDialogHeader className="flex flex-col items-center justify-center">
           {showIcon &&
             (type === 'warning' ? (
-              <InfoIcon className="h-[42px] w-[42px]" />
+              <InfoIcon className="h-[42px] w-[42px] shrink-0 overflow-visible" />
             ) : (
               <CheckCircleIcon className="text-primary h-[42px] w-[42px]" />
             ))}
diff --git a/apps/frontend/graphql/course/mutation.ts b/apps/frontend/graphql/course/mutation.ts
index c594057174..b42df7f4c8 100644
--- a/apps/frontend/graphql/course/mutation.ts
+++ b/apps/frontend/graphql/course/mutation.ts
@@ -96,11 +96,68 @@ const DELETE_WHITE_LIST = gql(`
   }
 `)
 
+const CREATE_COURSE_NOTICE = gql(`
+  mutation CreateCourseNotice($input: CreateCourseNoticeInput!) {
+    createCourseNotice(input: $input) {
+      id
+      title
+      content
+      isFixed
+      isPublic
+      createTime
+      updateTime
+    }
+  }
+`)
+
+const UPDATE_COURSE_NOTICE = gql(`
+  mutation UpdateCourseNotice(
+    $courseNoticeId: Int!
+    $input: UpdateCourseNoticeInput!
+  ) {
+    updateCourseNotice(courseNoticeId: $courseNoticeId, input: $input) {
+      id
+      title
+      content
+      isFixed
+      isPublic
+      updateTime
+    }
+  }
+`)
+
+const DELETE_COURSE_NOTICE = gql(`
+  mutation DeleteCourseNotice($courseNoticeId: Int!) {
+    deleteCourseNotice(courseNoticeId: $courseNoticeId) {
+      id
+    }
+  }
+`)
+
+const CLONE_COURSE_NOTICES = gql(`
+  mutation CloneCourseNotices(
+    $courseNoticeIds: [Int!]!
+    $cloneToId: Int!
+  ) {
+    cloneCourseNotices(
+      courseNoticeIds: $courseNoticeIds
+      cloneToId: $cloneToId
+    ) {
+      id
+      title
+    }
+  }
+`)
+
 export {
   CREATE_COURSE,
   DELETE_COURSE,
   UPDATE_COURSE,
   DUPLICATE_COURSE,
   CREATE_WHITE_LIST,
-  DELETE_WHITE_LIST
+  DELETE_WHITE_LIST,
+  CREATE_COURSE_NOTICE,
+  UPDATE_COURSE_NOTICE,
+  DELETE_COURSE_NOTICE,
+  CLONE_COURSE_NOTICES
 }
diff --git a/apps/frontend/public/icons/exclamation_mark.svg b/apps/frontend/public/icons/exclamation_mark.svg
new file mode 100644
index 0000000000..0f20bf0c5a
--- /dev/null
+++ b/apps/frontend/public/icons/exclamation_mark.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 6.477 17.523 2 12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12ZM11 16C11 15.7348 11.1054 15.4804 11.2929 15.2929C11.4804 15.1054 11.7348 15 12 15H12.008C12.2732 15 12.5276 15.1054 12.7151 15.2929C12.9026 15.4804 13.008 15.7348 13.008 16C13.008 16.2652 12.9026 16.5196 12.7151 16.7071C12.5276 16.8946 12.2732 17 12.008 17H12C11.7348 17 11.4804 16.8946 11.2929 16.7071C11.1054 16.5196 11 16.2652 11 16ZM12 7C12.2652 7 12.5196 7.10536 12.7071 7.29289C12.8946 7.48043 13 7.73478 13 8V13C13 13.2652 12.8946 13.5196 12.7071 13.7071C12.5196 13.8946 12.2652 14 12 14C11.7348 14 11.4804 13.8946 11.2929 13.7071C11.1054 13.5196 11 13.2652 11 13V8C11 7.73478 11.1054 7.48043 11.2929 7.29289C11.4804 7.10536 11.7348 7 12 7Z" fill="#B0B0B0"/>
+</svg>
diff --git a/apps/frontend/public/icons/lock_blue.svg b/apps/frontend/public/icons/lock_blue.svg
new file mode 100644
index 0000000000..c5e8c205fe
--- /dev/null
+++ b/apps/frontend/public/icons/lock_blue.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9993 5.33398H11.3327V4.66732C11.3327 2.82932 9.83735 1.33398 7.99935 1.33398C6.16135 1.33398 4.66602 2.82932 4.66602 4.66732V5.33398H3.99935C3.64573 5.33398 3.30659 5.47446 3.05654 5.72451C2.80649 5.97456 2.66602 6.3137 2.66602 6.66732V13.334C2.66602 13.6876 2.80649 14.0267 3.05654 14.2768C3.30659 14.5268 3.64573 14.6673 3.99935 14.6673H11.9993C12.353 14.6673 12.6921 14.5268 12.9422 14.2768C13.1922 14.0267 13.3327 13.6876 13.3327 13.334V6.66732C13.3327 6.3137 13.1922 5.97456 12.9422 5.72451C12.6921 5.47446 12.353 5.33398 11.9993 5.33398ZM5.99935 4.66732C5.99935 3.56465 6.89668 2.66732 7.99935 2.66732C9.10202 2.66732 9.99935 3.56465 9.99935 4.66732V5.33398H5.99935V4.66732ZM8.66602 10.4827V12.0007H7.33268V10.4827C6.93602 10.252 6.66602 9.82665 6.66602 9.33398C6.66602 8.98036 6.80649 8.64122 7.05654 8.39118C7.30659 8.14113 7.64573 8.00065 7.99935 8.00065C8.35297 8.00065 8.69211 8.14113 8.94216 8.39118C9.19221 8.64122 9.33268 8.98036 9.33268 9.33398C9.33268 9.82598 9.06268 10.2513 8.66602 10.4827Z" fill="#3581FA"/>
+</svg>
diff --git a/apps/frontend/public/icons/trashcan2_grey.svg b/apps/frontend/public/icons/trashcan2_grey.svg
new file mode 100644
index 0000000000..927407bdd6
--- /dev/null
+++ b/apps/frontend/public/icons/trashcan2_grey.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.83399 16.6673C5.37565 16.6673 4.98343 16.5043 4.65732 16.1782C4.33121 15.852 4.16788 15.4595 4.16732 15.0007V5.83398C3.93121 5.83398 3.73343 5.75398 3.57399 5.59398C3.41454 5.43398 3.33454 5.23621 3.33399 5.00065C3.33343 4.7651 3.41343 4.56732 3.57399 4.40732C3.73454 4.24732 3.93232 4.16732 4.16732 4.16732H7.50065C7.50065 3.93121 7.58065 3.73343 7.74065 3.57398C7.90065 3.41454 8.09843 3.33454 8.33399 3.33398H11.6673C11.9034 3.33398 12.1015 3.41398 12.2615 3.57398C12.4215 3.73398 12.5012 3.93176 12.5007 4.16732H15.834C16.0701 4.16732 16.2682 4.24732 16.4282 4.40732C16.5882 4.56732 16.6679 4.7651 16.6673 5.00065C16.6668 5.23621 16.5868 5.43426 16.4273 5.59482C16.2679 5.75537 16.0701 5.8351 15.834 5.83398V15.0007C15.834 15.459 15.6709 15.8515 15.3448 16.1782C15.0187 16.5048 14.6262 16.6679 14.1673 16.6673H5.83399ZM8.33399 14.1673C8.5701 14.1673 8.76815 14.0873 8.92815 13.9273C9.08815 13.7673 9.16788 13.5695 9.16732 13.334V8.33398C9.16732 8.09787 9.08732 7.9001 8.92732 7.74065C8.76732 7.58121 8.56954 7.50121 8.33399 7.50065C8.09843 7.5001 7.90065 7.5801 7.74065 7.74065C7.58065 7.90121 7.50065 8.09898 7.50065 8.33398V13.334C7.50065 13.5701 7.58065 13.7682 7.74065 13.9282C7.90065 14.0882 8.09843 14.1679 8.33399 14.1673ZM11.6673 14.1673C11.9034 14.1673 12.1015 14.0873 12.2615 13.9273C12.4215 13.7673 12.5012 13.5695 12.5007 13.334V8.33398C12.5007 8.09787 12.4207 7.9001 12.2607 7.74065C12.1007 7.58121 11.9029 7.50121 11.6673 7.50065C11.4318 7.5001 11.234 7.5801 11.074 7.74065C10.914 7.90121 10.834 8.09898 10.834 8.33398V13.334C10.834 13.5701 10.914 13.7682 11.074 13.9282C11.234 14.0882 11.4318 14.1679 11.6673 14.1673Z" fill="#9B9B9B"/>
+</svg>
diff --git a/apps/frontend/types/type.ts b/apps/frontend/types/type.ts
index 00c46469f4..2cc519077b 100644
--- a/apps/frontend/types/type.ts
+++ b/apps/frontend/types/type.ts
@@ -648,3 +648,64 @@ export interface CourseQnAItem {
   }
   comments: CourseQnAComment[]
 }
+export interface CourseNoticeCommentAuthor {
+  username: string
+  studentId: string
+}
+
+export interface CourseNoticeCommentItem {
+  id: number
+  createdById: number | null
+  createdBy: CourseNoticeCommentAuthor | null
+  isDeleted: boolean
+  isSecret: boolean
+  replyOnId: number | null
+  content: string
+  createdTime: Date
+  updateTime: Date
+}
+
+export interface CourseNoticeCommentGroup {
+  comment: CourseNoticeCommentItem
+  replys: CourseNoticeCommentItem[]
+}
+
+export interface CourseNoticeDetailCurrent {
+  groupId: number
+  isPublic: boolean
+  title: string
+  content: string
+  createTime: Date
+  updateTime: Date
+  createdBy: string | null
+  _count: {
+    CourseNoticeComment: number
+  }
+}
+
+export interface CourseNoticeNavigationItem {
+  id: number
+  title: string
+}
+
+export interface CourseNoticeDetailResponse {
+  current: CourseNoticeDetailCurrent
+  prev?: CourseNoticeNavigationItem | null
+  next?: CourseNoticeNavigationItem | null
+}
+
+export interface CourseNoticeListItem {
+  id: number
+  title: string
+  createTime?: string
+  updateTime?: string
+  isFixed: boolean
+  createdBy: string | null
+  isRead: boolean
+  commentCount: number
+}
+
+export interface CourseNoticeListResponse {
+  data: CourseNoticeListItem[]
+  total: number
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 088af18b4f..514d6ce721 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18827,7 +18827,7 @@ snapshots:
 
   '@testing-library/dom@10.4.0':
     dependencies:
-      '@babel/code-frame': 7.27.1
+      '@babel/code-frame': 7.29.0
       '@babel/runtime': 7.27.6
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0