diff --git a/front-end/src/app/posts/[id]/edit/page.tsx b/front-end/src/app/posts/[id]/edit/page.tsx
index 2f1590d..0f7a541 100644
--- a/front-end/src/app/posts/[id]/edit/page.tsx
+++ b/front-end/src/app/posts/[id]/edit/page.tsx
@@ -2,43 +2,81 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import { useSelector } from 'react-redux';
 import { updatePost } from '@/app/api/postAPI';
 import apiClient from '@/components/axios/apiClient';
+import { RootState } from '@/redux/store';
 import '@/styles/pages/post/post.scss';
 
+interface Post {
+  id: number;
+  title: string;
+  content: string;
+  category: 'FREE' | 'QNA';
+  writtenAt: string;
+  email: string;
+  nickname: string;
+}
+
 export default function EditPost({ params }: { params: { id: string } }) {
   const router = useRouter();
+  const userState = useSelector((state: RootState) => state.user);
+  const currentUser = userState.userInfo;
+
   const [title, setTitle] = useState('');
   const [content, setContent] = useState('');
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [post, setPost] = useState<Post | null>(null);
 
   useEffect(() => {
     const fetchPost = async () => {
       try {
-        const response = await apiClient.get(`/post/${params.id}`);
-        const { title, content } = response.data;
-        setTitle(title);
-        setContent(content);
+        // 게시글 목록에서 해당 게시글 찾기
+        let foundPost = null;
+        const categories = ['FREE', 'QNA'];
+        for (const category of categories) {
+          const response = await apiClient.get(`/post/category/${category}?page=0`);
+          foundPost = response.data.content.find((post: Post) => post.id.toString() === params.id);
+          if (foundPost) break;
+        }
+
+        if (!foundPost) {
+          throw new Error('게시글을 찾을 수 없습니다.');
+        }
+
+        // 현재 사용자가 게시글 작성자인지 확인
+        if (currentUser && foundPost.email !== currentUser.email) {
+          throw new Error('게시글을 수정할 권한이 없습니다.');
+        }
+
+        setPost(foundPost);
+        setTitle(foundPost.title);
+        setContent(foundPost.content);
       } catch (error) {
         console.error('게시글 불러오기 실패:', error);
-        alert('게시글을 불러오지 못했습니다.');
-        router.back();
+        setError(error instanceof Error ? error.message : '게시글을 불러오지 못했습니다.');
       } finally {
         setLoading(false);
       }
     };
 
     fetchPost();
-  }, [params.id, router]);
+  }, [params.id, currentUser]);
 
   const handleUpdate = async () => {
-    if (!title || !content) {
-      alert('제목과 내용을 입력해주세요.');
+    if (!title.trim()) {
+      alert('제목을 입력해주세요.');
+      return;
+    }
+
+    if (!content.trim()) {
+      alert('내용을 입력해주세요.');
       return;
     }
 
     try {
-      await updatePost(params.id, { title, content });
+      await updatePost(params.id, { title: title.trim(), content: content.trim() });
       alert('게시글이 수정되었습니다.');
       router.push(`/posts/${params.id}`);
     } catch (error) {
@@ -47,30 +85,78 @@ export default function EditPost({ params }: { params: { id: string } }) {
     }
   };
 
-  if (loading) return <p>게시글을 불러오는 중입니다...</p>;
+  const handleCancel = () => {
+    if (title !== post?.title || content !== post?.content) {
+      const shouldCancel = confirm('수정사항이 있습니다. 정말로 취소하시겠습니까?');
+      if (!shouldCancel) return;
+    }
+    router.push(`/posts/${params.id}`);
+  };
+
+  if (loading) {
+    return (
+      <div className="posts_container new_post">
+        <div className="inner">
+          <div className="loading_state">
+            <div className="icon">📝</div>
+            <p className="message">게시글을 불러오는 중...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="posts_container new_post">
+        <div className="inner">
+          <div className="error_state">
+            <div className="icon">⚠️</div>
+            <p className="message">{error}</p>
+            <button className="back_button" onClick={() => router.push('/posts')}>
+              목록으로 돌아가기
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="posts_container new_post">
       <div className="inner">
-        <h2>게시글 수정</h2>
-        <label htmlFor="title">제목</label>
-        <input
-          id="title"
-          type="text"
-          placeholder="제목을 입력하세요"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-        />
-        <label htmlFor="content">내용</label>
-        <textarea
-          id="content"
-          placeholder="내용을 입력하세요"
-          value={content}
-          onChange={(e) => setContent(e.target.value)}
-        />
+        <h2 className="section_title">게시글 수정</h2>
+
+        <div className="form_group">
+          <label htmlFor="title">제목</label>
+          <input
+            id="title"
+            type="text"
+            placeholder="제목을 입력하세요"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            maxLength={100}
+          />
+        </div>
+
+        <div className="form_group">
+          <label htmlFor="content">내용</label>
+          <textarea
+            id="content"
+            placeholder="내용을 입력하세요"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            maxLength={2000}
+          />
+        </div>
+
         <div className="button_group">
-          <button onClick={handleUpdate}>수정</button>
-          <button onClick={() => router.push(`/posts/${params.id}`)}>취소</button>
+          <button className="submit_btn" onClick={handleUpdate}>
+            수정 완료
+          </button>
+          <button className="cancel_btn" onClick={handleCancel}>
+            취소
+          </button>
         </div>
       </div>
     </div>
diff --git a/front-end/src/app/posts/[id]/page.tsx b/front-end/src/app/posts/[id]/page.tsx
index d6690f5..84f28d9 100644
--- a/front-end/src/app/posts/[id]/page.tsx
+++ b/front-end/src/app/posts/[id]/page.tsx
@@ -2,7 +2,9 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import { useSelector } from 'react-redux';
 import { fetchPosts, deletePost } from '@/app/api/postAPI';
+import { RootState } from '@/redux/store';
 import '@/styles/pages/post/post.scss';
 
 interface Post {
@@ -17,10 +19,15 @@ interface Post {
 
 export default function PostDetail({ params }: { params: { id: string } }) {
   const router = useRouter();
+  const userState = useSelector((state: RootState) => state.user);
+  const currentUser = userState.userInfo;
   const [post, setPost] = useState<Post | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
+  // 현재 사용자가 게시글 작성자인지 확인
+  const isAuthor = currentUser && post && currentUser.email === post.email;
+
   useEffect(() => {
     const fetchPost = async () => {
       try {
@@ -47,6 +54,10 @@ export default function PostDetail({ params }: { params: { id: string } }) {
   }, [params.id]);
 
   const handleDelete = async () => {
+    if (!confirm('정말로 이 게시글을 삭제하시겠습니까?')) {
+      return;
+    }
+
     try {
       await deletePost(params.id);
       alert('게시글이 삭제되었습니다.');
@@ -57,23 +68,67 @@ export default function PostDetail({ params }: { params: { id: string } }) {
     }
   };
 
-  if (loading) return <p>게시글을 불러오는 중...</p>;
-  if (error) return <p>{error}</p>;
+  if (loading) {
+    return (
+      <div className="posts_container post_detail">
+        <div className="inner">
+          <div className="loading_state">
+            <div className="icon">📖</div>
+            <p className="message">게시글을 불러오는 중...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="posts_container post_detail">
+        <div className="inner">
+          <div className="error_state">
+            <div className="icon">⚠️</div>
+            <p className="message">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="posts_container post_detail">
       <div className="inner">
-        <h2>{post?.title}</h2>
-        <p>카테고리: {post?.category === 'FREE' ? '자유게시판' : '질문게시판'}</p>
-        <p>
-          작성자: {post?.nickname} ({post?.email})
-        </p>
-        <p>작성일: {post?.writtenAt ? new Date(post.writtenAt).toLocaleString() : '-'}</p>
-        <p>{post?.content}</p>
+        <div className="post_header">
+          <h2 className="section_title">{post?.title}</h2>
+          <div className="post_meta">
+            <span className="category">
+              {post?.category === 'FREE' ? '자유게시판' : '질문게시판'}
+            </span>
+            <span className="author">작성자: {post?.nickname}</span>
+            <span className="date">
+              {post?.writtenAt ? new Date(post.writtenAt).toLocaleDateString() : '-'}
+            </span>
+          </div>
+        </div>
+
+        <div className="post_content">
+          <p>{post?.content}</p>
+        </div>
 
-        <button onClick={() => router.push(`/posts/${params.id}/edit`)}>수정</button>
-        <button onClick={handleDelete}>삭제</button>
-        <button onClick={() => router.push('/posts')}>목록으로</button>
+        <div className="post_actions">
+          {isAuthor && (
+            <>
+              <button className="edit_btn" onClick={() => router.push(`/posts/${params.id}/edit`)}>
+                수정
+              </button>
+              <button className="delete_btn" onClick={handleDelete}>
+                삭제
+              </button>
+            </>
+          )}
+          <button className="list_btn" onClick={() => router.push('/posts')}>
+            목록으로
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/front-end/src/app/posts/new/page.tsx b/front-end/src/app/posts/new/page.tsx
index 668e3a8..f22516d 100644
--- a/front-end/src/app/posts/new/page.tsx
+++ b/front-end/src/app/posts/new/page.tsx
@@ -50,34 +50,46 @@ export default function PostForm() {
   return (
     <div className="posts_container new_post">
       <div className="inner">
-        <h2 className="section_title">커뮤니티 게시판</h2>
-        <label>카테고리</label>
-        <select
-          value={newPost.category}
-          onChange={(e) => setNewPost({ ...newPost, category: e.target.value as 'FREE' | 'QNA' })}
-        >
-          <option value="FREE">자유게시판</option>
-          <option value="QNA">질문게시판</option>
-        </select>
+        <h2 className="section_title">새 글 작성</h2>
 
-        <input
-          type="text"
-          placeholder="제목"
-          value={newPost.title}
-          onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
-        />
-        <textarea
-          placeholder="내용"
-          value={newPost.content}
-          onChange={(e) => setNewPost({ ...newPost, content: e.target.value })}
-        />
+        <div className="form_group">
+          <label>카테고리</label>
+          <select
+            value={newPost.category}
+            onChange={(e) => setNewPost({ ...newPost, category: e.target.value as 'FREE' | 'QNA' })}
+          >
+            <option value="FREE">자유게시판</option>
+            <option value="QNA">질문게시판</option>
+          </select>
+        </div>
 
-        <button onClick={handleSubmit} disabled={loading}>
-          {loading ? '작성 중...' : '작성'}
-        </button>
-        <button onClick={() => router.back()} disabled={loading}>
-          취소
-        </button>
+        <div className="form_group">
+          <label>제목</label>
+          <input
+            type="text"
+            placeholder="제목을 입력하세요"
+            value={newPost.title}
+            onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
+          />
+        </div>
+
+        <div className="form_group">
+          <label>내용</label>
+          <textarea
+            placeholder="내용을 입력하세요"
+            value={newPost.content}
+            onChange={(e) => setNewPost({ ...newPost, content: e.target.value })}
+          />
+        </div>
+
+        <div className="button_group">
+          <button className="submit_btn" onClick={handleSubmit} disabled={loading}>
+            {loading ? '작성 중...' : '작성하기'}
+          </button>
+          <button className="cancel_btn" onClick={() => router.back()} disabled={loading}>
+            취소
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/front-end/src/app/posts/page.tsx b/front-end/src/app/posts/page.tsx
index 558b555..303a8eb 100644
--- a/front-end/src/app/posts/page.tsx
+++ b/front-end/src/app/posts/page.tsx
@@ -17,9 +17,11 @@ interface Post {
 
 export default function PostList() {
   const router = useRouter();
-  const isLoggedIn = useSelector((state: RootState) => state.user.userInfo !== null);
+  const userState = useSelector((state: RootState) => state.user);
+  const isLoggedIn = userState.userInfo !== null;
   const [category, setCategory] = useState<'FREE' | 'QNA'>('FREE');
   const [query, setQuery] = useState<string>('');
+
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [posts, setPosts] = useState<Post[]>([]);
   const [currentPage, setCurrentPage] = useState<number>(0);
@@ -45,8 +47,16 @@ export default function PostList() {
   };
 
   const handleNewPost = () => {
+    console.log('현재 로그인 상태:', isLoggedIn);
+    console.log('Redux 상태:', userState);
+
     if (!isLoggedIn) {
-      alert('로그인 후 시도하세요');
+      const shouldLogin = confirm(
+        '새 글을 작성하려면 로그인이 필요합니다.\n로그인 페이지로 이동하시겠습니까?',
+      );
+      if (shouldLogin) {
+        router.push('/login');
+      }
       return;
     }
     router.push('/posts/new');
@@ -91,9 +101,11 @@ export default function PostList() {
           <button onClick={handleSearch}>검색</button>
         </div>
 
-        <button onClick={handleNewPost}>새 글 작성</button>
+        <button className="new_post_btn" onClick={handleNewPost}>
+          새 글 작성
+        </button>
 
-        <table>
+        <table className="posts_table">
           <thead>
             <tr>
               <th>번호</th>
@@ -116,7 +128,7 @@ export default function PostList() {
               ))
             ) : (
               <tr>
-                <td colSpan={4} style={{ textAlign: 'center' }}>
+                <td colSpan={4} className="empty_message">
                   게시글이 없습니다.
                 </td>
               </tr>
@@ -131,7 +143,7 @@ export default function PostList() {
           >
             이전
           </button>
-          <span>
+          <span className="page_info">
             {currentPage + 1} / {totalPages}
           </span>
           <button
diff --git a/front-end/src/components/mypage/MyPostsSection.tsx b/front-end/src/components/mypage/MyPostsSection.tsx
index a3fe7f4..9c38698 100644
--- a/front-end/src/components/mypage/MyPostsSection.tsx
+++ b/front-end/src/components/mypage/MyPostsSection.tsx
@@ -17,18 +17,26 @@ export default function MyPostsSection() {
   const router = useRouter();
   const userInfo = useSelector((state: RootState) => state.user.userInfo);
 
-  const [posts, setPosts] = useState<Post[]>([]);
+  const [allPosts, setAllPosts] = useState<Post[]>([]);
+  const [displayedCount, setDisplayedCount] = useState<number>(5);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
   const [currentPage, setCurrentPage] = useState<number>(0);
-  const [totalPages, setTotalPages] = useState<number>(1);
+
+  const [hasMore, setHasMore] = useState<boolean>(true);
+  const [loadingMore, setLoadingMore] = useState<boolean>(false);
+
+  const POSTS_PER_LOAD = 5;
 
   useEffect(() => {
     const fetchMyPosts = async () => {
       try {
         const response = await apiClient.get(`/post/my?page=${currentPage}`);
-        setPosts(response.data.content);
-        setTotalPages(response.data.totalPages);
+        const newPosts = response.data.content;
+        setAllPosts((prev) => [...prev, ...newPosts]);
+
+        // 더 보여줄 게시글이 있는지 확인
+        setHasMore(currentPage < response.data.totalPages - 1);
       } catch (error) {
         console.error('게시글 불러오기 실패:', error);
         setError('게시글을 불러오지 못했습니다.');
@@ -42,60 +50,117 @@ export default function MyPostsSection() {
     }
   }, [userInfo, currentPage]);
 
-  if (!userInfo) return <p>로그인이 필요합니다.</p>;
-  if (loading) return <p>게시글을 불러오는 중...</p>;
-  if (error) return <p>{error}</p>;
+  const handleLoadMore = async () => {
+    if (!hasMore) return;
+
+    setLoadingMore(true);
+    setCurrentPage((prev) => prev + 1);
+    setLoadingMore(false);
+  };
+
+  const handleShowMore = () => {
+    setDisplayedCount((prev) => prev + POSTS_PER_LOAD);
+  };
+
+  // 현재 표시할 게시글들
+  const displayedPosts = allPosts.slice(0, displayedCount);
+  const canShowMore = displayedCount < allPosts.length;
+  const showCompletionMessage = !hasMore && !canShowMore && allPosts.length > 0;
+
+  if (!userInfo) {
+    return (
+      <div className="my_posts_section">
+        <div className="error_state">
+          <div className="icon">🔒</div>
+          <p className="message">로그인이 필요합니다.</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="my_posts_section">
+        <div className="loading_state">
+          <div className="icon">📝</div>
+          <p className="message">게시글을 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="my_posts_section">
+        <div className="error_state">
+          <div className="icon">⚠️</div>
+          <p className="message">{error}</p>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="my_posts_section">
-      <h3>내가 쓴 글 모음</h3>
-      {posts.length > 0 ? (
+      <h2 className="section_title">내가 쓴 글 모음</h2>
+
+      {displayedPosts.length > 0 ? (
         <>
-          <table>
-            <thead>
-              <tr>
-                <th>번호</th>
-                <th>제목</th>
-                <th>카테고리</th>
-                <th>작성일</th>
-              </tr>
-            </thead>
-            <tbody>
-              {posts.map((post, index) => (
-                <tr key={post.id}>
-                  <td>{index + 1 + currentPage * 20}</td>
-                  <td
-                    style={{ cursor: 'pointer', color: 'blue', textDecoration: 'underline' }}
-                    onClick={() => router.push(`/posts/${post.id}`)}
-                  >
-                    {post.title}
-                  </td>
-                  <td>{post.category === 'FREE' ? '자유게시판' : '질문게시판'}</td>
-                  <td>{new Date(post.writtenAt).toLocaleDateString()}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-          <div className="pagination">
-            <button
-              onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 0))}
-              disabled={currentPage === 0}
-            >
-              이전
-            </button>
-            <span>
-              {currentPage + 1} / {totalPages}
-            </span>
-            <button
-              onClick={() => setCurrentPage((prev) => (prev < totalPages - 1 ? prev + 1 : prev))}
-              disabled={currentPage === totalPages - 1}
-            >
-              다음
-            </button>
+          <div className="posts_list">
+            {displayedPosts.map((post, index) => (
+              <div
+                key={post.id}
+                className="post_item"
+                onClick={() => router.push(`/posts/${post.id}`)}
+              >
+                <div className="post_header">
+                  <h3 className="post_title">{post.title}</h3>
+                  <span className="post_category">
+                    {post.category === 'FREE' ? '자유게시판' : '질문게시판'}
+                  </span>
+                </div>
+                <div className="post_meta">
+                  <span className="post_number">#{index + 1}</span>
+                  <span className="post_date">
+                    {new Date(post.writtenAt).toLocaleDateString('ko-KR', {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric',
+                    })}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="load_more_section">
+            {canShowMore ? (
+              <button className="load_more_btn" onClick={handleShowMore}>
+                더보기
+              </button>
+            ) : hasMore ? (
+              <button className="load_more_btn" onClick={handleLoadMore} disabled={loadingMore}>
+                {loadingMore ? '불러오는 중...' : '더보기'}
+              </button>
+            ) : showCompletionMessage ? (
+              <div className="completion_message">
+                <div className="completion_icon">🎉</div>
+                <p className="completion_title">모든 게시글을 확인했습니다!</p>
+                <p className="completion_subtitle">
+                  총 {allPosts.length}개의 게시글을 작성하셨네요.
+                </p>
+              </div>
+            ) : null}
           </div>
         </>
       ) : (
-        <p>작성한 게시글이 없습니다.</p>
+        <div className="empty_state">
+          <div className="empty_icon">📝</div>
+          <p className="empty_message">아직 작성한 게시글이 없습니다.</p>
+          <button className="empty_button" onClick={() => router.push('/posts/new')}>
+            첫 게시글 작성하기
+          </button>
+        </div>
       )}
     </div>
   );
diff --git a/front-end/src/styles/pages/mypage/mypage.scss b/front-end/src/styles/pages/mypage/mypage.scss
index 478bdec..b656f1d 100644
--- a/front-end/src/styles/pages/mypage/mypage.scss
+++ b/front-end/src/styles/pages/mypage/mypage.scss
@@ -170,6 +170,298 @@
         margin-bottom: 1rem;
       }
     }
+
+    // 내가 쓴 글 모음 섹션 스타일
+    .my_posts_section {
+      .section_title {
+        font-size: 2.4rem;
+        font-weight: 700;
+        color: #1a1a1a;
+        margin-bottom: 3rem;
+
+        @include mo {
+          font-size: 2rem;
+          margin-bottom: 2rem;
+        }
+      }
+
+      .posts_list {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+        margin-bottom: 3rem;
+
+        @include mo {
+          gap: 1rem;
+          margin-bottom: 2rem;
+        }
+
+        .post_item {
+          background: #fff;
+          border: 1px solid #e9ecef;
+          border-radius: 1rem;
+          padding: 2rem;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          position: relative;
+          overflow: hidden;
+
+
+
+          &:hover {
+            border-color: var(--sub-btn-color);
+          }
+
+          @include mo {
+            padding: 1.5rem;
+          }
+
+          .post_header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 1rem;
+            gap: 1rem;
+
+            @include mo {
+              flex-direction: column;
+              gap: 0.5rem;
+            }
+
+            .post_title {
+              font-size: 1.6rem;
+              font-weight: 600;
+              color: #1a1a1a;
+              line-height: 1.4;
+              flex: 1;
+              transition: color 0.3s ease;
+
+              @include mo {
+                font-size: 1.4rem;
+              }
+            }
+
+            .post_category {
+              background: var(--sub-btn-color);
+              color: #fff;
+              padding: 0.4rem 1rem;
+              border-radius: 2rem;
+              font-size: 1.2rem;
+              font-weight: 600;
+              white-space: nowrap;
+
+              @include mo {
+                font-size: 1.1rem;
+                padding: 0.3rem 0.8rem;
+              }
+            }
+          }
+
+          .post_meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 1.3rem;
+            color: #6c757d;
+
+            @include mo {
+              font-size: 1.2rem;
+              flex-direction: column;
+              align-items: flex-start;
+              gap: 0.5rem;
+            }
+
+            .post_number {
+              color: var(--sub-btn-color);
+              font-weight: 600;
+            }
+
+            .post_date {
+              color: #6c757d;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+
+      .load_more_section {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 3rem;
+
+        @include mo {
+          margin-top: 2rem;
+        }
+
+        .load_more_btn {
+          padding: 1.2rem 3rem;
+          border: 2px solid var(--sub-btn-color);
+          background: #fff;
+          color: var(--sub-btn-color);
+          cursor: pointer;
+          border-radius: 0.8rem;
+          font-weight: 600;
+          font-size: 1.5rem;
+          transition: all 0.3s ease;
+
+          @include mo {
+            padding: 1rem 2.5rem;
+            font-size: 1.4rem;
+          }
+
+
+
+          &:disabled {
+            background: #f8f9fa;
+            color: #adb5bd;
+            cursor: not-allowed;
+            border-color: #e9ecef;
+          }
+        }
+
+        .completion_message {
+          text-align: center;
+          padding: 2rem;
+          background: #f8f9fa;
+          border-radius: 1rem;
+          border: 1px solid #e9ecef;
+
+          @include mo {
+            padding: 1.5rem;
+          }
+
+          .completion_icon {
+            font-size: 2rem;
+            color: #28a745;
+            margin-bottom: 1rem;
+
+            @include mo {
+              font-size: 1.8rem;
+            }
+          }
+
+          .completion_title {
+            font-size: 1.6rem;
+            color: #495057;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+
+            @include mo {
+              font-size: 1.4rem;
+            }
+          }
+
+          .completion_subtitle {
+            font-size: 1.4rem;
+            color: #6c757d;
+
+            @include mo {
+              font-size: 1.3rem;
+            }
+          }
+        }
+      }
+
+      .empty_state {
+        text-align: center;
+        padding: 4rem 2rem;
+
+        @include mo {
+          padding: 3rem 1rem;
+        }
+
+        .empty_icon {
+          font-size: 3rem;
+          color: #adb5bd;
+          margin-bottom: 1rem;
+
+          @include mo {
+            font-size: 2.5rem;
+          }
+        }
+
+        .empty_message {
+          font-size: 1.6rem;
+          color: #6c757d;
+          margin-bottom: 2rem;
+          font-weight: 500;
+
+          @include mo {
+            font-size: 1.4rem;
+            margin-bottom: 1.5rem;
+          }
+        }
+
+        .empty_button {
+          padding: 1rem 2rem;
+          background: var(--sub-btn-color);
+          color: #fff;
+          border: none;
+          border-radius: 0.5rem;
+          cursor: pointer;
+          font-size: 1.4rem;
+          font-weight: 600;
+          transition: all 0.3s ease;
+
+          @include mo {
+            padding: 0.8rem 1.5rem;
+            font-size: 1.3rem;
+          }
+
+          &:hover {
+            background: var(--btn-color);
+          }
+        }
+      }
+
+      // 로딩 및 에러 상태 스타일
+      .loading_state,
+      .error_state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 4rem 0;
+        text-align: center;
+
+        @include mo {
+          padding: 3rem 0;
+        }
+
+        .icon {
+          font-size: 2rem;
+          margin-bottom: 1rem;
+
+          @include mo {
+            font-size: 1.8rem;
+          }
+        }
+
+        .message {
+          font-size: 1.6rem;
+          color: #495057;
+          font-weight: 500;
+
+          @include mo {
+            font-size: 1.4rem;
+          }
+        }
+      }
+
+      .loading_state {
+        .icon {
+          color: #667eea;
+        }
+      }
+
+      .error_state {
+        .icon {
+          color: #ff6b6b;
+        }
+      }
+    }
+
     .video-title {
       font-size: 2rem;
       font-weight: bold;
diff --git a/front-end/src/styles/pages/post/post.scss b/front-end/src/styles/pages/post/post.scss
index 3d9ec3f..e217faa 100644
--- a/front-end/src/styles/pages/post/post.scss
+++ b/front-end/src/styles/pages/post/post.scss
@@ -1,197 +1,661 @@
+// abstracts
+@import '../../common/abstracts/mixins';
+@import '../../common/abstracts/responsive';
+
 .posts_container {
   width: 100%;
   max-width: 120rem;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 4rem 2rem;
 
-  .tab_menu {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
+  @include mo {
+    padding: 2rem 1rem;
+  }
 
-    button {
-      padding: 0.8rem 1.6rem;
-      border: none;
-      border-radius: 0.5rem;
-      cursor: pointer;
-      background: #f5f5f5;
-      font-weight: normal;
-      transition:
-        background 0.3s,
-        font-weight 0.3s;
+  .inner {
+    .section_title {
+      font-size: 3.5rem;
+      font-weight: 700;
+      text-align: center;
+      margin-bottom: 4rem;
+      color: #1a1a1a;
+      letter-spacing: -0.2rem;
 
-      &:hover {
-        background: #ddd;
+      @include mo {
+        font-size: 3rem;
+        margin-bottom: 3rem;
       }
 
-      &.active {
-        font-weight: bold;
-        background: var(--btn-color);
-        color: #fff;
+      @include mo_500 {
+        font-size: 2.3rem;
       }
     }
-  }
 
-  .search_bar {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    margin-bottom: 1.5rem;
+    .tab_menu {
+      display: flex;
+      justify-content: center;
+      gap: 0;
+      margin-bottom: 3rem;
+      background: #f8f9fa;
+      border-radius: 0.8rem;
+      padding: 0.4rem;
+      width: fit-content;
+      margin-left: auto;
+      margin-right: auto;
 
-    select,
-    input {
-      padding: 0.8rem;
-      border: 0.1rem solid #ccc;
-      border-radius: 0.5rem;
+              button {
+          padding: 1.2rem 2.4rem;
+          border: none;
+          border-radius: 0.6rem;
+          cursor: pointer;
+          background: transparent;
+          color: #6c757d;
+          font-weight: 600;
+          font-size: 1.5rem;
+          position: relative;
+
+          @include mo {
+            padding: 1rem 1.8rem;
+            font-size: 1.4rem;
+          }
+
+          &.active {
+            background: #fff;
+            color: var(--btn-color);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          }
+        }
     }
 
-    button {
-      padding: 0.8rem 1.2rem;
+    .search_bar {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+      margin-bottom: 3rem;
+      max-width: 45rem;
+      margin-left: auto;
+      margin-right: auto;
+
+      @include mo {
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      input {
+        flex: 1;
+        border: 1px solid #ccc;
+        border-radius: 0.5rem;
+        padding: 0 1rem;
+        font-size: 1.5rem;
+        background: #fff;
+        height: 4.5rem;
+
+        @include mo {
+          width: 100%;
+          font-size: 1.4rem;
+        }
+
+        &:focus {
+          outline: none;
+          border-color: var(--btn-color);
+        }
+
+        &::placeholder {
+          color: #adb5bd;
+          font-weight: 400;
+        }
+      }
+
+      button {
+        padding: 1.2rem 2rem;
+        background: var(--btn-color);
+        color: #fff;
+        border: none;
+        border-radius: 0.8rem;
+        cursor: pointer;
+        font-weight: 600;
+        font-size: 1.5rem;
+
+        @include mo {
+          width: 100%;
+          padding: 1rem 1.2rem;
+          font-size: 1.4rem;
+        }
+      }
+    }
+
+    .new_post_btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      width: fit-content;
+      margin: 0 auto 3rem;
+      padding: 1.2rem 2.4rem;
       background: var(--btn-color);
       color: #fff;
       border: none;
-      border-radius: 0.5rem;
+      border-radius: 0.8rem;
       cursor: pointer;
-      transition: background 0.3s;
+      font-weight: 600;
+      font-size: 1.5rem;
+      text-decoration: none;
+      text-align: center;
 
-      &:hover {
-        background: var(--btn-color);
+      @include mo {
+        width: 100%;
+        padding: 1rem 1.2rem;
+        font-size: 1.4rem;
+      }
+
+      &::before {
+        content: '+';
+        font-size: 1.8rem;
+        font-weight: 700;
       }
     }
-  }
 
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 1rem;
+    .posts_table {
+      width: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      background: #fff;
+      border: 1px solid #e9ecef;
+      border-radius: 1rem;
+      overflow: hidden;
+      margin-bottom: 3rem;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 
-    th,
-    td {
-      border: 0.1rem solid #ddd;
-      padding: 0.8rem;
-      text-align: left;
-    }
+      th,
+      td {
+        padding: 1.5rem 1.2rem;
+        text-align: left;
+        border-bottom: 1px solid #f1f3f4;
 
-    th {
-      background: #f5f5f5;
-    }
+        @include mo {
+          padding: 1rem 0.8rem;
+          font-size: 1.3rem;
+        }
+      }
 
-    tr {
-      cursor: pointer;
-      transition: background 0.2s;
+      th {
+        background: #f8f9fa;
+        font-weight: 700;
+        color: #495057;
+        font-size: 1.4rem;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+
+        @include mo {
+          font-size: 1.2rem;
+        }
+
+        &:first-child {
+          width: 10%;
+        }
 
-      &:hover {
-        background: #f1f1f1;
+        &:nth-child(2) {
+          width: 55%;
+        }
+
+        &:nth-child(3) {
+          width: 20%;
+        }
+
+        &:last-child {
+          width: 15%;
+        }
+      }
+
+              tbody {
+          tr {
+            cursor: pointer;
+
+            &:last-child {
+              td {
+                border-bottom: none;
+              }
+            }
+
+            td {
+              font-size: 1.5rem;
+              color: #495057;
+
+              @include mo {
+                font-size: 1.3rem;
+              }
+
+              &:first-child {
+                color: #6c757d;
+                font-weight: 500;
+              }
+
+              &:nth-child(2) {
+                font-weight: 600;
+                color: #212529;
+              }
+
+              &:nth-child(3) {
+                color: var(--btn-color);
+                font-weight: 600;
+                cursor: pointer;
+              }
+
+              &:last-child {
+                color: #6c757d;
+                font-size: 1.4rem;
+
+                @include mo {
+                  font-size: 1.2rem;
+                }
+              }
+            }
+          }
+        }
+
+      .empty_message {
+        text-align: center;
+        color: #6c757d;
+        font-size: 1.6rem;
+        padding: 4rem 2rem;
+        font-weight: 500;
+
+        @include mo {
+          font-size: 1.4rem;
+          padding: 3rem 1rem;
+        }
       }
     }
-  }
 
-  .pagination {
-    display: flex;
-    justify-content: center;
-    margin-top: 1.5rem;
-    gap: 1rem;
+    .pagination {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5rem;
+      margin-top: 3rem;
 
-    button {
-      padding: 0.6rem 1.2rem;
-      border: none;
-      background: var(--btn-color);
-      color: white;
-      cursor: pointer;
-      border-radius: 0.5rem;
-      transition: background 0.3s;
+      button {
+        padding: 1rem 1.5rem;
+        border: 1px solid #dee2e6;
+        background: #fff;
+        color: #495057;
+        cursor: pointer;
+        border-radius: 0.6rem;
+        font-weight: 600;
+        font-size: 1.4rem;
+        min-width: 4.5rem;
 
-      &:hover {
-        background: var(--btn-color);
+        @include mo {
+          padding: 0.8rem 1.2rem;
+          font-size: 1.3rem;
+          min-width: 4rem;
+        }
+
+        &:disabled {
+          background: #f8f9fa;
+          color: #adb5bd;
+          cursor: not-allowed;
+          border-color: #e9ecef;
+        }
       }
 
-      &:disabled {
-        background: #ccc;
-        cursor: not-allowed;
+      .page_info {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: #495057;
+        margin: 0 2rem;
+        padding: 1rem 1.5rem;
+        background: #f8f9fa;
+        border-radius: 0.6rem;
+
+        @include mo {
+          font-size: 1.3rem;
+          margin: 0 1rem;
+          padding: 0.8rem 1.2rem;
+        }
       }
     }
   }
 }
 
+// 새 글 작성 페이지 스타일
 .posts_container.new_post {
   width: 100%;
   max-width: 80rem;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 4rem 2rem;
+
+  @include mo {
+    padding: 2rem 1rem;
+  }
 
   .inner {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
-  }
+    gap: 2rem;
+    background: #fff;
+    padding: 3rem;
 
-  label {
-    font-size: 1.6rem;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-  }
+    @include mo {
+      padding: 2rem;
+      gap: 1.5rem;
+    }
+
+    .section_title {
+      font-size: 3.5rem;
+      font-weight: 700;
+      text-align: center;
+      margin-bottom: 3rem;
+      color: #1a1a1a;
+      letter-spacing: -0.2rem;
+
+      @include mo {
+        font-size: 3rem;
+        margin-bottom: 2rem;
+      }
+
+      @include mo_500 {
+        font-size: 2.3rem;
+      }
+    }
+
+    .form_group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.8rem;
+
+      label {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: #495057;
+        margin-bottom: 0.5rem;
+
+        @include mo {
+          font-size: 1.4rem;
+        }
+      }
+
+      select,
+      input,
+      textarea {
+        width: 100%;
+        border: 1px solid #ccc;
+        border-radius: 0.5rem;
+        padding: 0 1rem;
+        font-size: 1.5rem;
+        background: #fff;
+
+        @include mo {
+          font-size: 1.4rem;
+        }
 
-  select,
-  input,
-  textarea {
-    width: 100%;
-    padding: 1rem;
-    border: 0.1rem solid #ccc;
-    border-radius: 0.5rem;
-    font-size: 1.6rem;
+        &:focus {
+          outline: none;
+          border-color: var(--btn-color);
+        }
+
+        &::placeholder {
+          color: #adb5bd;
+          font-weight: 400;
+        }
+      }
+
+      select,
+      input {
+        height: 4.5rem;
+      }
+
+      textarea {
+        height: 18rem;
+        resize: none;
+        line-height: 1.6;
+        font-family: inherit;
+        padding: 1.2rem 1.6rem;
+
+        @include mo {
+          height: 15rem;
+          padding: 1rem 1.2rem;
+        }
+      }
+    }
+
+    .button_group {
+      display: flex;
+      justify-content: space-between;
+      gap: 1.5rem;
+      margin-top: 2rem;
+
+      @include mo {
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      button {
+        flex: 1;
+        padding: 1.2rem 2rem;
+        border: none;
+        font-size: 1.5rem;
+        border-radius: 0.8rem;
+        cursor: pointer;
+        font-weight: 600;
+
+        @include mo {
+          padding: 1rem 1.2rem;
+          font-size: 1.4rem;
+        }
 
-    &:focus {
-      outline: none;
-      border-color: var(--btn-color);
+        &.submit_btn {
+          background: var(--btn-color);
+          color: #fff;
+
+          &:disabled {
+            background: #adb5bd;
+            color: #6c757d;
+            cursor: not-allowed;
+          }
+        }
+
+        &.cancel_btn {
+          background: #f8f9fa;
+          color: #495057;
+          border: 2px solid #e9ecef;
+        }
+      }
     }
   }
+}
 
-  textarea {
-    height: 15rem;
-    resize: vertical;
+// 게시글 상세 페이지 스타일
+.posts_container.post_detail {
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 4rem 2rem;
+
+  @include mo {
+    padding: 2rem 1rem;
   }
 
-  .button_group {
+  .inner {
     display: flex;
-    justify-content: space-between;
-    margin-top: 1.5rem;
-    gap: 1rem;
+    flex-direction: column;
+    gap: 2rem;
+    background: #fff;
+    padding: 3rem;
 
-    button {
-      flex: 1;
-      padding: 1rem;
-      border: none;
-      font-size: 1.6rem;
-      border-radius: 0.5rem;
-      cursor: pointer;
-      transition: background 0.3s;
+    @include mo {
+      padding: 2rem;
+      gap: 1.5rem;
+    }
 
-      &:first-child {
-        background: var(--btn-color);
-        color: #fff;
+    .post_header {
+      border-bottom: 1px solid #e9ecef;
+      padding-bottom: 2rem;
 
-        &:hover {
-          background: var(--btn-color);
+      .section_title {
+        font-size: 2.8rem;
+        font-weight: 700;
+        color: #1a1a1a;
+        margin-bottom: 1.5rem;
+        line-height: 1.4;
+
+        @include mo {
+          font-size: 2.2rem;
+          margin-bottom: 1rem;
         }
+      }
 
-        &:disabled {
-          background: #ccc;
-          cursor: not-allowed;
+      .post_meta {
+        display: flex;
+        gap: 2rem;
+        color: #6c757d;
+        font-size: 1.4rem;
+
+        @include mo {
+          flex-direction: column;
+          gap: 0.5rem;
+          font-size: 1.3rem;
+        }
+
+        .category {
+          color: var(--btn-color);
+          font-weight: 600;
+        }
+
+        .author {
+          color: var(--btn-color);
+          font-weight: 600;
+        }
+
+        .date {
+          color: #6c757d;
         }
       }
+    }
 
-      &:last-child {
-        background: #ccc;
-        color: #333;
+    .post_content {
+      padding: 2rem 0;
+      line-height: 1.8;
+      font-size: 1.6rem;
+      color: #495057;
 
-        &:hover {
-          background: #bbb;
+      @include mo {
+        padding: 1.5rem 0;
+        font-size: 1.5rem;
+      }
+
+      p {
+        margin-bottom: 1.5rem;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+    }
+
+    .post_actions {
+      display: flex;
+      gap: 1rem;
+      justify-content: flex-end;
+      padding-top: 2rem;
+      border-top: 1px solid #e9ecef;
+
+      @include mo {
+        flex-direction: column;
+        gap: 0.8rem;
+      }
+
+      button {
+        padding: 1rem 2rem;
+        border: none;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        font-weight: 600;
+        font-size: 1.4rem;
+
+        @include mo {
+          padding: 0.8rem 1.5rem;
+          font-size: 1.3rem;
         }
 
-        &:disabled {
-          background: #ddd;
-          cursor: not-allowed;
+        &.edit_btn {
+          background: var(--btn-color);
+          color: #fff;
         }
+
+        &.delete_btn {
+          background: #dc3545;
+          color: #fff;
+        }
+
+        &.list_btn {
+          background: #f8f9fa;
+          color: #495057;
+          border: 1px solid #dee2e6;
+        }
+      }
+    }
+  }
+}
+
+// 로딩 및 에러 상태 스타일
+.posts_container {
+  .loading_state,
+  .error_state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 0;
+    text-align: center;
+
+    @include mo {
+      padding: 3rem 0;
+    }
+
+    .icon {
+      font-size: 2rem;
+      margin-bottom: 1rem;
+
+      @include mo {
+        font-size: 1.8rem;
+      }
+    }
+
+    .message {
+      font-size: 1.6rem;
+      color: #495057;
+      font-weight: 500;
+
+      @include mo {
+        font-size: 1.4rem;
+      }
+    }
+  }
+
+  .loading_state {
+    .icon {
+      color: #667eea;
+    }
+  }
+
+  .error_state {
+    .icon {
+      color: #ff6b6b;
+    }
+
+    .back_button {
+      margin-top: 2rem;
+      padding: 1rem 2rem;
+      background: var(--btn-color);
+      color: #fff;
+      border: none;
+      border-radius: 0.5rem;
+      cursor: pointer;
+      font-size: 1.4rem;
+      font-weight: 600;
+
+      @include mo {
+        padding: 0.8rem 1.5rem;
+        font-size: 1.3rem;
       }
     }
   }
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
new file mode 100644
index 0000000..2e8c416
--- /dev/null
+++ b/node_modules/.yarn-integrity
@@ -0,0 +1,10 @@
+{
+  "systemParams": "linux-x64-127",
+  "modulesFolders": [],
+  "flags": [],
+  "linkedModules": [],
+  "topLevelPatterns": [],
+  "lockfileEntries": {},
+  "files": [],
+  "artifacts": {}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..fb57ccd
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+