Merge pull request #36 from DMU-DebugVisual/sunwoong

UI 개선: 로그인/회원가입 페이지 수정 및 커뮤니티 디자인 개선

Author: Danto7632

src/App.js

@@ -1,5 +1,5 @@
-import { HashRouter, Route, Routes } from "react-router-dom";
-import { useState, useEffect } from "react";
+import { HashRouter, Routes, Route, useLocation } from "react-router-dom";
+import { useEffect, useState } from "react";
 
 import Header from "./components/header/Header";
 import Footer from "./components/footer/Footer";
@@ -17,65 +17,32 @@ import Shared from "./components/mypage/Shared";
 import MyProject from "./components/mypage/MyProject";
 import MyCommunity from "./components/mypage/MyCommunity";
 import ScrollToTop from "./components/common/ScrollToTop";
+import CommunityWrite from "./components/community/CommunityWrite";
 
-function App() {
+function AppContent() {
+    const location = useLocation();
     const [isDark, setIsDark] = useState(false);
-
-    // 로그인 상태 관리 추가
     const [isLoggedIn, setIsLoggedIn] = useState(false);
     const [nickname, setNickname] = useState('');
+    const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+
+    const isSignupPage = location.pathname === "/signup";
 
-    // 로그인 상태 확인
     useEffect(() => {
         const token = localStorage.getItem('token');
         const storedUsername = localStorage.getItem('username');
-
-        console.log('🔍 App.js 로그인 상태 확인:', { token: !!token, username: storedUsername });
-
         if (token && storedUsername) {
             setIsLoggedIn(true);
             setNickname(storedUsername);
-            console.log('✅ App.js에서 로그인 상태로 설정됨');
         } else {
             setIsLoggedIn(false);
             setNickname('');
-            console.log('❌ App.js에서 비로그인 상태로 설정됨');
         }
     }, []);
 
-    // 로그인 상태 변경을 감지하기 위한 이벤트 리스너 (선택사항)
-    useEffect(() => {
-        const handleStorageChange = () => {
-            const token = localStorage.getItem('token');
-            const storedUsername = localStorage.getItem('username');
-
-            if (token && storedUsername) {
-                setIsLoggedIn(true);
-                setNickname(storedUsername);
-            } else {
-                setIsLoggedIn(false);
-                setNickname('');
-            }
-        };
-
-        // storage 이벤트 리스너 추가
-        window.addEventListener('storage', handleStorageChange);
-
-        // 클린업
-        return () => {
-            window.removeEventListener('storage', handleStorageChange);
-        };
-    }, []);
-
-    useEffect(() => {
-        document.body.classList.toggle("dark-mode", isDark);
-    }, [isDark]);
-
     useEffect(() => {
         const savedTheme = localStorage.getItem("theme");
-        if (savedTheme === "dark") {
-            setIsDark(true);
-        }
+        if (savedTheme === "dark") setIsDark(true);
     }, []);
 
     useEffect(() => {
@@ -84,29 +51,29 @@ function App() {
     }, [isDark]);
 
     return (
-        <HashRouter>
-            <Header
-                isDark={isDark}
-                setIsDark={setIsDark}
-                isLoggedIn={isLoggedIn}
-                nickname={nickname}
-            />
+        <>
+            {!isSignupPage && (
+                <Header
+                    isDark={isDark}
+                    setIsDark={setIsDark}
+                    isLoggedIn={isLoggedIn}
+                    nickname={nickname}
+                    onLoginModalOpen={() => setIsLoginModalOpen(true)}
+                />
+            )}
+
             <ScrollToTop />
+
             <Routes>
                 <Route path="/" element={<Main />} />
-                <Route path="/login" element={<Login />} />
                 <Route path="/signup" element={<SignUp />} />
-
-                {/* IDE 라우팅 설정 */}
                 <Route path="/ide" element={<IDE />} />
                 <Route path="/ide/:param" element={<IDE />} />
                 <Route path="/ide/:language/:filename" element={<IDE />} />
-
                 <Route path="/community" element={<Community />} />
+                <Route path="/community/write" element={<CommunityWrite />} />
                 <Route path="/broadcast" element={<Codecast />} />
                 <Route path="/startbroadcast" element={<StartCodecast />} />
-
-                {/* MyPage 라우팅 설정 */}
                 <Route path="/mypage" element={<MyPageLayout nickname={nickname} />}>
                     <Route index element={<Mypage nickname={nickname} />} />
                     <Route path="project" element={<MyProject />} />
@@ -115,9 +82,26 @@ function App() {
                     <Route path="shared" element={<Shared />} />
                 </Route>
             </Routes>
-            <Footer />
-        </HashRouter>
+
+            {!isSignupPage && <Footer />}
+
+            {isLoginModalOpen && (
+                <Login
+                    onClose={() => setIsLoginModalOpen(false)}
+                    onLoginSuccess={() => {
+                        setIsLoggedIn(true);
+                        setNickname(localStorage.getItem('username') || '');
+                    }}
+                />
+            )}
+        </>
     );
 }
 
-export default App;
+export default function App() {
+    return (
+        <HashRouter>
+            <AppContent />
+        </HashRouter>
+    );
+}

src/components/community/Community.css

@@ -6,7 +6,7 @@ body {
 }
 
 .community-container {
-    max-width: 900px;
+    max-width: 1400px; /* 또는 100%, 1000px 등 */
     margin: 0 auto;
     padding: 80px 20px;
 }
@@ -33,6 +33,7 @@ body {
     font-size: 1.25rem;           /* 글씨 키움 */
     cursor: pointer;
     transition: background-color 0.3s;
+
 }
 
 
@@ -59,7 +60,7 @@ body {
     padding: 1rem 2rem 3rem 2rem; /* 위 여백을 1.5rem으로 줄임 */
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
     margin-bottom: 2rem;
-    width: 97.5%;
+    width: 100%;
     min-height: 600px;
 }
 
@@ -90,7 +91,7 @@ body {
 }
 
 .popular-post-card h3 {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: bold;
     margin: 0 0 0.5rem 0;
 }

src/components/community/Community.jsx

@@ -1,7 +1,10 @@
 import React from "react";
+import { useNavigate } from "react-router-dom"; // ✅ navigate import 추가
 import "./Community.css";
 
 export default function Community() {
+    const navigate = useNavigate(); // ✅ navigate 선언
+
     const posts = [
         {
             title: "버블 정렬 시각화 프로젝트 공유합니다",
@@ -11,7 +14,7 @@ export default function Community() {
             date: "2023. 5. 15",
             likes: 24,
             comments: 8,
-            thumbnail: "https://via.placeholder.com/300x180"
+            thumbnail: "https://unsplash.com/photos/KrYbarbAx5s/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MTZ8fCVFQiU5NCU5NCVFQiVCMiU4NCVFQSVCOSU4NXxrb3wwfHx8fDE3NDgyNDc1NDh8MA&force=true"
         },
         {
             title: "그래프 탐색 알고리즘 비교: BFS vs DFS",
@@ -21,7 +24,7 @@ export default function Community() {
             date: "2023. 5. 17",
             likes: 32,
             comments: 12,
-            thumbnail: "https://via.placeholder.com/300x180"
+            thumbnail: "https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=300&h=180"
         },
         {
             title: "동적 프로그래밍 문제 해결 가이드",
@@ -31,15 +34,21 @@ export default function Community() {
             date: "2023. 5. 18",
             likes: 40,
             comments: 15,
-            thumbnail: "https://via.placeholder.com/300x180"
+            thumbnail:  "https://unsplash.com/photos/ZS67i1HLllo/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MTV8fCVFQiU4RiU5OSVFQyVBMCU4MSUyMCVFRCU5NCU4NCVFQiVBMSU5QyVFQSVCNyVCOCVFQiU5RSU5OCVFQiVCMCU4RCUyMCVFRCU5NSVCNCVFQSVCMiVCMCUyMCVFQSVCMCU4MCVFQyU5RCVCNCVFQiU5MyU5Q3xrb3wwfHx8fDE3NDgyNDc3NjB8MA&force=true"
         }
     ];
 
+
     return (
         <div className="community-container">
             <div className="community-header">
                 <h1>커뮤니티</h1>
-                <button className="new-post-button">+  새 게시물</button>
+                <button
+                    className="new-post-button"
+                    onClick={() => navigate("/community/write")}
+                >
+                    + 새 게시물
+                </button>
             </div>
 
             <div className="popular-posts-wrapper">
@@ -86,7 +95,7 @@ export default function Community() {
                         <p>{post.summary}</p>
                         <div className="post-footer">
                             <div className="author-info">
-                                <img src="https://via.placeholder.com/32" alt="작성자" />
+                                <img src="https://cdn-icons-png.flaticon.com/512/847/847969.png" alt="작성자" width="32" height="32" />
                                 <div>
                                     <p>{post.author}</p>
                                     <p className="date">{post.date}</p>

src/components/community/CommunityWrite.css

@@ -0,0 +1,42 @@
+.write-container {
+    max-width: 1000px;
+    width: 100%;
+    margin: 100px auto 120px auto; /* ✅ 위아래 여백 + 가운데 정렬 */
+    padding: 2rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    font-family: 'Noto Sans KR', sans-serif;
+}
+
+
+.write-form label {
+    display: block;
+    margin-bottom: 1.5rem;
+    font-weight: bold;
+}
+
+.write-form input,
+.write-form textarea {
+    width: 100%;
+    padding: 0.75rem;
+    margin-top: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    font-size: 1rem;
+    font-family: inherit;
+}
+
+.submit-button {
+    background-color: #845ef7;
+    color: white;
+    padding: 0.75rem 2rem;
+    border: none;
+    border-radius: 6px;
+    font-size: 1.1rem;
+    cursor: pointer;
+}
+
+.submit-button:hover {
+    background-color: #6f4fd5;
+}

src/components/community/CommunityWrite.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import "./CommunityWrite.css";
+import { useNavigate } from "react-router-dom";
+
+const CommunityWrite = () => {
+    const navigate = useNavigate();
+    const [title, setTitle] = useState("");
+    const [content, setContent] = useState("");
+    const [tags, setTags] = useState("");
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        // 임시 처리: 콘솔에 출력
+        console.log("제목:", title);
+        console.log("내용:", content);
+        console.log("태그:", tags.split(',').map(tag => tag.trim()));
+
+        // 추후 API로 전송하거나, 목록에 추가
+        alert("작성 완료!");
+        navigate("/community");
+    };
+
+    return (
+        <div className="write-container">
+            <h2>📌 새 게시물 작성</h2>
+            <form className="write-form" onSubmit={handleSubmit}>
+                <label>
+                    제목
+                    <input
+                        type="text"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                        required
+                    />
+                </label>
+                <label>
+                    내용
+                    <textarea
+                        value={content}
+                        onChange={(e) => setContent(e.target.value)}
+                        rows="10"
+                        required
+                    />
+                </label>
+                <label>
+                    태그 (쉼표로 구분)
+                    <input
+                        type="text"
+                        value={tags}
+                        onChange={(e) => setTags(e.target.value)}
+                    />
+                </label>
+                <button type="submit" className="submit-button">작성하기</button>
+            </form>
+        </div>
+    );
+};
+
+export default CommunityWrite;