[FEAT] : 공지사항, 공지 상세 화면 구현

src/app/global.css

@@ -101,4 +101,8 @@ input[type='number'] {
   .shadow-button {
     box-shadow: 4px 4px 20px 0px rgba(55, 127, 248, 0.1);
   }
+
+  .shadow-noticeItem {
+    box-shadow: 2px 8px 40px -3.034px rgba(50, 65, 96, 0.1);
+  }
 }

src/app/stackflow/Stack.tsx

@@ -4,10 +4,12 @@ import { stackflow } from '@stackflow/react';
 
 import { LoginScreen } from '@/screen/login/ui';
 import { HomeScreen } from '@/screen/home/ui';
+import { NoticeScreen } from '@/screen/notice/ui';
+import { NoticeContentScreen } from '@/screen/notice-content/ui';
 
 export const { Stack, useFlow } = stackflow({
   transitionDuration: 350,
-  activities: { LoginScreen, HomeScreen },
+  activities: { NoticeScreen, NoticeContentScreen, LoginScreen, HomeScreen },
   plugins: [
     basicRendererPlugin(),
     basicUIPlugin({

src/assets/icon/index.ts

@@ -1,5 +1,7 @@
 import UserIcon from './icon-user.png';
 import ResultIcon from './icon-result.svg';
 import NoticeIcon from './icon-notice.svg';
+import NotificationIcon from './icon-notification.svg';
+import MessageIcon from './icon-message.svg';
 
-export { UserIcon, ResultIcon, NoticeIcon };
+export { UserIcon, ResultIcon, NoticeIcon, NotificationIcon, MessageIcon };

src/features/notice/mock/index.ts

@@ -0,0 +1 @@
+export * from './notice';

src/features/notice/mock/notice.ts

@@ -0,0 +1,40 @@
+import type { Notice } from '../types';
+
+export const NOTICE_MOCK: Notice[] = [
+  {
+    id: 1,
+    title: '2025년 봄학기 개강 안내',
+    type: 'NOTIFICATION',
+    date: '2025-03-01',
+  },
+  {
+    id: 2,
+    title: '홈페이지 점검 일정 안내',
+    type: 'NOTIFICATION',
+    date: '2025-03-05',
+  },
+  {
+    id: 3,
+    title: '중간고사 일정 공지',
+    type: 'NOTIFICATION',
+    date: '2025-04-10',
+  },
+  {
+    id: 4,
+    title: '신입생 오리엔테이션 안내',
+    type: 'NOTIFICATION',
+    date: '2025-02-25',
+  },
+  {
+    id: 5,
+    title: '장학금 신청 기간 안내',
+    type: 'MESSAGE',
+    date: '2025-03-15',
+  },
+  {
+    id: 6,
+    title: '건물 전기 점검에 따른 이용 제한 안내',
+    type: 'MESSAGE',
+    date: '2025-03-20',
+  },
+];

src/features/notice/types/index.ts

@@ -0,0 +1 @@
+export * from './notice';

src/features/notice/types/notice.ts

@@ -0,0 +1,8 @@
+export type NoticeType = 'MESSAGE' | 'NOTIFICATION';
+
+export type Notice = {
+  id: number;
+  title: string;
+  type: NoticeType;
+  date: string;
+};

src/features/notice/ui/NoticeItem.tsx

@@ -0,0 +1,44 @@
+import { MessageIcon, NotificationIcon } from '@/assets/icon';
+import type { Notice } from '../types';
+
+import { cn } from '@/shared/utils';
+import { useFlow } from '@/app/stackflow';
+import { PATH } from '@/shared/constants';
+
+export default function NoticeItem({ id, title, type, date }: Notice) {
+  const typeLabel = type === 'NOTIFICATION' ? '알림' : '예정';
+  const { push } = useFlow();
+
+  return (
+    <button
+      name={`${id}`}
+      className="flex w-full cursor-pointer items-center overflow-hidden px-5 py-6 focus:outline-none"
+      onClick={() =>
+        push(PATH.NOTICE_CONTENT, { notice: { id, title, type, date } })
+      }
+    >
+      <img
+        src={type === 'NOTIFICATION' ? NotificationIcon : MessageIcon}
+        className="shadow-noticeItem size-10 rounded-md"
+      />
+      <div className="ml-[10px] flex w-full flex-col items-start">
+        <div className="flex w-full justify-between text-lg font-semibold">
+          <p className="w-52 overflow-hidden text-start text-nowrap text-ellipsis">
+            {title}
+          </p>
+          <div
+            className={cn(
+              type === 'NOTIFICATION'
+                ? 'bg-red-500/20 text-red-600'
+                : 'bg-mxl text-m',
+              'flex w-13 items-center justify-center rounded-[6px] py-0.5 text-sm font-medium',
+            )}
+          >
+            {typeLabel}
+          </div>
+        </div>
+        <p className="text-mid font-medium text-[#999]">{date}</p>
+      </div>
+    </button>
+  );
+}

src/features/notice/ui/NoticeList.tsx

@@ -0,0 +1,12 @@
+import { NOTICE_MOCK } from '../mock';
+import NoticeItem from './NoticeItem';
+
+export default function NoticeList() {
+  return (
+    <div className="flex w-full flex-1 flex-shrink-0 flex-col divide-y divide-[#ECECEC] overflow-scroll">
+      {NOTICE_MOCK.map(({ id, title, type, date }) => (
+        <NoticeItem key={id} id={id} title={title} type={type} date={date} />
+      ))}
+    </div>
+  );
+}

src/features/notice/ui/index.ts

@@ -0,0 +1,2 @@
+export { default as NoticeList } from './NoticeList';
+export { default as NoticeItem } from './NoticeItem';

src/screen/notice-content/ui/NoticeContentScreen.tsx

@@ -0,0 +1,24 @@
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+
+import { TitleAppBar } from '@/shared/ui';
+import type { Notice } from '@/features/notice/types';
+import type { ActivityComponentType } from '@stackflow/react';
+import { NoticeContentContainer } from '@/widgets/notice-content/ui';
+
+const NoticeContentScreen: ActivityComponentType<{ notice: Notice }> = ({
+  params,
+}: {
+  params: { notice: Notice };
+}) => {
+  return (
+    <AppScreen
+      preventSwipeBack
+      backgroundColor="#fff"
+      appBar={TitleAppBar('공지사항')}
+    >
+      <NoticeContentContainer title={params.notice.title} />
+    </AppScreen>
+  );
+};
+
+export default NoticeContentScreen;

src/screen/notice-content/ui/index.ts

@@ -0,0 +1 @@
+export { default as NoticeContentScreen } from './NoticeContentScreen';

src/screen/notice/ui/NoticeScreen.tsx

@@ -0,0 +1,16 @@
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+
+import { TitleAppBar } from '@/shared/ui';
+import { NoticeContainer } from '@/widgets/notice/ui';
+
+export default function NoticeScreen() {
+  return (
+    <AppScreen
+      preventSwipeBack
+      backgroundColor="#fff"
+      appBar={TitleAppBar('공지사항')}
+    >
+      <NoticeContainer />
+    </AppScreen>
+  );
+}

src/screen/notice/ui/index.ts

@@ -0,0 +1 @@
+export { default as NoticeScreen } from './NoticeScreen';

src/shared/constants/path.ts

@@ -1,4 +1,6 @@
 export const PATH = {
   HOME: 'HomeScreen',
   LOGIN: 'LoginScreen',
+  NOTICE: 'NoticeScreen',
+  NOTICE_CONTENT: 'NoticeContentScreen',
 } as const;

src/shared/ui/AppBar.tsx

@@ -3,7 +3,7 @@
 
 const baseStyle = { height: '58px', border: false };
 
 export const BasicAppBar = {
   ...baseStyle,
   backgroundImage: `url(${LoginBg})`,
   renderLeft: () => (
@@ -11,7 +11,7 @@
   ),
 };
 
 export const HomeAppBar = {
   ...baseStyle,
   backgroundImage: `url(${HomeBg})`,
   renderLeft: () => (
@@ -19,3 +19,9 @@
   ),
   renderRight: () => <img src={UserIcon} alt="user" className="mr-[4px]" />,
 };
+
+export const TitleAppBar = (title: string) => ({
+  ...baseStyle,
+  backgroundColor: '#fff',
+  title: title,
+});