[#7] 작성순서 컨벤션 적용 및 fontSize 단위 변경

primus-teoSprint · May 12, 2024 · 6bd01d9 · 6bd01d9
1 parent 96a596e
commit 6bd01d9
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 57 deletions.
diff --git a/src/components/IbulDialog/IdeaOutline.tsx b/src/components/IbulDialog/IdeaOutline.tsx
@@ -13,6 +13,7 @@ import {
 } from '../common/Dialog'
 import styled from 'styled-components'
 import { FaX } from 'react-icons/fa6'
+import { theme } from '@/styles/theme'
 
 const IdeaOutlineContainer = styled.div`
   display: flex;
@@ -34,8 +35,8 @@ const StyledBottomBtn = styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: ${(props) => props.theme.color.grey500};
-  background-color: ${(props) => props.theme.color.grey200};
+  color: ${theme.color.grey500};
+  background-color: ${theme.color.grey200};
   position: absolute;
   top: 10px;
   right: 10px;
@@ -50,15 +51,14 @@ const StyleBottomClosedBtn = styled.button`
   align-items: center;
   height: 54px;
   width: 360px;
-  background-color: ${(props) => props.theme.color.purple700};
-  color: ${(props) => props.theme.color.white};
+  background-color: ${theme.color.purple700};
+  color: ${theme.color.white};
   border-bottom-left-radius: 14px;
   border-bottom-right-radius: 14px;
   &:hover {
     cursor: pointer;
   }
 `
-
 const StyledDescriptionWrapper = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/src/components/common/Dialog/Description.tsx b/src/components/common/Dialog/Description.tsx
@@ -4,42 +4,15 @@ import { theme } from '@/styles/theme'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import styled, { css } from 'styled-components'
 
-interface DialogDescriptionSize {
-  [key: string]: {
-    fontSize: string
-    padding?: string
-  }
-}
-interface DialogDescriptionTheme {
-  [key: string]: {
-    color: string
-    backgroundColor?: string
-    bolderColor?: string
-  }
-}
-
-/**
- * **size**: large, medium, small(default)
- *
- * **theme**: primary(default), color
- */
-interface StyledDescriptionProps {
-  size: string
-  theme: string
-}
-interface DialogDescriptionProps
-  extends DialogPrimitive.DialogDescriptionProps,
-    StyledDescriptionProps {}
-
 const DialogDescriptionSizes: DialogDescriptionSize = {
   small: {
-    fontSize: '12px',
+    fontSize: '0.75rem',
   },
   medium: {
-    fontSize: '14px',
+    fontSize: '0.875rem',
   },
   large: {
-    fontSize: '16px',
+    fontSize: '1rem',
   },
 }
 const DialogDescriptionThemes: DialogDescriptionTheme = {
@@ -67,7 +40,7 @@ const StyledDescription = styled(
 )<StyledDescriptionProps>`
   /* 기본값 */
   margin: 0;
-  color: black;
+  color: ${theme.color.black};
   line-height: 150%;
   letter-spacing: -0.05em;
   /* size */
@@ -76,6 +49,33 @@ const StyledDescription = styled(
   ${themeStyles}
 `
 
+interface DialogDescriptionSize {
+  [key: string]: {
+    fontSize: string
+    padding?: string
+  }
+}
+interface DialogDescriptionTheme {
+  [key: string]: {
+    color: string
+    backgroundColor?: string
+    bolderColor?: string
+  }
+}
+
+/**
+ * **size**: large, medium, small(default)
+ *
+ * **theme**: primary(default), color
+ */
+interface StyledDescriptionProps {
+  size: string
+  theme: string
+}
+interface DialogDescriptionProps
+  extends DialogPrimitive.DialogDescriptionProps,
+    StyledDescriptionProps {}
+
 const DialogDescription = ({ children, ...props }: DialogDescriptionProps) => {
   return <StyledDescription {...props}>{children}</StyledDescription>
 }

diff --git a/src/components/common/Dialog/Title.tsx b/src/components/common/Dialog/Title.tsx
@@ -4,33 +4,16 @@ import { theme } from '@/styles/theme'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import styled, { css } from 'styled-components'
 
-interface DialogTitleSize {
-  [key: string]: {
-    fontSize: string
-    fontFamily?: string
-  }
-}
-
-/**
- * **size** : small, medium(default), large
- */
-interface StyledTitleProps {
-  size: string
-}
-interface DialogTitleProps
-  extends DialogPrimitive.DialogTitleProps,
-    StyledTitleProps {}
-
 const DialogTitleSizes: DialogTitleSize = {
   small: {
-    fontSize: '16px',
+    fontSize: '1rem',
     fontFamily: theme.NanumFontFamily.bold,
   },
   medium: {
-    fontSize: '20px',
+    fontSize: '1.25rem',
     fontFamily: theme.NanumFontFamily.extraBold,
   },
-  large: { fontSize: '32px', fontFamily: theme.NanumFontFamily.extraBold },
+  large: { fontSize: '2rem', fontFamily: theme.NanumFontFamily.extraBold },
 }
 
 const DialogTitleSizeStyles = css<StyledTitleProps>`
@@ -41,11 +24,28 @@ const DialogTitleSizeStyles = css<StyledTitleProps>`
 `
 
 const StyledTitle = styled(DialogPrimitive.Title)<StyledTitleProps>`
-  color: ${(props) => props.theme.color.black};
+  color: ${theme.color.black};
 
   ${DialogTitleSizeStyles}
 `
 
+interface DialogTitleSize {
+  [key: string]: {
+    fontSize: string
+    fontFamily?: string
+  }
+}
+
+/**
+ * **size** : small, medium(default), large
+ */
+interface StyledTitleProps {
+  size: string
+}
+interface DialogTitleProps
+  extends DialogPrimitive.DialogTitleProps,
+    StyledTitleProps {}
+
 const DialogTitle = ({ children, ...props }: DialogTitleProps) => {
   return <StyledTitle {...props}>{children}</StyledTitle>
 }