sopt-makers · solar3070 · Oct 19, 2023 · Oct 19, 2023 · Oct 19, 2023 · Oct 19, 2023
diff --git a/src/assets/images/sopt_404.png b/src/assets/images/sopt_404.png
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,24 +1,18 @@
-/* TODO: 공홈 개편 후 제거해야 할 색상 코드입니다. */
-export const mainColor = {
-  mainColor: '#4877AF',
-  soptWhite: '#FCFCFC',
-};
-
 export const colors = {
   white: '#FFFFFF',
   black: '#000000',
 
-  gray10: '#F0F0F0',
-  gray30: '#E4E4E5',
-  gray50: '#C3C3C6',
-  gray100: '#9D9DA4',
-  gray200: '#808087',
-  gray300: '#66666D',
-  gray400: '#515159',
-  gray500: '#3F3F47',
-  gray600: '#2E2E35',
-  gray700: '#202025',
-  gray800: '#17171C',
+  gray10: '#FCFCFC',
+  gray30: '#F0F0F0',
+  gray50: '#E4E4E5',
+  gray100: '#C3C3C6',
+  gray200: '#9D9DA4',
+  gray300: '#808087',
+  gray400: '#66666D',
+  gray500: '#515159',
+  gray600: '#3F3F47',
+  gray700: '#2E2E35',
+  gray800: '#202025',
   gray900: '#0F0F12',
 
   blue50: '#C8E1FF',

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -1,33 +1,21 @@
 import styled from '@emotion/styled';
-import Image from 'next/image';
 import { useRouter } from 'next/router';
-import Sopt404 from '@src/assets/images/sopt_404.png';
 import { Header } from '@src/components';
 import RoundButton from '@src/components/common/RoundButton';
-import { useIsDesktop } from '@src/hooks/useDevice';
-import { mainColor } from '@src/lib/styles/colors';
+import { colors } from '@src/lib/styles/colors';
 
 function Wrong() {
   const router = useRouter();
 
   const handleButtonClick = () => {
     router.push('/');
   };
-  const isDesktop = useIsDesktop();
 
   return (
     <>
       <Header />
       <Styled.Root>
-        <Image
-          src={Sopt404.src}
-          width={isDesktop ? 296 : 196}
-          height={isDesktop ? 78 : 52}
-          alt="솝트 공식 로고"
-          blurDataURL={Sopt404.src}
-          placeholder="blur"
-        />
-        <span>잘못된 경로예요!</span>
+        <span>잘못된 경로예요</span>
         <RoundButton onClick={handleButtonClick} isReverse={true}>
           홈으로 가기
         </RoundButton>
@@ -44,20 +32,18 @@ const Styled = {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 48px;
+
     width: 100%;
     height: 100vh;
 
     & span {
-      margin-top: 99px;
-      margin-bottom: 99px;
-      line-height: 56px;
-      color: ${mainColor.soptWhite};
-      font-size: 45px;
-      font-weight: 400;
-      font-style: normal;
-      @media (max-width: 769px) {
-        font-size: 24px;
-      }
+      color: ${colors.gray10};
+
+      font-size: 48px;
+      font-weight: 600;
+      line-height: 150%; /* 72px */
+      letter-spacing: -0.96px;
     }
   `,
 };
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;
 
   /* 데스크탑 뷰 */