스타일컴포넌트 마이그레이션

package.json

@@ -13,6 +13,7 @@
     "react-router-dom": "^6.21.0",
     "react-scripts": "5.0.1",
     "sass": "^1.69.5",
+    "styled-components": "^6.1.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.scss

@@ -37,77 +37,57 @@ body {
 /*  MyButton */
 
 .MyButton {
-  cursor: pointer;
-  border: none;
-  border-radius: 5px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 20px;
-  padding-right: 20px;
-  font-size: 18px;
-  white-space: nowrap;
-  transition: background-color 0.15s ease-in-out;
-  font-family: "Nanum Pen Script";
-}
-
-.MyButton_default {
-  background-color: #ececec;
-  color: black;
-  &:hover {
-    background-color: #c9c9c9;
-  }
-}
-
-.MyButton_positive {
-  background-color: #64c964;
-  color: white;
-  &:hover {
-    background-color: #47a147;
-  }
-}
-
-.MyButton_negative {
-  background-color: #fd565f;
-  color: white;
-  &:hover {
-    background-color: #de1620;
-  }
-}
+  // cursor: pointer;
+  // border: none;
+  // border-radius: 5px;
+  // padding-top: 10px;
+  // padding-bottom: 10px;
+  // padding-left: 20px;
+  // padding-right: 20px;
+  // font-size: 18px;
+  // white-space: nowrap;
+  // transition: background-color 0.15s ease-in-out;
+  // font-family: "Nanum Pen Script";
+}
+
+// .MyButton_default {
+//   background-color: #ececec;
+//   color: black;
+//   &:hover {
+//     background-color: #c9c9c9;
+//   }
+// }
+
+// .MyButton_positive {
+//   background-color: #64c964;
+//   color: white;
+//   &:hover {
+//     background-color: #47a147;
+//   }
+// }
+
+// .MyButton_negative {
+//   background-color: #fd565f;
+//   color: white;
+//   &:hover {
+//     background-color: #de1620;
+//   }
+// }
 
 /* HEADER */
 
-header {
-  padding-top: 20px;
-  padding-bottom: 20px;
+// header {
+//   padding-top: 20px;
+//   padding-bottom: 20px;
 
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #e2e2e2;
-}
-
-header > div {
-  display: flex;
-}
-
-header .head_text {
-  width: 50%;
-  font-size: 25px;
-  justify-content: center;
-}
-
-header .head_btn_left {
-  width: 25%;
-  justify-content: start;
-}
+//   display: flex;
+//   align-items: center;
+//   border-bottom: 1px solid #e2e2e2;
+// }
 
-header .head_btn_right {
-  width: 25%;
-  justify-content: end;
-}
-
-header button {
-  font-family: "Nanum Pen Script";
-}
+// .flex {
+//   display: flex;
+// }
 
 /* DiaryList */
 
@@ -384,32 +364,3 @@ header button {
   font-weight: 400;
   line-height: 2.5;
 }
-
-.loader_wrap {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-}
-.loader {
-  position: absolute;
-  top: calc(50% - 25px);
-  left: calc(50% - 25px);
-  width: 50px;
-  height: 50px;
-  border: 5px dotted #000;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 2s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

src/components/Loading.tsx

@@ -1,9 +1,40 @@
+import styled from "styled-components";
+
 const Loading = () => {
   return (
-    <div className="loader_wrap">
-      <span className="loader" />
-    </div>
+    <Wrap>
+      <Loader />
+    </Wrap>
   );
 };
 
+const Wrap = styled.div`
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+`;
+
+const Loader = styled.span`
+  position: absolute;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+  width: 50px;
+  height: 50px;
+  border: 5px dotted #000;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 2s linear infinite;
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
 export default Loading;