헤더 로그인 전후 높이 통일 및 로그인 후 원래 페이지로 이동 기능 구현, 새 게시물 작성 페이지 추가 및 더미 이미지 적용

Author: chaesunwoong

src/App.js

@@ -17,6 +17,8 @@ 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() {
     const [isDark, setIsDark] = useState(false);
@@ -97,16 +99,16 @@ function App() {
                 <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,6 +117,7 @@ function App() {
                     <Route path="shared" element={<Shared />} />
                 </Route>
             </Routes>
+
             <Footer />
         </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;

src/components/header/Header.css

@@ -1,18 +1,19 @@
-/* Header 전체 스타일 */
 .custom-header {
+    position: fixed;
+    top: 0;
     width: 100%;
-    padding: 12px 24px;
-    background-color: white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    height: 64px;
+    display: flex;
+    justify-content: space-between;
     align-items: center;
-    box-sizing: border-box;
-    font-family: 'Segoe UI', sans-serif;
-    position: fixed;
+    padding: 0 24px;
+    background-color: white;
     z-index: 1000;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
+
+
 /* 왼쪽: 로고 */
 .header-left {
     justify-self: start;
@@ -33,15 +34,22 @@
     display: flex;
     align-items: center;
     gap: 10px;
+    height: 100%;         /* 세로 정렬 일관성 */
 }
 
+
 /* 가운데: 네비게이션 */
 .header-nav {
-    justify-self: center;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
     display: flex;
     gap: 20px;
+    align-items: center;
+    height: 100%;
 }
 
+
 /* NavLink 기본 상태 */
 .header-nav a {
     text-decoration: none;
@@ -93,14 +101,18 @@
     background-color: #5a0099;
 }
 
+.user-menu-container {
+    position: relative; /* 드롭다운 위치 기준 */
+}
+
 .user-nickname {
-    display: flex;
-    align-items: center;
-    font-weight: 600;
-    cursor: pointer;
-    font-size: 1.05rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 200px;
 }
 
+
 .user-icon {
     margin-right: 8px;
     vertical-align: middle;
@@ -212,6 +224,8 @@
     background-color: #f5f0ff;
 }
 
+
+
 .dark-mode .user-dropdown {
     background-color: #2a2a2a;
     border-color: #444;

src/components/header/Header.jsx

@@ -1,18 +1,26 @@
 import React, { useState } from "react";
-import { NavLink, Link, useNavigate } from "react-router-dom";
-import { FaMoon, FaSun, FaUserCircle } from "react-icons/fa"; // ✅ FaUserCircle 가져옴
+import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
+import { FaMoon, FaSun, FaUserCircle } from "react-icons/fa";
 import "./Header.css";
 
 const Header = ({ isDark, setIsDark, isLoggedIn, nickname }) => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const navigate = useNavigate();
+    const location = useLocation(); // ✅ 현재 경로 확인
 
     const handleLogout = () => {
         localStorage.clear();
-        navigate("/");
-        window.location.reload();
+
+        if (location.pathname.startsWith("/mypage")) {
+            navigate("/"); // ✅ 마이페이지일 때만 홈으로 이동
+        } else {
+            navigate(location.pathname); // 그대로 현재 페이지 유지
+        }
+
+        window.location.reload(); // 상태 강제 반영
     };
 
+
     const toggleMenu = () => {
         setIsMenuOpen(!isMenuOpen);
     };
@@ -47,10 +55,7 @@ const Header = ({ isDark, setIsDark, isLoggedIn, nickname }) => {
                 {isLoggedIn ? (
                     <div className="user-menu-container">
                         <span className="user-nickname" onClick={toggleMenu}>
-                            <FaUserCircle
-                                size={24}
-                                className={"user-icon"}
-                            />
+                            <FaUserCircle size={24} className="user-icon" />
                             {nickname} 님 ▾
                         </span>
                         {isMenuOpen && (
@@ -62,8 +67,16 @@ const Header = ({ isDark, setIsDark, isLoggedIn, nickname }) => {
                     </div>
                 ) : (
                     <>
-                        <Link to="/login" className="btn btn-outline">로그인</Link>
-                        <Link to="/signup" className="btn btn-filled">회원가입</Link>
+                        <Link
+                            to="/login"
+                            state={{ from: location.pathname }} // ✅ 현재 경로 전달
+                            className="btn btn-outline"
+                        >
+                            로그인
+                        </Link>
+                        <Link to="/signup" className="btn btn-filled">
+                            회원가입
+                        </Link>
                     </>
                 )}
             </div>