From 22665411e4e6a87d8f5bd5c6f87ebae5a611688b Mon Sep 17 00:00:00 2001 From: Seonghwan Sim Date: Sun, 28 Jul 2024 14:12:59 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/project/List.jsx | 36 ++++++++++++++++++++---------------- src/styles/list.css | 21 ++++++++++++--------- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/src/pages/project/List.jsx b/src/pages/project/List.jsx index cac10a0..71a750b 100644 --- a/src/pages/project/List.jsx +++ b/src/pages/project/List.jsx @@ -41,22 +41,26 @@ export default function List() { return ( <>
- -
- {imageData.map((image) => ( -
-
- {/* {image.title} */} -

{image.title}

-
- ))} +
+ +
+ {imageData.map((image) => ( +
+
+
+
{image.title}
+
+
+
+ ))} +
); diff --git a/src/styles/list.css b/src/styles/list.css index c9c66ae..b2a236e 100644 --- a/src/styles/list.css +++ b/src/styles/list.css @@ -1,22 +1,25 @@ .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; + + width: 100%; /* 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: 200px; background-repeat: no-repeat; + background-size: contain; + + display: flex; +} + +.img-inner { } From f1a5e87bb5ac6f6cb1f150b9ae634d70335c3488 Mon Sep 17 00:00:00 2001 From: Seonghwan Sim Date: Sun, 28 Jul 2024 15:07:12 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 +- src/components/Header.jsx | 49 +++++++++++++++++++++++++++++++++---- src/components/Slide.jsx | 2 +- src/imgs/test1.png | Bin 137018 -> 247361 bytes src/imgs/test2.png | Bin 129712 -> 129977 bytes src/imgs/test3.png | Bin 257074 -> 113820 bytes src/imgs/test4.png | Bin 121582 -> 122513 bytes src/pages/project/List.jsx | 18 ++++++++------ src/styles/list.css | 28 ++++++++++++++++----- 9 files changed, 78 insertions(+), 21 deletions(-) diff --git a/src/App.js b/src/App.js index 363ce13..b0c37ad 100644 --- a/src/App.js +++ b/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 ( diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 4e28e14..8a97c66 100644 --- a/src/components/Header.jsx +++ b/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 (