chore: 디자인 시스템 반영

Cllaude99 · Cllaude99 · commit cced319a84c7 · 2025-07-26T16:41:07.000+09:00
- 디자인 시스템 반영해서 컴포넌트 수정
diff --git a/apps/web/src/components/DefaultComponent/DefaultComponent.styles.ts b/apps/web/src/components/DefaultComponent/DefaultComponent.styles.ts
@@ -4,7 +4,7 @@ import { mq } from '@meme_wiki/ui';
 export const Container = styled.div`
   padding: 16px;
   min-height: 100vh;
-  background-color: ${({ theme }) => theme.palette.gray[100]};
+  background-color: ${({ theme }) => theme.palette.gray['gray-1']};
 
   ${mq.tablet} {
     padding: 24px;
@@ -41,27 +41,27 @@ export const Section = styled.section`
 `;
 
 export const Title = styled.h1`
-  ${({ theme }) => theme.typography.heading.h3};
-  color: ${({ theme }) => theme.palette.gray[900]};
+  ${({ theme }) => theme.typography.title['subhead-long1']};
+  color: ${({ theme }) => theme.palette.gray['gray-9']};
   margin-bottom: 16px;
 
   ${mq.tablet} {
-    ${({ theme }) => theme.typography.heading.h2};
+    ${({ theme }) => theme.typography.title['subhead-long1']};
     margin-bottom: 24px;
   }
 
   ${mq.desktop} {
-    ${({ theme }) => theme.typography.heading.h1};
+    ${({ theme }) => theme.typography.title['subhead-long1']};
   }
 `;
 
 export const Description = styled.p`
-  ${({ theme }) => theme.typography.body.medium};
-  color: ${({ theme }) => theme.palette.gray[600]};
+  ${({ theme }) => theme.typography.body['body-long1']};
+  color: ${({ theme }) => theme.palette.gray['gray-6']};
   margin-bottom: 24px;
 
   ${mq.tablet} {
-    ${({ theme }) => theme.typography.body.large};
+    ${({ theme }) => theme.typography.body['body-long1']};
     max-width: 80%;
     margin: 0 auto 32px;
   }
@@ -83,33 +83,33 @@ export const ButtonContainer = styled.div`
 `;
 
 export const Button = styled.a`
-  ${({ theme }) => theme.typography.button.button2};
+  ${({ theme }) => theme.typography.title['subhead-long1']};
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 12px 24px;
   border-radius: 8px;
   text-decoration: none;
   transition: all 0.2s ease-in-out;
-  background-color: ${({ theme }) => theme.palette.primary};
-  color: ${({ theme }) => theme.palette.white};
+  background-color: ${({ theme }) => theme.palette.main.blue[50]};
+  color: ${({ theme }) => theme.palette.common.white};
   border: none;
 
   &:hover {
-    background-color: ${({ theme }) => theme.palette.primaryDark};
+    background-color: ${({ theme }) => theme.palette.main.blue[40]};
   }
 
   ${mq.tablet} {
-    ${({ theme }) => theme.typography.button.button1};
+    ${({ theme }) => theme.typography.title['subhead-long1']};
     padding: 14px 28px;
   }
 
   &.secondary {
-    background-color: ${({ theme }) => theme.palette.gray[200]};
-    color: ${({ theme }) => theme.palette.gray[900]};
+    background-color: ${({ theme }) => theme.palette.common.white};
+    color: ${({ theme }) => theme.palette.common.black};
 
     &:hover {
-      background-color: ${({ theme }) => theme.palette.gray[300]};
+      background-color: ${({ theme }) => theme.palette.gray['gray-2']};
     }
   }
 `;
diff --git a/apps/web/src/components/Layout/Layout.styles.ts b/apps/web/src/components/Layout/Layout.styles.ts
@@ -7,7 +7,7 @@ const Layout = styled.main`
   width: 100%;
   height: 100vh;
   max-width: ${breakpoints.mobile};
-  border: 1px solid ${({ theme }) => theme.palette.gray[800]};
+  border: 1px solid ${({ theme }) => theme.palette.gray['gray-8']};
   margin: 0 auto;
 `;
 
diff --git a/apps/web/src/pages/Landing/Landing.styles.ts b/apps/web/src/pages/Landing/Landing.styles.ts
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
 const Title = styled.h1`
-  ${({ theme }) => theme.typography.heading.h3};
-  color: ${({ theme }) => theme.palette.gray[900]};
+  ${({ theme }) => theme.typography.title['subhead-long1']};
+  color: ${({ theme }) => theme.palette.gray['gray-9']};
 `;
 
 export { Title };
diff --git a/apps/web/src/pages/MemeQuizPage/MemeQuizPage.styles.ts b/apps/web/src/pages/MemeQuizPage/MemeQuizPage.styles.ts
@@ -19,17 +19,17 @@ const NavigationContainer = styled.div`
 const BackButton = styled.button`
   padding: 8px 16px;
   border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.palette.gray[300]};
-  background-color: ${({ theme }) => theme.palette.white};
-  color: ${({ theme }) => theme.palette.gray[900]};
+  border: 1px solid ${({ theme }) => theme.palette.gray['gray-3']};
+  background-color: ${({ theme }) => theme.palette.common.white};
+  color: ${({ theme }) => theme.palette.common.black};
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   display: flex;
   align-items: center;
   gap: 4px;
 
   &:hover {
-    background-color: ${({ theme }) => theme.palette.gray[100]};
+    background-color: ${({ theme }) => theme.palette.gray['gray-1']};
   }
 
   &:disabled {
@@ -46,14 +46,14 @@ const QuizImage = styled.img`
 `;
 
 const Title = styled.h1`
-  ${({ theme }) => theme.typography.heading.h3};
-  color: ${({ theme }) => theme.palette.gray[900]};
+  ${({ theme }) => theme.typography.title['subhead-long1']};
+  color: ${({ theme }) => theme.palette.gray['gray-9']};
   text-align: center;
 `;
 
 const Summary = styled.p`
-  ${({ theme }) => theme.typography.body.medium};
-  color: ${({ theme }) => theme.palette.gray[700]};
+  ${({ theme }) => theme.typography.body['body-long1']};
+  color: ${({ theme }) => theme.palette.gray['gray-7']};
   text-align: center;
 `;
 
@@ -69,17 +69,17 @@ const Button = styled.button<{ isSelected?: boolean }>`
   width: 100%;
   padding: 12px;
   border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.palette.gray[300]};
+  border: 1px solid ${({ theme }) => theme.palette.gray['gray-3']};
   background-color: ${({ theme, isSelected }) =>
-    isSelected ? theme.palette.primary : theme.palette.white};
+    isSelected ? theme.palette.main.blue[50] : theme.palette.common.white};
   color: ${({ theme, isSelected }) =>
-    isSelected ? theme.palette.white : theme.palette.gray[900]};
+    isSelected ? theme.palette.common.white : theme.palette.common.black};
   cursor: pointer;
   transition: all 0.2s ease-in-out;
 
   &:hover {
     background-color: ${({ theme, isSelected }) =>
-      isSelected ? theme.palette.primaryDark : theme.palette.gray[100]};
+      isSelected ? theme.palette.main.blue[40] : theme.palette.gray['gray-1']};
   }
 `;
 
diff --git a/apps/web/src/pages/MemeQuizPage/components/MemeQuizResult/MemeQuizResult.styles.ts b/apps/web/src/pages/MemeQuizPage/components/MemeQuizResult/MemeQuizResult.styles.ts
@@ -19,17 +19,17 @@ const NavigationContainer = styled.div`
 const BackButton = styled.button`
   padding: 8px 16px;
   border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.palette.gray[300]};
-  background-color: ${({ theme }) => theme.palette.white};
-  color: ${({ theme }) => theme.palette.gray[900]};
+  border: 1px solid ${({ theme }) => theme.palette.gray['gray-3']};
+  background-color: ${({ theme }) => theme.palette.common.white};
+  color: ${({ theme }) => theme.palette.common.black};
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   display: flex;
   align-items: center;
   gap: 4px;
 
   &:hover {
-    background-color: ${({ theme }) => theme.palette.gray[100]};
+    background-color: ${({ theme }) => theme.palette.gray['gray-1']};
   }
 
   &:disabled {
@@ -46,14 +46,14 @@ const QuizImage = styled.img`
 `;
 
 const Title = styled.h1`
-  ${({ theme }) => theme.typography.heading.h3};
-  color: ${({ theme }) => theme.palette.gray[900]};
+  ${({ theme }) => theme.typography.title['subhead-long1']};
+  color: ${({ theme }) => theme.palette.gray['gray-9']};
   text-align: center;
 `;
 
 const Summary = styled.p`
-  ${({ theme }) => theme.typography.body.medium};
-  color: ${({ theme }) => theme.palette.gray[700]};
+  ${({ theme }) => theme.typography.body['body-long1']};
+  color: ${({ theme }) => theme.palette.gray['gray-7']};
   text-align: center;
 `;
 
@@ -69,17 +69,17 @@ const Button = styled.button<{ isSelected?: boolean }>`
   width: 100%;
   padding: 12px;
   border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.palette.gray[300]};
+  border: 1px solid ${({ theme }) => theme.palette.gray['gray-3']};
   background-color: ${({ theme, isSelected }) =>
-    isSelected ? theme.palette.primary : theme.palette.white};
+    isSelected ? theme.palette.main.blue[50] : theme.palette.common.white};
   color: ${({ theme, isSelected }) =>
-    isSelected ? theme.palette.white : theme.palette.gray[900]};
+    isSelected ? theme.palette.common.white : theme.palette.common.black};
   cursor: pointer;
   transition: all 0.2s ease-in-out;
 
   &:hover {
     background-color: ${({ theme, isSelected }) =>
-      isSelected ? theme.palette.primaryDark : theme.palette.gray[100]};
+      isSelected ? theme.palette.main.blue[40] : theme.palette.gray['gray-1']};
   }
 `;
 
diff --git a/apps/web/src/pages/MemeQuizPage/components/QuizStep/QuizStep.styles.ts b/apps/web/src/pages/MemeQuizPage/components/QuizStep/QuizStep.styles.ts
@@ -19,17 +19,17 @@ const NavigationContainer = styled.div`
 const BackButton = styled.button`
   padding: 8px 16px;
   border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.palette.gray[300]};
-  background-color: ${({ theme }) => theme.palette.white};
-  color: ${({ theme }) => theme.palette.gray[900]};
+  border: 1px solid ${({ theme }) => theme.palette.gray['gray-3']};
+  background-color: ${({ theme }) => theme.palette.common.white};
+  color: ${({ theme }) => theme.palette.common.black};
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   display: flex;
   align-items: center;
   gap: 4px;
 
   &:hover {
-    background-color: ${({ theme }) => theme.palette.gray[100]};
+    background-color: ${({ theme }) => theme.palette.gray['gray-1']};
   }
 
   &:disabled {
@@ -46,14 +46,14 @@ const QuizImage = styled.img`
 `;
 
 const Title = styled.h1`
-  ${({ theme }) => theme.typography.heading.h3};
-  color: ${({ theme }) => theme.palette.gray[900]};
+  ${({ theme }) => theme.typography.title['subhead-long1']};
+  color: ${({ theme }) => theme.palette.gray['gray-9']};
   text-align: center;
 `;
 
 const Summary = styled.p`
-  ${({ theme }) => theme.typography.body.medium};
-  color: ${({ theme }) => theme.palette.gray[700]};
+  ${({ theme }) => theme.typography.body['body-long1']};
+  color: ${({ theme }) => theme.palette.gray['gray-7']};
   text-align: center;
 `;
 
@@ -69,17 +69,17 @@ const Button = styled.button<{ isSelected?: boolean }>`
   width: 100%;
   padding: 12px;
   border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.palette.gray[300]};
+  border: 1px solid ${({ theme }) => theme.palette.gray['gray-3']};
   background-color: ${({ theme, isSelected }) =>
-    isSelected ? theme.palette.primary : theme.palette.white};
+    isSelected ? theme.palette.main.blue[50] : theme.palette.common.white};
   color: ${({ theme, isSelected }) =>
-    isSelected ? theme.palette.white : theme.palette.gray[900]};
+    isSelected ? theme.palette.common.white : theme.palette.common.black};
   cursor: pointer;
   transition: all 0.2s ease-in-out;
 
   &:hover {
     background-color: ${({ theme, isSelected }) =>
-      isSelected ? theme.palette.primaryDark : theme.palette.gray[100]};
+      isSelected ? theme.palette.main.blue[40] : theme.palette.gray['gray-1']};
   }
 `;
 
diff --git a/packages/ui/src/components/Button/Button.styles.ts b/packages/ui/src/components/Button/Button.styles.ts
