🛠️ fonts 클래스 중복 처리 문제 개선 (#31)

- SCSS 전역 사용
- line-height 값 px로 변경
- 폰트 및 리셋 scss app 폴더로 이동
- font와 reset 언더바 추가
- prettierignore 수정

Closes #18

.prettierignore

@@ -1 +1 @@
-*/**/fonts.scss
+*/**/_fonts.scss

src/app/App.tsx

@@ -4,7 +4,7 @@ import { RouterProvider } from 'react-router-dom';
 
 import { queryClient } from './providers/query-client';
 import { router } from './routers/index';
-import '@/shared/styles/reset.scss';
+import './styles/global.scss';
 
 function App() {
   return (

src/shared/styles/fonts.scss → src/app/styles/_fonts.scss

@@ -17,7 +17,7 @@
   @media (min-height: 1px) and (max-height: 480px) { font-size: $size * 0.95rem; } // iPhone 3, 4S
   @media (min-height: 481px) and (max-height: 568px) { font-size: $size * 1rem; } // iPhone 5, SE 1
   @media (min-height: 569px) and (max-height: 667px) { font-size: $size * 1.17rem; } // iPhone 6, 6s, 7, 8, SE 2/3
-  @media (min-height: 668px) and (max-height: 736px) { font-size: $size * 1.22rem; } // iPhone 6+, 6s+, 7+, 8+ 
+  @media (min-height: 668px) and (max-height: 736px) { font-size: $size * 1.22rem; } // iPhone 6+, 6s+, 7+, 8+
   @media (min-height: 737px) and (max-height: 812px) { font-size: $size * 1.25rem; } // iPhone X, XS, 11, 12 mini, 13 mini
   @media (min-height: 813px) and (max-height: 844px) { font-size: $size * 1.27rem; } // iPhone 12, 12 Pro, 13, 13 Pro, 14, 15
   @media (min-height: 845px) and (max-height: 852px) { font-size: $size * 1.27rem; } // iPhone 14 Pro, 15 Pro
@@ -27,31 +27,32 @@
 }
 
 /* 24px */
-.h1bold { @include font-style(700, 1.5, 130%); }
-.h1semi { @include font-style(600, 1.5, 130%); }
+.h1bold { @include font-style(700, 1.5, 31px); }
+.h1semi { @include font-style(600, 1.5, 31px); }
 
 /* 20px */
-.h2semi { @include font-style(600, 1.25, 130%); }
+.h2semi { @include font-style(600, 1.25, 26px); }
 
 /* 16px */
-.h3semi { @include font-style(600, 1, 140%); }
+.h3bold { @include font-style(700, 1, 22px); }
+.h3semi { @include font-style(600, 1, 22px); }
 
 /* 14px */
-.h4semi { @include font-style(600, 0.875, 130%); }
-.h4md { @include font-style(500, 0.875, 130%); }
+.h4semi { @include font-style(600, 0.875, 18px); }
+.h4md { @include font-style(500, 0.875, 18px); }
 
 /* 12px */
-.b1semi { @include font-style(600, 0.75, 130%); }
-.b1md { @include font-style(500, 0.75, 130%) }
-.b1reg { @include font-style(400, 0.75, 140%); }
+.b1semi { @include font-style(600, 0.75, 16px); }
+.b1md { @include font-style(500, 0.75, 16px); }
+.b1reg { @include font-style(400, 0.75, 17px); }
 
 /* 11px */
-.b2md { @include font-style(500, 0.6875, 130%); }
-.b2semi { @include font-style(600, 0.6875, 130%); }
-.b2reg { @include font-style(400, 0.6875, 130%); }
+.b2md { @include font-style(500, 0.6875, 14px); }
+.b2semi { @include font-style(600, 0.6875, 14px); }
+.b2reg { @include font-style(400, 0.6875, 14px); }
 
 /* 9px */
-.b3md { @include font-style(500, 0.5625, 130%); }
+.b3md { @include font-style(500, 0.5625, 12px); }
 
 /* 8px */
-.b4md { @include font-style(500, 0.5, 130%); }
+.b4md { @include font-style(500, 0.5, 10px); }

src/app/styles/global.scss

@@ -0,0 +1,2 @@
+@import 'fonts';
+@import 'reset';

src/shared/styles/_colors.scss

@@ -0,0 +1,10 @@
+$gray1: #f7f8f9;
+$gray2: #f0f2f4;
+$gray3: #dde0e5;
+$gray4: #b3b9c4;
+$gray5: #8691a2;
+$gray6: #383e4a;
+$gray7: #161a1d;
+$mint1: #d9f9fb;
+$mint2: #9deff6;
+$mint3: #00d5e1;

src/shared/ui/button/ActiveButton.scss

@@ -1,8 +1,5 @@
-@use '@/shared/styles/_index.scss' as *;
-
 @mixin confirmButton($isDisabled: false) {
   @include responsive-box(108px, 40px);
-  @extend .h4semi;
   border-radius: 4px;
 
   @if $isDisabled {
@@ -26,10 +23,8 @@
 
   @if $isLg {
     @include responsive-box(280px, 30px);
-    @extend .b1semi;
   } @else {
     @include responsive-box(48px, 24px);
-    @extend .b2semi;
   }
   @if $isDisabled {
     color: $gray4;

src/shared/ui/button/BasicButton.scss

@@ -1,19 +1,15 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .defalut {
 }
 
 .confirm-cancle {
   @include responsive-box(108px, 40px);
-  @extend .h4semi;
   border-radius: 4px;
   color: $gray4;
   background-color: $gray2;
 }
 
 .bsm-option {
   @include responsive-box(280px, 40px);
-  @extend .h4md;
   background-color: $gray1;
   color: $gray5;
   text-align: center;
@@ -22,7 +18,6 @@
 
 .bsm-cancle {
   @include responsive-box(280px, 47px);
-  @extend .h4semi;
   text-align: center;
   background-color: $gray5;
   color: white;

src/shared/ui/header/PageHeader.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .page-header {
   @include responsive-box(320px, 44px);
   display: flex;

src/shared/ui/modal/BottomSheetModal.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .bottom-sheet-modal {
   display: flex;
   flex-direction: column;

src/shared/ui/modal/ConfirmModal.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 @mixin confirmModal($isReport: false) {
   display: flex;
   flex-direction: column;

src/shared/ui/network-error/NetworkError.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .network-error-wrapper {
   z-index: 999;
 

src/shared/ui/network-toast-error/NetworkToastError.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 @keyframes bounceInUp {
   from,
   60%,

src/shared/ui/profile/Profile.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .profile {
   display: flex;
   align-items: center;

src/shared/ui/profile/SkeletonProfile.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .skeleton-profile {
   display: flex;
   align-items: center;

src/widgets/feed-main-header/ui/FeedMainHeader.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 #feed-main-header {
   padding: 0 3px 0 20px;
 

src/widgets/feed-main-list/ui/Feed.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .feed-wrapper {
   .feed-article {
     padding: 0 3px 0 20px;

src/widgets/feed-main-list/ui/FeedMainList.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .feed-list-section {
   .feed-list {
     padding: 16px 0 24px;

src/widgets/feed-main-list/ui/SkeletonFeed.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .skeleton-feed-wrapper {
   .skeleton-feed-article {
     padding: 0 13px 0 20px;

src/widgets/feed-main-list/ui/SkeletonFeedMainList.scss

@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .skeleton-feed-section {
   @include responsive-box(320px, 508px);
   margin: 16px 0 24px;

vite.config.ts

@@ -18,4 +18,16 @@ export default defineConfig({
       { find: '@public', replacement: path.resolve(__dirname, 'public') },
     ],
   },
+  // SCSS 전역 사용
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          @import "@/shared/styles/_box.scss";
+          @import "@/shared/styles/_colors.scss";
+          @import "@/shared/styles/_skeleton.scss";
+        `,
+      },
+    },
+  },
 });