design: 편지 공유 게시글 상세 페이지 퍼블리싱

Author: AAminha

src/assets/icons/delete.svg

@@ -1,9 +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, NoticeIcon };
+export {
+  AlarmIcon,
+  PersonIcon,
+  ArrowLeftIcon,
+  SirenFilledIcon,
+  SirenOutlinedIcon,
+  EnvelopeIcon,
+  BoardIcon,
+  NoticeIcon,
+  LikeFilledIcon,
+  LikeOutlinedIcon,
+  DeleteIcon,
+};

src/assets/icons/index.ts

@@ -0,0 +1,47 @@
+import {
+  ArrowLeftIcon,
+  DeleteIcon,
+  LikeFilledIcon,
+  LikeOutlinedIcon,
+  SirenOutlinedIcon,
+} from '@/assets/icons';
+
+interface HeaderProps {
+  likeCount: number;
+  isLike: boolean;
+  isWriter: boolean;
+  onToggleLike: () => void;
+  onOpenReportModal: () => void;
+}
+
+const Header = ({ likeCount, isLike, isWriter, onToggleLike, onOpenReportModal }: HeaderProps) => {
+  return (
+    <header className="fixed top-0 z-40 w-full max-w-150">
+      <div className="flex h-16 items-center justify-between bg-white p-5">
+        <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1">
+            <button type="button" onClick={onToggleLike}>
+              {isLike ? (
+                <LikeFilledIcon className="text-primary-1 h-6 w-6" />
+              ) : (
+                <LikeOutlinedIcon className="text-primary-1 h-6 w-6" />
+              )}
+            </button>
+            <p className="body-l-m text-primary-1">{likeCount}</p>
+          </div>
+          {isWriter ? (
+            <DeleteIcon className="text-primary-1 h-6 w-6" />
+          ) : (
+            <button type="button" onClick={onOpenReportModal}>
+              <SirenOutlinedIcon className="text-primary-1 h-6 w-6" />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="h-4 w-full bg-gradient-to-b from-white to-white/0" />
+    </header>
+  );
+};
+
+export default Header;

src/assets/icons/like-filled.svg

@@ -1,5 +1,65 @@
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import ReportModal from '@/components/ReportModal';
+
+import Header from './components/Header';
+import Letter from './components/Letter';
+
+const DUMMY_LETTER = {
+  receiver: '12E21',
+  content:
+    '편지 내용 어쩌구저쩌구 뾰로롱 편지 내용 어쩌구저쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 저쩌구 끝~!!',
+  sender: '12345',
+};
+
 const LetterBoardDetailPage = () => {
-  return <div>LetterBoardDetailPage</div>;
+  const [likeCount, setLikeCount] = useState(122);
+  const [isLike, setIsLike] = useState(false);
+  const isWriter = false;
+  const [activeReportModal, setActiveReportModal] = useState(false);
+
+  const handleToggleLike = () => {
+    setLikeCount((prev) => prev + (isLike ? -1 : 1));
+    setIsLike((prev) => !prev);
+  };
+
+  return (
+    <>
+      {activeReportModal && <ReportModal onClose={() => setActiveReportModal(false)} />}
+      <div className="grow bg-white">
+        <Header
+          likeCount={likeCount}
+          isLike={isLike}
+          isWriter={isWriter}
+          onToggleLike={handleToggleLike}
+          onOpenReportModal={() => setActiveReportModal(true)}
+        />
+        <main className="px-5 pt-18 pb-3">
+          <p className="body-b mb-6 px-5">FROM. 12E31</p>
+          <p
+            className={twMerge(
+              'body-r bg-[repeating-linear-gradient(transparent,transparent_25px,#ffe6e3_26px)] px-5 whitespace-pre-wrap',
+              'leading-[26px]',
+            )}
+          >
+            내가 최근 먀먀먀를 했음. 그런데 이런 고민을 부모님께 말씀드리기에는 너무 죄송했음.
+            이런저런 조언을 구하지 못해 편지를 작성했는데 너무나도 따뜻한 조언과 이야기를 받고 힘이
+            났음. 다른 분들께도 내가 받았던 응원을 함께 공유하고 싶음.
+          </p>
+          <section className="flex flex-col gap-6.5 px-5 py-6.5">
+            <Letter letter={DUMMY_LETTER} isSender />
+            <Letter letter={DUMMY_LETTER} />
+            <Letter letter={DUMMY_LETTER} isSender />
+            <Letter letter={DUMMY_LETTER} />
+            <Letter letter={DUMMY_LETTER} isSender />
+            <Letter letter={DUMMY_LETTER} isSender />
+            <Letter letter={DUMMY_LETTER} />
+          </section>
+        </main>
+      </div>
+    </>
+  );
 };
 
 export default LetterBoardDetailPage;

src/assets/icons/like-outlined.svg

@@ -1,10 +1,10 @@
-import { BoardIcon, EnvelopeIcon, SirenIcon } from '@/assets/icons';
+import { BoardIcon, EnvelopeIcon, SirenFilledIcon } from '@/assets/icons';
 
 export const NOTIFICATION_ICON: Record<
   string,
   React.ComponentType<React.SVGProps<SVGSVGElement>>
 > = {
   letter: EnvelopeIcon,
-  warning: SirenIcon,
+  warning: SirenFilledIcon,
   board: BoardIcon,
 };