From 768f12d2ea9af303fd8aabbd3d3189ad2a5e438d Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Mon, 6 May 2024 00:49:59 +0900
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20SCSS=20=EC=A0=84=EC=97=AD=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/styles/_index.scss                       |  4 ----
 src/shared/ui/button/ActiveButton.scss              |  2 --
 src/shared/ui/button/BasicButton.scss               |  2 --
 src/shared/ui/header/PageHeader.scss                |  2 --
 src/shared/ui/modal/BottomSheetModal.scss           |  2 --
 src/shared/ui/modal/ConfirmModal.scss               |  2 --
 src/shared/ui/network-error/NetworkError.scss       |  2 --
 .../ui/network-toast-error/NetworkToastError.scss   |  2 --
 src/shared/ui/profile/Profile.scss                  |  2 --
 src/shared/ui/profile/SkeletonProfile.scss          |  2 --
 src/widgets/feed-main-header/ui/FeedMainHeader.scss |  2 --
 src/widgets/feed-main-list/ui/Feed.scss             |  2 --
 src/widgets/feed-main-list/ui/FeedMainList.scss     |  2 --
 src/widgets/feed-main-list/ui/SkeletonFeed.scss     |  2 --
 .../feed-main-list/ui/SkeletonFeedMainList.scss     |  2 --
 vite.config.ts                                      | 13 +++++++++++++
 16 files changed, 13 insertions(+), 32 deletions(-)
 delete mode 100644 src/shared/styles/_index.scss

diff --git a/src/shared/styles/_index.scss b/src/shared/styles/_index.scss
deleted file mode 100644
index 3e6ed85..0000000
--- a/src/shared/styles/_index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@forward 'colors.scss';
-@forward 'fonts.scss';
-@forward 'box.scss';
-@forward 'skeleton.scss';
diff --git a/src/shared/ui/button/ActiveButton.scss b/src/shared/ui/button/ActiveButton.scss
index d889eb0..faed84b 100644
--- a/src/shared/ui/button/ActiveButton.scss
+++ b/src/shared/ui/button/ActiveButton.scss
@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 @mixin confirmButton($isDisabled: false) {
   @include responsive-box(108px, 40px);
   @extend .h4semi;
diff --git a/src/shared/ui/button/BasicButton.scss b/src/shared/ui/button/BasicButton.scss
index 6608eb8..f619142 100644
--- a/src/shared/ui/button/BasicButton.scss
+++ b/src/shared/ui/button/BasicButton.scss
@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .defalut {
 }
 
diff --git a/src/shared/ui/header/PageHeader.scss b/src/shared/ui/header/PageHeader.scss
index 83eadc5..7805b38 100644
--- a/src/shared/ui/header/PageHeader.scss
+++ b/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;
diff --git a/src/shared/ui/modal/BottomSheetModal.scss b/src/shared/ui/modal/BottomSheetModal.scss
index a32a0bb..4c64f25 100644
--- a/src/shared/ui/modal/BottomSheetModal.scss
+++ b/src/shared/ui/modal/BottomSheetModal.scss
@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .bottom-sheet-modal {
   display: flex;
   flex-direction: column;
diff --git a/src/shared/ui/modal/ConfirmModal.scss b/src/shared/ui/modal/ConfirmModal.scss
index 7ba06e7..623ed53 100644
--- a/src/shared/ui/modal/ConfirmModal.scss
+++ b/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;
diff --git a/src/shared/ui/network-error/NetworkError.scss b/src/shared/ui/network-error/NetworkError.scss
index 1b9b267..a9c113e 100644
--- a/src/shared/ui/network-error/NetworkError.scss
+++ b/src/shared/ui/network-error/NetworkError.scss
@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .network-error-wrapper {
   z-index: 999;
 
diff --git a/src/shared/ui/network-toast-error/NetworkToastError.scss b/src/shared/ui/network-toast-error/NetworkToastError.scss
index fcb1a3a..2ef9459 100644
--- a/src/shared/ui/network-toast-error/NetworkToastError.scss
+++ b/src/shared/ui/network-toast-error/NetworkToastError.scss
@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 @keyframes bounceInUp {
   from,
   60%,
diff --git a/src/shared/ui/profile/Profile.scss b/src/shared/ui/profile/Profile.scss
index 57341ed..a060481 100644
--- a/src/shared/ui/profile/Profile.scss
+++ b/src/shared/ui/profile/Profile.scss
@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .profile {
   display: flex;
   align-items: center;
diff --git a/src/shared/ui/profile/SkeletonProfile.scss b/src/shared/ui/profile/SkeletonProfile.scss
index 656e8f0..c154608 100644
--- a/src/shared/ui/profile/SkeletonProfile.scss
+++ b/src/shared/ui/profile/SkeletonProfile.scss
@@ -1,5 +1,3 @@
-@use '@/shared/styles/_index.scss' as *;
-
 .skeleton-profile {
   display: flex;
   align-items: center;
diff --git a/src/widgets/feed-main-header/ui/FeedMainHeader.scss b/src/widgets/feed-main-header/ui/FeedMainHeader.scss
index d7bed98..d88f6b7 100644
--- a/src/widgets/feed-main-header/ui/FeedMainHeader.scss
+++ b/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;
 
diff --git a/src/widgets/feed-main-list/ui/Feed.scss b/src/widgets/feed-main-list/ui/Feed.scss
index 65bcded..d1ace46 100644
--- a/src/widgets/feed-main-list/ui/Feed.scss
+++ b/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;
diff --git a/src/widgets/feed-main-list/ui/FeedMainList.scss b/src/widgets/feed-main-list/ui/FeedMainList.scss
index e829345..92fae0e 100644
--- a/src/widgets/feed-main-list/ui/FeedMainList.scss
+++ b/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;
diff --git a/src/widgets/feed-main-list/ui/SkeletonFeed.scss b/src/widgets/feed-main-list/ui/SkeletonFeed.scss
index c61d161..c996f12 100644
--- a/src/widgets/feed-main-list/ui/SkeletonFeed.scss
+++ b/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;
diff --git a/src/widgets/feed-main-list/ui/SkeletonFeedMainList.scss b/src/widgets/feed-main-list/ui/SkeletonFeedMainList.scss
index 80e4394..c78869e 100644
--- a/src/widgets/feed-main-list/ui/SkeletonFeedMainList.scss
+++ b/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;
diff --git a/vite.config.ts b/vite.config.ts
index 9ad9bc0..fad52e0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -18,4 +18,17 @@ 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/fonts.scss";
+          @import "@/shared/styles/skeleton.scss";
+        `,
+      },
+    },
+  },
 });

From 110bc3198b2ae39a0668138b575c9269a9eeea8e Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Mon, 6 May 2024 01:04:07 +0900
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20line-height=20=EA=B0=92=20px?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/styles/fonts.scss | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/shared/styles/fonts.scss b/src/shared/styles/fonts.scss
index 0722231..ad46790 100644
--- a/src/shared/styles/fonts.scss
+++ b/src/shared/styles/fonts.scss
@@ -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%); }
\ No newline at end of file
+.b4md { @include font-style(500, 0.5, 10px); }
\ No newline at end of file

From d23e24236917baa4bf21bd8bd442c77c876dccbd Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Mon, 6 May 2024 01:42:14 +0900
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=ED=8F=B0=ED=8A=B8=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=A6=AC=EC=85=8B=20scss=20app=20=ED=8F=B4=EB=8D=94=EB=A1=9C?=
 =?UTF-8?q?=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/App.tsx                        |   2 +-
 src/app/styles/fonts.scss              | 108 +++++++++++++++++++++++++
 src/app/styles/global.scss             |   2 +
 src/{shared => app}/styles/reset.scss  |   0
 src/shared/styles/fonts.scss           |  58 -------------
 src/shared/ui/button/ActiveButton.scss |   3 -
 src/shared/ui/button/BasicButton.scss  |   3 -
 7 files changed, 111 insertions(+), 65 deletions(-)
 create mode 100644 src/app/styles/fonts.scss
 create mode 100644 src/app/styles/global.scss
 rename src/{shared => app}/styles/reset.scss (100%)
 delete mode 100644 src/shared/styles/fonts.scss

diff --git a/src/app/App.tsx b/src/app/App.tsx
index d5dc9d8..a76a0c6 100644
--- a/src/app/App.tsx
+++ b/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 (
diff --git a/src/app/styles/fonts.scss b/src/app/styles/fonts.scss
new file mode 100644
index 0000000..6d55247
--- /dev/null
+++ b/src/app/styles/fonts.scss
@@ -0,0 +1,108 @@
+@mixin font-style($weight, $size, $line-height) {
+  font-family: 'Pretendard', sans-serif;
+  font-weight: $weight;
+  font-size: $size * 1rem;
+  letter-spacing: -0.03rem;
+  line-height: $line-height;
+
+  @font-face {
+    font-family: 'Pretendard';
+    src:
+      url('/assets/font/pretendard-#{$weight}-subset.woff2') format('woff2'),
+      url('/assets/font/pretendard-#{$weight}-subset.woff') format('woff');
+    font-weight: $weight;
+    font-style: normal;
+  }
+
+  @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: 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
+  @media (min-height: 853px) and (max-height: 896px) {
+    font-size: $size * 1.32rem;
+  } // iPhone XR, XS Max, 11, 11 Pro Max
+  @media (min-height: 897px) and (max-height: 926px) {
+    font-size: $size * 1.32rem;
+  } // iPhone 12 Pro Max, 13 Pro Max, 14 Plus
+  @media (min-height: 927px) and (max-height: 932px) {
+    font-size: $size * 1.35rem;
+  } // iPhone 14 Pro Max
+}
+
+/* 24px */
+.h1bold {
+  @include font-style(700, 1.5, 31px);
+}
+.h1semi {
+  @include font-style(600, 1.5, 31px);
+}
+
+/* 20px */
+.h2semi {
+  @include font-style(600, 1.25, 26px);
+}
+
+/* 16px */
+.h3bold {
+  @include font-style(700, 1, 22px);
+}
+.h3semi {
+  @include font-style(600, 1, 22px);
+}
+
+/* 14px */
+.h4semi {
+  @include font-style(600, 0.875, 18px);
+}
+.h4md {
+  @include font-style(500, 0.875, 18px);
+}
+
+/* 12px */
+.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, 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, 12px);
+}
+
+/* 8px */
+.b4md {
+  @include font-style(500, 0.5, 10px);
+}
diff --git a/src/app/styles/global.scss b/src/app/styles/global.scss
new file mode 100644
index 0000000..6198eac
--- /dev/null
+++ b/src/app/styles/global.scss
@@ -0,0 +1,2 @@
+@import 'fonts';
+@import 'reset';
diff --git a/src/shared/styles/reset.scss b/src/app/styles/reset.scss
similarity index 100%
rename from src/shared/styles/reset.scss
rename to src/app/styles/reset.scss
diff --git a/src/shared/styles/fonts.scss b/src/shared/styles/fonts.scss
deleted file mode 100644
index ad46790..0000000
--- a/src/shared/styles/fonts.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@mixin font-style($weight, $size, $line-height) {
-  font-family: 'Pretendard', sans-serif;
-  font-weight: $weight;
-  font-size: $size * 1rem;
-  letter-spacing: -0.03rem;
-  line-height: $line-height;
-
-  @font-face {
-    font-family: 'Pretendard';
-    src:
-      url('/assets/font/pretendard-#{$weight}-subset.woff2') format('woff2'),
-      url('/assets/font/pretendard-#{$weight}-subset.woff') format('woff');
-    font-weight: $weight;
-    font-style: normal;
-  }
-
-  @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: 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
-  @media (min-height: 853px) and (max-height: 896px) { font-size: $size * 1.32rem; } // iPhone XR, XS Max, 11, 11 Pro Max
-  @media (min-height: 897px) and (max-height: 926px) { font-size: $size * 1.32rem; } // iPhone 12 Pro Max, 13 Pro Max, 14 Plus
-  @media (min-height: 927px) and (max-height: 932px) { font-size: $size * 1.35rem; } // iPhone 14 Pro Max
-}
-
-/* 24px */
-.h1bold { @include font-style(700, 1.5, 31px); }
-.h1semi { @include font-style(600, 1.5, 31px); }
-
-/* 20px */
-.h2semi { @include font-style(600, 1.25, 26px); }
-
-/* 16px */
-.h3bold { @include font-style(700, 1, 22px); }
-.h3semi { @include font-style(600, 1, 22px); }
-
-/* 14px */
-.h4semi { @include font-style(600, 0.875, 18px); }
-.h4md { @include font-style(500, 0.875, 18px); }
-
-/* 12px */
-.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, 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, 12px); }
-
-/* 8px */
-.b4md { @include font-style(500, 0.5, 10px); }
\ No newline at end of file
diff --git a/src/shared/ui/button/ActiveButton.scss b/src/shared/ui/button/ActiveButton.scss
index faed84b..f0192a3 100644
--- a/src/shared/ui/button/ActiveButton.scss
+++ b/src/shared/ui/button/ActiveButton.scss
@@ -1,6 +1,5 @@
 @mixin confirmButton($isDisabled: false) {
   @include responsive-box(108px, 40px);
-  @extend .h4semi;
   border-radius: 4px;
 
   @if $isDisabled {
@@ -24,10 +23,8 @@
 
   @if $isLg {
     @include responsive-box(280px, 30px);
-    @extend .b1semi;
   } @else {
     @include responsive-box(48px, 24px);
-    @extend .b2semi;
   }
   @if $isDisabled {
     color: $gray4;
diff --git a/src/shared/ui/button/BasicButton.scss b/src/shared/ui/button/BasicButton.scss
index f619142..cf98d46 100644
--- a/src/shared/ui/button/BasicButton.scss
+++ b/src/shared/ui/button/BasicButton.scss
@@ -3,7 +3,6 @@
 
 .confirm-cancle {
   @include responsive-box(108px, 40px);
-  @extend .h4semi;
   border-radius: 4px;
   color: $gray4;
   background-color: $gray2;
@@ -11,7 +10,6 @@
 
 .bsm-option {
   @include responsive-box(280px, 40px);
-  @extend .h4md;
   background-color: $gray1;
   color: $gray5;
   text-align: center;
@@ -20,7 +18,6 @@
 
 .bsm-cancle {
   @include responsive-box(280px, 47px);
-  @extend .h4semi;
   text-align: center;
   background-color: $gray5;
   color: white;

From 11f6ac3c997fe0e48eb888fe5383b2544160df1c Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Mon, 6 May 2024 01:47:46 +0900
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20scss=20=EC=96=B8=EB=8D=94=EC=8A=A4?=
 =?UTF-8?q?=EC=BD=94=EC=96=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/styles/{box.scss => _box.scss}     |  0
 src/shared/styles/_colors.scss                | 10 ++++++++
 .../styles/{skeleton.scss => _skeleton.scss}  |  0
 src/shared/styles/colors.scss                 | 23 -------------------
 vite.config.ts                                |  7 +++---
 5 files changed, 13 insertions(+), 27 deletions(-)
 rename src/shared/styles/{box.scss => _box.scss} (100%)
 create mode 100644 src/shared/styles/_colors.scss
 rename src/shared/styles/{skeleton.scss => _skeleton.scss} (100%)
 delete mode 100644 src/shared/styles/colors.scss

diff --git a/src/shared/styles/box.scss b/src/shared/styles/_box.scss
similarity index 100%
rename from src/shared/styles/box.scss
rename to src/shared/styles/_box.scss
diff --git a/src/shared/styles/_colors.scss b/src/shared/styles/_colors.scss
new file mode 100644
index 0000000..e761878
--- /dev/null
+++ b/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;
diff --git a/src/shared/styles/skeleton.scss b/src/shared/styles/_skeleton.scss
similarity index 100%
rename from src/shared/styles/skeleton.scss
rename to src/shared/styles/_skeleton.scss
diff --git a/src/shared/styles/colors.scss b/src/shared/styles/colors.scss
deleted file mode 100644
index eb3ed44..0000000
--- a/src/shared/styles/colors.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-$gray1: #F7F8F9;
-$gray2: #F0F2F4;
-$gray3: #DDE0E5;
-$gray4: #B3B9C4;
-$gray5: #8691A2;
-$gray6: #383E4A;
-$gray7: #161A1D;
-$mint1: #D9F9FB;
-$mint2: #9DEFF6;
-$mint3: #00D5E1;
-
-:root {
-  --gray1: #{$gray1};
-  --gray2: #{$gray2};
-  --gray3: #{$gray3};
-  --gray4: #{$gray4};
-  --gray5: #{$gray5};
-  --gray6: #{$gray6};
-  --gray7: #{$gray7};
-  --mint1: #{$mint1};  
-  --mint2: #{$mint2};
-  --mint3: #{$mint3};
-}
diff --git a/vite.config.ts b/vite.config.ts
index fad52e0..87e92ca 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -23,10 +23,9 @@ export default defineConfig({
     preprocessorOptions: {
       scss: {
         additionalData: `
-          @import "@/shared/styles/box.scss";
-          @import "@/shared/styles/colors.scss";
-          @import "@/shared/styles/fonts.scss";
-          @import "@/shared/styles/skeleton.scss";
+          @import "@/shared/styles/_box.scss";
+          @import "@/shared/styles/_colors.scss";
+          @import "@/shared/styles/_skeleton.scss";
         `,
       },
     },

From 2ac70eae4c3bf958e3fc9e9ffb7a1be1231a4fb4 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Mon, 6 May 2024 01:48:36 +0900
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20font=EC=99=80=20reset=20=EC=96=B8?=
 =?UTF-8?q?=EB=8D=94=EB=B0=94=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/styles/{fonts.scss => _fonts.scss} | 0
 src/app/styles/{reset.scss => _reset.scss} | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/app/styles/{fonts.scss => _fonts.scss} (100%)
 rename src/app/styles/{reset.scss => _reset.scss} (100%)

diff --git a/src/app/styles/fonts.scss b/src/app/styles/_fonts.scss
similarity index 100%
rename from src/app/styles/fonts.scss
rename to src/app/styles/_fonts.scss
diff --git a/src/app/styles/reset.scss b/src/app/styles/_reset.scss
similarity index 100%
rename from src/app/styles/reset.scss
rename to src/app/styles/_reset.scss

From 5277893a4aee1df377aecb31c7bc95a4125068b8 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Mon, 6 May 2024 02:07:57 +0900
Subject: [PATCH 6/6] =?UTF-8?q?style:=20prettierignore=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierignore            |   2 +-
 src/app/styles/_fonts.scss | 100 ++++++++++---------------------------
 2 files changed, 26 insertions(+), 76 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 055e6b0..8a40e60 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1 @@
-*/**/fonts.scss
\ No newline at end of file
+*/**/_fonts.scss
\ No newline at end of file
diff --git a/src/app/styles/_fonts.scss b/src/app/styles/_fonts.scss
index 6d55247..5d3821d 100644
--- a/src/app/styles/_fonts.scss
+++ b/src/app/styles/_fonts.scss
@@ -14,95 +14,45 @@
     font-style: normal;
   }
 
-  @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: 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
-  @media (min-height: 853px) and (max-height: 896px) {
-    font-size: $size * 1.32rem;
-  } // iPhone XR, XS Max, 11, 11 Pro Max
-  @media (min-height: 897px) and (max-height: 926px) {
-    font-size: $size * 1.32rem;
-  } // iPhone 12 Pro Max, 13 Pro Max, 14 Plus
-  @media (min-height: 927px) and (max-height: 932px) {
-    font-size: $size * 1.35rem;
-  } // iPhone 14 Pro Max
+  @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: 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
+  @media (min-height: 853px) and (max-height: 896px) { font-size: $size * 1.32rem; } // iPhone XR, XS Max, 11, 11 Pro Max
+  @media (min-height: 897px) and (max-height: 926px) { font-size: $size * 1.32rem; } // iPhone 12 Pro Max, 13 Pro Max, 14 Plus
+  @media (min-height: 927px) and (max-height: 932px) { font-size: $size * 1.35rem; } // iPhone 14 Pro Max
 }
 
 /* 24px */
-.h1bold {
-  @include font-style(700, 1.5, 31px);
-}
-.h1semi {
-  @include font-style(600, 1.5, 31px);
-}
+.h1bold { @include font-style(700, 1.5, 31px); }
+.h1semi { @include font-style(600, 1.5, 31px); }
 
 /* 20px */
-.h2semi {
-  @include font-style(600, 1.25, 26px);
-}
+.h2semi { @include font-style(600, 1.25, 26px); }
 
 /* 16px */
-.h3bold {
-  @include font-style(700, 1, 22px);
-}
-.h3semi {
-  @include font-style(600, 1, 22px);
-}
+.h3bold { @include font-style(700, 1, 22px); }
+.h3semi { @include font-style(600, 1, 22px); }
 
 /* 14px */
-.h4semi {
-  @include font-style(600, 0.875, 18px);
-}
-.h4md {
-  @include font-style(500, 0.875, 18px);
-}
+.h4semi { @include font-style(600, 0.875, 18px); }
+.h4md { @include font-style(500, 0.875, 18px); }
 
 /* 12px */
-.b1semi {
-  @include font-style(600, 0.75, 16px);
-}
-.b1md {
-  @include font-style(500, 0.75, 16px);
-}
-.b1reg {
-  @include font-style(400, 0.75, 17px);
-}
+.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, 14px);
-}
-.b2semi {
-  @include font-style(600, 0.6875, 14px);
-}
-.b2reg {
-  @include font-style(400, 0.6875, 14px);
-}
+.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, 12px);
-}
+.b3md { @include font-style(500, 0.5625, 12px); }
 
 /* 8px */
-.b4md {
-  @include font-style(500, 0.5, 10px);
-}
+.b4md { @include font-style(500, 0.5, 10px); }
\ No newline at end of file