전역 css 설정 추가

client/package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
     "bootstrap": "^5.0.2",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

client/src/index.js

-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import 'bootstrap'
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import './scss/custom.scss';
+import "./index.css";
+import "bootstrap";
+import 'bootstrap/dist/css/bootstrap.min.css'
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function

client/src/scss/custom.scss

+$primary: #e8b7ff;
+$secondary: #df99ff;
+$info: #fcf4ff;
+$warning: #ff0000;
+$GrayishSkyBlue: #739db6;
+$MinDarkBlue: #59b7e3;
+$Gray: #adb5bd;
+
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+$custom-colors: (
+  "GrayishSkyBlue": $GrayishSkyBlue,
+  "MinDarkBlue": $MinDarkBlue,
+  "Gray": $Gray,
+);
+
+$theme-colors: map-merge($theme-colors, $custom-colors);
+@import "~bootstrap/scss/bootstrap.scss";
+
+body {
+  background-color: #fcf4ff !important;
+  height: 100vh !important;
+  display: flex;
+  justify-content: center;
+}
+
+#root {
+  width: 414px !important;
+  height: 100;
+}
+
+.btn-primary {
+  background-color: $primary !important;
+  border-color: $primary !important;
+  color: #000 !important;
+}
+.btn-primary:hover {
+  background-color: $secondary !important;
+  border-color: $secondary !important;
+  color: #fff !important;
+}
+
+.btn-info {
+  background-color: $info !important;
+  border-color: $info !important;
+}