feat: 도움말풍선 양옆 공백 스타일링 추가

miind-palace · Mar 2, 2024 · 7f03a0e · 7f03a0e
1 parent b254ec4
commit 7f03a0e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 33 deletions.
diff --git a/components/Upload/HelpInfo/HelpInfo.style.ts b/components/Upload/HelpInfo/HelpInfo.style.ts
@@ -10,38 +10,42 @@ export const Container = styled.div`
   background-color: rgba(0, 122, 255, 0.2);
   cursor: pointer;
 
-  & > p {
-    position: absolute;
-    color: ${({ theme }) => theme.colors.primary.normal};
-    font-size: ${({ theme }) => theme.typography.size.text15};
-    background-color: ${({ theme }) => theme.colors.background.white};
-    border-radius: 0 12px 12px 12px;
-    padding: 10px;
-    line-height: 1;
-
-    &.first-text {
-      top: 79px;
-      left: 69px;
-    }
+  & > div {
+    & > p {
+      position: absolute;
 
-    &.second-text {
-      top: 221px;
-      left: 23px;
-    }
+      color: ${({ theme }) => theme.colors.primary.normal};
+      font-size: ${({ theme }) => theme.typography.size.text15};
+      background-color: ${({ theme }) => theme.colors.background.white};
+      margin: 0px 12px;
+      border-radius: 0 12px 12px 12px;
+      padding: 10px;
+      line-height: 1;
 
-    &.third-text {
-      top: 442px;
-      left: 41px;
-    }
+      &.first-text {
+        top: 79px;
+        left: 69px;
+      }
 
-    &.four-text {
-      top: 624px;
-      left: 69px;
-    }
+      &.second-text {
+        top: 221px;
+        left: 23px;
+      }
+
+      &.third-text {
+        top: 442px;
+        left: 41px;
+      }
+
+      &.four-text {
+        top: 624px;
+        left: 69px;
+      }
 
-    &.five-text {
-      top: 729px;
-      left: 40px;
+      &.five-text {
+        top: 729px;
+        left: 40px;
+      }
     }
   }
 `
diff --git a/components/Upload/HelpInfo/HelpInfo.tsx b/components/Upload/HelpInfo/HelpInfo.tsx
@@ -20,11 +20,15 @@ const HelpInfo = ({ step, setHelpInfoStep, setShowHelpInfo }: HelpInfoProps) =>
 
   return (
     <Container onClick={onClickInfoHandler}>
-      {step === 1 && <p className="first-text">키워드를 입력하면 관련이미지를 서칭합니다.</p>}
-      {step === 2 && <p className="second-text">서칭한 랜덤이미지가 생성됩니다. 생성된 이미지를 사용할 수 있습니다.</p>}
-      {step === 3 && <p className="third-text">내 갤러리에 있는 사진을 업로드해서 사용할 수 있습니다.</p>}
-      {step === 4 && <p className="four-text">사진과 함께 업로드할 텍스트를 작성합니다.</p>}
-      {step === 5 && <p className="five-text">그날의 소리를 링크로 업로드 한 후 재생해 볼 수 있습니다.</p>}
+      <div>
+        {step === 1 && <p className="first-text">키워드를 입력하면 관련이미지를 서칭합니다.</p>}
+        {step === 2 && (
+          <p className="second-text">서칭한 랜덤이미지가 생성됩니다. 생성된 이미지를 사용할 수 있습니다.</p>
+        )}
+        {step === 3 && <p className="third-text">내 갤러리에 있는 사진을 업로드해서 사용할 수 있습니다.</p>}
+        {step === 4 && <p className="four-text">사진과 함께 업로드할 텍스트를 작성합니다.</p>}
+        {step === 5 && <p className="five-text">그날의 소리를 링크로 업로드 한 후 재생해 볼 수 있습니다.</p>}
+      </div>
     </Container>
   )
 }