codestates-seb · als982001 · May 2, 2023 · May 2, 2023 · May 2, 2023 · May 2, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local

diff --git a/frontend/AWSCLIV2.pkg b/frontend/AWSCLIV2.pkg
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,16 +3,52 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
+    "buffer": "^6.0.3",
+    "date-fns": "^2.30.0",
+    "dotenv": "^16.0.3",
+    "framer-motion": "^10.12.8",
+    "jquery": "^3.6.4",
+    "jquery-ui": "^1.13.2",
+    "kakao-maps-sdk": "^1.0.1",
+    "openai": "^3.2.1",
+    "qs": "^6.11.1",
     "react": "^18.2.0",
+    "react-calendar": "^4.2.1",
+    "react-datepicker": "^4.11.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.9",
+    "react-icons": "^4.8.0",
+    "react-kakao-maps": "^0.0.13",
+    "react-modal": "^3.16.1",
+    "react-query": "^3.39.3",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.11.0",
     "react-scripts": "5.0.1",
-    "styled-component": "^2.8.0",
+    "react-scroll": "^1.8.9",
+    "react-spinners": "^0.13.8",
+    "react-toastify": "^9.1.3",
+    "redux": "^4.2.1",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.3.0",
     "styled-components": "^5.3.10",
     "web-vitals": "^2.1.4"
   },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.10.8"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

diff --git a/frontend/public/img/Camp.png b/frontend/public/img/Camp.png
diff --git a/frontend/public/img/Camp02.png b/frontend/public/img/Camp02.png
diff --git a/frontend/public/img/Logo.png b/frontend/public/img/Logo.png
diff --git a/frontend/public/img/Logo_Dark.png b/frontend/public/img/Logo_Dark.png
diff --git a/frontend/public/img/Logo_Light.png b/frontend/public/img/Logo_Light.png
diff --git a/frontend/public/img/add-user.png b/frontend/public/img/add-user.png
diff --git a/frontend/public/img/btns.png b/frontend/public/img/btns.png
diff --git a/frontend/public/img/kakao.png b/frontend/public/img/kakao.png
diff --git a/frontend/public/img/login.png b/frontend/public/img/login.png
diff --git a/frontend/public/img/operator.png b/frontend/public/img/operator.png
diff --git a/frontend/public/img/user.png b/frontend/public/img/user.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -2,7 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&family=Song+Myung&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="icon" href="./img/Camp.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -11,7 +15,17 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b47a73361f8ac5e3196093123734ba42"
+    ></script>
+    <script
+      src="https://kit.fontawesome.com/6017d9010f.js"
+      crossorigin="anonymous"
+    ></script>
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
+    <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
+    <title>AirCamp</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -1,5 +1,114 @@
+import styled from "styled-components";
+import axios from "axios";
+
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { Routes, Route } from "react-router-dom";
+
+import Header from "./Components/Global/Header";
+import Main from "./Pages/Main";
+import SignUp from "./Pages/SignUp";
+import Login from "./Pages/Login";
+import Payment from "./Pages/Payment";
+import Mypage from "./Pages/Mypage";
+import Detail from "./Pages/Detail";
+import Sell from "./Pages/Sell";
+import Admin from "./Pages/Admin";
+import KakaoLogin from "./Pages/KakaoLogin";
+import ChatBox from "./Components/Global/ChatBox";
+import NotFound from "./Pages/NotFound";
+import SelectPay from "./Pages/SelectPay";
+import PaySuccessPage from "./Pages/PaySuccessPage";
+import PayCancelPage from "./Pages/PayCancelPage";
+import PayFailPage from "./Pages/PayFailPage";
+
+import { handleLogout } from "./Redux/Actions";
+import { getMemberInfo } from "./Tools/MemberFunctions";
+
+// 모든 요청에 withCredentials가 true로 설정됩니다.
+axios.defaults.withCredentials = true;
+
+const Wrapper = styled.div`
+  width: 100vw;
+  height: auto;
+  //height: auto;
+  position: relative;
+`;
+
+const Container = styled.main`
+  width: 100%;
+  height: auto;
+  background-color: ${(props) =>
+    props.isDark ? "var(--black-700)" : "var(--white-50)"};
+  transition: all 0.5s linear;
+
+  @media screen and (min-width: 900px) {
+    margin-top: 100px;
+  }
+`;
+
 function App() {
-  return <div>App!</div>;
+  const [searchCategory, setSearchCategory] = useState("productName");
+  const [keyword, setKeyword] = useState("");
+
+  const isDark = useSelector((state) => state.ModeReducer);
+  const dispatch = useDispatch();
+  const userState = useSelector((state) => state.UserReducer);
+
+  useEffect(() => {
+    (async () => {
+      if (userState.login) {
+        const myInfo = await getMemberInfo(userState.userInfo);
+
+        if (myInfo === null) {
+          toast("토큰이 만료되었습니다.");
+          dispatch(handleLogout());
+          return;
+        }
+      }
+    })();
+  }, []);
+
+  return (
+    <Wrapper>
+      <Header
+        searchCategory={searchCategory}
+        setSearchCategory={setSearchCategory}
+        keyword={keyword}
+        setKeyword={setKeyword}
+      />
+      <Container isDark={isDark}>
+        <Routes>
+          <Route path="/signup" element={<SignUp />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/mypage" element={<Mypage />} />
+          <Route path={"/sell/*"} element={<Sell />} />
+          <Route path={"/admin/*"} element={<Admin />} />
+          <Route path="/payment" element={<Payment />} />
+          <Route path={"/oauth2/*"} element={<KakaoLogin />} />
+          <Route path="/Pay" element={<SelectPay />} />
+          <Route path="/404" element={<NotFound />} />
+          <Route path="/api/payments/success" element={<PaySuccessPage />} />
+          <Route path="/api/payments/cancel" element={<PayCancelPage />} />
+          <Route path="/api/payments/fail" element={<PayFailPage />} />
+          <Route path="/:id" element={<Detail />} />
+          <Route
+            path="/"
+            element={
+              <Main
+                searchCategory={searchCategory}
+                setSearchCategory={setSearchCategory}
+                keyword={keyword}
+                setKeyword={setKeyword}
+              />
+            }
+          />
+        </Routes>
+      </Container>
+      <ChatBox />
+    </Wrapper>
+  );
 }
 
 export default App;
diff --git a/frontend/src/Components/Admin/AdminProductCard.jsx b/frontend/src/Components/Admin/AdminProductCard.jsx
@@ -0,0 +1,104 @@
+import styled from "@emotion/styled";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import AdminProductModal from "./AdminProductModal";
+
+const Container = styled.div`
+  background-color: transparent;
+  width: 250px;
+  height: 350px;
+  perspective: 1000px;
+  border-radius: 10px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+`;
+
+const Inner = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+`;
+
+const Front = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 2em;
+  backface-visibility: hidden;
+  background-color: ${(props) =>
+    props.isDark ? "var(--white-50)" : "var(--white)"};
+  color: var(--black-700);
+  border: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Img = styled.div`
+  display: flex;
+  align-items: center;
+  border: none;
+  border-radius: 30px;
+  width: 100%;
+  height: 200px;
+  background-image: url(${(props) => props.bgphoto});
+  background-size: cover;
+  background-position: center;
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+`;
+
+const Infos = styled.div`
+  width: 100%;
+  height: 150px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Info = styled.h5`
+  font-size: 15px;
+  margin: 0;
+`;
+
+export default function AdminProductCard({ campground }) {
+  const isDark = useSelector((state) => state.ModeReducer);
+  const [openModal, setOpenModal] = useState(false);
+  const [seller, setSeller] = useState("");
+  const [isSellerLoading, setIsSellerLoading] = useState(false);
+
+  const handleOpenModal = () => {
+    setOpenModal((prev) => true);
+  };
+
+  const handleCloseModal = () => {
+    setOpenModal((prev) => false);
+  };
+
+  return (
+    <>
+      <Container onClick={handleOpenModal}>
+        <Inner className="inner">
+          <Front isDark={isDark}>
+            <Img bgphoto={campground.imageUrl} />
+            <Infos>
+              <Info>{`이름: ${campground.productName}`}</Info>
+              <Info>{`위치: ${campground.location}`}</Info>
+              <Info>{`가격: ${campground.productPrice}`}</Info>
+            </Infos>
+          </Front>
+        </Inner>
+      </Container>
+      <AdminProductModal
+        isOpen={openModal}
+        closeModal={handleCloseModal}
+        campground={campground}
+      />
+    </>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ @@
     /build
     # misc
+    .env
     .DS_Store
     .env.local
     .env.development.local
@@ Expand Down @@