Merge pull request #109 from ASAP-Lettering/design/#108

[Design] 편지 열람 반응형 수정

Author: yyypearl

src/app/independent/[id]/page.tsx

@@ -5,6 +5,7 @@ import Button from "@/components/common/Button";
 import Loader from "@/components/common/Loader";
 import NavigatorBar from "@/components/common/NavigatorBar";
 import Letter from "@/components/letter/Letter";
+import { theme } from "@/styles/theme";
 import { IndependentLetterType, LetterDetailType } from "@/types/letter";
 import { getAccessToken } from "@/utils/storage";
 import { useParams, useRouter } from "next/navigation";
@@ -58,9 +59,9 @@ const IndependentLetterPage = () => {
 
   return letterData ? (
     <Container>
-      <Wrapper>
+      <NavigatorBarWrapper>
         <NavigatorBar cancel={false} url="/planet" />
-      </Wrapper>
+      </NavigatorBarWrapper>
       <MainWrapper>
         <Header>
           <HeaderTitle>
@@ -73,17 +74,21 @@ const IndependentLetterPage = () => {
           </HeaderTitle>
           <LetterCount>궤도 속 편지 | {letterData.letterCount}개</LetterCount>
         </Header>
-        <Letter
-          showType="receive"
-          key={key}
-          id={letterId}
-          templateType={letterData.templateType}
-          name={letterData.senderName}
-          content={letterData.content}
-          images={letterData.images}
-          date={letterData.sendDate}
-          isImage={isImage}
-        />
+        <LetterContainer>
+          <Letter
+            showType="receive"
+            key={key}
+            id={letterId}
+            templateType={letterData.templateType}
+            name={letterData.senderName}
+            content={letterData.content}
+            images={letterData.images}
+            date={letterData.sendDate}
+            isImage={isImage}
+            width="100%"
+            height="100%"
+          />
+        </LetterContainer>
         {letterData.images.length > 0 && letterData.content.length > 0 ? (
           <ChangeButtonWrapper onClick={changeImageorContent}>
             <img src="/assets/icons/ic_change_image.svg"></img>
@@ -154,48 +159,110 @@ const Container = styled.div`
   flex-direction: column;
   justify-content: space-between;
   box-sizing: border-box;
+  width: 100%;
   height: 100%;
-  color: white;
-  //padding: 25px;
-  overflow-x: hidden;
+  color: ${theme.colors.white};
   background: ${(props) => props.theme.colors.bg};
-  /* background-image: url('/assets/signup/verify_image.png'); 
-    background-size: 550px auto; 
-    background-position: bottom 80px center;
-    background-repeat: no-repeat; */
+  position: relative;
+`;
+
+const NavigatorBarWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  padding: 18px 18px 9px 18px;
 `;
 
 const MainWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   width: 100%;
   height: 100%;
-  padding: 0 19px 0 24px;
+  padding: 0 18px;
   overflow-y: auto;
   overflow-x: hidden;
-  &::-webkit-scrollbar {
-    width: 5px; /* Width of the scrollbar */
+`;
+
+const Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 15px;
+  width: 100%;
+`;
+
+const HeaderTitle = styled.div`
+  width: 100%;
+  ${(props) => props.theme.fonts.heading01};
+  flex: 2;
+  span {
+    ${(props) => props.theme.fonts.heading02};
+    white-space: nowrap;
   }
 
-  &::-webkit-scrollbar-track {
-    background: ${(props: any) => props.theme.colors.gray800};
-    border-radius: 10px; /* Rounded corners */
+  @media (max-height: 780px) {
+    ${theme.fonts.title01};
+    span {
+      ${(props) => props.theme.fonts.body03};
+    }
   }
 
-  &::-webkit-scrollbar-thumb {
-    background: ${(props: any) => props.theme.colors.gray600};
-    border-radius: 10px; /* Rounded corners */
+  @media (max-height: 628px) {
+    ${theme.fonts.subtitle};
+    span {
+      ${(props) => props.theme.fonts.body07};
+    }
+  }
+
+  @media (max-height: 580px) {
+    ${theme.fonts.subtitle};
+    span {
+      ${(props) => props.theme.fonts.body07};
+    }
   }
 `;
 
-const Header = styled.div`
+const LetterContainer = styled.div`
   display: flex;
-  flex-direction: row;
-  padding: 15px 0px;
+  justify-content: center;
   width: 100%;
-  padding-top: 40px;
+  max-width: 345px;
+  min-height: 398px;
+  max-height: 398px;
+
+  @media (max-height: 824px) {
+    max-width: 320px;
+    min-height: 350px;
+  }
+
+  @media (max-height: 780px) {
+    max-width: 280px;
+    min-height: 320px;
+    max-height: 320px;
+  }
+
+  @media (max-height: 700px) {
+    min-height: 300px;
+    max-height: 300px;
+  }
+
+  @media (max-height: 680px) {
+    max-width: 250px;
+    min-height: 280px;
+    max-height: 280px;
+  }
+
+  @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 LetterCount = styled.div`
@@ -209,30 +276,13 @@ 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 HeaderSubTitle = styled.div`
-//   width: 100%;
-//   ${(props) => props.theme.fonts.regular16};
-//   color: ${(props) => props.theme.colors.gray300};
-//   padding-top: 10px;
-// `;
-
 const ButtonContainer = styled.div`
-  display: flex;
-  flex-direction: row;
   width: 100%;
-  gap: 12px;
-  padding: 25px;
+  position: absolute;
+  padding: 0 20px;
+  bottom: 40px;
+  left: 0;
+  z-index: 1000;
 `;
 
 const LoaderContainer = styled.div`
@@ -272,19 +322,39 @@ const ChangeButtonWrapper = styled.div`
     height: 20px;
     flex-shrink: 0;
   }
+
+  @media (max-height: 730px) {
+    flex-direction: row;
+    gap: 10px;
+    padding-top: 15px;
+  }
+
+  @media (max-height: 628px) {
+    flex-direction: row;
+    gap: 6px;
+    ${theme.fonts.body12};
+  }
 `;
 
 const PaginationWrapper = styled.div`
   display: flex;
   width: 100%;
-  padding: 30px 4px;
+  padding: 25px 4px;
   padding-bottom: 20px;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   ${(props) => props.theme.fonts.body07};
   color: ${(props) => props.theme.colors.gray500};
   gap: 24px;
+
+  @media (max-height: 730px) {
+    padding: 20px 4px;
+  }
+
+  @media (max-height: 628px) {
+    padding: 10px 4px;
+  }
 `;
 
 const Page = styled.div`
@@ -310,9 +380,3 @@ const CurrentPage = styled.div`
 const WhiteSpace = styled.div`
   height: 44px;
 `;
-
-const Wrapper = styled.div`
-  display: flex;
-  width: 100%;
-  padding: 24px;
-`;