From 0585dfacbfde4f885e3ee5be54fa7b4bdc8b8869 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?=
 =?UTF-8?q?=E1=85=B4?= <mhl98@dgu.ac.kr>
Date: Sat, 7 Sep 2024 01:55:23 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20#330=20=EC=97=90=EB=9F=AC=EB=A9=94?=
 =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EA=B3=B5=EA=B0=84=EC=9D=84=20=EC=9C=84?=
 =?UTF-8?q?=ED=95=9C=20=EA=B0=84=EA=B2=A9=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/login/SetNicknamePage.tsx                 | 2 +-
 src/component/common/tip/TipCard.tsx              | 9 ++++-----
 src/component/retrospectCreate/steps/MainInfo.tsx | 4 ++--
 src/component/space/create/Info.tsx               | 2 +-
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/app/login/SetNicknamePage.tsx b/src/app/login/SetNicknamePage.tsx
index 2a503d7c..c6afb5ab 100644
--- a/src/app/login/SetNicknamePage.tsx
+++ b/src/app/login/SetNicknamePage.tsx
@@ -34,7 +34,7 @@ export function SetNickNamePage() {
       <Typography variant="T4">닉네임을 설정해주세요!</Typography>
       <Spacing size={4} />
       <Input value={nickName} onChange={handleInputChange} placeholder="Text" count={true} maxLength={maxLength} />
-      <Spacing size={0.8} />
+      <Spacing size={3.6} />
       <TipCard message={"실명으로 활동하는 걸 추천해요!"} />
 
       <ButtonProvider isProgress={isPending}>
diff --git a/src/component/common/tip/TipCard.tsx b/src/component/common/tip/TipCard.tsx
index 1151a833..5b7c71bc 100644
--- a/src/component/common/tip/TipCard.tsx
+++ b/src/component/common/tip/TipCard.tsx
@@ -1,4 +1,4 @@
-import { css, Interpolation, Theme } from "@emotion/react";
+import { css } from "@emotion/react";
 
 import { Typography } from "@/component/common/typography";
 import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
@@ -6,10 +6,9 @@ import { DESIGN_TOKEN_COLOR } from "@/style/designTokens";
 type TipCardProps = {
   message: string;
   header?: string;
-  styles?: Interpolation<Theme>;
-};
+} & React.HTMLAttributes<HTMLDivElement>;
 
-export function TipCard({ message, header = "TIP", styles }: TipCardProps) {
+export function TipCard({ message, header = "TIP", ...props }: TipCardProps) {
   return (
     <div
       css={[
@@ -21,8 +20,8 @@ export function TipCard({ message, header = "TIP", styles }: TipCardProps) {
           flex-direction: column;
           gap: 0.4rem;
         `,
-        styles,
       ]}
+      {...props}
     >
       <Typography variant={"body12SemiBold"} color={"blue600"}>
         {header}
diff --git a/src/component/retrospectCreate/steps/MainInfo.tsx b/src/component/retrospectCreate/steps/MainInfo.tsx
index d8527335..8999207b 100644
--- a/src/component/retrospectCreate/steps/MainInfo.tsx
+++ b/src/component/retrospectCreate/steps/MainInfo.tsx
@@ -50,8 +50,8 @@ export function MainInfo() {
           </InputLabelContainer>
           <TipCard
             message="회고 설명 또는 진행 목표에 대해 적어도 좋아요 :)"
-            styles={css`
-              margin-top: 0.8rem;
+            css={css`
+              margin-top: 3.6rem;
             `}
           />
         </div>
diff --git a/src/component/space/create/Info.tsx b/src/component/space/create/Info.tsx
index a0adea38..67499c25 100644
--- a/src/component/space/create/Info.tsx
+++ b/src/component/space/create/Info.tsx
@@ -37,7 +37,7 @@ export function Info({ onNext }: { onNext: (infoValues: InfoValues) => void }) {
           placeholder="프로젝트 한 줄 설명을 적어주세요"
         />
       </InputLabelContainer>
-      <Spacing size={0.8} />
+      <Spacing size={3.6} />
       <TipCard message="프로젝트 설명 또는 진행 목표에 대해 적어도 좋아요 :)" />
       <ButtonProvider>
         <ButtonProvider.Primary