Merge pull request #82 from ASAP-Lettering/fix/#72

[Design] Letter, Tooltip 반응형 수정

Author: yyypearl

src/app/letter/preview/page.tsx

@@ -180,6 +180,7 @@ const Container = styled.div`
 `;
 
 const Column = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -196,6 +197,7 @@ const Label = styled.div`
 `;
 
 const LetterWrapper = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/app/planet/page.tsx

@@ -529,7 +529,7 @@ const PlanetPage = () => {
               </BottomWrapper>
               {showTooltip && (
                 <Tooltip
-                  message="궤도에 있는 편지들을 끌어 당겨 행성으로 옮길 수 있어요"
+                  message={`궤도에 있는 편지들을 끌어 당겨 행성으로 \n옮길 수있어요`}
                   close={true}
                   bottom="230px"
                   onClose={() => setShowTooltip(false)}

src/app/send/preview/page.tsx

@@ -150,6 +150,7 @@ const Container = styled.div`
 `;
 
 const Column = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -166,6 +167,7 @@ const Label = styled.div`
 `;
 
 const LetterWrapper = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/components/common/Tooltip.tsx

@@ -36,6 +36,9 @@ const Tooltip = (props: ToolTipProps) => {
       setIsVisible(true);
     }, 1000);
   }, []);
+
+  const [firstLine, secondLine] = message.split("\n");
+
   return (
     shouldRender && (
       <TooltipContainer
@@ -46,7 +49,10 @@ const Tooltip = (props: ToolTipProps) => {
         $right={right}
         $padding={padding}
       >
-        <Message>{message}</Message>
+        <Message>
+          <span>{firstLine}</span>
+          {secondLine && <span className="second-line">{secondLine}</span>}
+        </Message>
         {close && (
           <CloseButton onClick={handleClose}>
             <Image
@@ -72,7 +78,9 @@ const TooltipContainer = styled.div<{
   $right?: string;
   $padding?: string;
 }>`
-  width: calc(100% - 50px);
+  max-width: calc(100% - 50px);
+  min-width: 280px;
+  width: auto;
   padding: ${({ $padding }) => ($padding ? $padding : "8px 14px")};
   display: flex;
   justify-content: space-between;
@@ -111,11 +119,24 @@ const TooltipContainer = styled.div<{
 `;
 
 const Message = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 5px;
+  display: inline;
+  white-space: nowrap;
+
+  span {
+    display: inline;
+  }
+
+  .second-line {
+    display: inline;
+  }
+
+  @media (max-width: 380px) {
+    white-space: normal;
+
+    .second-line {
+      display: block; /* 공간이 부족할 때 줄바꿈 */
+    }
+  }
 `;
 
 const CloseButton = styled.button`

src/components/letter/Letter.tsx

@@ -264,7 +264,6 @@ const Container = styled.div<{
   height: auto;
   padding: ${({ $padding }) => ($padding ? $padding : "34px")};
   max-width: ${({ $width }) => ($width ? $width : "345px")};
-  min-width: ${({ $width }) => ($width ? $width : "345px")};
   max-height: ${({ $height }) => ($height ? $height : "349px")};
   min-height: ${({ $height }) => ($height ? $height : "349px")};
   background-image: ${({ $templateType }) =>