fix: #330 에러메시지 공간을 위한 간격 조정

depromeet · Sep 6, 2024 · 0585dfa · 0585dfa
1 parent 82ae72f
commit 0585dfa
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git 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
@@ -1,15 +1,14 @@
-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";
 
 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
@@ -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
@@ -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