design: 게시판 상세 페이지의 편지 컴포넌트 퍼블리싱

Author: AAminha

src/assets/images/memo-yellow.png

@@ -11,11 +11,9 @@ interface ModalOverlayProps {
 const ModalOverlay = ({ closeOnOutsideClick = false, children, onClose }: ModalOverlayProps) => {
   useEffect(() => {
     const scrollbarWidth = getScrollbarWidth();
-    const header = document.querySelector('header');
 
     document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
     document.body.classList.add('modal-open');
-    if (header) header.classList.add('modal-open');
 
     return () => {
       document.documentElement.style.setProperty('--scrollbar-width', '0px');

src/components/ModalOverlay.tsx

@@ -0,0 +1,28 @@
+import PinkMemoBg from '@/assets/images/memo-pink.png';
+import YellowMemoBg from '@/assets/images/memo-yellow.png';
+
+interface LetterProps {
+  letter: {
+    receiver: string;
+    content: string;
+    sender: string;
+  };
+  isSender?: boolean;
+}
+
+const Letter = ({ letter, isSender = false }: LetterProps) => {
+  return (
+    <article
+      className="flex flex-col gap-2 bg-[image:var(--bg-image)] bg-[length:100%_100%] bg-center p-4 text-black"
+      style={
+        { '--bg-image': `url(${isSender ? PinkMemoBg : YellowMemoBg})` } as React.CSSProperties
+      }
+    >
+      <p className="body-sb">To. {letter.receiver}</p>
+      <p className="body-r leading-[26px] whitespace-pre-wrap">{letter.content}</p>
+      <p className="body-m place-self-end">From. {letter.sender}</p>
+    </article>
+  );
+};
+
+export default Letter;