Merge pull request #22 from LikeLionHGU/hwan_#20/프로젝트-상세-페이지

Hwan #20/프로젝트 상세 페이지

src/App.js

@@ -2,6 +2,7 @@ import { Route, BrowserRouter, Routes } from "react-router-dom";
 import Main from "./pages/Mainpage";
 import Create from "./pages/Create";
 import List from "./pages/project/List";
+import Detail from "./pages/project/Detail";
 
 function App() {
   return (
@@ -10,6 +11,7 @@ function App() {
         <Route path="/" element={<Main />} />
         <Route path="/create" element={<Create />} />
         <Route path="/list" element={<List />} />
+        <Route path="/detail" element={<Detail />} />
       </Routes>
     </BrowserRouter>
   );

src/components/Header.jsx

@@ -56,6 +56,10 @@ export default function Header({ mode }) {
     navigate("/create");
   }
 
+  function toMain() {
+    navigate("/");
+  }
+
   if (isLoading) {
     return <div></div>; // 로딩 중일 때 표시할 내용
   }
@@ -64,11 +68,20 @@ export default function Header({ mode }) {
     <div id="header">
       <div className="header-headerContainer">
         <div>
-          <img src={LogoImg} alt="logo" />
+          <img
+            src={LogoImg}
+            alt="logo"
+            onClick={() => {
+              toMain();
+            }}
+          />
         </div>
         {/* 프로젝트 상세 페이지일 경우 검색창을 없앰 */}
         {mode === 2 ? (
-          <></>
+          <div
+            className="header-searchContainer"
+            style={{ border: "none" }}
+          ></div>
         ) : (
           <div className="header-searchContainer">
             <input className="header-searchBox" placeholder="책 제목, 작가명" />

src/pages/Mainpage.jsx

@@ -12,7 +12,7 @@ export default function Mainpage() {
 
   return (
     <div className="main-page">
-      <Header />
+      <Header mode={0} />
       <div className="main-page-container">
         <div className="main-section" id="best-book">
           <div className="main-section-above" id="best-above">

src/pages/project/Detail.jsx

@@ -1,5 +1,87 @@
+import Header from "../../components/Header";
+
+import TestImg from "../../imgs/test5.png";
+import LikeImg from "../../imgs/like.svg";
+import GrayLikeImg from "../../imgs/grayLike.svg";
+import RedLikeImg from "../../imgs/redLike.svg";
+
+import "../../styles/detail.css";
+import { useState } from "react";
+
 // 프로젝트 상세 페이지
 export default function Detail() {
-    return <>Hi</>;
-  }
-
+  const [like, setLike] = useState(false);
+
+  const handleSetLike = () => {
+    setLike(!like);
+  };
+  return (
+    <div id="detail-main">
+      <Header mode={2} />
+      <div className="detail-container">
+        <div className="detail-above">
+          <div className="detail-img-container">
+            <div
+              style={{ backgroundImage: `url(${TestImg})` }}
+              className="detail-img-back"
+            ></div>
+            <img src={TestImg} alt="img" id="detail-img-cover" />
+          </div>
+          <div className="detail-above-right">
+            <div className="detail-above-right-bottom">
+              <div className="detail-mywrite">나도 글쓰기</div>
+              <div className="detail-readbegin">처음부터 읽기</div>
+              <div className="detail-like-container">
+                <img
+                  src={LikeImg}
+                  alt="like"
+                  style={{ width: "22px", height: "20px" }}
+                />
+                <div>123</div>
+              </div>
+            </div>
+            <div>
+              <div>제목</div>
+              <div>저자</div>
+              <div>책 정보</div>
+              <div>정원</div>
+            </div>
+          </div>
+        </div>
+        <div id="detail-bookinfo">
+          <div>책 소개</div>
+          <div id="detail-contents">콘텐츠들</div>
+        </div>
+        <div id="detail-galpi-container">
+          <div>갈비 목록</div>
+          <div id="detail-galpi-list">
+            <div id="detail-galpi">
+              <div>1갈피</div>
+              <div>
+                <div>수정하기</div>
+                <div>설정</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <button>게시판 접속하기</button>
+        </div>
+        <div id="detail-comments-container">
+          <div>닉네임</div>
+          <div>날짜</div>
+          <div>이번 작품 너무 재밌어요!</div>
+          <div>
+            <img
+              onClick={() => {
+                handleSetLike();
+              }}
+              src={like ? RedLikeImg : GrayLikeImg}
+              alt="like"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/styles/detail.css

@@ -0,0 +1,127 @@
+#detail-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.detail-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 80%;
+  min-width: 900px;
+
+  margin-top: 50px;
+}
+
+.detail-img-container {
+  position: relative;
+  width: 100%;
+  height: 340px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  margin-right: 20px;
+}
+
+.detail-img-back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  opacity: 0.6;
+  z-index: 0;
+}
+
+#detail-img-cover {
+  position: relative;
+  z-index: 1;
+}
+
+.detail-above {
+  display: flex;
+
+  width: 100%;
+}
+
+.detail-above-right {
+  display: flex;
+  flex-direction: column-reverse;
+
+  width: 100%;
+
+  border: 1px solid #5ca54b;
+}
+
+.detail-mywrite {
+  flex: 3;
+  background-color: #5ca54b;
+  color: white;
+}
+.detail-readbegin {
+  flex: 3;
+}
+
+.detail-like-container {
+  flex: 1;
+}
+
+.detail-mywrite,
+.detail-readbegin {
+  border-right: 1px solid #5ca54b;
+}
+
+.detail-above-right-bottom {
+  display: flex;
+
+  border-top: 1px solid #5ca54b;
+}
+
+.detail-mywrite,
+.detail-readbegin,
+.detail-like-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.detail-like-container img {
+  cursor: pointer;
+}
+
+#detail-bookinfo {
+  width: 100%;
+}
+
+#detail-contents {
+  background-color: #f4f4f4;
+  width: 100%;
+  padding: 15px;
+  /* padding이 width를 넘어가는 현상 수정 */
+  box-sizing: border-box;
+}
+
+#detail-galpi-container {
+  width: 100%;
+}
+
+#detail-galpi-list {
+  background-color: #f4f4f4;
+  padding: 15px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+#detail-galpi {
+  background-color: white;
+}
+
+#detail-comments-container {
+  width: 100%;
+}

src/styles/header.css

@@ -45,7 +45,7 @@
   width: 80%;
 }
 
-img {
+#header img {
   cursor: pointer;
 }