TEST

src/pages/LetterInventoryPage/LetterComponent.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import * as S from "./styled";
+
+const LetterComponent = ({ letter, isReceived }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const isLocked = !letter.isAvailable;
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <S.LetterWrapper onClick={toggleExpand} isExpanded={isExpanded}>
+      {isLocked ? (
+        <S.LockedMessage>
+          편지를 열 수 없습니다. 도착 예정입니다.
+        </S.LockedMessage>
+      ) : (
+        <S.LetterContent isExpanded={isExpanded}>
+          {letter.content}
+        </S.LetterContent>
+      )}
+      <S.LetterInfo>
+        {isReceived
+          ? `보낸 사람: ${letter.sender}`
+          : `받는 사람: ${letter.receiver}`}
+        <span>{letter.date}</span>
+      </S.LetterInfo>
+    </S.LetterWrapper>
+  );
+};
+
+export default LetterComponent;

src/pages/LetterInventoryPage/LetterInventoryPage.jsx

@@ -1,14 +1,66 @@
+import React, { useState } from "react";
 import * as S from "./styled";
+import LetterComponent from "./LetterComponent";
 
 export const LetterInventoryPage = () => {
+  const [isReceived, setIsReceived] = useState(true);
+
+  const receivedLetters = Array.from({ length: 10 }, (_, index) => ({
+    id: index + 1,
+    content: `이것은 받은 편지 ${
+      index + 1
+    }의 내용입니다. 긴 내용을 테스트하기 위해 800자 길이로 설정된 편지입니다. 이 편지에는 다양한 내용이 담겨있으며, 읽는 이로 하여금 감동을 줄 수 있는 이야기를 담고 있습니다. 예시로 작성된 편지이기 때문에 중복된 내용이 포함되어 있을 수 있으며, 실제 구현 시에는 더 다양한 내용이 포함될 수 있습니다.`,
+    sender: `홍길동${index + 1}`,
+    receiver: "철수",
+    isAvailable: true,
+    date: `2024-11-${String(index + 1).padStart(2, "0")}`,
+  }));
+
+  const sentLetters = Array.from({ length: 10 }, (_, index) => ({
+    id: index + 11,
+    content: `이것은 보낸 편지 ${
+      index + 1
+    }의 내용입니다. 긴 내용을 테스트하기 위해 800자 길이로 설정된 편지입니다. 이 편지에는 다양한 내용이 담겨있으며, 받는 사람에게 감동을 줄 수 있는 이야기를 담고 있습니다. 예시로 작성된 편지이기 때문에 중복된 내용이 포함되어 있을 수 있으며, 실제 구현 시에는 더 다양한 내용이 포함될 수 있습니다.`,
+    sender: "철수",
+    receiver: `홍길동${index + 1}`,
+    isAvailable: true,
+    date: `2024-10-${String(index + 1).padStart(2, "0")}`,
+  }));
+
+  const lettersToShow = isReceived ? receivedLetters : sentLetters;
+
   return (
     <S.Wrapper>
       <S.MiniHeader>
-        <S.HeaderOption>받은 편지</S.HeaderOption>
-        <S.HeaderOption>보낸 편지</S.HeaderOption>
+        <S.HeaderOption
+          isSelected={isReceived}
+          onClick={() => setIsReceived(true)}
+        >
+          받은 편지
+        </S.HeaderOption>
+        <S.HeaderOption
+          isSelected={!isReceived}
+          onClick={() => setIsReceived(false)}
+        >
+          보낸 편지
+        </S.HeaderOption>
       </S.MiniHeader>
+
+      <S.LettersContainer>
+        {lettersToShow.length > 0 ? (
+          lettersToShow.map((letter) => (
+            <LetterComponent
+              key={letter.id}
+              letter={letter}
+              isReceived={isReceived}
+            />
+          ))
+        ) : (
+          <S.EmptyMessage>편지가 없습니다.</S.EmptyMessage>
+        )}
+      </S.LettersContainer>
     </S.Wrapper>
-  )
-}
+  );
+};
 
-export default LetterInventoryPage;
+export default LetterInventoryPage;

src/pages/LetterInventoryPage/styled.js

@@ -5,24 +5,85 @@ export const Wrapper = styled.div`
   position: relative;
   height: 100vh;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  padding-top: 120px;
 `;
 
 export const MiniHeader = styled.div`
   display: flex;
   width: 100%;
   justify-content: space-around;
+  position: absolute;
+  top: 60px;
+  padding: 20px 0;
+  background-color: ${({ theme }) => theme.colors.background};
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
 `;
 
 export const HeaderOption = styled.div`
   display: flex;
   cursor: pointer;
-
-  color: ${({theme}) => theme.colors.black};
-
-  font-family: ${({theme}) => theme.fonts.GowunDodum["font-family"]};
+  color: ${({ theme, isSelected }) =>
+    isSelected ? theme.colors.primary : theme.colors.black};
+  font-family: ${({ theme }) => theme.fonts.GowunDodum["font-family"]};
   font-size: 30px;
   font-style: normal;
-  font-weight: 400;
-`;
+  font-weight: ${({ isSelected }) => (isSelected ? "bold" : "400")};
+  border-bottom: ${({ isSelected, theme }) =>
+    isSelected ? `2px solid ${theme.colors.primary}` : "none"};
+  opacity: ${({ isSelected }) => (isSelected ? 1 : 0.6)};
+`;
+
+export const LettersContainer = styled.div`
+  width: 100%;
+  max-width: 600px;
+  height: 70vh;
+  overflow-y: scroll;
+  padding: 0 20px;
+  box-sizing: border-box;
+`;
+
+export const LetterWrapper = styled.div`
+  padding: 20px;
+  margin: 10px 0;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  background-color: ${({ theme }) => theme.colors.white};
+  border-radius: 8px;
+  line-height: 1.6;
+  font-family: "GowunDodum", sans-serif;
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+  max-height: ${({ isExpanded }) => (isExpanded ? "1000px" : "4.8em")};
+`;
+
+export const LockedMessage = styled.div`
+  color: gray;
+  font-size: 14px;
+`;
+
+export const LetterContent = styled.div`
+  color: ${({ theme }) => theme.colors.black};
+  font-size: 16px;
+  margin-bottom: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: ${({ isExpanded }) => (isExpanded ? "normal" : "nowrap")};
+  display: -webkit-box;
+  -webkit-line-clamp: ${({ isExpanded }) => (isExpanded ? "none" : 3)};
+  -webkit-box-orient: vertical;
+`;
+
+export const LetterInfo = styled.div`
+  font-size: 12px;
+  color: darkgray;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const EmptyMessage = styled.div`
+  color: gray;
+  font-size: 16px;
+  margin-top: 20px;
+`;

src/pages/LetterMakePage/LetterMakePage.jsx

@@ -1,3 +1,4 @@
+// src/pages/LetterMakePage/LetterMakePage.jsx
 import React, { useState } from "react";
 import * as S from "./styled";
 import { LetterOne } from "@components/Letters/LetterOne";

vite.config.js

@@ -1,67 +1,62 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { VitePWA } from 'vite-plugin-pwa';
-import path from 'path';
-import fs from 'fs';
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { VitePWA } from "vite-plugin-pwa";
+import path from "path";
+import fs from "fs";
 
 export default defineConfig({
-  base: '/',
+  base: "/",
   plugins: [
     react(),
     // PWA 플러그인 설정 수정
     VitePWA({
-      registerType: 'autoUpdate', // 서비스 워커 자동 업데이트
-      includeAssets: ['/icons/pwa-192.png', '/icons/pwa-512.png'], // 로컬 경로의 이미지 참조
+      registerType: "autoUpdate", // 서비스 워커 자동 업데이트
+      includeAssets: ["/icons/pwa-192.png", "/icons/pwa-512.png"], // 로컬 경로의 이미지 참조
       manifest: {
-        name: 'My Vite PWA App', // PWA 애플리케이션의 전체 이름
-        short_name: 'VitePWA', // 홈 화면에 표시될 이름
-        description: 'This is my Vite PWA application', // 설명
-        theme_color: '#ffffff', // 테마 색상
-        background_color: '#ffffff', // 배경 색상
-        display: 'standalone', // 브라우저 요소 제거
-        scope: '/', // PWA가 적용될 URL 범위
-        start_url: '/', // 애플리케이션의 시작 URL
+        name: "My Vite PWA App", // PWA 애플리케이션의 전체 이름
+        short_name: "VitePWA", // 홈 화면에 표시될 이름
+        description: "This is my Vite PWA application", // 설명
+        theme_color: "#ffffff", // 테마 색상
+        background_color: "#ffffff", // 배경 색상
+        display: "standalone", // 브라우저 요소 제거
+        scope: "/", // PWA가 적용될 URL 범위
+        start_url: "/", // 애플리케이션의 시작 URL
         icons: [
           {
-            src: '/icons/pwa-192.png', // 로컬 경로의 192x192 아이콘
-            sizes: '192x192', // 아이콘 크기
-            type: 'image/png'
+            src: "/icons/pwa-192.png", // 로컬 경로의 192x192 아이콘
+            sizes: "192x192", // 아이콘 크기
+            type: "image/png",
           },
           {
-            src: '/icons/pwa-512.png', // 로컬 경로의 512x512 아이콘
-            sizes: '512x512', // 아이콘 크기
-            type: 'image/png'
+            src: "/icons/pwa-512.png", // 로컬 경로의 512x512 아이콘
+            sizes: "512x512", // 아이콘 크기
+            type: "image/png",
           },
           {
-            src: '/icons/pwa-512.png', // 로컬 경로의 마스크 가능 아이콘
-            sizes: '512x512',
-            type: 'image/png',
-            purpose: 'maskable' // 마스크 가능 속성 추가
-          }
-        ]
-      }
-    })
+            src: "/icons/pwa-512.png", // 로컬 경로의 마스크 가능 아이콘
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable", // 마스크 가능 속성 추가
+          },
+        ],
+      },
+    }),
   ],
-  server: process.env.NODE_ENV === 'development' ? {
-    https: {
-      key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
-      cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem')),
-    },
-  } : {},
+
   resolve: {
     alias: {
-      '@atoms': path.resolve(__dirname, 'src/atoms'),
-      '@components': path.resolve(__dirname, 'src/components'),
-      '@constants': path.resolve(__dirname, 'src/constant'),
-      '@contexts': path.resolve(__dirname, 'src/contexts'),
-      '@hooks': path.resolve(__dirname, 'src/hooks'),
-      '@layouts': path.resolve(__dirname, 'src/layouts'),
-      '@pages': path.resolve(__dirname, 'src/pages'),
-      '@routes': path.resolve(__dirname, 'src/routes'),
-      '@services': path.resolve(__dirname, 'src/services'),
-      '@styles': path.resolve(__dirname, 'src/styles'),
-      '@utils': path.resolve(__dirname, 'src/utils'),
-      '@public': path.resolve(__dirname, 'public'),
+      "@atoms": path.resolve(__dirname, "src/atoms"),
+      "@components": path.resolve(__dirname, "src/components"),
+      "@constants": path.resolve(__dirname, "src/constant"),
+      "@contexts": path.resolve(__dirname, "src/contexts"),
+      "@hooks": path.resolve(__dirname, "src/hooks"),
+      "@layouts": path.resolve(__dirname, "src/layouts"),
+      "@pages": path.resolve(__dirname, "src/pages"),
+      "@routes": path.resolve(__dirname, "src/routes"),
+      "@services": path.resolve(__dirname, "src/services"),
+      "@styles": path.resolve(__dirname, "src/styles"),
+      "@utils": path.resolve(__dirname, "src/utils"),
+      "@public": path.resolve(__dirname, "public"),
     },
   },
 });