Merge pull request #240 from oreumi-dreamer/chohee

헤더 active조정 +2

src/components/header/Header.jsx

@@ -9,57 +9,46 @@ import useMediaQuery from "@/hooks/styling/useMediaQuery";
 import NarrowHeader from "./NarrowHeader";
 import useTheme from "@/hooks/styling/useTheme";
 import WritePost from "../write/WritePost";
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
 export default function Header() {
   const buttonRef = useRef(null);
   const { isOpen, modalType } = useSelector((state) => state.modal);
   const { isActive } = useSelector((state) => state.activeState);
+  const { user } = useSelector((state) => state.auth);
+  const { userId } = user || {};
   const { theme, changeTheme } = useTheme();
   const isNarrowHeader = useMediaQuery("(max-width: 1152px)");
   const dispatch = useDispatch();
   const router = useRouter();
+  const pathname = usePathname();
   const isLightMode =
     theme === "light" || localStorage.getItem("theme") === "light";
   const isDarkMode =
     theme === "dark" || localStorage.getItem("theme") === "dark";
 
-  const getActiveStateFromURL = (path) => {
-    switch (path) {
-      case "/":
-        return "홈";
-      case "/search":
-        return "검색";
-      case "/alarm":
-        return "알람";
-      case "/tomong":
-        return "토몽";
-      default:
-        if (/^\/[\wㄱ-ㅎ가-힣._~%\-]+$/.test(path)) {
-          return "프로필";
-        }
-        return "";
+  const getActiveStateFromURL = (pathname) => {
+    const decodedPath = decodeURIComponent(pathname);
+    if (pathname === "/") {
+      return "홈";
+    } else if (pathname === "/search") {
+      return "검색";
+    } else if (pathname === "/tomong") {
+      return "토몽 AI";
+    } else if (userId && decodedPath.includes(`/users/${userId}`)) {
+      return "프로필";
+    } else {
+      return "";
     }
   };
 
-  const handleURLChange = () => {
-    const currentPath = window.location.pathname;
-    const newActiveState = getActiveStateFromURL(currentPath);
-    dispatch(setActiveState(newActiveState));
-  };
-
-  // URL 변경 감지 및 상태 업데이트
   useEffect(() => {
-    handleURLChange(); // 초기 URL 상태 설정
-
-    window.addEventListener("popstate", handleURLChange);
-    return () => {
-      window.removeEventListener("popstate", handleURLChange);
-    };
-  }, []);
+    const newActiveState = getActiveStateFromURL(pathname);
+    dispatch(setActiveState(newActiveState));
+  }, [pathname, dispatch, userId, router.isReady]);
 
   useEffect(() => {
     dispatch(closeModal());
-  }, []);
+  }, [dispatch]);
 
   const handleActiveBtn = (btn) => {
     dispatch(setActiveState(btn));

src/components/header/NarrowHeader.jsx

@@ -43,12 +43,7 @@ export default function NarrowHeader({
       href: "/search",
       img: "/images/search.svg",
     },
-    {
-      label: "알람",
-      className: "alarm-btn",
-      href: "/alarm",
-      img: "/images/alarm.svg",
-    },
+
     {
       label: "토몽",
       className: "tomong-btn",

src/components/header/WideHeader.jsx

@@ -20,7 +20,7 @@ export default function WideHeader({
 }) {
   const { isOpen } = useSelector((state) => state.modal);
   const { user } = useSelector((state) => state.auth);
-  const { userId, userName, profileImageUrl } = user;
+  const { userId, profileImageUrl } = user;
   const [modalStyle, setModalStyle] = useState({});
   const modalRef = useRef(null);
   const dispatch = useDispatch();
@@ -37,7 +37,6 @@ export default function WideHeader({
   const navItems = [
     { label: "홈", className: "home-btn", href: "/" },
     { label: "검색", className: "search-btn", href: "/search" },
-    { label: "알람", className: "alarm-btn", href: "/alarm" },
     { label: "토몽 AI", className: "tomong-btn", href: "/tomong" },
   ];
 
@@ -57,7 +56,7 @@ export default function WideHeader({
         }
       };
 
-      updatePosition(); // Initial position update
+      updatePosition();
       window.addEventListener("resize", updatePosition);
 
       const cleanup = outsideClickModalClose(modalRef, buttonRef, () => {

src/components/main/MainList.module.css

@@ -22,6 +22,17 @@
   position: relative;
 }
 
+.post-user-info .user-name,
+.post-user-info .user-id {
+  max-width: 20rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.post-user-info .user-name{
+  max-width: 20rem;
+}
+
 div.divider {
   padding: 0;
 }

src/components/profile/Profile.module.css

@@ -144,10 +144,6 @@
   margin-bottom: 1.6rem;
 }
 
-.profile-form-pic label {
-  margin-right: 4.5rem;
-}
-
 .profile-form-info {
   display: flex;
   width: 100%;
@@ -440,8 +436,4 @@
   .profile-form-pic img {
     margin-right: 0;
   }
-
-  .profile-form-pic label {
-    margin: 0;
-  }
 }