Chore: 프로젝트 초기 구조 세팅

part2-team9 · Apr 8, 2024 · 8afe602 · 8afe602
1 parent 28930af
commit 8afe602
Show file tree

Hide file tree

Showing 31 changed files with 619 additions and 172 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,11 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "sass": "^1.74.1",
+    "scss": "^0.2.4",
+    "styled-reset": "^4.5.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +38,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "3.2.5"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,40 +4,10 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <meta name="description" content="Web site created using create-react-app" />
+    <title>Rolling</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,16 @@
-import logo from './logo.svg';
-import './App.css';
+// App.js
+import "./global.scss";
+import "./reset.scss";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Home from "./pages/Home/Home";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/assets/Rolling_icon.png b/src/assets/Rolling_icon.png
diff --git a/src/assets/landing_01.png b/src/assets/landing_01.png
diff --git a/src/assets/landing_02.png b/src/assets/landing_02.png
diff --git a/src/assets/profile_01.png b/src/assets/profile_01.png
diff --git a/src/assets/profile_02.png b/src/assets/profile_02.png
diff --git a/src/assets/profile_03.png b/src/assets/profile_03.png
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,10 @@
+// Header.jsx
+function Header() {
+  return (
+    <header>
+      <h1>Header</h1>
+    </header>
+  );
+}
+
+export default Header;
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
@@ -0,0 +1,10 @@
+// Main.jsx
+function Main() {
+  return (
+    <main>
+      <h2>Main</h2>
+    </main>
+  );
+}
+
+export default Main;
diff --git a/src/global.scss b/src/global.scss
@@ -0,0 +1,41 @@
+:root {
+  --purple1: #f8f0ff;
+  --purple2: #ecd9ff;
+  --purple3: #dcb9ff;
+  --purple4: #c894fd;
+  --purple5: #ab57ff;
+  --purple6: #9935ff;
+  --purple7: #861dee;
+  --purple8: #6e0ad1;
+  --purple9: #5603a7;
+  --orange1: #fff0d6;
+  --orange2: #ffe2ad;
+  --orange3: #ffc583;
+  --orange4: #ffae65;
+  --orange5: #ff8832;
+  --blue1: #e2f5ff;
+  --blue2: #b1e4ff;
+  --blue3: #7cd2ff;
+  --blue4: #34b9ff;
+  --blue5: #00a2fe;
+  --green1: #e4fbdc;
+  --green2: #d0f5c3;
+  --green3: #9be282;
+  --green4: #60cf37;
+  --green5: #2ba600;
+  --gray1: #f6f6f6;
+  --gray2: #eeeeee;
+  --gray3: #cccccc;
+  --gray4: #999999;
+  --gray5: #555555;
+  --gray6: #4a4a4a;
+  --gray7: #3a3a3a;
+  --gray8: #2b2b2b;
+  --gray9: #181818;
+  --white: #ffffff;
+  --black: #000000;
+  --error: #dc3a3a;
+  --surface: #f6f8ff;
+
+  --font-family: "Pretendard", sans-serif;
+}
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
+ReactDOM.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
+  document.getElementById("root")
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
@@ -0,0 +1,14 @@
+// Home.jsx
+import Header from "../../components/Header";
+import Main from "../../components/Main";
+
+function Home() {
+  return (
+    <>
+      <Header />
+      <Main />
+    </>
+  );
+}
+
+export default Home;
diff --git a/src/pages/List/List.jsx b/src/pages/List/List.jsx
@@ -0,0 +1,7 @@
+// List.jsx
+
+function List() {
+  return <></>;
+}
+
+export default List;
diff --git a/src/pages/Msg/FromMsg/FromMsg.jsx b/src/pages/Msg/FromMsg/FromMsg.jsx
@@ -0,0 +1,7 @@
+// FromMsg.jsx
+
+function FromMsg() {
+  return <></>;
+}
+
+export default FromMsg;
diff --git a/src/pages/Msg/ToMsg/ToMsg.jsx b/src/pages/Msg/ToMsg/ToMsg.jsx
@@ -0,0 +1,7 @@
+// ToMsg.jsx
+
+function ToMsg() {
+  return <></>;
+}
+
+export default ToMsg;
diff --git a/src/pages/Post/Post.jsx b/src/pages/Post/Post.jsx
@@ -0,0 +1,7 @@
+// Post.jsx
+
+function Post() {
+  return <></>;
+}
+
+export default Post;
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js