yonghyun421 · yonghyun421 · Apr 20, 2024 · Apr 20, 2024 · Apr 20, 2024 · Apr 20, 2024
diff --git a/.env b/.env
@@ -1,2 +1,4 @@
-REACT_APP_CLIENT_ID = 'M6puxyOBw5Tz_U7G0Nhd'
-REACT_APP_CLIENT_SECRET = 'reW5wgBpnp'
+REACT_APP_CLIENT_ID = '32EWoFoCbGfCQE2uym9R'
+REACT_APP_CLIENT_SECRET = 'bFmQt272E9'
+REACT_APP_KEY='afc88e2a44694ba2b64719246190ae09'
+REACT_APP_YOUTUBE_DATA_API_KEY=AIzaSyCK38YEou9Ukf0Z6xYIWDvNCZKX8X8Z5g8
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -3,6 +3,15 @@
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": ["error"],
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        "required": {
+          "some": ["nesting", "id"]
+        },
+        "allowChildren": false
+      }
+    ]
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,46 +1,68 @@
-{
-  "name": "react-project",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@tanstack/react-query": "^5.29.2",
-    "@tanstack/react-query-devtools": "^5.29.2",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.6.8",
-    "bootstrap": "^5.3.3",
-    "react": "^18.2.0",
-    "react-bootstrap": "^2.10.2",
-    "react-dom": "^18.2.0",
-    "react-icons": "^5.1.0",
-    "react-multi-carousel": "^2.8.5",
-    "react-router-dom": "^6.22.3",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
+{
+  "name": "react-project",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@tanstack/react-query": "^5.29.2",
+    "@tanstack/react-query-devtools": "^5.29.2",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.8",
+    "bootstrap": "^5.3.3",
+    "dayjs": "^1.11.10",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "firebase": "^10.11.0",
+    "pagenation": "^1.0.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.10.2",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.1.0",
+    "react-multi-carousel": "^2.8.5",
+    "react-paginate": "^8.2.0",
+    "react-router-dom": "^6.22.3",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@eslint/eslintrc": "^3.0.2",
+    "@eslint/js": "^9.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "globals": "^15.0.0",
+    "prettier": "^3.2.5"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -1,45 +1,47 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <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" />
-  <link rel="stylesheet" as="style"
-    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css">
-  <!--
-      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>
-</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>
+<!doctype html>
+<html lang="en">
+  <head>
+    <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" />
+    <link
+      rel="stylesheet"
+      as="style"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
+    <!--
+      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>
+  </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/nodata.png b/public/nodata.png
diff --git a/public/refresh.png b/public/refresh.png
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,13 @@
+.wrap {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #f7f7f7;
+}
+.wrap .inner {
+  flex: 1;
+}
+body {
+  background-color: lightgray !important;
+  color: white !important;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,29 +1,47 @@
-import "./App.css";
-import React from "react";
-import { Route, Routes } from "react-router-dom";
-import AppLayout from "./layout/AppLayout";
-import Homepage from "./pages/Homepage/Homepage";
-import NotFoundPage from ".//pages/NotFoundPage/NotFoundPage";
-import NewsPage from ".//pages/NewsPage/NewsPage";
-import NewsDetailPage from ".//pages/NewsDetailPage/NewsDetailPage";
-import CategoryPage from ".//pages/CategoryPage/CategoryPage";
-
-function App() {
-  return (
-    <div className="App">
-      <Routes>
-        <Route path="/" element={<AppLayout />}>
-          <Route index element={<Homepage />} />
-          <Route path="/category/:category" element={<CategoryPage />} />
-          <Route path="news">
-            <Route index element={<NewsPage />} />
-            <Route path=":id" element={<NewsDetailPage />} />
-          </Route>
-        </Route>
-        <Route path="*" element={<NotFoundPage />} />
-      </Routes>
-    </div>
-  );
-}
-
-export default App;
+import "./App.css";
+import React from "react";
+import { Route, Routes } from "react-router-dom";
+import AppLayout from "./layout/AppLayout";
+import Homepage from "./pages/Homepage/Homepage";
+import NotFoundPage from "./pages/NotFoundPage/NotFoundPage";
+import NewsPage from "./pages/NewsPage/NewsPage";
+<<<<<<< HEAD
+=======
+import NewsDetailPage from "./pages/NewsDetailPage/NewsDetailPage";
+>>>>>>> 30a404b (conflict fix)
+import MyPage from "./pages/Mypage/Mypage";
+import JoinPage from "./pages/Mypage/JoinPage/JoinPage";
+import LoginPage from "./pages/Mypage/LoginPage/LoginPage";
+import BookMarkPage from "./pages/Mypage/BookMarkPage/BookMarkPage";
+import CategoryPage from "./pages/CategoryPage/CategoryPage";
+import NewsDetailPage from "./pages/NewsDetailPage/NewsDetailPage";
+
+function App() {
+  return (
+    <div className="App">
+      <Routes>
+        <Route path="/" element={<AppLayout />}>
+          <Route index element={<Homepage />} />
+          <Route path="/category/:category" element={<CategoryPage />} />
+          <Route path="news">
+            <Route index element={<NewsPage />} />
+<<<<<<< HEAD
+=======
+            <Route path="category/:category" element={<NewsPage />} />
+>>>>>>> 49f6647 (작업진행중)
+            <Route path=":id" element={<NewsDetailPage />} />
+          </Route>
+          <Route path="mypage">
+            <Route index element={<MyPage />} />
+            <Route path="join" element={<JoinPage />} />
+            <Route path="login" element={<LoginPage />} />
+            <Route path="bookmark" element={<BookMarkPage />} />
+          </Route>
+        </Route>
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/assets/menu-icon.svg b/src/assets/menu-icon.svg
diff --git a/src/assets/noImage.jpg b/src/assets/noImage.jpg
diff --git a/src/assets/search-icon.svg b/src/assets/search-icon.svg
diff --git a/src/common/Footer/Footer.jsx b/src/common/Footer/Footer.jsx
@@ -1,17 +1,17 @@
-import React from "react";
-import "./Footer.style.css";
-
-function Footer() {
-  return (
-    <div className="footer">
-      <ul className="foo--list">
-        <li>Home</li>
-        <li>News</li>
-        <li>GitHub</li>
-        <li>Our Team</li>
-      </ul>
-      <div className="foo--copy">Copyright ©2024</div>
-    </div>
-  );
-}
-export default Footer;
+import React from "react";
+import "./Footer.style.css";
+
+function Footer() {
+  return (
+    <div className="footer">
+      <ul className="foo--list">
+        <li>Home</li>
+        <li>News</li>
+        <li>GitHub</li>
+        <li>Our Team</li>
+      </ul>
+      <div className="foo--copy">Copyright ©2024</div>
+    </div>
+  );
+}
+export default Footer;