style: global scss 추가

style: global scss 추가

src/styles/_buttons.scss

@@ -0,0 +1,46 @@
+@import 'variables';
+@import 'mixins';
+
+.button {
+  @include buttonStyle;
+
+  // 버튼 크기
+  &Small {
+    @include buttonSize(4px 6px, $fontSizeSmall);
+  }
+  &Medium {
+    @include buttonSize(12px 16px, $fontSizeBase);
+  }
+  &Large {
+    @include buttonSize(12px 34px, $fontSizeLarge);
+  }
+
+  // 버튼 스타일
+  &Outlined {
+    border: 1px solid $borderColor;
+    background: #fafafa;
+    color: $textSecondaryColor;
+    border-radius: 29px;
+
+    &:hover {
+      background-color: $borderColor;
+      color: $textBoldColor;
+    }
+  }
+
+  &Dark {
+    background: #424242;
+    color: #FAFAFA;
+    border-radius: 5px;
+
+    &:hover {
+      background: black;
+    }
+  }
+
+  // 버튼 모양
+  &Rounded {
+    border-radius: 50px;
+    border-style: none;
+  }
+}

src/styles/_components.scss

@@ -0,0 +1,18 @@
+.cardDark {
+  background: #D9D9D9;
+  border: 1px solid $borderColor;
+  border-style: none;
+  border-radius: 10px;
+  margin: 45px;
+  width: 200px;
+  height: 200px;
+}
+
+.cardOutlined{
+  border: 0.5px solid $borderColor;
+  border-radius: 5px;
+  margin: 48px;
+  padding: 10px;
+  width: 200px;
+  height: 240px;
+}

src/styles/_layout.scss

@@ -0,0 +1,6 @@
+.container {
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}

src/styles/_reset.scss

@@ -0,0 +1,27 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  font-family: $fontFamily;
+  font-size: $fontSizeBase;
+  color: $textPrimaryColor;
+  background-color: $backgroundColor;
+  line-height: 1.6;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}

src/styles/_variables.scss

@@ -0,0 +1,14 @@
+// 색상 변수
+$colorPrimary: #4A90E2;
+$colorSecondary: #999;
+$backgroundColor: #F5F5F5;
+$borderColor: #9E9E9E;
+$textBoldColor: #222;
+$textPrimaryColor: #424242;
+$textSecondaryColor: #616161;
+
+// 폰트 변수
+$fontFamily: 'Pretendard', sans-serif;
+$fontSizeBase: 18px;
+$fontSizeSmall: 14px;
+$fontSizeLarge: 24px;

src/styles/main.scss

@@ -0,0 +1,6 @@
+@import 'variables';
+@import 'reset';
+@import 'mixins';
+@import 'layout';
+@import 'buttons';
+@import 'components';