[#9] 공통 dialog 컴포넌트 및 아이디어 개요 dialog

src/components/IbulDialog/IdeaOutline.tsx

@@ -14,8 +14,17 @@ import {
 import styled from 'styled-components'
 import { FaX } from 'react-icons/fa6'
 
-const StyledDialogMainTitle = styled(DialogTitle)`
-  margin-bottom: 16px;
+const IdeaOutlineContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  margin-bottom: 15px;
+`
+const MarketFailureContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  margin-bottom: 34px;
 `
 const StyledBottomBtn = styled.button`
   font-family: inherit;
@@ -25,14 +34,12 @@ const StyledBottomBtn = styled.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #c9c9c9;
-  background-color: #eeeeee;
+  color: ${(props) => props.theme.color.grey500};
+  background-color: ${(props) => props.theme.color.grey200};
   position: absolute;
   top: 10px;
   right: 10px;
-  &:hover {
-    background-color: #9f9f9f;
-  }
+  cursor: pointer;
 `
 const StyleBottomClosedBtn = styled.button`
   position: absolute;
@@ -44,7 +51,7 @@ const StyleBottomClosedBtn = styled.button`
   height: 54px;
   width: 360px;
   background-color: ${(props) => props.theme.color.purple700};
-  color: #fff;
+  color: ${(props) => props.theme.color.white};
   border-bottom-left-radius: 14px;
   border-bottom-right-radius: 14px;
   &:hover {
@@ -55,8 +62,6 @@ const StyleBottomClosedBtn = styled.button`
 const StyledDescriptionWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  margin: 8px 0 16px;
 `
 
 const IdeaOutline = () => {
@@ -68,37 +73,35 @@ const IdeaOutline = () => {
       <DialogPortal>
         <DialogOverlay />
         <DialogContent>
-          <StyledDialogMainTitle textAlign="left">
-            아이디어 개요
-          </StyledDialogMainTitle>
-          <StyledDescriptionWrapper>
-            <DialogDescription fontSize={12}>
+          <IdeaOutlineContainer>
+            <DialogTitle size="medium">아이디어 개요</DialogTitle>
+            <DialogDescription>
               해당 파트는 자신이 생각하는 아이디어를 마음껏 펼쳐보는 시간입니다.
               아이디어를 펼치기 전 시장 실패의 법칙에 대해 알아볼까요?
             </DialogDescription>
-          </StyledDescriptionWrapper>
-          <DialogDescription fontSize={16} fontWeight={700}>
-            시장 실패의 법칙
-          </DialogDescription>
-          <StyledDescriptionWrapper>
-            <DialogDescription fontSize={12}>
-              실패(Fail)는 출시(Launch), 운영(Operation) 또는 전제(Premise)
-              때문입니다.
-            </DialogDescription>
-            <DialogDescription fontSize={12}>
-              코카콜라나 디즈니, 구글처럼 전 세계에서 가장 성공한 기업들 조차
-              신제품이 시장에서 실패하는 이유는 3번째 요인, 전제(Premise)
-              때문입니다.
-            </DialogDescription>
-            <DialogDescription fontSize={12}>
-              아무리 디자인이 뛰어나고 엔지니어링이 절묘하고 마케팅이 화려해도
-              ‘안 될 놈’이 실패라는 괴수에 잡아먹히는 것을 막을 수 없습니다.
-            </DialogDescription>
-            <DialogDescription fontSize={12}>
-              아이디어의 불패 법칙은 ‘유능하게 실행 했을 경우 성공할 아이디어’
-              즉, 될놈을 찾아 나서는 과정입니다.
-            </DialogDescription>
-          </StyledDescriptionWrapper>
+          </IdeaOutlineContainer>
+          <MarketFailureContainer>
+            <DialogTitle size="small">시장 실패의 법칙</DialogTitle>
+            <StyledDescriptionWrapper>
+              <DialogDescription>
+                실패(Fail)는 출시(Launch), 운영(Operation) 또는 전제(Premise)
+                때문입니다.
+              </DialogDescription>
+              <DialogDescription>
+                코카콜라나 디즈니, 구글처럼 전 세계에서 가장 성공한 기업들 조차
+                신제품이 시장에서 실패하는 이유는 3번째 요인, 전제(Premise)
+                때문입니다.
+              </DialogDescription>
+              <DialogDescription>
+                아무리 디자인이 뛰어나고 엔지니어링이 절묘하고 마케팅이 화려해도
+                ‘안 될 놈’이 실패라는 괴수에 잡아먹히는 것을 막을 수 없습니다.
+              </DialogDescription>
+              <DialogDescription>
+                아이디어의 불패 법칙은 ‘유능하게 실행 했을 경우 성공할 아이디어’
+                즉, 될놈을 찾아 나서는 과정입니다.
+              </DialogDescription>
+            </StyledDescriptionWrapper>
+          </MarketFailureContainer>
           <DialogClose asChild>
             <StyledBottomBtn>
               <FaX size={12} />

src/components/common/Dialog/Content.tsx

@@ -4,6 +4,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog'
 import styled from 'styled-components'
 
 const StyledContent = styled(DialogPrimitive.Content)`
+  /* 기본값 */
   position: relative;
   background-color: white;
   border-radius: 14px;
@@ -18,7 +19,7 @@ const StyledContent = styled(DialogPrimitive.Content)`
   max-width: 360px;
   min-height: 320px;
   max-height: 85vh;
-  padding: 60px 0;
+  padding: 60px 20px 54px;
   outline: none;
   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
 

src/components/common/Dialog/Description.tsx

@@ -1,29 +1,87 @@
 'use client'
 
+import { theme } from '@/styles/theme'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import styled from 'styled-components'
+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 {
-  fontSize?: number
-  fontWeight?: 300 | 400 | 500 | 600 | 700 | 800
+  size: string
+  theme: string
 }
 interface DialogDescriptionProps
   extends DialogPrimitive.DialogDescriptionProps,
     StyledDescriptionProps {}
 
+const DialogDescriptionSizes: DialogDescriptionSize = {
+  small: {
+    fontSize: '12px',
+  },
+  medium: {
+    fontSize: '14px',
+  },
+  large: {
+    fontSize: '16px',
+  },
+}
+const DialogDescriptionThemes: DialogDescriptionTheme = {
+  primary: {
+    color: theme.color.black,
+  },
+  red: {
+    color: theme.color.red,
+  },
+}
+
+const sizeStyles = css<StyledDescriptionProps>`
+  ${({ size }) => css`
+    font-size: ${DialogDescriptionSizes[size].fontSize};
+  `}
+`
+const themeStyles = css<StyledDescriptionProps>`
+  ${({ theme }) => css`
+    color: ${DialogDescriptionThemes[theme].color};
+  `}
+`
+
 const StyledDescription = styled(
   DialogPrimitive.Description,
 )<StyledDescriptionProps>`
+  /* 기본값 */
   margin: 0;
   color: black;
-  font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : '14px')};
-  font-weight: ${(props) => (props.fontWeight ? props.fontWeight : 400)};
-  line-height: 1.5;
-  padding: 0 20px;
+  line-height: 150%;
+  letter-spacing: -0.05em;
+  /* size */
+  ${sizeStyles}
+  /* theme */
+  ${themeStyles}
 `
 
 const DialogDescription = ({ children, ...props }: DialogDescriptionProps) => {
   return <StyledDescription {...props}>{children}</StyledDescription>
 }
+DialogDescription.defaultProps = {
+  size: 'small',
+  theme: 'primary',
+}
 
 export default DialogDescription

src/components/common/Dialog/Title.tsx

@@ -1,32 +1,56 @@
 'use client'
 
+import { theme } from '@/styles/theme'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
+interface DialogTitleSize {
+  [key: string]: {
+    fontSize: string
+    fontFamily?: string
+  }
+}
+
+/**
+ * **size** : small, medium(default), large
+ */
 interface StyledTitleProps {
-  fontSize?: number
-  fontWeight?: 300 | 400 | 700 | 800
-  textAlign?: 'left' | 'center' | 'right'
+  size: string
 }
 interface DialogTitleProps
   extends DialogPrimitive.DialogTitleProps,
     StyledTitleProps {}
 
+const DialogTitleSizes: DialogTitleSize = {
+  small: {
+    fontSize: '16px',
+    fontFamily: theme.NanumFontFamily.bold,
+  },
+  medium: {
+    fontSize: '20px',
+    fontFamily: theme.NanumFontFamily.extraBold,
+  },
+  large: { fontSize: '32px', fontFamily: theme.NanumFontFamily.extraBold },
+}
+
+const DialogTitleSizeStyles = css<StyledTitleProps>`
+  ${({ size }) => css`
+    font-size: ${DialogTitleSizes[size].fontSize};
+    font-family: ${DialogTitleSizes[size].fontFamily};
+  `}
+`
+
 const StyledTitle = styled(DialogPrimitive.Title)<StyledTitleProps>`
-  margin: 0;
-  color: black;
-  font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : '20px')};
-  font-weight: ${(props) => (props.fontWeight ? props.fontWeight : 800)};
-  padding: 0 20px;
-  text-align: ${(props) => props.textAlign ?? 'left'};
+  color: ${(props) => props.theme.color.black};
+
+  ${DialogTitleSizeStyles}
 `
 
-const DialogTitle = ({ children, textAlign, ...props }: DialogTitleProps) => {
-  return (
-    <StyledTitle textAlign={textAlign} {...props}>
-      {children}
-    </StyledTitle>
-  )
+const DialogTitle = ({ children, ...props }: DialogTitleProps) => {
+  return <StyledTitle {...props}>{children}</StyledTitle>
+}
+DialogTitle.defaultProps = {
+  size: 'medium',
 }
 
 export default DialogTitle

src/components/common/button/Button.tsx

@@ -47,7 +47,7 @@ const StyledWrapper = styled.button<ButtonProps>`
   align-items: center;
 
   background-color: ${({ status }) =>
-    status === 'Disabled' ? theme.color.grey500 : theme.color.purple700};
+    status === 'Disabled' ? theme.color.grey400 : theme.color.purple700};
   color: ${theme.color.white};
   width: 350px;
   height: 43px;

src/styles/theme.ts

@@ -6,15 +6,25 @@ export const theme = {
     purple100: '#f3f4ff',
     purple700: '#6c76f4',
     grey100: '#fbfbfb',
+    grey200: '#eeeeee',
     grey300: '#ECECEC',
-    grey500: '#D9D9D9',
+    grey400: '#D9D9D9',
+    grey500: '#c9c9c9',
+    grey600: '#9f9f9f',
     grey700: '#989898',
+    red: '#ff0000',
   },
   fontWeight: {
     light: 300,
-    normal: 500,
+    normal: 400, // regular
     bold: 700,
-    extraBold: 900,
+    extraBold: 800,
+  },
+  NanumFontFamily: {
+    light: 'NanumSquareLight',
+    normal: 'NanumSquare', // regular
+    bold: 'NanumSquareBold',
+    extraBold: 'NanumSquareExtraBold',
   },
 } as const
 

src/types/styled.d.ts

@@ -1,6 +1,11 @@
 import { Theme } from '@/styles/theme'
-import 'styled-components'
+import type { CSSProp } from 'styled-components'
 
+declare module 'react' {
+  interface Attributes {
+    css?: CSSProp
+  }
+}
 declare module 'styled-components' {
   export interface DefaultTheme extends Theme {}
 }