[#9] css 관련 변경

primus-teoSprint · May 11, 2024 · 727a80d · 727a80d
1 parent 60e43f2
commit 727a80d
Showing 1 changed file with 41 additions and 38 deletions.
diff --git a/src/components/IbulDialog/IdeaOutline.tsx b/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} />