[FE] issue319: 테마 리팩토링 (#321)

* feat: theme 수정 screens, fontSize, fontWeight, radius 추가 * refactor: fontSize, fontWeight theme 사용 * refactor: radius theme 적용 * fix: theme 오류 수정 * fix: theme 오류 수정 * refactor: lint 적용
woowacourse-teams · Sep 12, 2022 · 61af388 · 61af388
1 parent 0207c3a
commit 61af388
Show file tree

Hide file tree

Showing 75 changed files with 493 additions and 471 deletions.
diff --git a/frontend/src/components/arrow-button/ArrowButton.style.tsx b/frontend/src/components/arrow-button/ArrowButton.style.tsx
@@ -13,7 +13,7 @@ export const Button = styled.button`
     text-align: center;
     background-color: ${theme.colors.secondary.light};
     border: 1px solid ${theme.colors.secondary.base};
-    border-radius: 50%;
+    border-radius: ${theme.radius.circle};
 
     transition: transform 0.2s ease;
 

diff --git a/frontend/src/components/avatar/Avatar.style.tsx b/frontend/src/components/avatar/Avatar.style.tsx
@@ -37,7 +37,7 @@ export const Avatar = styled.div`
     width: 36px;
     min-width: 36px;
     height: 36px;
-    border-radius: 50%;
+    border-radius: ${theme.radius.circle};
     box-shadow: 0 1px 5px 0 ${theme.colors.secondary.dark};
     overflow: hidden;
     transition: opacity 0.2s ease;

diff --git a/frontend/src/components/button/Button.style.ts b/frontend/src/components/button/Button.style.ts
@@ -23,11 +23,11 @@ export const Button = styled.button<ButtonProps>`
     min-height: 30px;
 
     text-align: center;
-    font-size: 20px;
+    font-size: ${theme.fontSize.lg};
     color: ${theme.colors.white};
 
     border: none;
-    border-radius: 10px;
+    border-radius: ${theme.radius.sm};
     background-color: ${theme.colors.primary.base};
 
     white-space: nowrap;

diff --git a/frontend/src/components/card/Card.style.tsx b/frontend/src/components/card/Card.style.tsx
@@ -10,7 +10,7 @@ export const Card = styled.div`
     overflow: hidden;
 
     border: 3px solid ${theme.colors.primary.base};
-    border-radius: 25px;
+    border-radius: ${theme.radius.xl};
     box-shadow: 8px 8px 0 0 ${theme.colors.secondary.dark};
 
     :hover {
@@ -41,20 +41,26 @@ const onelineEllipsis = css`
 `;
 
 export const Title = styled.h4`
-  margin-bottom: 20px;
+  ${({ theme }) => css`
+    margin-bottom: 20px;
+
+    font-size: ${theme.fontSize.xl};
+    font-weight: ${theme.fontWeight.bold};
+    line-height: 24px;
+  `}
 
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 24px;
   ${onelineEllipsis};
 `;
 
 export const Excerpt = styled.p`
-  width: 100%;
-  margin-bottom: 20px;
+  ${({ theme }) => css`
+    width: 100%;
+    margin-bottom: 20px;
+
+    font-size: ${theme.fontSize.lg};
+    line-height: 20px;
+  `}
 
-  font-size: 20px;
-  line-height: 20px;
   ${onelineEllipsis};
 `;
 

diff --git a/frontend/src/components/chip/Chip.style.tsx b/frontend/src/components/chip/Chip.style.tsx
@@ -11,7 +11,7 @@ export const Chip = styled.span<ChipProps>`
     padding: 8px 12.8px;
 
     text-align: center;
-    border-radius: 16px;
+    border-radius: ${theme.radius.md};
     color: ${disabled ? theme.colors.black : theme.colors.white};
     background-color: ${disabled ? theme.colors.secondary.base : theme.colors.primary.base};
   `}

diff --git a/frontend/src/components/drop-down-box/DropDownBox.style.tsx b/frontend/src/components/drop-down-box/DropDownBox.style.tsx
@@ -14,7 +14,7 @@ export const DropDownBox = styled.div<Pick<DropDownBoxProps, 'top' | 'bottom' |
     white-space: nowrap;
 
     border: 1px solid ${theme.colors.secondary.dark};
-    border-radius: 5px;
+    border-radius: ${theme.radius.xs};
     background-color: ${theme.colors.secondary.light};
 
     transform-origin: top;

diff --git a/frontend/src/components/input/Input.style.tsx b/frontend/src/components/input/Input.style.tsx
@@ -11,7 +11,7 @@ type InputProps = {
 
 export const Input = styled.input<InputProps>`
   ${({ theme, isValid }) => css`
-    border-radius: 5px;
+    border-radius: ${theme.radius.xs};
     border: 1px solid ${theme.colors.secondary.base};
     background-color: ${theme.colors.white};
     padding: 4px 8px;

diff --git a/frontend/src/components/kebab-menu/KebabMenu.style.tsx b/frontend/src/components/kebab-menu/KebabMenu.style.tsx
@@ -19,7 +19,7 @@ export const KebabMenu = styled.ul`
     li {
       width: 4px;
       height: 4px;
-      border-radius: 50%;
+      border-radius: ${theme.radius.circle};
       background-color: ${theme.colors.secondary.dark};
     }
   `}

diff --git a/frontend/src/components/letter-counter/LetterCounter.style.tsx b/frontend/src/components/letter-counter/LetterCounter.style.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 export const LetterCounter = styled.div`
   ${({ theme }) => css`
-    font-size: 12px;
+    font-size: ${theme.fontSize.sm};
     color: ${theme.colors.secondary.dark};
     & > span {
       color: ${theme.colors.secondary.dark};

diff --git a/frontend/src/components/tag-chip/TagChip.style.tsx b/frontend/src/components/tag-chip/TagChip.style.tsx
@@ -8,12 +8,12 @@ export const TagChip = styled.div`
     min-width: 92px;
     padding: 6px 8px;
 
-    font-size: 16px;
+    font-size: ${theme.fontSize.md};
     line-height: 18px;
     text-align: center;
     color: ${theme.colors.primary.base};
 
-    border-radius: 25px;
+    border-radius: ${theme.radius.xl};
     border: 2px solid ${theme.colors.primary.base};
     background-color: ${theme.colors.white};
   `}

diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
@@ -42,15 +42,6 @@ export const DEFAULT_LINK_QUERY_PARAM = {
 export const DEFAULT_VISIBLE_STUDY_MEMBER_CARD_COUNT = 6;
 export const DEFAULT_LOAD_STUDY_REVIEW_COUNT = 6;
 
-export const BREAK_POINTS = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1280,
-  xxl: 1400,
-};
-
 export const EXCERPT_LENGTH = {
   MIN: {
     VALUE: 1,

diff --git a/frontend/src/layout/header/components/logo/Logo.style.tsx b/frontend/src/layout/header/components/logo/Logo.style.tsx
@@ -27,8 +27,8 @@ export const ImageContainer = styled.div`
 export const BorderText = styled.h1`
   ${({ theme }) => css`
     color: ${theme.colors.primary.base};
-    font-size: 40px;
-    font-weight: 800;
+    font-size: ${theme.fontSize.xxxl};
+    font-weight: ${theme.fontWeight.bolder};
     -webkit-text-stroke: 1px ${theme.colors.primary.dark};
 
     ${mqDown('lg')} {

diff --git a/frontend/src/layout/header/components/search-bar/SearchBar.style.tsx b/frontend/src/layout/header/components/search-bar/SearchBar.style.tsx
@@ -13,8 +13,8 @@ export const Input = styled.input`
     padding: 8px 40px;
     overflow: hidden;
 
-    font-size: 20px;
-    border-radius: 20px;
+    font-size: ${theme.fontSize.lg};
+    border-radius: ${theme.radius.lg};
     border: 3px solid ${theme.colors.primary.base};
 
     text-align: center;
@@ -29,10 +29,10 @@ export const Input = styled.input`
     }
 
     ${mqDown('md')} {
-      font-size: 18px;
+      font-size: ${theme.fontSize.lg};
     }
     ${mqDown('sm')} {
-      font-size: 16px;
+      font-size: ${theme.fontSize.md};
     }
   `}
 `;
@@ -48,7 +48,7 @@ export const Button = styled.button`
     bottom: 0;
 
     padding-right: 20px;
-    font-size: 20px;
+    font-size: ${theme.fontSize.lg};
 
     background: transparent;
     border: none;

diff --git a/frontend/src/pages/create-study-page/CreateStudyPage.style.tsx b/frontend/src/pages/create-study-page/CreateStudyPage.style.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { mqDown } from '@utils';
@@ -12,10 +13,12 @@ export const CreateStudyPage = styled.div``;
 export const Form = styled.form``;
 
 export const PageTitle = styled.h1`
-  margin-bottom: 20px;
+  ${({ theme }) => css`
+    margin-bottom: 20px;
 
-  font-size: 32px;
-  font-weight: 700;
+    font-size: ${theme.fontSize.xxl};
+    font-weight: ${theme.fontWeight.bold};
+  `}
 `;
 
 export const DescriptionTab = styled(OriginalDesriptionTab)`

diff --git a/frontend/src/pages/create-study-page/components/description-tab/DescriptionTab.style.tsx b/frontend/src/pages/create-study-page/components/description-tab/DescriptionTab.style.tsx
@@ -5,7 +5,7 @@ import { Textarea as OriginalTextArea } from '@create-study-page/components/text
 
 export const DescriptionTab = styled.div`
   ${({ theme }) => css`
-    border-radius: 6px;
+    border-radius: ${theme.radius.xs};
     border: 1px solid ${theme.colors.secondary.dark};
     overflow: hidden;
 
@@ -45,7 +45,7 @@ export const TabItemButton = styled.button<TabItemButtonProps>`
   ${({ theme, isActive }) => css`
     border: none;
     line-height: 24px;
-    font-weight: 600;
+    font-weight: ${theme.fontWeight.bold};
     padding: 8px 16px;
     transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
     background-color: inherit;
@@ -74,10 +74,10 @@ export const Textarea = styled(OriginalTextArea)`
     height: 100%;
     padding: 12px;
 
-    border-radius: 6px;
+    border-radius: ${theme.radius.xs};
     background-color: ${theme.colors.secondary.light};
     border: 1px solid ${theme.colors.secondary.dark};
-    font-size: 16px;
+    font-size: ${theme.fontSize.md};
 
     &:focus {
       background-color: ${theme.colors.white};

diff --git a/frontend/src/pages/create-study-page/components/excerpt/Excerpt.style.tsx b/frontend/src/pages/create-study-page/components/excerpt/Excerpt.style.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { Textarea as OriginalTextarea } from '@create-study-page/components/textarea/Textarea.style';
@@ -27,8 +28,11 @@ export const LetterCounterContainer = styled.div`
 `;
 
 export const Textarea = styled(OriginalTextarea)`
-  display: block;
-  min-height: 50px;
-  width: 100%;
-  font-size: 16px;
+  ${({ theme }) => css`
+    display: block;
+    min-height: 50px;
+    width: 100%;
+
+    font-size: ${theme.fontSize.md};
+  `}
 `;
diff --git a/frontend/src/pages/create-study-page/components/meta-box/MetaBox.style.tsx b/frontend/src/pages/create-study-page/components/meta-box/MetaBox.style.tsx
@@ -7,13 +7,13 @@ export const MetaBox = styled.div`
     min-width: 255px;
     border: 1px solid ${theme.colors.secondary.dark};
     box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
-    border-radius: 6px;
+    border-radius: ${theme.radius.xs};
   `}
 `;
 
 export const Title = styled.h2`
   ${({ theme }) => css`
-    font-size: 16px;
+    font-size: ${theme.fontSize.md};
     padding: 8px 12px;
     margin: 0;
     line-height: 1.4;

diff --git a/frontend/src/pages/create-study-page/components/select/Select.style.tsx b/frontend/src/pages/create-study-page/components/select/Select.style.tsx
@@ -8,7 +8,7 @@ export const Select = styled(Input.withComponent('select'))`
     line-height: 2;
     border-color: ${theme.colors.secondary.base};
     box-shadow: none;
-    border-radius: 3px;
+    border-radius: ${theme.radius.xs};
     padding: 0 24px 0 8px;
     min-height: 30px;
     max-width: 25rem;

diff --git a/frontend/src/pages/create-study-page/components/title/Title.style.tsx b/frontend/src/pages/create-study-page/components/title/Title.style.tsx
@@ -29,10 +29,10 @@ export const Input = styled(OriginalInput)`
   ${({ theme }) => css`
     display: block;
     width: 100%;
-    font-size: 24px;
+    font-size: ${theme.fontSize.xl};
     line-height: 24px;
 
-    border-radius: 4px;
+    border-radius: ${theme.radius.xs};
     border: 1px solid ${theme.colors.secondary.dark};
     background-color: ${theme.colors.white};
     color: ${theme.colors.black};

diff --git a/frontend/src/pages/detail-page/DetailPage.style.tsx b/frontend/src/pages/detail-page/DetailPage.style.tsx
@@ -53,6 +53,6 @@ export const MarkDownContainer = styled.section`
     padding: 16px;
 
     background-color: ${theme.colors.white};
-    border-radius: 15px;
+    border-radius: ${theme.radius.md};
   `}
 `;
diff --git a/frontend/src/pages/detail-page/components/head/Head.style.tsx b/frontend/src/pages/detail-page/components/head/Head.style.tsx
@@ -19,8 +19,10 @@ export const Title = styled.div`
 `;
 
 export const StudyTitle = styled.h2`
-  font-size: 40px;
-  font-weight: 700;
+  ${({ theme }) => css`
+    font-size: ${theme.fontSize.xxxl};
+    font-weight: ${theme.fontWeight.bold};
+  `}
 `;
 
 export const ButtonsContainer = styled.div``;
@@ -30,12 +32,12 @@ export const Button = styled.button`
     margin-left: 8px;
     padding: 8px;
 
-    font-size: 20px;
-    font-weight: 600;
+    font-size: ${theme.fontSize.lg};
+    font-weight: ${theme.fontWeight.bold};
     color: ${theme.colors.secondary.dark};
     background-color: transparent;
     border: none;
-    border-radius: 5px;
+    border-radius: ${theme.radius.xs};
     transition: color 0.1s ease;
 
     &:hover,
@@ -46,17 +48,21 @@ export const Button = styled.button`
 `;
 
 export const ExtraInfoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  column-gap: 16px;
+  ${({ theme }) => css`
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
 
-  font-weight: 300;
+    font-weight: ${theme.fontWeight.light};
+  `}
 `;
 
 export const Excerpt = styled.p`
-  padding: 8px 0 16px;
+  ${({ theme }) => css`
+    padding: 8px 0 16px;
 
-  font-size: 28px;
+    font-size: ${theme.fontSize.xl};
+  `}
 `;
 
 export const TagContainer = styled.div`

diff --git a/frontend/src/pages/detail-page/components/more-button/MoreButton.style.tsx b/frontend/src/pages/detail-page/components/more-button/MoreButton.style.tsx
@@ -1,7 +1,10 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 export const MoreButton = styled.button`
-  background-color: transparent;
-  border: none;
-  font-size: 16px;
+  ${({ theme }) => css`
+    background-color: transparent;
+    border: none;
+    font-size: ${theme.fontSize.md};
+  `}
 `;