Merge pull request #107 from ASAP-Lettering/design/#104

[Design] 편지 등록, 편지 쓰기 반응형 수정
ASAP-Lettering · Dec 6, 2024 · 24b9a1d · 24b9a1d
2 parents 65af6e6 + b74002a
commit 24b9a1d
Show file tree

Hide file tree

Showing 19 changed files with 496 additions and 242 deletions.
diff --git a/src/app/letter/preview/page.tsx b/src/app/letter/preview/page.tsx
@@ -27,14 +27,6 @@ const LetterPreviewPage = () => {
 
   const [isImage, setIsImage] = useState<boolean>(false);
   const resetLetterState = useResetRecoilState(registerLetterState);
-  // const content =
-  //   "오래전에 함께 듣던 노래가 발걸음을 다시 멈춰서게 해\n이 거리에서 너를 느낄 수 있어\n널 이곳에서 꼭 다시 만날 것 같아\n너일까봐 한 번 더 바라보고\n너일까봐 자꾸 돌아보게 돼\n어디선가 같은 노래를 듣고\n날 생각하며 너 역시 멈춰있을까\n오래전에 함께 듣던 노래가\n거리에서 내게 우연히 들려온 것처럼\n살아가다 한 번 쯤 우연히 만날 것 같아\n사랑했던 그 모습 그대로\n오래전에 함께 듣던 노래가 발걸음을 다시 멈춰서게 해\n이 거리에서 너를 느낄 수 있어\n널 이곳에서 꼭 다시 만날 것 같아\n너일까봐 한 번 더 바라보고\n너일까봐 자꾸 돌아보게 돼\n어디선가 같은 노래를 듣고\n날 생각하며 너 역시 멈춰있을까\n오래전에 함께 듣던 노래가\n거리에서 내게 우연히 들려온 것처럼\n살아가다 한 번 쯤 우연히 만날 것 같아\n사랑했던 그 모습 그대로\n";
-
-  // const imageData = [
-  //   "https://via.assets.so/album.png?id=6&q=95&w=360&h=360&fit=fill",
-  //   "https://via.assets.so/album.png?id=2&q=95&w=360&h=360&fit=fill",
-  //   "https://via.assets.so/album.png?id=3&q=95&w=360&h=360&fit=fill",
-  // ];
 
   useEffect(() => {
     setIsImage(!!!(content.length > 0));
@@ -101,19 +93,21 @@ const LetterPreviewPage = () => {
         <Column>
           <Label>이렇게 편지를 {letterId ? "수정" : "등록"}할까요?</Label>
           <LetterWrapper>
-            <Letter
-              showType="previewReceive"
-              contentType="all"
-              id={"0"}
-              templateType={templateType}
-              name={senderName}
-              content={content}
-              images={images}
-              isImage={isImage}
-              width="345px"
-              height="398px"
-              padding="25px 35px 20px 35px"
-            />
+            <LetterContainer>
+              <Letter
+                showType="previewReceive"
+                contentType="all"
+                id={"0"}
+                templateType={templateType}
+                name={senderName}
+                content={content}
+                images={images}
+                isImage={isImage}
+                width="100%"
+                height="100%"
+                padding="25px 35px 20px 35px"
+              />
+            </LetterContainer>
             {content.length > 0 && images.length > 0 && (
               <ChangeButton onClick={handleFlipLetter}>
                 <Image
@@ -165,7 +159,7 @@ const Layout = styled.div`
   background-color: ${theme.colors.bg};
   position: relative;
 
-  @media (max-height: 570px) {
+  @media (max-height: 628px) {
     padding-top: 0px;
   }
 `;
@@ -199,9 +193,20 @@ const Label = styled.div`
   margin-top: 49px;
   margin-bottom: 28px;
 
-  @media (max-height: 735px) {
+  @media (max-height: 820px) {
     margin-top: 10px;
     margin-bottom: 20px;
+  }
+
+  @media (max-height: 690px) {
+    margin-top: 0px;
+    margin-bottom: 10px;
+    ${theme.fonts.subtitle};
+  }
+
+  @media (max-height: 628px) {
+    margin-top: 20px;
+    margin-bottom: 20px;
     ${theme.fonts.body14};
   }
 `;
@@ -214,9 +219,49 @@ const LetterWrapper = styled.div`
   align-items: center;
   gap: 49px;
 
-  @media (max-height: 735px) {
+  @media (max-height: 780px) {
+    gap: 20px;
+  }
+
+  @media (max-height: 628px) {
     gap: 20px;
   }
+
+  @media (max-height: 580px) {
+    gap: 30px;
+  }
+`;
+
+const LetterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 345px;
+  min-height: 398px;
+  max-height: 398px;
+
+  @media (max-height: 660px) {
+    max-width: 320px;
+    min-height: 350px;
+  }
+
+  @media (max-height: 628px) {
+    max-width: 280px;
+    min-height: 320px;
+    max-height: 320px;
+  }
+
+  @media (max-height: 580px) {
+    max-width: 250px;
+    min-height: 250px;
+    max-height: 250px;
+  }
+
+  @media (max-height: 550px) {
+    max-width: 220px;
+    min-height: 220px;
+    max-height: 220px;
+  }
 `;
 
 const ChangeButton = styled.button`
@@ -229,14 +274,20 @@ const ChangeButton = styled.button`
   ${(props) => props.theme.fonts.caption02};
   margin-bottom: 100px;
 
-  @media (max-height: 735px) {
+  @media (max-height: 730px) {
+    flex-direction: row;
+    margin-bottom: 50px;
+    gap: 10px;
+  }
+
+  @media (max-height: 628px) {
     flex-direction: row;
     margin-bottom: 50px;
     gap: 6px;
     ${theme.fonts.body12};
   }
 
-  @media (max-height: 650px) {
+  @media (max-height: 580px) {
     flex-direction: row;
     margin-bottom: 50px;
     gap: 6px;

diff --git a/src/app/letter/register/page.tsx b/src/app/letter/register/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { Suspense, useEffect, useState } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { theme } from "@/styles/theme";
 import NavigatorBar from "@/components/common/NavigatorBar";
 import Input from "@/components/common/Input";
@@ -202,7 +202,7 @@ const LetterRegisterPage = () => {
         </Column>
         <Column>
           <Label>
-            편지 텍스트 또는 사진을 붙여주세요 *
+            편지 내용을 작성해주세요
             <Count>
               <Span>{content.length}</Span>
               /1000
@@ -213,19 +213,25 @@ const LetterRegisterPage = () => {
             value={content}
             onChange={handleContentChange}
             placeholder="최대 1000자까지 입력이 가능해요"
-            height="228px"
+            height="193px"
           />
+        </Column>
+        <Column>
+          <Label $show={false}>사진을 추가해주세요</Label>
           {(previewImages || []).length === 0 ? (
-            <AddImageLabel>
-              <input
-                type="file"
-                accept="image/*"
-                multiple
-                onChange={handleAddImages}
-                style={{ display: "none" }}
-              />
-              + 사진 불러오기 (선택)
-            </AddImageLabel>
+            <AddImageWrapper>
+              <AddImageLabel>
+                <input
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  onChange={handleAddImages}
+                  style={{ display: "none" }}
+                />
+                + 사진 불러오기 (선택)
+              </AddImageLabel>
+              <SmallText>최대 4장까지 사진 첨부가 가능해요</SmallText>
+            </AddImageWrapper>
           ) : (
             <ImagesList>
               <AddImagesLabel onClick={handleShowToast}>
@@ -303,11 +309,11 @@ const Layout = styled.div`
   flex-direction: column;
   overflow-x: hidden;
   gap: 7px;
-  padding: 20px 20px 20px 20px;
+  padding: 20px;
   background-color: ${theme.colors.bg};
   position: relative;
 
-  @media (max-height: 570px) {
+  @media (max-height: 550px) {
     padding-top: 0px;
   }
 `;
@@ -331,7 +337,7 @@ const Essential = styled.div`
   margin-top: 25px;
   margin-bottom: 17px;
 
-  @media (max-height: 735px) {
+  @media (max-height: 790px) {
     margin: 0;
     position: absolute;
     right: 24px;
@@ -341,26 +347,32 @@ const Essential = styled.div`
 const Column = styled.div`
   margin-bottom: 40px;
 
-  @media (max-height: 570px) {
+  @media (max-height: 710px) {
     margin-bottom: 20px;
   }
 `;
 
-const Label = styled.div`
+const Label = styled.div<{ $show?: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.subtitle};
-  margin-bottom: 20px;
+  margin-bottom: 12px;
 
-  @media (max-height: 735px) {
+  @media (max-height: 628px) {
     ${theme.fonts.body6}
     margin-bottom: 12px;
+    ${({ $show }) =>
+      $show === false &&
+      css`
+        display: none;
+        margin-bottom: 0px;
+      `}
   }
 
-  @media (max-height: 650px) {
-    ${theme.fonts.body10}
+  @media (max-height: 580px) {
+    ${theme.fonts.body10};
     margin-bottom: 8px;
   }
 `;
@@ -370,7 +382,7 @@ const Count = styled.div`
   color: ${theme.colors.gray400};
   ${theme.fonts.body09};
 
-  @media (max-height: 735px) {
+  @media (max-height: 628px) {
     ${theme.fonts.body11};
   }
 `;
@@ -379,13 +391,19 @@ const Span = styled.span`
   color: ${theme.colors.white};
 `;
 
+const AddImageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 12px;
+`;
+
 const AddImageLabel = styled.label`
   width: 100%;
   height: 57px;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 100px;
   padding: 18px;
   border-radius: 12px;
   background: ${theme.colors.gray700};
@@ -394,14 +412,29 @@ const AddImageLabel = styled.label`
   font-style: normal;
   font-weight: 500;
   ${theme.fonts.body08}
-  margin-top: 16px;
 
-  @media (max-height: 735px) {
+  @media (max-height: 628px) {
+    height: 48px;
+    ${theme.fonts.body12};
+  }
+
+  @media (max-height: 580px) {
     height: 42px;
     ${theme.fonts.caption04}
   }
 `;
 
+const SmallText = styled.div`
+  color: ${theme.colors.gray500};
+  ${theme.fonts.caption04};
+  text-align: center;
+  margin-bottom: 100px;
+
+  @media (max-height: 550px) {
+    display: none;
+  }
+`;
+
 const AddImagesLabel = styled.label`
   width: 52px;
   height: 52px;
@@ -416,7 +449,13 @@ const AddImagesLabel = styled.label`
   ${(props) => props.theme.fonts.body08};
   text-align: center;
 
-  @media (max-height: 735px) {
+  @media (max-height: 628px) {
+    width: 45px;
+    height: 45px;
+    ${theme.fonts.body12};
+  }
+
+  @media (max-height: 580px) {
     width: 39px;
     height: 39px;
     ${theme.fonts.body12};
@@ -430,6 +469,10 @@ const ImagesList = styled.div`
   gap: 6px;
   margin-top: 16px;
   margin-bottom: 100px;
+
+  @media (max-height: 628px) {
+    margin-top: 0px;
+  }
 `;
 
 const ImagesWrapper = styled.div`
@@ -444,7 +487,12 @@ const ImageDiv = styled.div`
   height: 52px;
   position: relative;
 
-  @media (max-height: 735px) {
+  @media (max-height: 628px) {
+    width: 45px;
+    height: 45px;
+  }
+
+  @media (max-height: 580px) {
     width: 39px;
     height: 39px;
   }
@@ -457,7 +505,12 @@ const DeleteIcon = styled.button`
   top: -5px;
   right: -5px;
 
-  @media (max-height: 735px) {
+  @media (max-height: 628px) {
+    width: 18px;
+    height: 18px;
+  }
+
+  @media (max-height: 580px) {
     width: 13px;
     height: 13px;
   }
@@ -466,7 +519,8 @@ const DeleteIcon = styled.button`
 const ButtonWrapper = styled.div`
   width: 100%;
   position: absolute;
-  padding: 0px 20px;
+  padding: 0 20px;
   bottom: 40px;
   left: 0;
+  z-index: 1000;
 `;