design: 내 편지함 페이지 퍼블리싱 (#16)

* design: 내 편지함 목록 페이지 퍼블리싱

* refactor: 리스트 디자인 컴포넌트로 분리

* design: 컴포넌트 props명 수정 및 sender, receiver 디자인 변경

* design: 내 편지함 상세 페이지 퍼블리싱

* refactor: 배경 이미지 삽입되는 로직 컴포넌트로 분리

* design: 필요한 모달 퍼블리싱 및 버튼과 연결

* rename: ListItemContainer -> ListItemWrapper로 컴포넌트명 수정

* refactor: 페이지 제목에 PageTitle 컴포넌트 적용

Author: AAminha

src/App.tsx

@@ -6,6 +6,7 @@ import Home from './pages/Home';
 import LetterBoardPage from './pages/LetterBoard';
 import LetterBoardDetailPage from './pages/LetterBoardDetail';
 import LetterBoxPage from './pages/LetterBox';
+import LetterBoxDetailPage from './pages/LetterBoxDetail';
 import LetterDetailPage from './pages/LetterDetail';
 import LoginPage from './pages/Login';
 import MyPage from './pages/MyPage';
@@ -25,8 +26,11 @@ const App = () => {
         <Route path="login" element={<LoginPage />} />
         <Route path="onboarding" element={<OnboardingPage />} />
         <Route path="letter">
-          <Route path="random" element={<RandomLettersPage />} />
-          <Route path="box" element={<LetterBoxPage />} />
+          <Route element={<Layout />}>
+            <Route path="random" element={<RandomLettersPage />} />
+            <Route path="box" element={<LetterBoxPage />} />
+            <Route path="box/:id" element={<LetterBoxDetailPage />} />
+          </Route>
           <Route path="write" element={<WritePage />} />
           <Route path=":id" element={<LetterDetailPage />} />
         </Route>

src/assets/icons/index.ts

@@ -3,6 +3,7 @@ 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 InformationIcon from './infromation.svg?react';
 import LikeFilledIcon from './like-filled.svg?react';
 import LikeOutlinedIcon from './like-outlined.svg?react';
 import NoticeIcon from './notice.svg?react';
@@ -14,6 +15,7 @@ export {
   AlarmIcon,
   PersonIcon,
   ArrowLeftIcon,
+  InformationIcon,
   SirenFilledIcon,
   SirenOutlinedIcon,
   EnvelopeIcon,

src/assets/icons/infromation.svg

@@ -1,10 +1,13 @@
 import BgItem from '@/assets/images/field-4.png';
 
+import BackgroundImageWrapper from './BackgroundImageWrapper';
+
 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}
+    <BackgroundImageWrapper
+      as="div"
+      className="fixed bottom-[-40px] left-1/2 z-[-10] h-42 w-full -translate-x-1/2 opacity-70"
+      imageUrl={BgItem}
     />
   );
 };

src/assets/images/door.png

@@ -0,0 +1,29 @@
+import { twMerge } from 'tailwind-merge';
+
+interface BackgroundImageWrapperProps {
+  as?: React.ElementType;
+  imageUrl: string;
+  className?: string;
+  children?: React.ReactNode;
+  onClick?: () => void;
+}
+
+const BackgroundImageWrapper = ({
+  as: Component = 'div',
+  imageUrl,
+  className,
+  children,
+  onClick,
+}: BackgroundImageWrapperProps) => {
+  return (
+    <Component
+      className={twMerge('background-image-filled', className)}
+      style={{ '--bg-image': `url(${imageUrl})` } as React.CSSProperties}
+      onClick={onClick}
+    >
+      {children}
+    </Component>
+  );
+};
+
+export default BackgroundImageWrapper;

src/components/BackgroundBottom.tsx

@@ -1,5 +1,6 @@
 import ModalBg from '@/assets/images/modal-yellow.png';
 
+import BackgroundImageWrapper from './BackgroundImageWrapper';
 import ModalOverlay from './ModalOverlay';
 
 interface ConfirmModalProps {
@@ -27,16 +28,13 @@ const ConfirmModal = ({
   return (
     <ModalOverlay>
       <div className="w-73">
-        <section
-          className="background-image-filled mb-12 rounded-lg p-5"
-          style={{ '--bg-image': `url(${ModalBg})` } as React.CSSProperties}
-        >
+        <BackgroundImageWrapper as="section" className="mb-12 rounded-lg p-5" imageUrl={ModalBg}>
           <div className="flex flex-col gap-1">
             <p className="body-m text-gray-80">{title}</p>
             <p className="caption-r text-black">{description}</p>
           </div>
           {children}
-        </section>
+        </BackgroundImageWrapper>
         <section className="flex items-center gap-6">
           <button
             type="button"

src/components/BackgroundImageWrapper.tsx

@@ -0,0 +1,31 @@
+import { twMerge } from 'tailwind-merge';
+
+interface ListItemWrapperProps {
+  isSender?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+}
+
+const ListItemWrapper = ({
+  isSender = false,
+  className,
+  children,
+  onClick,
+}: ListItemWrapperProps) => {
+  return (
+    <article
+      className={twMerge(
+        'relative flex overflow-hidden rounded-sm p-4',
+        isSender ? 'list-sender-bg' : 'list-receiver-bg',
+        className,
+      )}
+      onClick={onClick}
+    >
+      <div className="z-10 w-full">{children}</div>
+      <div className="absolute inset-0 z-0 bg-white/50 blur-xl" />
+    </article>
+  );
+};
+
+export default ListItemWrapper;

src/components/ConfirmModal.tsx

@@ -2,6 +2,7 @@ import { ChangeEvent } from 'react';
 
 import ModalBg from '@/assets/images/modal-pink.png';
 
+import BackgroundImageWrapper from './BackgroundImageWrapper';
 import ModalOverlay from './ModalOverlay';
 import TextareaField from './TextareaField';
 
@@ -30,19 +31,16 @@ const MessageModal = ({
 }: 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}
-      >
+      <p className="body-sb mb-4 text-center text-white">{description}</p>
+      <BackgroundImageWrapper as="section" className="mb-12 w-78 rounded-lg p-4" imageUrl={ModalBg}>
         <TextareaField
           rows={5}
           value={inputValue}
           placeholder={placeholder}
           onChange={onInputChange}
         />
         {children}
-      </section>
+      </BackgroundImageWrapper>
       <section className="flex items-center gap-6">
         <button
           type="button"

src/components/ListItemWrapper.tsx

@@ -7,7 +7,7 @@ interface PageTitleProps {
 
 const PageTitle = ({ className, children }: PageTitleProps) => {
   return (
-    <h1 className={twMerge('text-gray-60 body-b rounded-full bg-white px-6 py-4', className)}>
+    <h1 className={twMerge('text-gray-60 body-b w-fit rounded-full bg-white px-6 py-4', className)}>
       {children}
     </h1>
   );