QandA/frontend/package.json

@@ -3,8 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.8.2",
-    "@emotion/styled": "^11.8.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",

QandA/frontend/src/App.module.css

@@ -0,0 +1,5 @@
+.container {
+  font-family: 'Segoe UI', 'Helvetica', sans-serif;
+  font-size: 16px;
+  color: #5c5a5a;
+}

QandA/frontend/src/App.tsx

@@ -1,20 +1,11 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-
 import React from 'react';
 import { Header } from './Header';
+import style from './App.module.css';
 import { HomePage } from './HomePage';
-import { fontFamily, fontSize, gray2 } from './Styles';
 
 function App() {
   return (
-    <div
+    <div className={style.container}>
-      css={css`
-        font-family: ${fontFamily};
-        font-size: ${fontSize};
-        color: ${gray2};
-      `}
-    >
       <Header />
       <HomePage />
     </div>

QandA/frontend/src/Styles.ts

@@ -1,12 +0,0 @@
-export const gray1 = '#383737';
-export const gray2 = '#5c5a5a';
-export const gray3 = '#857c81';
-export const gray4 = '#b9b9b9';
-export const gray5 = '#e3e2e2';
-export const gray6 = '#f7f8fa';
-export const primary1 = '#681c41';
-export const primary2 = '#824c67';
-export const accent1 = '#dbb365';
-export const accent2 = '#efd197';
-export const fontFamily = "'Segoe UI', 'Helvetica Neue',sans-serif";
-export const fontSize = '16px';