💄design(#23): 보낸 편지함 상세

ASAP-Lettering · Oct 1, 2024 · 8ca418d · 8ca418d
1 parent 13a21a7
commit 8ca418d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 55 deletions.
diff --git a/src/app/mypage/send/[id]/page.tsx b/src/app/mypage/send/[id]/page.tsx
@@ -33,9 +33,13 @@ const SendDetailPage = () => {
         templateType: 3,
         receiver: "유진주",
         content: "안녕",
-        images: [],
-        date: "",
+        images: [
+          "https://picsum.photos/200/300",
+          "https://picsum.photos/100/200",
+        ],
+        date: "2024-10-01",
       });
+
       //api 요청
       //   getLetter(letterId, accessToken)
       //   .then((res) => {
@@ -54,7 +58,11 @@ const SendDetailPage = () => {
       </Wrapper>
       <MainWrapper>
         <Header>
-          <LetterCount>편지 정보 | {letterData.content.length}자</LetterCount>
+          <LetterCount>
+            편지 정보 | {letterData.content.length}자{" "}
+            {letterData.images.length > 0 &&
+              ` · 사진 ${letterData.images.length}장`}
+          </LetterCount>
         </Header>
         {isImage ? (
           <Letter
@@ -81,6 +89,7 @@ const SendDetailPage = () => {
             isImage={false}
           />
         )}
+        <WhiteSpace />
         {letterData.images.length > 0 ? (
           <ChangeButtonWrapper onClick={changeImageorContent}>
             <img src="/assets/icons/ic_change_image.svg"></img>
@@ -167,24 +176,6 @@ const LetterCount = styled.div`
     padding: 5px;
 `;
 
-const HeaderTitle = styled.div`
-  width: 100%;
-  ${(props) => props.theme.fonts.heading01};
-  margin-top: 1rem;
-  flex:2;
-  span {
-    ${(props) => props.theme.fonts.heading02};
-    white-space: nowrap;
-  }
-`;
-
-const ButtonContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  gap: 12px;
-`;
-
 const LoaderContainer = styled.div`
   width: 100%;
   height: 100%;
@@ -224,41 +215,8 @@ const ChangeButtonWrapper = styled.div`
     }
 `;
 
-const PaginationWrapper = styled.div`
-    display: flex;
-    width: 100%;
-    padding: 4px;
-    padding-bottom: 30px;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-    ${(props) => props.theme.fonts.body07};
-    color: ${(props) => props.theme.colors.gray500};
-    gap: 24px;
-`;
-
-const Page = styled.div`
-    display: flex;
-    flex-direction: row;
-    cursor: pointer;
-`;
-
-const CurrentPage = styled.div`
-    display: flex;
-    height: 33px;
-    padding: 3px 22px;
-    justify-content: center;
-    cursor: pointer;
-    align-items: center;
-    gap: 10px;
-    border-radius: 200px;
-    ${(props) => props.theme.fonts.body04};
-    color: ${(props) => props.theme.colors.white};
-    background-color: ${(props) => props.theme.colors.gray800};
-`;
-
 const WhiteSpace = styled.div`
-    height: 44px;
+    height: 24px;
 `;
 
 const Wrapper = styled.div`

diff --git a/src/components/letter/Letter.tsx b/src/components/letter/Letter.tsx
@@ -100,6 +100,7 @@ const Letter = (props: LetterProps) => {
           </TopContainer>
         </>
       )}
+      {showType === "send" && <Date $showType="send">{date}</Date>}
       <Content $showType={showType}>
         <SwipeableContent
           content={isImage ? images! : contentPages!}
@@ -191,6 +192,7 @@ const Date = styled.div<{ $showType: string }>`
     props.$showType === "preview"
       ? props.theme.fonts.caption04
       : props.theme.fonts.body09};
+  ${(props) => (props.$showType === "send" ? props.theme.fonts.caption03 : "")};
 `;
 
 const Content = styled.div<{ $showType: string }>`