🔧: react-router-dom 설치 후 컴포넌트 연결 및 전체적인 테스트 검토 완료

Author: 4BFC

front/package.json

@@ -10,15 +10,18 @@
     "@types/node": "^16.18.119",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "class-variance-authority": "^0.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "5.18.0",
     "@typescript-eslint/parser": "5.18.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "8.22.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
@@ -28,7 +31,9 @@
     "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.37.2",
-    "prettier": "3.3.3"
+    "postcss": "^8.4.49",
+    "prettier": "3.3.3",
+    "tailwindcss": "^3.4.15"
   },
   "scripts": {
     "start": "react-scripts start",

front/pnpm-lock.yaml

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+// 만약 craco와 같은 라이브러리를 사용할 경우 생략해도 된다.

front/postcss.config.js

@@ -1,20 +1,13 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import MyTest from './Page/MyTest';
 
 const App = () => {
   return (
-    <div className='App'>
-      <header className='App-header'>
-        <img src={logo} className='App-logo' alt='logo' />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Routes>
+        <Route path='/' element={<MyTest />} />
+      </Routes>
+    </Router>
   );
 };
 

front/src/App.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const MyTest = () => {
+  return (
+    <div className='py-10 text-center text-white bg-blue-500'>
+      <h1 className='text-4xl font-bold'>Hello, Tailwind CSS with pnpm!</h1>
+      <span className='bg-slate-500'>test</span>
+    </div>
+  );
+};
+
+export default MyTest;

front/src/Page/MyTest.tsx

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

front/src/index.css

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{html,js,jsx,ts,tsx}', // 사용할 파일들
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};