로그인 필요 시 안내 및 UI 중앙 배치

Author: chaesunwoong

src/components/codecast/Codecast.css

@@ -3,10 +3,15 @@
 .broadcast-container {
     background-color: #ffffff;
     min-height: 100vh;
-    padding: 100px 20px;
+    display: flex;              /* 가운데 정렬용 */
+    justify-content: center;    /* 가로 가운데 */
+    align-items: center;        /* 세로 가운데 */
+    flex-direction: column;     /* 위아래 배치 */
+    padding: 20px;              /* 좌우만 여백 */
     text-align: center;
 }
 
+
 .broadcast-header {
     margin-bottom: 30px;
 }

src/components/community/Community.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import "./Community.css";
 
 const API_BASE = "http://52.79.145.160:8080";
@@ -24,19 +24,18 @@ export default function Community() {
                 setError("");
 
                 const token = localStorage.getItem("token");
-                if (!token) {
-                    // 🚨 비회원 접근 차단
-                    alert("로그인이 필요합니다.");
-                    navigate("/");
-                    return;
+
+                // ✅ 토큰이 있으면 Authorization 헤더 추가
+                const headers = {
+                    Accept: "application/json",
+                };
+                if (token) {
+                    headers.Authorization = `Bearer ${token}`;
                 }
 
                 const res = await fetch(`${API_BASE}/api/posts`, {
                     method: "GET",
-                    headers: {
-                        Accept: "application/json",
-                        Authorization: `Bearer ${token}`,
-                    },
+                    headers,
                     signal: controller.signal,
                     credentials: "include",
                 });
@@ -56,7 +55,6 @@ export default function Community() {
                     .sort((a, b) => {
                         const diff = getTime(b.createdAt) - getTime(a.createdAt);
                         if (diff !== 0) return diff;
-                        // createdAt이 같거나 비어있으면 id 내림차순으로 보정
                         return (b.id ?? 0) - (a.id ?? 0);
                     });
 
@@ -155,12 +153,11 @@ export default function Community() {
                                 <div
                                     key={post.id}
                                     className="post-card"
-                                    onClick={() => navigate(`/community/post/${post.id}`)} // ← id 사용
+                                    onClick={() => navigate(`/community/post/${post.id}`)}
                                     style={{ cursor: "pointer" }}
                                 >
                                     <div className="post-meta">
                                         <div className="title-row">
-                                            {/* 상태값 없으면 뱃지 숨김 */}
                                             {post.status ? (
                                                 <span className={`badge ${post.status === "해결됨" ? "badge-solved" : ""}`}>
                                                     {post.status}
@@ -190,7 +187,6 @@ export default function Community() {
                         </div>
                     )}
 
-                    {/* 기존 페이징 UI는 유지 (서버 페이징 스펙 나오면 연결) */}
                     <div className="pagination-wrapper">
                         <div className="page-numbers">
                             <button className="page-button active">1</button>

src/components/community/CommunityWrite.jsx

@@ -13,7 +13,7 @@ const ALLOWED_TAGS = [
     "JAVA","C","CPP","JPA","JAVASCRIPT","PYTHON","OOP","BIGDATA","SPRING","TYPESCRIPT","ML"
 ];
 
-// ✅ 흔한 표기 → ENUM 매핑(한국어/소문자/동의어 흡수)
+// ✅ 흔한 표기 → ENUM 매핑
 const TAG_SYNONYM = {
     js: "JAVASCRIPT", javascript: "JAVASCRIPT", 자바스크립트: "JAVASCRIPT",
     java: "JAVA", 자바: "JAVA",
@@ -31,15 +31,15 @@ function normalizeToEnumTag(raw) {
     if (!raw) return null;
     const k = raw.replace(/^#/, "").trim();
     const keyLC = k.toLowerCase();
-    if (TAG_SYNONYM[keyLC]) return TAG_SYNONYM[keyLC]; // 동의어 우선
+    if (TAG_SYNONYM[keyLC]) return TAG_SYNONYM[keyLC];
     const upper = k.toUpperCase();
     return ALLOWED_TAGS.includes(upper) ? upper : null;
 }
 
 // 입력 문자열 → ENUM 배열(중복 제거, 최대 10개)
 function parseTagsInput(input) {
     const list = input
-        .split(/[#,，,\s]+/) // 쉼표/공백/# 구분
+        .split(/[#,，,\s]+/)
         .map(normalizeToEnumTag)
         .filter(Boolean);
     return Array.from(new Set(list)).slice(0, 10);
@@ -59,11 +59,12 @@ export default function CommunityWrite() {
     const [content, setContent] = useState(defaultGuide);
     const [submitting, setSubmitting] = useState(false);
 
-    // 비회원 접근 차단(알림은 로그인 페이지에서 처리)
+    // ✅ 비회원 접근 차단: 알림 + 커뮤니티 페이지로 이동
     useEffect(() => {
         const token = localStorage.getItem("token");
         if (!token) {
-            navigate("/", { replace: true, state: { reason: "auth-required", from: location.pathname } });
+            alert("로그인이 필요합니다.");
+            navigate("/community", { replace: true, state: { from: location.pathname } });
         }
     }, [navigate, location.pathname]);
 
@@ -77,7 +78,7 @@ export default function CommunityWrite() {
     const handleSubmit = async () => {
         const token = localStorage.getItem("token");
         if (!token) {
-            navigate("/login", { replace: true, state: { reason: "auth-required", from: location.pathname } });
+            // 🚨 여기서는 다시 알림 필요 없음 → 이미 진입 차단됨
             return;
         }
 
@@ -88,10 +89,8 @@ export default function CommunityWrite() {
             return;
         }
 
-        // ✅ 태그 정규화/검증 → ENUM 배열
         const tagArray = parseTagsInput(tags);
 
-        // 사용자가 뭔가 입력했는데 결과가 0개면 허용값 아님
         if (tags.trim() && tagArray.length === 0) {
             alert(`지원하는 태그만 사용할 수 있어요.\n허용값: ${ALLOWED_TAGS.join(", ")}`);
             return;
@@ -114,10 +113,6 @@ export default function CommunityWrite() {
                 body: JSON.stringify(payload),
             });
 
-            if (res.status === 401 || res.status === 403) {
-                navigate("/login", { replace: true, state: { reason: "auth-required", from: location.pathname } });
-                return;
-            }
             if (!res.ok) {
                 const ct = res.headers.get("content-type") || "";
                 const msg = ct.includes("application/json") ? (await res.json()).message : await res.text();