KakaoTech-BootCamp-Team-2 · Goldchae · Aug 13, 2024 · Aug 13, 2024 · Aug 13, 2024 · Aug 14, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+  }
diff --git a/README.md b/README.md
@@ -25,3 +25,14 @@
 | ✅ Test        | `:white_check_mark` | 로직 및 코드 테스트              |
 | ♻️ Refactoring | `:recycle`          | 코드 리팩토링                    |
 | 📘 Docs        | `:blue_book`        | Feature 이외에 문서 생성 및 수정 |
+
+### font
+
+KakaoBold 또는 KakaoRegular
+
+### color
+
+기본 노랑 : #FFF496
+기본 찐브라운 : #715F00
+기본 연브라운 : #D3CBA1
+블랙 : #000
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/preset-react"],
+  plugins: ["@emotion/babel-plugin"],
+};
diff --git a/components/Common/Background.jsx b/components/Common/Background.jsx
diff --git a/components/Common/Footer.jsx b/components/Common/Footer.jsx
diff --git a/components/Common/Layout.jsx b/components/Common/Layout.jsx
diff --git a/dist/assets/index-BSSa90UF.js b/dist/assets/index-BSSa90UF.js
diff --git a/dist/assets/index-BqHKD4MV.js b/dist/assets/index-BqHKD4MV.js
diff --git a/dist/assets/index-DiwrgTda.css b/dist/assets/index-DiwrgTda.css
diff --git a/dist/assets/react-CHdo91hT.svg b/dist/assets/react-CHdo91hT.svg
diff --git a/dist/index.html b/dist/index.html
@@ -4,9 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-    <script type="module" crossorigin src="/assets/index-BSSa90UF.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DiwrgTda.css">
+    <title>카부카부</title>
+    <script type="module" crossorigin src="/assets/index-BqHKD4MV.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/dist/vite.svg b/dist/vite.svg
diff --git a/pages/VideoPage.js b/pages/VideoPage.js
diff --git a/public/fonts/KakaoBold.ttf b/public/fonts/KakaoBold.ttf
diff --git a/public/fonts/KakaoOTFBold.otf b/public/fonts/KakaoOTFBold.otf
diff --git a/public/fonts/KakaoOTFRegular.otf b/public/fonts/KakaoOTFRegular.otf
diff --git a/public/fonts/KakaoRegular.ttf b/public/fonts/KakaoRegular.ttf
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,30 +1,13 @@
-import Layout from "../components/Common/Layout"
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css';
-import {
-  BrowserRouter as Router,
-  Routes,
-  Route,
-  Link,
-  useLocation,
-} from 'react-router-dom';
-
-import Header from './components/Header';
-import HomeMain from './pages/homepages/HomeMain';
+import PeopleListPage from "./pages/PeopleListPage";
+import GlobalStyle from "./components/Common/GlobalStyle";
 
 function App() {
-
-
   return (
-    <Router>
-      <Routes>
-        <Route path ="/" element={<HomeMain />}></Route>
-      </Routes>
-    </Router>
-
-  )
+    <>
+      <GlobalStyle />
+      <PeopleListPage></PeopleListPage>
+    </>
+  );
 }
 
 export default App;
diff --git a/src/assets/dummyImages/peopleList.jpeg b/src/assets/dummyImages/peopleList.jpeg
diff --git a/src/assets/dummyImages/peoplelist2.png b/src/assets/dummyImages/peoplelist2.png
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/Common/Background.jsx b/src/components/Common/Background.jsx
@@ -0,0 +1,34 @@
+/** @jsxImportSource @emotion/react */
+import { useState, useEffect } from "react";
+import { Circle, BackgroundContainer } from "./Background.styled";
+
+function generateCircles() {
+  return [
+    { x: -50, y: -30, duration: 4 }, // 왼쪽 위
+    { x: 30, y: 40, duration: 11 }, // 오른쪽 가운데
+    { x: -40, y: 150, duration: 3 }, // 왼쪽 아래
+  ];
+}
+
+function Background() {
+  const [circles, setCircles] = useState([]);
+
+  useEffect(() => {
+    setCircles(generateCircles());
+  }, []);
+
+  return (
+    <BackgroundContainer>
+      {circles.map((circle, index) => (
+        <Circle
+          key={index}
+          x={circle.x}
+          y={circle.y}
+          duration={circle.duration}
+        />
+      ))}
+    </BackgroundContainer>
+  );
+}
+
+export default Background;