design: 게시판 퍼블리싱

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@egjs/react-infinitegrid": "^4.12.0",
     "@mui/icons-material": "^6.4.4",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.0",

src/App.tsx

@@ -31,12 +31,15 @@ const App = () => {
           <Route path=":id" element={<LetterDetailPage />} />
         </Route>
         <Route path="board">
-          <Route path="letter" element={<LetterBoardPage />} />
+          <Route element={<Layout />}>
+            <Route path="rolling/:id" element={<RollingPaperPage />} />
+            <Route path="letter" element={<LetterBoardPage />} />
+          </Route>
           <Route path="letter/:id" element={<LetterBoardDetailPage />} />
-          <Route path="rolling/:id" element={<RollingPaperPage />} />
         </Route>
         <Route path="mypage" element={<Layout />}>
           <Route index element={<MyPage />} />
+          <Route path="board" element={<LetterBoardPage />} />
           <Route path="notifications" element={<NotificationsPage />} />
         </Route>
       </Route>

src/assets/icons/index.ts

@@ -1,8 +1,25 @@
 import AlarmIcon from './alarm.svg?react';
 import ArrowLeftIcon from './arrow-left.svg?react';
 import BoardIcon from './board.svg?react';
+import DeleteIcon from './delete.svg?react';
 import EnvelopeIcon from './envelope.svg?react';
+import LikeFilledIcon from './like-filled.svg?react';
+import LikeOutlinedIcon from './like-outlined.svg?react';
+import NoticeIcon from './notice.svg?react';
 import PersonIcon from './person.svg?react';
-import SirenIcon from './siren.svg?react';
+import SirenFilledIcon from './siren-filled.svg?react';
+import SirenOutlinedIcon from './siren-outlined.svg?react';
 
-export { AlarmIcon, PersonIcon, ArrowLeftIcon, SirenIcon, EnvelopeIcon, BoardIcon };
+export {
+  AlarmIcon,
+  PersonIcon,
+  ArrowLeftIcon,
+  SirenFilledIcon,
+  SirenOutlinedIcon,
+  EnvelopeIcon,
+  BoardIcon,
+  NoticeIcon,
+  LikeFilledIcon,
+  LikeOutlinedIcon,
+  DeleteIcon,
+};

src/components/BackgroundBottom.tsx

@@ -0,0 +1,12 @@
+import BgItem from '@/assets/images/field-4.png';
+
+const BackgroundBottom = () => {
+  return (
+    <div
+      className="background-image-filled fixed bottom-[-40px] left-1/2 z-[-10] h-42 w-full -translate-x-1/2 opacity-70"
+      style={{ '--bg-image': `url(${BgItem})` } as React.CSSProperties}
+    />
+  );
+};
+
+export default BackgroundBottom;

src/components/ConfirmModal.tsx

@@ -1,4 +1,4 @@
-import ModalBg from '@/assets/images/yellow-modal.png';
+import ModalBg from '@/assets/images/modal-yellow.png';
 
 import ModalOverlay from './ModalOverlay';
 
@@ -7,6 +7,7 @@ interface ConfirmModalProps {
   description: string;
   cancelText: string;
   confirmText: string;
+  confirmDisabled?: boolean;
   children?: React.ReactNode;
   onCancel: () => void;
   onConfirm: () => void;
@@ -17,6 +18,7 @@ const ConfirmModal = ({
   description,
   cancelText,
   confirmText,
+  confirmDisabled,
   children,
   onCancel,
   onConfirm,
@@ -25,8 +27,10 @@ const ConfirmModal = ({
   return (
     <ModalOverlay>
       <div className="w-73">
-        <section className="relative mb-12 overflow-hidden rounded-lg p-5">
-          <img src={ModalBg} className="absolute inset-0 z-[-10] h-full w-full" />
+        <section
+          className="background-image-filled mb-12 rounded-lg p-5"
+          style={{ '--bg-image': `url(${ModalBg})` } as React.CSSProperties}
+        >
           <div className="flex flex-col gap-1">
             <p className="body-m text-gray-80">{title}</p>
             <p className="caption-r text-black">{description}</p>
@@ -44,6 +48,7 @@ const ConfirmModal = ({
           <button
             type="button"
             className="primary-btn body-m h-10 flex-1 basis-1/2"
+            disabled={confirmDisabled}
             onClick={onConfirm}
           >
             {confirmText}

src/components/MessageModal.tsx

@@ -0,0 +1,66 @@
+import { ChangeEvent } from 'react';
+
+import ModalBg from '@/assets/images/modal-pink.png';
+
+import ModalOverlay from './ModalOverlay';
+import TextareaField from './TextareaField';
+
+interface MessageModalProps {
+  description?: string;
+  inputValue: string;
+  placeholder?: string;
+  cancelText: string;
+  completeText: string;
+  children?: React.ReactNode;
+  onInputChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  onCancel: () => void;
+  onComplete: () => void;
+}
+
+const MessageModal = ({
+  description,
+  inputValue,
+  placeholder,
+  cancelText,
+  completeText,
+  children,
+  onInputChange,
+  onCancel,
+  onComplete,
+}: MessageModalProps) => {
+  return (
+    <ModalOverlay>
+      <p className="body-sb mb-4 text-white">{description}</p>
+      <section
+        className="background-image-filled mb-12 w-78 rounded-lg p-4"
+        style={{ '--bg-image': `url(${ModalBg})` } as React.CSSProperties}
+      >
+        <TextareaField
+          rows={5}
+          value={inputValue}
+          placeholder={placeholder}
+          onChange={onInputChange}
+        />
+        {children}
+      </section>
+      <section className="flex items-center gap-6">
+        <button
+          type="button"
+          className="body-m secondary-btn h-10 flex-1 basis-1/2"
+          onClick={onCancel}
+        >
+          {cancelText}
+        </button>
+        <button
+          type="button"
+          className="primary-btn body-m h-10 flex-1 basis-1/2"
+          onClick={onComplete}
+        >
+          {completeText}
+        </button>
+      </section>
+    </ModalOverlay>
+  );
+};
+
+export default MessageModal;

src/components/ModalOverlay.tsx

@@ -1,11 +1,44 @@
+import { useEffect } from 'react';
+
+import { getScrollbarWidth } from '@/utils/getScrollbarWidth';
+
 interface ModalOverlayProps {
-  children: React.ReactElement;
+  closeOnOutsideClick?: boolean;
+  children: React.ReactNode;
+  onClose?: () => void;
 }
 
-const ModalOverlay = ({ children }: ModalOverlayProps) => {
+const ModalOverlay = ({ closeOnOutsideClick = false, children, onClose }: ModalOverlayProps) => {
+  useEffect(() => {
+    const scrollbarWidth = getScrollbarWidth();
+
+    document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
+    document.body.classList.add('modal-open');
+
+    return () => {
+      document.documentElement.style.setProperty('--scrollbar-width', '0px');
+      document.body.classList.remove('modal-open');
+    };
+  }, []);
+
+  const handleClickOutside = () => {
+    if (closeOnOutsideClick && onClose) {
+      onClose();
+    }
+  };
+
+  const handleClickInside = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+  };
+
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
-      {children}
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+      onClick={handleClickOutside}
+    >
+      <div className="flex flex-col" onClick={handleClickInside}>
+        {children}
+      </div>
     </div>
   );
 };

src/components/NoticeRolling.tsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+import { NoticeIcon } from '@/assets/icons';
+
+const DUMMY_CONTENT =
+  '11월 15일은 수능! 고생하는 수험생들을 위해 응원의 11월 15일은 수능! 고생하는 수험 11월 15일은 수능! 고생하는 수험';
+
+const NoticeRolling = () => {
+  return (
+    <Link to="/board/rolling/1">
+      <article
+        className={twMerge(
+          'text-gray-60 flex w-full items-center gap-2.5 rounded-lg px-4 py-2',
+          'bg-linear-[275deg,rgba(255,255,255,0.4)_13.74%,rgba(238,238,238,0.4)_67.61%]',
+          'shadow-[0_1px_6px_rgba(218,189,74,0.8)]',
+        )}
+      >
+        <NoticeIcon className="h-6 w-6 text-gray-50" />
+        <p className="body-sb line-clamp-1">{DUMMY_CONTENT}</p>
+      </article>
+    </Link>
+  );
+};
+
+export default NoticeRolling;