네비게이션 개선1

Author: Danto7632

src/components/community/CommunityWrite.jsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import {
     FaBold, FaItalic, FaStrikethrough, FaLink, FaPalette, FaCode, FaQuoteRight,
     FaImage, FaHeading, FaListUl, FaListOl, FaMinus
 } from "react-icons/fa";
 import "./CommunityWrite.css";
 import config from "../../config";
+import { promptLogin } from "../../utils/auth";
 
 // ✅ 백엔드 ENUM과 일치하는 허용 태그
 const ALLOWED_TAGS = [
@@ -47,6 +48,7 @@ function parseTagsInput(input) {
 export default function CommunityWrite() {
     const navigate = useNavigate();
     const location = useLocation();
+    const loginPromptedRef = useRef(false);
 
     const defaultGuide = `- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
 - 마크다운, 단축키를 이용해서 편리하게 글을 작성할 수 있어요.
@@ -61,8 +63,9 @@ export default function CommunityWrite() {
     // ✅ 비회원 접근 차단: 알림 + 커뮤니티 페이지로 이동
     useEffect(() => {
         const token = localStorage.getItem("token");
-        if (!token) {
-            alert("로그인이 필요합니다.");
+        if (!token && !loginPromptedRef.current) {
+            loginPromptedRef.current = true;
+            promptLogin();
             navigate("/community", { replace: true, state: { from: location.pathname } });
         }
     }, [navigate, location.pathname]);
@@ -77,7 +80,7 @@ export default function CommunityWrite() {
     const handleSubmit = async () => {
         const token = localStorage.getItem("token");
         if (!token) {
-            // 🚨 여기서는 다시 알림 필요 없음 → 이미 진입 차단됨
+            promptLogin();
             return;
         }
 

src/components/community/PostDetail.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState, useMemo, useRef, useCallback } from "react"
 import { useParams, useNavigate } from "react-router-dom";
 import "./PostDetail.css";
 import config from "../../config";
+import { promptLogin } from "../../utils/auth";
 
 const parseIntSafe = (v) => {
     const n = Number(v);
@@ -58,11 +59,6 @@ export default function PostDetail() {
         ? tokenRaw.startsWith("Bearer ") ? tokenRaw : `Bearer ${tokenRaw}`
         : null;
 
-    const requestLogin = useCallback(() => {
-        alert("로그인이 필요합니다.");
-        window.dispatchEvent(new CustomEvent("dv:open-login-modal"));
-    }, []);
-
     // 좋아요 수 및 내 상태 재조회
     const refreshLikeStatus = async () => {
         try {
@@ -184,7 +180,7 @@ export default function PostDetail() {
     // 좋아요 토글
     const handleToggleLike = async () => {
         if (!authHeader) {
-            requestLogin();
+            promptLogin();
             return;
         }
         if (liking) return;
@@ -238,7 +234,7 @@ export default function PostDetail() {
     const handleCreateComment = async () => {
         if (!newComment.trim()) return;
         if (!authHeader) {
-            requestLogin();
+            promptLogin();
             return;
         }
 
@@ -275,7 +271,7 @@ export default function PostDetail() {
     const handleCreateReply = async (parentId) => {
         if (!replyContent.trim()) return;
         if (!authHeader) {
-            requestLogin();
+            promptLogin();
             return;
         }
 

src/components/login/Login.css

@@ -80,17 +80,26 @@
 }
 
 .auth-links a,
+.auth-links button,
 .auth-links .signup-action {
     color: #6a1b9a;
     cursor: pointer;
     text-decoration: none;
 }
 
 .auth-links a:hover,
+.auth-links button:hover,
 .auth-links .signup-action:hover {
     text-decoration: underline;
 }
 
+.auth-links button {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+}
+
 .auth-links .separator {
     color: #ccc;
 }
@@ -189,6 +198,7 @@
 }
 
 .dark-mode .auth-links a,
+.dark-mode .auth-links button,
 .dark-mode .auth-links .signup-action {
     color: #b88eff;
 }

src/components/login/Login.jsx

@@ -46,6 +46,10 @@ function Login({ onClose, onLoginSuccess }) {
         }
     };
 
+    const handleComingSoon = (message) => {
+        alert(message);
+    };
+
     return (
         <div className="modal-overlay">
             <div className="modal-content">
@@ -86,7 +90,7 @@ function Login({ onClose, onLoginSuccess }) {
                 </form>
 
                 <div className="auth-links">
-                    <a href="/forgot-password">비밀번호 찾기</a>
+                    <button type="button" onClick={() => handleComingSoon('비밀번호 찾기 기능은 준비 중입니다.')}>비밀번호 찾기</button>
                     <span className="separator">|</span>
                     <span
                         className="signup-action"
@@ -98,7 +102,7 @@ function Login({ onClose, onLoginSuccess }) {
                         회원가입
                     </span>
                     <span className="separator">|</span>
-                    <a href="/forgot-password">아이디 찾기</a>
+                    <button type="button" onClick={() => handleComingSoon('아이디 찾기 기능은 준비 중입니다.')}>아이디 찾기</button>
                 </div>
 
                 <div className="divider">간편 로그인</div>

src/components/mypage/Sidebar.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import './Sidebar.css';
-import { FaTachometerAlt, FaFolderOpen, FaComments, FaGlobe, FaShareAlt, FaCog } from 'react-icons/fa';
+import { FaTachometerAlt, FaFolderOpen, FaComments, FaShareAlt, FaCog } from 'react-icons/fa';
 
 const Sidebar = ({nickname}) => {
     const menuItems = [
         { label: '대시보드', path: '/mypage', icon: <FaTachometerAlt /> },
         { label: '프로젝트', path: '/mypage/project', icon: <FaFolderOpen /> },
         { label: '커뮤니티', path: '/mypage/community', icon: <FaComments /> },
-        { label: '네트워크', path: '/mypage/network', icon: <FaGlobe /> },
         { label: '공유됨', path: '/mypage/shared', icon: <FaShareAlt /> },
         { label: '설정', path: '/mypage/setting', icon: <FaCog /> },
     ];

src/utils/auth.js

@@ -0,0 +1,4 @@
+export function promptLogin(message = "로그인이 필요합니다.") {
+    alert(message);
+    window.dispatchEvent(new CustomEvent("dv:open-login-modal"));
+}