chore: 레거시 컬러 코드 제거

sopt-makers · Oct 19, 2023 · 6a141ac · 6a141ac
1 parent 8c03dc7
commit 6a141ac
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 33 deletions.
diff --git a/src/components/Footer/OriginFooter/style.ts b/src/components/Footer/OriginFooter/style.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { mainColor } from '@src/lib/styles/colors';
+import { colors } from '@src/lib/styles/colors';
 
 export const Root = styled.footer`
   width: 100%;
@@ -51,7 +51,7 @@ export const TitleButton = styled.button`
   display: flex;
   align-items: center;
 
-  color: ${mainColor.soptWhite};
+  color: ${colors.gray10};
   font-size: 14px;
   font-weight: 700;
 

diff --git a/src/components/Header/Mobile/HeaderMenu.style.ts b/src/components/Header/Mobile/HeaderMenu.style.ts
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import Link from 'next/link';
 import { css } from '@emotion/react';
 import { FadeIn, FadeInDown, FadeOut, FadeOutUp } from '@src/lib/styles/animation';
-import { mainColor } from '@src/lib/styles/colors';
+import { colors } from '@src/lib/styles/colors';
 
 type MenuType = 'idle' | 'open' | 'close';
 
@@ -169,7 +169,7 @@ export const ChannelTitle = styled.p`
   line-height: 17px;
   letter-spacing: -0.04em;
 
-  color: ${mainColor.soptWhite};
+  color: ${colors.gray10};
   font-size: 14px;
   font-weight: 600;
 `;
diff --git a/src/components/common/RoundButton/RoundButton.style.tsx b/src/components/common/RoundButton/RoundButton.style.tsx
@@ -1,25 +1,23 @@
 import styled from '@emotion/styled';
-import { mainColor } from '@src/lib/styles/colors';
+import { colors } from '@src/lib/styles/colors';
 
 interface StyleProps {
   isReverse?: boolean;
 }
 
 export const Root = styled.button<StyleProps>`
-  border-radius: 24.5px;
-  background: ${(props: StyleProps) =>
-    props.isReverse ? mainColor.mainColor : mainColor.soptWhite};
-  cursor: pointer;
-
-  padding: 12px 40px;
-  line-height: 25px;
-  color: ${(props: StyleProps) => (props.isReverse ? mainColor.soptWhite : mainColor.mainColor)};
+  display: flex;
+  align-items: center;
 
-  font-size: 20px;
-  font-weight: 700;
+  height: 50px;
+  padding: 10px 30px;
+  border-radius: 99px;
+  background: ${colors.gray10};
 
-  @media (max-width: 1279px) {
-    border-radius: 24px;
-    font-size: 18px;
-  }
+  color: ${colors.gray900};
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 150%; /* 36px */
+  letter-spacing: -0.48px;
+  cursor: pointer;
 `;
diff --git a/src/lib/styles/colors.ts b/src/lib/styles/colors.ts
@@ -1,9 +1,3 @@
-/* TODO: 공홈 개편 후 제거해야 할 색상 코드입니다. */
-export const mainColor = {
-  mainColor: '#4877AF',
-  soptWhite: '#FCFCFC',
-};
-
 export const colors = {
   white: '#FFFFFF',
   black: '#000000',

diff --git a/src/views/ReviewPage/components/Description/index.tsx b/src/views/ReviewPage/components/Description/index.tsx
@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
-import { mainColor } from '@src/lib/styles/colors';
+import { colors } from '@src/lib/styles/colors';
 
 const Description = () => {
   return <Title>SOPT 회원들의 활동 후기</Title>;
 };
 
 const Title = styled.div`
   font-weight: 700;
-  color: ${mainColor.soptWhite};
+  color: ${colors.gray10};
   text-align: center;
 
   /* 데스크탑 뷰 */

diff --git a/src/views/RulesPage/components/CollapseLi/CollapseLi.style.tsx b/src/views/RulesPage/components/CollapseLi/CollapseLi.style.tsx
@@ -1,14 +1,14 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { ArrowDownAnimation, ArrowUpAnimation } from '@src/lib/styles/animation';
-import { mainColor } from '@src/lib/styles/colors';
+import { colors } from '@src/lib/styles/colors';
 
 interface ButtonStyleProps {
   isOpened: boolean;
 }
 
 export const Root = styled.li`
-  border-bottom: 1px solid ${mainColor.soptWhite};
+  border-bottom: 1px solid ${colors.gray10};
   padding-bottom: 40px;
   width: 100%;
   @media (max-width: 768px) {
@@ -29,7 +29,7 @@ export const Section = styled.div`
 export const TItle = styled.h3`
   text-align: center;
   line-height: 30px;
-  color: ${mainColor.soptWhite};
+  color: ${colors.gray10};
   font-size: 24px;
   font-weight: 700;
   font-style: normal;
@@ -75,7 +75,7 @@ export const Contents = styled.div<ButtonStyleProps>`
   line-height: 180%;
   letter-spacing: -0.03em;
   white-space: pre-line;
-  color: ${mainColor.soptWhite};
+  color: ${colors.gray10};
   font-size: 20px;
   font-weight: 400;
   font-style: normal;

diff --git a/src/views/SopticlePage/components/Description/index.tsx b/src/views/SopticlePage/components/Description/index.tsx
@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
-import { mainColor } from '@src/lib/styles/colors';
+import { colors } from '@src/lib/styles/colors';
 
 const Description = () => {
   return <Title>솝티클</Title>;
 };
 
 const Title = styled.div`
   font-weight: 700;
-  color: ${mainColor.soptWhite};
+  color: ${colors.gray10};
   text-align: center;
 
   /* 데스크탑 뷰 */