Merge pull request #219 from SystemConsultantGroup/develop

[FIX] 프로젝트 관련 에러 수정

Author: shj1081

src/components/common/Header/Header.module.css

@@ -386,6 +386,21 @@
   }
 }
 
+.overlay {
+  position: fixed;
+  top: auto;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  z-index: 9;
+
+  display: none;
+}
+.overlay.show {
+  display: block;
+}
+
 .shortcuts {
   display: flex;
   flex-direction: row;

src/components/common/Header/Header.tsx

@@ -40,9 +40,24 @@ export function Header() {
         <HeaderTopNav setIsOpen={setIsOpen} />
         <HeaderToolBar isOpen={isOpen} setIsOpen={setIsOpen} />
       </div>
-      <div className={`${styles.handout} ${isOpen ? styles.show : ""}`}>
-        <HandoutOverview setIsOpen={setIsOpen} />
-      </div>
+
+      <>
+        {/* handout 컨테이너 영역 클릭 시 창 닫기 */}
+        <div
+          className={`${styles.handout} ${isOpen ? styles.show : ""}`}
+          onClick={() => setIsOpen(false)}
+        >
+          {/* content 영역 클릭 이벤트 차단 */}
+          <div onClick={(e) => e.stopPropagation()}>
+            <HandoutOverview setIsOpen={setIsOpen} />
+          </div>
+        </div>
+        {/* handout 아래 overlay 영역 클릭 시 창 닫기 */}
+        <div
+          className={`${styles.overlay} ${isOpen ? styles.show : ""}`}
+          onClick={() => setIsOpen(false)}
+        />
+      </>
     </>
   );
 }

src/components/common/ProjectCard/ProjectCardLikeSection.tsx

@@ -8,7 +8,7 @@ import {
   IconThumbUpFilled,
 } from "@tabler/icons-react";
 import classes from "./ProjectCard.module.css";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useAuth } from "../Auth";
 
 export interface ProjectCardLikeSectionProps {
@@ -49,6 +49,13 @@ export function ProjectCardLikeSection({
       alert("프로젝트를 북마크에 추가하려면 로그인해야 합니다.");
     }
   };
+
+  useEffect(() => {
+    setLike(likes);
+    setIsLike(isLiked);
+    setIsMark(isMarked);
+  }, [likes, isLiked, isMarked]);
+
   return (
     <CardSection className={classes["like-section"]}>
       <Group align="center" justify="space-between" p="8px 16px">

src/components/common/SubHeadNavbar/SubHeadNavbar.module.css

@@ -50,3 +50,15 @@
     display: none; /* 모바일 화면에서 숨김 */
   }
 }
+
+/* 다크모드 색상 */
+@media (prefers-color-scheme: dark) {
+  .navbar {
+    background-color: #2e3135;
+    color: #ffffff;
+  }
+
+  .navitem a {
+    color: #ffffff;
+  }
+}

src/components/pages/ProjectDetail/ProjectDetailInfo.tsx

@@ -99,6 +99,8 @@ export function ProjectDetailInfo({ projectId }: Props) {
     fetchProject();
   }, [projectId, handleRefresh]);
 
+  useEffect(() => {}, [isThumbup, isInterest]);
+
   const fetchImages = (thumbnailId: number, posterId: number) => {
     if (thumbnailId) {
       getFileUrlById(thumbnailId)