Merge pull request #15 from LikeLionHGU/hwan_#14/전체-프로젝트-페이지

Hwan #14/전체 프로젝트 페이지

src/App.js

@@ -1,5 +1,5 @@
 import { Route, BrowserRouter, Routes } from "react-router-dom";
-import Main from "./pages/Mainpage";
+import Main from "./pages/project/List";
 
 function App() {
   return (

src/components/Header.jsx

@@ -2,11 +2,20 @@ import LogoImg from "../imgs/logo.svg";
 import SearchImg from "../imgs/search.svg";
 import ProfileImg from "../imgs/myprofile.svg";
 import "../styles/header.css";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+
+function useQuery() {
+  return new URLSearchParams(useLocation().search);
+}
 
 // mode == 0 : 메인 페이지, mode == 1 : 전체 페이지, mode == 2 : 프로젝트 상세 페이지
 export default function Header({ mode }) {
   const [selectedCategory, setSelectedCategory] = useState("소설");
+  const [onLogin, setOnLogin] = useState();
+  const query = useQuery();
+  const navigate = useNavigate();
 
   const categories = {
     소설: ["전체", "공포", "로맨스", "미스터리/추리", "역사", "판타지", "SF"],
@@ -21,6 +30,23 @@ export default function Header({ mode }) {
     setSelectedCategory(category);
   };
 
+  useEffect(() => {
+    const token = query.get("token");
+
+    if (token) {
+      localStorage.setItem("token", token);
+      setOnLogin(true);
+      navigate("/", { replace: true });
+    }
+    const storedToken = localStorage.getItem("token");
+
+    if (storedToken == null) {
+      setOnLogin(false);
+      navigate("/", { replace: true });
+      return;
+    }
+  }, []);
+
   return (
     <div id="header">
       <div className="headerContainer">
@@ -38,10 +64,23 @@ export default function Header({ mode }) {
         )}
 
         <div className="headerRight">
-          <button id="goWrite">책 발간하기</button>
-          <div>
-            <img className="profile" src={ProfileImg} alt="profile" />
-          </div>
+          {onLogin ? (
+            <>
+              <button id="goWrite">책 발간하기</button>
+              <div>
+                <img className="profile" src={ProfileImg} alt="profile" />
+              </div>
+            </>
+          ) : (
+            <button
+              onClick={() =>
+                (window.location.href =
+                  "https://likelion.info/login/oauth2/google")
+              }
+            >
+              로그인
+            </button>
+          )}
         </div>
       </div>
       <div className="categoryContainer">

src/components/Slide.jsx

@@ -30,7 +30,7 @@ export default function Slide({ mode }) {
       )}
       <Swiper
         // 한번에 보이는 슬라이드
-        slidesPerView={mode === 1 ? 2.5 : 4}
+        slidesPerView={mode === 1 ? 2.7 : 4}
         // 슬라이드 사이 거리
         spaceBetween={15}
         // 중간으로

src/pages/project/List.jsx

@@ -39,25 +39,31 @@ export default function List() {
     setDropdown(event.target.value);
   };
   return (
-    <>
+    <div className="main-container">
       <Header mode={1} />
-      <select value={dropdown} onChange={handleSelectChange}>
-        <option value="option1">모집 중</option>
-        <option value="option2">완결</option>
-        <option value="option3">연재중</option>
-      </select>
-      <div className="list-container">
-        {imageData.map((image) => (
-          <div key={image.id} className="list-card">
-            <div
-              className="list-img"
-              style={{ backgroundImage: `url(${image.src})` }}
-            />
-            {/* <img src={image.src} alt={image.title} className="list-img" /> */}
-            <h2>{image.title}</h2>
-          </div>
-        ))}
+      <div className="grid-container">
+        <div className="dropdown-container">
+          <select value={dropdown} onChange={handleSelectChange}>
+            <option value="option1">모집 중</option>
+            <option value="option2">완결</option>
+            <option value="option3">연재중</option>
+          </select>
+        </div>
+        <div className="list-container">
+          {imageData.map((image) => (
+            <div key={image.id} className="list-card">
+              <div
+                className="list-img"
+                style={{ backgroundImage: `url(${image.src})` }}
+              >
+                <div className="img-inner">
+                  <div>{image.title}</div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
-    </>
+    </div>
   );
 }

src/styles/list.css

@@ -1,22 +1,41 @@
+.main-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.grid-container {
+  display: flex;
+  flex-direction: column;
+
+  width: 80%;
+}
+
+.dropdown-container {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
 .list-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  /* gap: 10px; */
+  grid-template-columns: repeat(4, 1fr);
+  /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
+  grid-gap: 10px;
+
   /* padding: 10px; */
 }
 
 .list-card {
-  /* border: 1px solid #ccc; */
-  border-radius: 8px;
-  overflow: hidden;
   text-align: center;
-  height: 300px;
 }
 
 .list-img {
-  width: 100%;
-  height: 100%;
-  background-size: cover;
-  background-position: center;
+  height: 296px;
   background-repeat: no-repeat;
+  background-size: cover;
+
+  display: flex;
+}
+
+.img-inner {
 }