Merge branch 'main' into hwan_#78/자잘한-에러-잡기

LikeLionHGU · Aug 3, 2024 · 2b5cff0 · 2b5cff0
2 parents 05be944 + e80f208
commit 2b5cff0
Show file tree

Hide file tree

Showing 21 changed files with 620 additions and 110 deletions.
diff --git a/src/App.js b/src/App.js
@@ -10,6 +10,8 @@ import Board from "./pages/Board";
 import Setting from "./pages/project/manager/Setting";
 import Galpi from "./pages/project/manager/Galpi";
 import Approval from "./pages/project/manager/Approval";
+import Profile from "./pages/Profile";
+
 import { RecoilRoot } from "recoil";
 import BoardDetail from "./pages/BoardDetail";
 
@@ -30,6 +32,7 @@ function App() {
           <Route path="/mypage/manage" element={<Setting />} />
           <Route path="/approval" element={<Approval />} />
           <Route path="/boardDetail/" element={<BoardDetail/>} />
+          <Route path="/profile" element={<Profile/>}/>
         </Routes>
       </BrowserRouter>
     </RecoilRoot>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -18,6 +18,7 @@ export default function Header({ mode }) {
   const [isLoading, setIsLoading] = useState(true); // 로딩 상태 추가
   const query = useQuery();
   const navigate = useNavigate();
+
 
   const categories = {
     소설: ["전체", "공포", "로맨스", "미스터리/추리", "역사", "판타지", "SF"],
@@ -28,16 +29,28 @@ export default function Header({ mode }) {
     기타: ["기타"],
   };
 
+  // const checkStatus = (status) => {
+  //   if(status === "모집 중") {
+  //     setIsRecruit(true);
+  //   } else if(status === "연재 중") {
+  //     setIsFinished(false);
+  //   } else { // 완결
+  //     setIsFinished(true);
+  //   }
+  // };
+
   const handleCategoryClick = (category) => {
     if (mode === 0) {
       // 카테고리를 넘겨야 함
       setSelectedCategory(category);
-      navigate("list", { state: { category } });
+      navigate("/list", { state: { category: null, bigCategory: category, isFinished: false, isRecruit: true} });
     } else if (mode === 1) {
       setSelectedCategory(category);
     }
   };
 
+
+
   useEffect(() => {
     const token = query.get("token");
 
@@ -154,6 +167,7 @@ export default function Header({ mode }) {
               <button
                 key={category}
                 onClick={() => {
+
                   handleCategoryClick(category);
                 }}
               >

diff --git a/src/components/Slide.jsx b/src/components/Slide.jsx
@@ -46,7 +46,7 @@ const SlideContent = ({ data, mode }) => {
               rgba(255, 255, 255, 1)
             ), 
             url(${data.imageAddress})`,
-            boxShadow: '0px 2.36px 4.72px 0px rgba(0, 0, 0, 20%)',
+            boxshadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
           }}
           onClick={() => handleSlideClick(data.id)}
         ></div>
@@ -57,14 +57,15 @@ const SlideContent = ({ data, mode }) => {
       className="slide-content"
       style={{
         backgroundImage: `url(${data.imageAddress})`,
+        boxShadow: '0px 4px 8px 0px rgba(0, 0, 0, 20%)',
       }}
       alt={data.name}
       onClick={() => handleSlideClick(data.id)}
     >
       <div className="slide-book-info">
-        <div>{data.name}</div>
-        <div>{data.description}</div>
-        <div>{data.category}</div>
+        <div className="slide-content-name">{data.name}</div>
+        <div className="slide-content-description">{data.description}</div>
+        <div className="slide-content-category">{data.category}</div>
       </div>
     </div>
   ) : (
@@ -109,21 +110,27 @@ export default function Slide({ mode, data }) {
   return (
     <div
       className="slide-container"
-      style={mode === 1 ? { height: "345px" } : { height: "200px" }}
+      style={
+        mode === 1 
+        ? { height: "345px" } 
+        : mode === 2 
+        ? { height: "380px", backgroundColor: 'rgba(0, 0, 0, 0)', zIndex : 10} // 100% 투명도
+        : { height: "380px" }
+      }
     >
       {mode === 1 ? (
         // <div className="arrow"></div>
         <></>
       ) : (
-        <button className="slide-arrow" ref={prevRef}>
+        <button className="slide-arrow-prev" ref={prevRef}>
           <img src={PrevArrowImg} alt="prevarrow" />
         </button>
       )}
       <Swiper
         // 한번에 보이는 슬라이드
         slidesPerView={mode === 1 ? 2.7 : mode === 2 ? 6.3 : 4}
         // 슬라이드 사이 거리
-        spaceBetween={15}
+        spaceBetween={26}
         // 중간으로
         // centeredSlides={true}
         // 무한
@@ -160,7 +167,7 @@ export default function Slide({ mode, data }) {
         // <div className="arrow"></div>
         <></>
       ) : (
-        <button className="slide-arrow" ref={nextRef}>
+        <button className="slide-arrow-next" ref={nextRef}>
           <img src={NextArrowImg} alt="nextarrow" />
         </button>
       )}

diff --git a/src/pages/BoardDetail.jsx b/src/pages/BoardDetail.jsx
@@ -31,7 +31,7 @@ export default function BoardDetail() {
 
         try {
             const response = await axios.post(
-                `https://likelion.info/post/community/like/${id}`,
+                `https://likelion.info/post/community/comment/like/${id}`,
                 {},
                 {
                     headers: { Authorization: `Bearer ${token}` },
@@ -50,12 +50,12 @@ export default function BoardDetail() {
         }
     };
 
-    const handleSetCommentsLike = async () => {
+    const handleSetCommentsLike = async (commentId) => {
         const token = localStorage.getItem("token");
 
         try {
             const response = await axios.post(
-                `https://likelion.info/community/comment/add`,
+                `https://likelion.info/community/comment/like/switch/${commentId}`,
                 {},
                 {
                     headers: { Authorization: `Bearer ${token}` },
@@ -85,6 +85,7 @@ export default function BoardDetail() {
                 src={comment.isLike ? RedLikeImg : GrayLikeImg}
                 alt="like"
             />
+            <div>{comment.likeCount}</div>
         </div>
     );
 

diff --git a/src/pages/Mainpage.jsx b/src/pages/Mainpage.jsx
@@ -4,15 +4,16 @@ import { useNavigate } from "react-router-dom";
 import "../styles/mainpage.css";
 import { useEffect, useState } from "react";
 import axios from "axios";
+import { useLocation } from "react-router-dom";
 
 export default function Mainpage() {
   const navigate = useNavigate();
   const [bestProjects, setBestProjects] = useState([]);
   const [projects, setProjects] = useState([]);
 
-  function toList() {
-    navigate("/list");
-  }
+  const toList = (id) => { // 너 일단 보류
+    navigate("/list", { state: { id } });
+  };
 
   useEffect(() => {
     const token = localStorage.getItem("token");
@@ -60,11 +61,17 @@ export default function Mainpage() {
     console.log(bestProjects);
   }, [bestProjects]);
 
-  // useEffect(() => {
-  //   console.log(
-  //     projects.filter((project) => project.isRecruit && project.isPublic)
-  //   );
-  // }, [projects]);
+  useEffect(() => {
+    console.log(
+      projects.filter((project) => project.isRecruit && project.isPublic)
+    );
+  }, [projects]);
+
+  const handleCategoryClick = (category, isRecruit, isFinished) => {
+
+    navigate("/list", { state: { category: null, bigCategory: category, isFinished: isFinished, isRecruit: isRecruit} });
+
+  };
 
   return (
     <div className="main-page">
@@ -82,8 +89,9 @@ export default function Mainpage() {
           <div className="main-section-subtitle">
             <div>함께 책 만들 작가 모집</div>
             <div
+              className="main-section-more"
               onClick={() => {
-                toList();
+                handleCategoryClick("소설", true, false);
               }}
             >
               더보기
@@ -102,8 +110,9 @@ export default function Mainpage() {
           <div className="main-section-subtitle">
             <div>완결된 책</div>
             <div
+              className="main-section-more"
               onClick={() => {
-                toList();
+                handleCategoryClick("소설", false, true);
               }}
             >
               더보기
@@ -122,8 +131,9 @@ export default function Mainpage() {
           <div className="main-section-subtitle">
             <div>진행 중인 책</div>
             <div
+              className="main-section-more"
               onClick={() => {
-                toList();
+                handleCategoryClick("소설", false, false);
               }}
             >
               더보기

diff --git a/src/pages/Mypage.jsx b/src/pages/Mypage.jsx
@@ -76,20 +76,20 @@ export default function Mypage() {
           <img className="wall-pape-cover" src={wallpaper} alt="img" />
           <div className="overlay-content">
             <h1>나의 프로필</h1>
-            <div className="profile-section">
-              <img className="profile-cover" src={profile} alt="img" />
+            <div className="my-page-profile-section">
+              <img className="my-page-profile-cover" src={profile} alt="img" />
             </div>
           </div>
         </div>
 
-        <div className="profile-details">
-          <div className="profile-details-exp">
-            <div className="profile-details-edit">
+        <div className="my-page-profile-details">
+          <div className="my-page-profile-details-exp">
+            <div className="my-page-profile-details-edit">
               <div>{userInfo.name}</div>
               <button>
                 <div>
                   <img
-                    className="profile-edit"
+                    className="my-page-profile-edit"
                     src={EditImg}
                     alt="profile/edit"
                     onClick={() => {
@@ -103,16 +103,16 @@ export default function Mypage() {
             <div>이메일</div>
             <div>{userInfo.email}</div>
           </div>
-          <div className="profile-details-count">
-            <div className="books-progress-count">
+          <div className="my-page-profile-details-count">
+            <div className="my-page-books-progress-count">
               <div>진행 중인 책</div>
               <div>{userInfo.progressProjects}권</div>
             </div>
-            <div className="books-completed-count">
+            <div className="my-page-books-completed-count">
               <div>완결된 책</div>
               <div>{userInfo.finishedProjects}권</div>
             </div>
-            <div className="books-subscribe-count">
+            <div className="my-page-books-subscribe-count">
               <div>구독자</div>
               <div>{userInfo.subscribeUserCounts}명</div>
             </div>
@@ -122,7 +122,6 @@ export default function Mypage() {
         <div className="my-book-lists">
           <div className="books-progress">
             <h3>진행 중인 책</h3>
-
             <Slide mode={2} data={userInfo.progressProjectList || []} />
           </div>
           <div className="books-completed">

diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
@@ -1,5 +1,91 @@
 // 상대방 프로필 보이는 페이지
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import EditImg from "../imgs/edit.svg";
+import ImgNone from "../imgs/img_none.svg";
+import Header from "../components/Header";
+import Slide from "../components/Slide";
+import axios from "axios";
+
+import "../styles/profile.scss";
+
 export default function Profile() {
-    return <>Hi</>;
-  }
+  const navigate = useNavigate();
+  const [wallpaper, setWallPaper] = useState(`${ImgNone}`);
+  const [profile, setProFile] = useState(`${ImgNone}`);
+  const [userInfo, setUserInfo] = useState([]);
+  const [isSubscribed, setIsSubscribed] = useState(false);
+
+  const handleSubscribe = () => {
+    setIsSubscribed(!isSubscribed);
+  };
+
+  return(
+    <div className="profile-page">
+      <Header mode={2} />
+    <div className="profile-container">
+      <div className="profile-wall-paper-section">
+        <img className="profile-wall-pape-cover" src={wallpaper} alt="img" />
+
+        <div className="profile-img-section">
+              <img className="profile-img-cover" src={profile} alt="img" />
+        </div>
+      </div>
+
+
+      <div className="profile-details">
+          <div className="profile-details-exp">
+            <div className="profile-details-edit">
+              <div>{userInfo.name}</div>
+            </div>
+            <div>{userInfo.userOneliner}</div>
+            <div>이메일</div>
+            <div>{userInfo.email}</div>
+          </div>
+          <div className="profile-details-count">
+            <div className="books-progress-count">
+              <div>진행 중인 책</div>
+              <div>{userInfo.progressProjects}권</div>
+            </div>
+            <div className="books-completed-count">
+              <div>완결된 책</div>
+              <div>{userInfo.finishedProjects}권</div>
+            </div>
+            <div className="books-subscribe-count">
+              <div>구독자</div>
+              <div>{userInfo.subscribeUserCounts}명</div>
+            </div>
+          </div>
+
+          <div>
+          <button onClick={handleSubscribe}>
+            {isSubscribed ? '구독중' : '구독하기'}
+          </button>
+          </div>
+
+        </div>
+
+        <div className="profile-book-lists">
+          <div className="profile-book-projects">
+            <div>
+              프로젝트
+            </div>
+            <Slide mode={2} data={userInfo.progressProjectList || []} />
+          </div>
+        </div>
+        </div>
+
+    </div>
+
+
+
+
+
+
+
+
+  )
+
+}