Merge pull request #101 from ASAP-Lettering/design/#98

[Design] 편지 등록 및 쓰기, 새 행성 추가 반응형 UI
ASAP-Lettering · Dec 2, 2024 · 109529f · 109529f
2 parents ef08e1d + 24360a6
commit 109529f
Show file tree

Hide file tree

Showing 17 changed files with 574 additions and 59 deletions.
diff --git a/src/app/letter/preview/page.tsx b/src/app/letter/preview/page.tsx
@@ -164,6 +164,10 @@ const Layout = styled.div`
   padding: 20px 20px 20px 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const Container = styled.div`
@@ -194,14 +198,25 @@ const Label = styled.div`
   ${(props) => props.theme.fonts.title01};
   margin-top: 49px;
   margin-bottom: 28px;
+
+  @media (max-height: 735px) {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    ${theme.fonts.body14};
+  }
 `;
 
 const LetterWrapper = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   gap: 49px;
+
+  @media (max-height: 735px) {
+    gap: 20px;
+  }
 `;
 
 const ChangeButton = styled.button`
@@ -213,6 +228,20 @@ const ChangeButton = styled.button`
   color: ${theme.colors.gray300};
   ${(props) => props.theme.fonts.caption02};
   margin-bottom: 100px;
+
+  @media (max-height: 735px) {
+    flex-direction: row;
+    margin-bottom: 50px;
+    gap: 6px;
+    ${theme.fonts.body12};
+  }
+
+  @media (max-height: 650px) {
+    flex-direction: row;
+    margin-bottom: 50px;
+    gap: 6px;
+    ${theme.fonts.body12};
+  }
 `;
 
 const ButtonWrapper = styled.div`

diff --git a/src/app/letter/register/page.tsx b/src/app/letter/register/page.tsx
@@ -247,16 +247,14 @@ const LetterRegisterPage = () => {
                   <ImageDiv>
                     <Image
                       src={image}
-                      width={52}
-                      height={52}
+                      fill
                       alt="images"
                       style={{ borderRadius: "8px" }}
                     />
                     <DeleteIcon onClick={() => handleDeleteImages(index)}>
                       <Image
                         src="/assets/icons/ic_image_delete.svg"
-                        width={20}
-                        height={20}
+                        fill
                         alt="delete"
                       />
                     </DeleteIcon>
@@ -308,6 +306,10 @@ const Layout = styled.div`
   padding: 20px 20px 20px 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const Container = styled.div`
@@ -328,10 +330,20 @@ const Essential = styled.div`
   ${(props) => props.theme.fonts.caption03};
   margin-top: 25px;
   margin-bottom: 17px;
+
+  @media (max-height: 735px) {
+    margin: 0;
+    position: absolute;
+    right: 24px;
+  }
 `;
 
 const Column = styled.div`
   margin-bottom: 40px;
+
+  @media (max-height: 570px) {
+    margin-bottom: 20px;
+  }
 `;
 
 const Label = styled.div`
@@ -341,12 +353,26 @@ const Label = styled.div`
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.subtitle};
   margin-bottom: 20px;
+
+  @media (max-height: 735px) {
+    ${theme.fonts.body6}
+    margin-bottom: 12px;
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body10}
+    margin-bottom: 8px;
+  }
 `;
 
 const Count = styled.div`
   display: flex;
   color: ${theme.colors.gray400};
   ${theme.fonts.body09};
+
+  @media (max-height: 735px) {
+    ${theme.fonts.body11};
+  }
 `;
 
 const Span = styled.span`
@@ -369,6 +395,11 @@ const AddImageLabel = styled.label`
   font-weight: 500;
   ${theme.fonts.body08}
   margin-top: 16px;
+
+  @media (max-height: 735px) {
+    height: 42px;
+    ${theme.fonts.caption04}
+  }
 `;
 
 const AddImagesLabel = styled.label`
@@ -384,6 +415,12 @@ const AddImagesLabel = styled.label`
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.body08};
   text-align: center;
+
+  @media (max-height: 735px) {
+    width: 39px;
+    height: 39px;
+    ${theme.fonts.body12};
+  }
 `;
 
 const ImagesList = styled.div`
@@ -406,6 +443,11 @@ const ImageDiv = styled.div`
   width: 52px;
   height: 52px;
   position: relative;
+
+  @media (max-height: 735px) {
+    width: 39px;
+    height: 39px;
+  }
 `;
 
 const DeleteIcon = styled.button`
@@ -414,6 +456,11 @@ const DeleteIcon = styled.button`
   position: absolute;
   top: -5px;
   right: -5px;
+
+  @media (max-height: 735px) {
+    width: 13px;
+    height: 13px;
+  }
 `;
 
 const ButtonWrapper = styled.div`

diff --git a/src/app/letter/template/page.tsx b/src/app/letter/template/page.tsx
@@ -88,7 +88,6 @@ const LetterTemplatePage = () => {
                 width={70}
                 height={70}
                 alt="편지지"
-                style={{ borderRadius: "8px" }}
                 $selected={template === item}
                 onClick={() => hanleChangeTemplate(item)}
               />
@@ -136,6 +135,10 @@ const Layout = styled.div`
   padding: 20px 20px 20px 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const Container = styled.div`
@@ -155,6 +158,10 @@ const Essential = styled.div`
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.caption03};
   margin-bottom: 17px;
+
+  @media (max-height: 780px) {
+    display: none;
+  }
 `;
 
 const Column = styled.div`
@@ -167,12 +174,33 @@ const Label = styled.div`
   align-items: center;
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.title01};
+
+  @media (max-height: 735px) {
+    ${theme.fonts.title01};
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.subtitle};
+  }
+
+  @media (max-height: 570px) {
+    ${theme.fonts.body14};
+  }
 `;
 
 const SmallText = styled.div`
   color: ${theme.colors.gray300};
   ${(props) => props.theme.fonts.caption02};
   margin-bottom: 33px;
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body09};
+  }
+
+  @media (max-height: 570px) {
+    ${theme.fonts.body13};
+    margin-bottom: 24px;
+  }
 `;
 
 const LetterWrapper = styled.div`
@@ -197,6 +225,13 @@ const TemplatesList = styled.div`
   }
   -ms-overflow-style: none; /* IE, Edge */
   scrollbar-width: none; /* Firefox */
+
+  @media (max-height: 735px) {
+    margin-top: 18px;
+    margin-bottom: 5px;
+    ${theme.fonts.body14};
+    gap: 11px;
+  }
 `;
 
 const TemplateImage = styled(Image)<{ $selected: boolean }>`
@@ -210,6 +245,17 @@ const TemplateImage = styled(Image)<{ $selected: boolean }>`
     css`
       box-shadow: 0 0 0 4px ${theme.colors.sub03};
     `}
+
+  @media (max-height: 735px) {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+    ${({ $selected, theme }) =>
+      $selected &&
+      css`
+        box-shadow: 0 0 0 2px ${theme.colors.sub03};
+      `}
+  }
 `;
 
 const Page = styled.div`
@@ -223,6 +269,10 @@ const Page = styled.div`
 const Current = styled.span`
   color: ${theme.colors.white};
   margin-bottom: 100px;
+
+  @media (max-height: 735px) {
+    margin-bottom: 50px;
+  }
 `;
 
 const ButtonWrapper = styled.div`

diff --git a/src/app/planet/add/page.tsx b/src/app/planet/add/page.tsx
@@ -93,6 +93,10 @@ const Layout = styled.div`
   padding: 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const Container = styled.div`
@@ -107,23 +111,44 @@ const Essential = styled.div`
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.caption03};
   margin-bottom: 17px;
+
+  @media (max-height: 735px) {
+    margin: 0;
+    position: absolute;
+    right: 24px;
+  }
 `;
 
 const Column = styled.div`
   margin-bottom: 40px;
+
+  @media (max-height: 570px) {
+    margin-bottom: 27px;
+  }
 `;
+
 const Label = styled.div`
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.subtitle};
   margin-bottom: 20px;
+
+  @media (max-height: 735px) {
+    ${theme.fonts.body6}
+    margin-bottom: 12px;
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body10}
+    margin-bottom: 8px;
+  }
 `;
 
 const Add = styled.div`
   text-align: left;
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.caption04};
   margin-top: 8px;
-  margin-left: 25px;
+  margin-left: 20px;
 `;
 
 const PlanetWrapper = styled.div`

diff --git a/src/app/send/complete/page.tsx b/src/app/send/complete/page.tsx
@@ -24,12 +24,7 @@ const SendCompletePage = () => {
           <Sub>레터링으로 편지에 담긴 진심을 수놓았어요</Sub>
         </Title>
         <ImageWrapper>
-          <Image
-            src="/assets/send/send_complete.png"
-            width={480}
-            height={460}
-            alt="편지"
-          />
+          <Image src="/assets/send/send_complete.png" fill alt="편지" />
         </ImageWrapper>
       </Container>
       <ButtonWrapper>
@@ -96,6 +91,18 @@ const ImageWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+
+  @media (max-height: 650px) {
+    width: 350px;
+    height: 340px;
+    top: 55%;
+  }
+
+  @media (max-height: 570px) {
+    width: 300px;
+    height: 290px;
+    top: 55%;
+  }
 `;
 
 const ButtonWrapper = styled.div`