Merge pull request #98 from woowacourse-teams/style/#97

미적용된 스타일 적용
woowacourse-teams · Jul 25, 2024 · f2a8280 · f2a8280
2 parents 9acb78a + 32379fc
commit f2a8280
Show file tree

Hide file tree

Showing 20 changed files with 141 additions and 112 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,7 +11,7 @@
     "build": "webpack --config webpack.prod.js",
     "sb": "storybook dev -p 6006",
     "build-sb": "storybook build",
-    "sl": "stylelint '**/*.styles.ts' --fix"
+    "sl": "stylelint **/*.style.ts --fix"
   },
   "repository": {
     "type": "git",
@@ -82,4 +82,4 @@
       "public"
     ]
   }
-}
+}
diff --git a/frontend/src/common/common.style.ts b/frontend/src/common/common.style.ts
@@ -3,43 +3,38 @@ import { css } from '@emotion/react';
 export const common = {
   fontType: {
     title: css`
-      color: var(--00-on-surface-high-emphasis, rgba(0, 0, 0, 0.87));
+      /* title */
+      font-size: 3rem;
       font-feature-settings:
         'clig' off,
         'liga' off;
-
-      /* title */
-      font-family: Roboto;
-      font-size: 2.125rem;
-      font-style: normal;
       font-weight: 600;
-      line-height: 2.25rem; /* 105.882% */
+      font-style: normal;
+      line-height: 3.6rem; /* 105.882% */
+      color: var(--on-surface-high-emphasis, rgb(0 0 0 / 87%));
     `,
     subtitle: css`
-      color: var(--00-on-surface-high-emphasis, rgba(0, 0, 0, 0.87));
+      /* subtitle */
+      font-size: 2rem;
       font-feature-settings:
         'clig' off,
         'liga' off;
-
-      /* subtitle */
-      font-family: Roboto;
-      font-size: 1.25rem;
-      font-style: normal;
       font-weight: 600;
-      line-height: 1.5rem; /* 120% */
-      letter-spacing: 0.00938rem;
+      font-style: normal;
+      line-height: 2.4rem; /* 120% */
+      color: var(--on-surface-high-emphasis, rgb(0 0 0 / 87%));
+      letter-spacing: 0.015rem;
     `,
     placeholder: css`
-      color: var(--placeholder, #8b8b8b);
+      font-size: 1.5rem;
       font-feature-settings:
         'clig' off,
         'liga' off;
-      font-family: Roboto;
-      font-size: 0.9375rem;
-      font-style: normal;
       font-weight: 400;
-      line-height: 1.5rem; /* 160% */
-      letter-spacing: 0.03125rem;
+      font-style: normal;
+      line-height: 2.4rem; /* 160% */
+      color: var(--placeholder, #8b8b8b);
+      letter-spacing: 0.05rem;
     `,
   },
 };
diff --git a/frontend/src/common/reset.style.ts b/frontend/src/common/reset.style.ts
@@ -82,14 +82,17 @@ const reset = css`
   mark,
   audio,
   video {
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
-    border: 0;
-    font-size: 62.5%;
+
     font: inherit;
+    font-size: 62.5%;
     vertical-align: baseline;
-    box-sizing: border-box;
+
+    border: 0;
   }
+
   /* HTML5 display-role reset for older browsers */
   article,
   aside,
@@ -104,27 +107,32 @@ const reset = css`
   section {
     display: block;
   }
+
   body {
     line-height: 1;
   }
+
   ol,
   ul {
     list-style: none;
   }
+
   blockquote,
   q {
     quotes: none;
   }
-  blockquote:before,
-  blockquote:after,
-  q:before,
-  q:after {
+
+  blockquote::before,
+  blockquote::after,
+  q::before,
+  q::after {
     content: '';
     content: none;
   }
+
   table {
-    border-collapse: collapse;
     border-spacing: 0;
+    border-collapse: collapse;
   }
 `;
 export default reset;
diff --git a/frontend/src/components/Button/Button.style.ts b/frontend/src/components/Button/Button.style.ts
@@ -1,23 +1,24 @@
 import { css } from '@emotion/react';
 
 const font = css`
-  color: #fff;
-  font-family: Pretendard;
-  font-size: 1rem;
-  font-style: normal;
+  font-size: 1.6rem;
   font-weight: 700;
+  font-style: normal;
   line-height: normal;
-  letter-spacing: -0.02rem;
+  color: #fff;
+  letter-spacing: -0.032rem;
 `;
 export const shapes = (shape: 'circle' | 'bar', disabled: boolean) => {
   if (shape === 'circle') {
     return css`
       ${font};
       flex-shrink: 0;
+
+      background: ${disabled ? '#868e96' : '#ffffff'};
       border: none;
-      box-shadow: 0px 0px 3px #444;
       border-radius: 50%;
-      background: ${disabled ? '#868e96' : '#ffffff'};
+      box-shadow: 0 0 3px #444;
+
       &:active {
         background-color: #868e96;
       }
@@ -26,17 +27,20 @@ export const shapes = (shape: 'circle' | 'bar', disabled: boolean) => {
   if (shape === 'bar') {
     return css`
       ${font}
-      border: none;
       display: flex;
-      width: 100%;
-      height: 4rem;
-      padding: 1rem 3.6875rem;
-      justify-content: center;
-      align-items: center;
-      gap: 0.625rem;
       flex-shrink: 0;
-      border-radius: 1.875rem;
+      gap: 1rem;
+      align-items: center;
+      justify-content: center;
+
+      width: 100%;
+      height: 6.4rem;
+      padding: 1.6rem 5.9rem;
+
       background: ${disabled ? '#868e96' : '#477bff'};
+      border: none;
+      border-radius: 3rem;
+
       &:active {
         background-color: ${disabled ? '#868e96' : '#005bb5'};
       }

diff --git a/frontend/src/components/Card/MoimCard.style.ts b/frontend/src/components/Card/MoimCard.style.ts
@@ -3,44 +3,49 @@ import { css } from '@emotion/react';
 
 export const cardBox = css`
   display: flex;
-  align-items: flex-start;
-  gap: 0.2rem;
   flex-direction: column;
-  width: 100%;
-  padding: 2rem 1rem;
   flex-shrink: 0;
-  border-radius: 1.5625rem;
+  gap: 0.32rem;
+  align-items: flex-start;
+
+  width: 100%;
+  padding: 3.2rem 1.6rem;
+
   background: #ededed;
+  border-radius: 2.5rem;
 `;
 
 export const cardTitle = css`
   ${common.fontType.title}
-  font-size: 1.5rem;
+  font-size: 2.4rem;
 `;
 
 export const subjectTag = css`
   display: inline-flex;
-  padding: 0.1rem 0.3rem;
-  justify-content: center;
+  gap: 1rem;
   align-items: center;
-  gap: 0.625rem;
-  border-radius: 0.625rem;
-  background: #dde7ff;
-  color: var(--Main-Blue, #477bff);
-  font-family: Pretendard;
-  font-size: 0.75rem;
-  font-style: normal;
+  justify-content: center;
+
+  padding: 0.16rem 0.048rem;
+
+  font-size: 1.2rem;
   font-weight: 600;
+  font-style: normal;
   line-height: 130%;
+  color: var(--main-blue, #477bff);
+
+  background: #dde7ff;
+  border-radius: 1rem;
 `;
 
 export const subjectBox = css`
   display: flex;
-  gap: 0.2rem;
+  gap: 0.32rem;
 `;
 
 export const subjectInfo = css`
-  line-height: 130%;
   display: inline-block;
+  font-size: 1.6rem;
+  line-height: 130%;
   vertical-align: middle;
 `;
diff --git a/frontend/src/components/Input/MoimInput.style.ts b/frontend/src/components/Input/MoimInput.style.ts
@@ -7,16 +7,18 @@ export const required = css`
 
 export const title = css`
   ${common.fontType.subtitle};
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
 `;
 
 export const input = css`
-  width: 100%;
-  font-size: 1rem;
-  height: 2.5rem;
   flex-shrink: 0;
-  border-radius: 0.5rem;
-  border: 1px solid #b3b3b3;
+
+  width: 100%;
+  height: 4rem;
+
+  font-size: 1.6rem;
 
   background: #fff;
+  border: 1px solid #b3b3b3;
+  border-radius: 0.8rem;
 `;
diff --git a/frontend/src/components/MoimCardList/MoimCardList.style.ts b/frontend/src/components/MoimCardList/MoimCardList.style.ts
@@ -3,5 +3,5 @@ import { css } from '@emotion/react';
 export const cardListSection = css`
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.8rem;
 `;
diff --git a/frontend/src/components/MoimDescription/MoimDescription.style.ts b/frontend/src/components/MoimDescription/MoimDescription.style.ts
@@ -1,22 +1,24 @@
 import { css } from '@emotion/react';
 
 export const containerStyle = css`
-  border-radius: 14px;
-  background: rgba(71, 123, 255, 1);
-  padding: 20px 24px;
   display: flex;
   flex-direction: column;
   gap: 8px;
+
+  padding: 20px 24px;
+
+  background: rgb(71 123 255 / 100%);
+  border-radius: 14px;
 `;
 
 export const titleStyle = css`
-  font-weight: 700;
   font-size: 16px;
-  color: rgba(255, 255, 255, 1);
+  font-weight: 700;
+  color: rgb(255 255 255 / 100%);
 `;
 
 export const descriptionStyle = css`
   font-size: 14px;
   font-weight: 600;
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 100%);
 `;
diff --git a/frontend/src/components/MoimInformation/MoimInformation.style.ts b/frontend/src/components/MoimInformation/MoimInformation.style.ts
@@ -1,3 +1,4 @@
+import { common } from '@_common/common.style';
 import { css } from '@emotion/react';
 
 export const containerStyle = css`
@@ -7,31 +8,34 @@ export const containerStyle = css`
 `;
 
 export const titleStyle = css`
-  font-size: 16px;
-  font-weight: 700;
+  ${common.fontType.subtitle}
 `;
 
 export const cardStyle = css`
-  background-color: #f0f4ff;
-  border-radius: 18px;
   padding: 16px 24px;
   color: #333;
+  background-color: #f0f4ff;
+  border-radius: 18px;
 `;
 
 export const rowStyle = css`
   display: flex;
   justify-content: space-between;
+
   padding: 10px 0;
-  border-top: 1px solid #e0e0e0;
+
+  font-size: 2.5rem;
   color: #666;
 
+  border-top: 1px solid #e0e0e0;
+
   &:first-of-type {
-    border-top: none;
     padding-top: 0;
+    border-top: none;
   }
 
   &:last-of-type {
-    border-bottom: none;
     padding-bottom: 0;
+    border-bottom: none;
   }
 `;