From 2de066d2de6d29f03658c01f0847f61f787fa8b5 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Thu, 27 Feb 2025 17:36:12 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=92=84=20design(#155):=20=EC=98=A8?=
 =?UTF-8?q?=EB=B3=B4=EB=94=A9=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/onboarding/page.tsx | 98 +++++++++++++++++++++++++------------
 src/app/planet/page.tsx     | 16 +++---
 2 files changed, 76 insertions(+), 38 deletions(-)

diff --git a/src/app/onboarding/page.tsx b/src/app/onboarding/page.tsx
index 0763c1a..f9ce7d2 100644
--- a/src/app/onboarding/page.tsx
+++ b/src/app/onboarding/page.tsx
@@ -49,20 +49,24 @@ const Onboarding = () => {
         <ContentWrapper {...handlers}>
           <ContentSlider style={{ transform: `translateX(${xOffset}%)` }}>
             <Content active={currentPage === 0}>
-              <MainTitle>채팅방 속 잠들어 있는 편지를 보관하세요</MainTitle>
-              <SubTitle>
-                소중한 사람에게 받은 메신저 편지를
-                <br /> 레터링에 모아둘 수 있어요
-              </SubTitle>
+              <Text>
+                <MainTitle>채팅방 속 잠들어 있는 편지를 보관하세요</MainTitle>
+                <SubTitle>
+                  소중한 사람에게 받은 메신저 편지를
+                  <br /> 레터링에 모아둘 수 있어요
+                </SubTitle>
+              </Text>
               <ContentImage src="/assets/onboarding/onboarding-pic2.png" />
             </Content>
             <Content active={currentPage === 1}>
-              <MainTitle>드래그하여 손쉽게 편지를 정리해봐요</MainTitle>
-              <SubTitle>
-                행성은 폴더의 역할과 같아요
-                <br />
-                원하는 행성 안에 편지를 보관할 수 있어요
-              </SubTitle>
+              <Text>
+                <MainTitle>드래그하여 손쉽게 편지를 정리해봐요</MainTitle>
+                <SubTitle>
+                  행성은 폴더의 역할과 같아요
+                  <br />
+                  원하는 행성 안에 편지를 보관할 수 있어요
+                </SubTitle>
+              </Text>
               <ContentImage src="/assets/gif/onboarding_final.gif" />
             </Content>
           </ContentSlider>
@@ -78,12 +82,14 @@ const Onboarding = () => {
             ))}
           </LetterImageContainer>
         )}
+      </MainContainer>
+      <ButtonWrapper>
         <Button
           buttonType="primary"
           text={currentPage === 0 ? '다음' : '시작하기'}
           onClick={handleBtnClick}
         />
-      </MainContainer>
+      </ButtonWrapper>
     </Container>
   );
 };
@@ -106,10 +112,10 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  min-width: 393px;
   height: 100%;
+  min-height: 550px;
   justify-content: space-between;
-  color: white;
+  color: ${theme.colors.white};
   background-image: url('/assets/mypage/img_background.png');
   background-size: cover;
   background-position: center;
@@ -120,13 +126,14 @@ const Container = styled.div`
 const MainContainer = styled.div`
   display: flex;
   flex-direction: column;
+  width: 100%;
   height: 100%;
+  min-height: 550px;
   align-items: center;
   justify-content: space-between;
-  padding: 24px;
+  padding: 24px 24px 80px 24px;
   overflow: hidden;
   box-sizing: border-box;
-  width: 100%;
   touch-action: none; /* 기본 스크롤 방지 */
   transition: transform 0.3s ease-in-out; /* 페이지 전환 애니메이션 */
 `;
@@ -148,26 +155,46 @@ const ContentSlider = styled.div`
 
 const Content = styled.div<{ active: boolean }>`
   width: 100%;
-  min-height: 800px;
+  height: 100vh;
+  min-height: 550px;
   flex-shrink: 0;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   overflow: hidden;
   position: relative;
 `;
 
+const Text = styled.div`
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 100px;
+
+  @media (max-height: 850px) {
+    padding-top: 80px;
+  }
+  @media (max-height: 800px) {
+    padding-top: 60px;
+  }
+  @media (max-height: 700px) {
+    padding-top: 30px;
+  }
+  @media (max-height: 628px) {
+    padding-top: 10px;
+  }
+  @media (max-height: 580px) {
+    padding-top: 0px;
+  }
+`;
+
 const MainTitle = styled.div`
-  color: white;
+  color: ${theme.colors.white};
   text-align: center;
-  font-family: Pretendard;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 34px;
-  letter-spacing: -0.6px;
+  ${theme.fonts.title01};
   box-sizing: border-box;
   padding-top: 31px;
   user-select: none;
@@ -196,18 +223,20 @@ const LetterImage = styled.img`
   aspect-ratio: 1; // 정사각형 비율 유지
   border-radius: 5px;
   object-fit: cover;
-  background-color: black;
 `;
 
 const ContentImage = styled.img`
-  width: 80%;
-  min-width: 280px;
-  min-height: 600px;
-  margin-top: 36px;
+  max-width: 346px;
+  max-height: 60vh;
+  height: auto;
   align-items: center;
   border-radius: 12px;
   border: 4px solid ${theme.colors.gray800};
   object-fit: contain;
+  position: absolute;
+  bottom: 65px;
+  left: 50%;
+  transform: translateX(-50%);
 
   //드래그방지
   -webkit-user-select: none;
@@ -230,3 +259,12 @@ const LoaderContainer = styled.div`
   align-items: center;
   justify-content: center;
 `;
+
+const ButtonWrapper = styled.div`
+  width: 100%;
+  padding: 0 24px;
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+`;
diff --git a/src/app/planet/page.tsx b/src/app/planet/page.tsx
index c985cec..a28b3d2 100644
--- a/src/app/planet/page.tsx
+++ b/src/app/planet/page.tsx
@@ -531,14 +531,14 @@ const PlanetPage = () => {
                   onOrbitTouch={handleTagTouch}
                 />
               </BottomWrapper>
-              {showTooltip && (
-                <Tooltip
-                  message={`먼저 편지를 보관한 후, 행성으로 끌어 당겨보세요`}
-                  close={true}
-                  bottom="230px"
-                  onClose={() => setShowTooltip(false)}
-                />
-              )}
+              {/* {showTooltip && ( */}
+              <Tooltip
+                message={`먼저 편지를 보관한 후, 행성으로 끌어 당겨보세요`}
+                close={true}
+                bottom="230px"
+                onClose={() => setShowTooltip(false)}
+              />
+              {/* )} */}
             </Container>
           </>
         )}

From b0533529f5da36941fe583866d62733bda0602c0 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Thu, 27 Feb 2025 17:50:04 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=92=84=20design(#155):=20=EB=A7=88?=
 =?UTF-8?q?=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84=20gap=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/page.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
index 8a180a8..fe24650 100644
--- a/src/app/mypage/page.tsx
+++ b/src/app/mypage/page.tsx
@@ -226,11 +226,7 @@ const ProfileHeader = styled.div`
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  gap: 25px;
-
-  @media (max-width: 370px) {
-    gap: 10px;
-  }
+  gap: 10px;
 `;
 
 const ProfileImage = styled.img`

From 5e848a272918a398b5a74cc4f1894d8fb30fec58 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Thu, 27 Feb 2025 18:02:59 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=92=84=20design(#155):=20=EB=B3=B4?=
 =?UTF-8?q?=EB=82=B8=20=ED=8E=B8=EC=A7=80=EC=99=80=20=ED=8E=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=97=B4=EB=9E=8C=20=ED=8E=B8=EC=A7=80=EC=A7=80=20=EA=B7=9C?=
 =?UTF-8?q?=EA=B2=A9=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/send/[id]/page.tsx | 59 +++++++++++++++++--------------
 1 file changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/app/mypage/send/[id]/page.tsx b/src/app/mypage/send/[id]/page.tsx
index adc76b2..bcf696c 100644
--- a/src/app/mypage/send/[id]/page.tsx
+++ b/src/app/mypage/send/[id]/page.tsx
@@ -20,17 +20,25 @@ const SendDetailPage = () => {
   const [letterCode, setLetterCode] = useState('');
 
   const [maxLinesPerPage, setMaxLinesPerPage] = useState(12);
+  const [fontSize, setFontSize] = useState<string>('16px');
 
   useEffect(() => {
     const updateMaxLines = () => {
       if (window.innerHeight > 780) {
-        setMaxLinesPerPage(10);
-      } else if (window.innerHeight > 630) {
-        setMaxLinesPerPage(7);
+        setMaxLinesPerPage(11);
+        setFontSize('16px');
+      } else if (window.innerHeight > 660) {
+        setMaxLinesPerPage(9);
+        setFontSize('16px');
+      } else if (window.innerHeight > 628) {
+        setMaxLinesPerPage(8);
+        setFontSize('16px');
       } else if (window.innerHeight > 580) {
-        setMaxLinesPerPage(5);
+        setMaxLinesPerPage(7);
+        setFontSize('16px');
       } else {
-        setMaxLinesPerPage(6);
+        setMaxLinesPerPage(8);
+        setFontSize('11px');
       }
     };
 
@@ -76,7 +84,11 @@ const SendDetailPage = () => {
               ` · 사진 ${letterData.images.length}장`}
           </LetterCount>
         </Header>
-        <LetterContainer>
+        <LetterContainer
+          $hasChangeButton={
+            letterData.content.length > 0 && letterData.images.length > 0
+          }
+        >
           <Letter
             key={`${key}-${maxLinesPerPage}`}
             showType="send"
@@ -91,6 +103,7 @@ const SendDetailPage = () => {
             width="100%"
             height="100%"
             maxLines={maxLinesPerPage}
+            fontSize={fontSize}
           />
         </LetterContainer>
         <WhiteSpace />
@@ -170,48 +183,40 @@ const Header = styled.div`
   width: 100%;
 `;
 
-const LetterContainer = styled.div`
+const LetterContainer = styled.div<{ $hasChangeButton: boolean }>`
   display: flex;
   justify-content: center;
   width: 100%;
   max-width: 345px;
   min-height: 398px;
   max-height: 398px;
+  margin-bottom: ${({ $hasChangeButton }) => ($hasChangeButton ? '0' : '80px')};
 
-  @media (max-height: 824px) {
-    max-width: 320px;
-    max-height: 350px;
+  @media (max-height: 780px) {
     min-height: 350px;
+    max-height: 350px;
   }
 
-  @media (max-height: 780px) {
-    max-width: 300px;
+  @media (max-height: 660px) {
     min-height: 330px;
     max-height: 330px;
   }
 
-  @media (max-height: 680px) {
-    max-width: 300px;
-    min-height: 330px;
-    max-height: 330px;
+  @media (max-height: 628px) {
+    min-height: 310px;
+    max-height: 310px;
   }
 
-  @media (max-height: 630px) {
-    max-width: 300px;
+  @media (max-height: 580px) {
     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: 250px;
-    min-height: 250px;
-    max-height: 250px;
+    min-height: 260px;
+    max-height: 260px;
+    margin-bottom: ${({ $hasChangeButton }) =>
+      $hasChangeButton ? '0' : '55px'};
   }
 `;
 

From 6eb4d8d8ee2194f04113ddc9ff03f1d725f7aef2 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Thu, 27 Feb 2025 18:12:10 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=92=84=20design(#155):=20=EB=B3=B4?=
 =?UTF-8?q?=EB=82=B8=20=ED=8E=B8=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=82=B4=EB=B6=80=20=EB=82=A0=EC=A7=9C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=82=B4=EB=A1=9C=20=EC=9C=84=EC=B9=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/send/[id]/page.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/mypage/send/[id]/page.tsx b/src/app/mypage/send/[id]/page.tsx
index bcf696c..b14b499 100644
--- a/src/app/mypage/send/[id]/page.tsx
+++ b/src/app/mypage/send/[id]/page.tsx
@@ -79,7 +79,7 @@ const SendDetailPage = () => {
       <MainWrapper>
         <Header>
           <LetterCount>
-            편지 정보 | {letterData.content.length}자{' '}
+            {letterData.sendDate} | {letterData.content.length}자{' '}
             {letterData.images.length > 0 &&
               ` · 사진 ${letterData.images.length}장`}
           </LetterCount>
@@ -97,7 +97,6 @@ const SendDetailPage = () => {
             name={letterData.receiverName}
             content={letterData.content}
             images={letterData.images}
-            date={letterData.sendDate}
             readOnly={true}
             isImage={isImage}
             width="100%"