Merge pull request #11 from TEAM-Hearus/develop

Fix: 디자인 시스템 수정 반영 배포
TEAM-Hearus · Jul 4, 2024 · b6836d4 · b6836d4
2 parents 116dfda + 5d845f4
commit b6836d4
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 32 deletions.
diff --git a/src/components/common/buttons/TabLink/TabLink.module.scss b/src/components/common/buttons/TabLink/TabLink.module.scss
@@ -5,11 +5,11 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  @include SemiBold;
-  font-size: 18px;
+  @include Medium-Body-16;
   color: $light-gray_81;
   text-decoration: none;
   &.active {
+    @include SemiBold-Body-16;
     color: $dark-orange_E5;
   }
 }
diff --git a/src/components/headers/MainHeader/MainHeader.module.scss b/src/components/headers/MainHeader/MainHeader.module.scss
@@ -28,6 +28,6 @@
     background-color: white;
     border: none;
     cursor: pointer;
-    @include Regular;
+    @include Medium-Sub-14;
   }
 }
diff --git a/src/components/modals/SignupModal/SignupModal.module.scss b/src/components/modals/SignupModal/SignupModal.module.scss
@@ -18,7 +18,7 @@
 .modalContainer {
   display: flex;
   flex-direction: column;
-  width: 440px;
+  width: 500px;
   padding: 20px;
   background-color: white;
   border: none;
@@ -43,8 +43,7 @@
   align-items: center;
   gap: 6px;
   padding: 20px 0 35px 0;
-  @include Medium;
-  font-size: 24px;
+  @include Medium-Title-24;
 }
 .loginBtnsContainer {
   display: flex;
@@ -59,8 +58,7 @@
   padding: 20px;
   border: none;
   border-radius: 12px;
-  @include Medium;
-  font-size: 16px;
+  @include Medium-Body-16;
   img {
     position: absolute;
     left: 20px;
@@ -97,9 +95,8 @@
   margin-top: 50px;
   margin-bottom: 20px;
   p {
-    @include Medium;
+    @include Medium-Sub-14;
     color: $light-bg_89;
-    font-size: 14px;
   }
   .signupLink {
     display: flex;
@@ -109,7 +106,6 @@
     background: none;
     border: none;
     color: $brand-point;
-    @include SemiBold;
-    font-size: 14px;
+    @include SemiBold-Sub-14;
   }
 }
diff --git a/src/components/navigators/MainNav/MainNav.module.scss b/src/components/navigators/MainNav/MainNav.module.scss
@@ -5,25 +5,27 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
-  width: 250px;
+  width: 240px;
   padding: 20px;
   padding-top: 20px;
 }
 .searchBar {
   display: flex;
-  height: 36px;
-  padding: 10px;
+  height: 40px;
+  padding: 20px;
   padding-left: 35px;
-  background-color: $light-bg_F9;
-  border: none;
-  border-radius: 6px;
-  @include Regular;
-  color: $light-gray_81;
+  border: solid 3px $light-bg_E5;
+  border-radius: 10px;
+  @include Medium-Sub-14;
+  &::placeholder {
+    color: $light-gray_81;
+  }
 }
 .searchIcon {
   position: relative;
-  bottom: -46px;
+  top: 50px;
   left: 15px;
+  width: min-content;
 }
 .linksContainer {
   display: flex;

diff --git a/src/components/navigators/MainNav/MainNav.tsx b/src/components/navigators/MainNav/MainNav.tsx
@@ -16,7 +16,7 @@ const MainNav = () => {
       <span className={styles.searchIcon}>
         <Search />
       </span>
-      <input className={styles.searchBar} placeholder="파일 검색" />
+      <input className={styles.searchBar} type="text" placeholder="파일 검색" />
       <section className={styles.linksContainer}>
         <TabLink
           to="/home"

diff --git a/src/pages/Landing/Landing.module.scss b/src/pages/Landing/Landing.module.scss
@@ -16,8 +16,7 @@
   padding: 20px 30px;
   background-color: #6d6d6d;
   color: white;
-  @include SemiBold;
-  font-size: 18px;
+  @include SemiBold-Body-16;
   border: none;
   border-radius: 12px;
   cursor: pointer;

diff --git a/src/styles/variables/fonts.scss b/src/styles/variables/fonts.scss
@@ -1,19 +1,66 @@
-@mixin Regular {
+@mixin Semibold-Title-32 {
+  font-family: 'Pretendard-SemiBold';
+  font-size: 32pt;
+  letter-spacing: -0.025em;
+}
+
+@mixin Medium-Title-24 {
+  // 임의로 추가
   font-family: 'Pretendard-Medium';
-  font-size: 14px;
+  font-size: 24pt;
+  letter-spacing: -0.025em;
+}
+
+@mixin SemiBold-Body-18 {
+  font-family: 'Pretendard-SemiBold';
+  font-size: 18pt;
+  letter-spacing: -0.025em;
 }
 
-@mixin Medium {
+@mixin Medium-Body-18 {
+  font-family: 'Pretendard-Medium';
+  font-size: 18pt;
+  letter-spacing: -0.025em;
+}
+
+@mixin Regular-Body-18 {
   font-family: 'Pretendard-Regular';
-  font-size: 18px;
+  font-size: 18pt;
+  letter-spacing: -0.025em;
 }
 
-@mixin SemiBold {
+@mixin SemiBold-Body-16 {
   font-family: 'Pretendard-SemiBold';
-  font-size: 24px;
+  font-size: 16pt;
+  letter-spacing: -0.025em;
 }
 
-@mixin Title {
+@mixin Medium-Body-16 {
+  font-family: 'Pretendard-Medium';
+  font-size: 16pt;
+  letter-spacing: -0.025em;
+}
+
+@mixin Regular-Body-16 {
+  font-family: 'Pretendard-Regular';
+  font-size: 16pt;
+  letter-spacing: -0.025em;
+}
+
+@mixin SemiBold-Sub-14 {
   font-family: 'Pretendard-SemiBold';
-  font-size: 32px;
+  font-size: 14pt;
+  letter-spacing: -0.025em;
+}
+
+@mixin Medium-Sub-14 {
+  font-family: 'Pretendard-Medium';
+  font-size: 14pt;
+  letter-spacing: -0.025em;
+}
+
+@mixin Regular-Sub-14 {
+  font-family: 'Pretendard-Regular';
+  font-size: 14pt;
+  letter-spacing: -0.025em;
 }