[feat] 공지 작성/조회/수정 페이지 구현

frontend/main.tsx

@@ -4,19 +4,16 @@ import { createBrowserRouter, RouterProvider } from 'react-router';
 import { Global } from '@emotion/react';
 import { globalStyles } from './src/styles/global';
 import App from './src/App';
-import NoticeListPage from './src/features/notice/NoticeListPage';
+import { routes as noticeRoutes } from './src/features/notice/routes/route';
 import { routes as studiesRoutes } from './src/features/studies/routes';
 
 const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
   },
-  {
-    path: '/studies/:studyId/notices',
-    element: <NoticeListPage />,
-  },
   ...studiesRoutes,
+  ...noticeRoutes,
 ]);
 
 const root = document.getElementById('root')!;

frontend/src/features/notice/components/LeaderNoticeList.tsx

@@ -0,0 +1,28 @@
+import clock from '../../../shared/assets/clock-black.svg';
+import Badge from '../../../shared/ui/Badge';
+import NoticeList, { type NoticeListItem } from './NoticeList';
+
+interface LeaderNoticeListProps {
+  notices: NoticeListItem[];
+  studyId: string;
+}
+
+export default function LeaderNoticeList({ notices, studyId }: LeaderNoticeListProps) {
+  return (
+    <NoticeList notices={notices} studyId={studyId} detailSearch="?role=leader">
+      {(notice) => (
+        <>
+          <Badge variant="BrandOutline" size="Small">
+            {notice.readCount}/{notice.totalCount} 읽음
+          </Badge>
+          {notice.reminderText && (
+            <Badge variant="NeutralSolid" size="Small">
+              <img src={clock} alt="리마인드 시각" width={12} height={12} />
+              {notice.reminderText}
+            </Badge>
+          )}
+        </>
+      )}
+    </NoticeList>
+  );
+}

frontend/src/features/notice/components/MemberNoticeList.tsx

@@ -0,0 +1,19 @@
+import Badge from '../../../shared/ui/Badge';
+import NoticeList, { type NoticeListItem } from './NoticeList';
+
+interface MemberNoticeListProps {
+  notices: NoticeListItem[];
+  studyId: string;
+}
+
+export default function MemberNoticeList({ notices, studyId }: MemberNoticeListProps) {
+  return (
+    <NoticeList notices={notices} studyId={studyId}>
+      {(notice) => (
+        <Badge variant={notice.isRead ? 'BrandOutline' : 'BrandSolid'} size="Small">
+          {notice.isRead ? '읽음' : '읽지 않음'}
+        </Badge>
+      )}
+    </NoticeList>
+  );
+}

frontend/src/features/notice/components/MemberNoticeReadState.tsx

@@ -0,0 +1,110 @@
+import type { CSSProperties } from 'react';
+import { useEffect, useState } from 'react';
+import checkIcon from '../../../shared/assets/check.svg';
+import circleCheckIcon from '../../../shared/assets/circle-check.svg';
+import { tokens, typography } from '../../../styles/global';
+
+interface MemberNoticeReadStateProps {
+  progress: number;
+  readAt?: string;
+}
+
+const footerStyle = {
+  position: 'sticky',
+  bottom: 0,
+  zIndex: 10,
+  display: 'flex',
+  minHeight: '85px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderTop: tokens.border.neutral,
+  background: tokens.bg.default,
+} satisfies CSSProperties;
+
+const readingStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: tokens.spacing[1],
+} satisfies CSSProperties;
+
+const guideStyle = {
+  ...typography.subtitle,
+  color: tokens.text.brand,
+} satisfies CSSProperties;
+
+const progressStyle = {
+  ...typography.footnote,
+  color: tokens.text.muted,
+} satisfies CSSProperties;
+
+const completedStyle = {
+  ...typography.subtitle,
+  display: 'flex',
+  alignItems: 'center',
+  gap: tokens.spacing[1],
+  color: tokens.text.brand,
+} satisfies CSSProperties;
+
+const toastStyle = {
+  ...typography.body,
+  position: 'fixed',
+  right: tokens.layout.gutter,
+  bottom: `calc(100px + ${tokens.layout.safeBottom})`,
+  left: tokens.layout.gutter,
+  zIndex: 20,
+  display: 'flex',
+  maxWidth: '350px',
+  height: '48px',
+  margin: '0 auto',
+  padding: `0 ${tokens.spacing[4]}`,
+  alignItems: 'center',
+  gap: tokens.spacing[2],
+  borderRadius: tokens.radius.md,
+  background: tokens.bg.brand,
+  color: tokens.text.onBrand,
+} satisfies CSSProperties;
+
+export default function MemberNoticeReadState({ progress, readAt }: MemberNoticeReadStateProps) {
+  const isCompleted = progress >= 100;
+  const [isToastDismissed, setIsToastDismissed] = useState(false);
+
+  useEffect(() => {
+    if (!isCompleted) return;
+
+    const timeoutId = window.setTimeout(() => setIsToastDismissed(true), 2000);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [isCompleted]);
+
+  return (
+    <>
+      {isCompleted && !isToastDismissed && (
+        <div css={toastStyle} role="status">
+          <img
+            src={checkIcon}
+            alt=""
+            width={16}
+            height={16}
+            css={{ filter: 'brightness(0) invert(1)' }}
+          />
+          읽음으로 표시했어요
+        </div>
+      )}
+
+      <footer css={footerStyle}>
+        {isCompleted ? (
+          <div css={completedStyle}>
+            <img src={circleCheckIcon} alt="읽음 완료" width={22} height={22} />
+            {readAt ? `${readAt}에 읽음` : '읽음 완료'}
+          </div>
+        ) : (
+          <div css={readingStyle}>
+            <strong css={guideStyle}>끝까지 읽으면 읽음으로 표시돼요</strong>
+            <span css={progressStyle}>지금 {progress}% 읽었어요</span>
+          </div>
+        )}
+      </footer>
+    </>
+  );
+}

frontend/src/features/notice/components/NoticeArticle.tsx

@@ -0,0 +1,63 @@
+import type { CSSProperties } from 'react';
+import profileIcon from '../../../shared/assets/unknown-profile.svg';
+import { tokens, typography } from '../../../styles/global';
+
+interface NoticeArticleProps {
+  title: string;
+  author: string;
+  createdAt: string;
+  content: string;
+  hasTopMargin?: boolean;
+}
+
+const articleStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  marginTop: tokens.spacing[5],
+} satisfies CSSProperties;
+
+const titleStyle = {
+  ...typography.headline,
+  margin: 0,
+  color: tokens.text.primary,
+} satisfies CSSProperties;
+
+const authorRowStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: tokens.spacing[2],
+  marginTop: tokens.spacing[1],
+} satisfies CSSProperties;
+
+const authorStyle = {
+  ...typography.footnote,
+  color: tokens.text.muted,
+} satisfies CSSProperties;
+
+const contentStyle = {
+  ...typography.subtitle,
+  margin: `${tokens.spacing[4]} 0 0`,
+  color: tokens.text.secondary,
+  whiteSpace: 'pre-line',
+} satisfies CSSProperties;
+
+export default function NoticeArticle({
+  title,
+  author,
+  createdAt,
+  content,
+  hasTopMargin = true,
+}: NoticeArticleProps) {
+  return (
+    <article css={{ ...articleStyle, marginTop: hasTopMargin ? articleStyle.marginTop : 0 }}>
+      <h2 css={titleStyle}>{title}</h2>
+      <div css={authorRowStyle}>
+        <img src={profileIcon} alt="" width={28} height={28} />
+        <span css={authorStyle}>
+          {author} · {createdAt}
+        </span>
+      </div>
+      <p css={contentStyle}>{content}</p>
+    </article>
+  );
+}

frontend/src/features/notice/components/NoticeDetailActions.tsx

@@ -0,0 +1,41 @@
+import type { CSSProperties } from 'react';
+import deleteIcon from '../../../shared/assets/delete.svg';
+import modifyIcon from '../../../shared/assets/modify.svg';
+import Button from '../../../shared/ui/Button';
+import { tokens } from '../../../styles/global';
+
+interface NoticeDetailActionsProps {
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+const actionsStyle = {
+  display: 'flex',
+  gap: tokens.spacing[2],
+  marginTop: tokens.spacing[5],
+} satisfies CSSProperties;
+
+const buttonContentStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: tokens.spacing[1],
+} satisfies CSSProperties;
+
+export default function NoticeDetailActions({ onEdit, onDelete }: NoticeDetailActionsProps) {
+  return (
+    <div css={actionsStyle}>
+      <Button variant="neutralOutline" size="small" onClick={onEdit}>
+        <span css={{ ...buttonContentStyle, color: tokens.text.primary }}>
+          <img src={modifyIcon} alt="" width={18} height={18} />
+          수정
+        </span>
+      </Button>
+      <Button variant="criticalOutline" size="small" onClick={onDelete}>
+        <span css={buttonContentStyle}>
+          <img src={deleteIcon} alt="" width={18} height={18} />
+          삭제
+        </span>
+      </Button>
+    </div>
+  );
+}