From 1f59b7b023b11d7c7ff5fe6bc0736b6f8e3c388b Mon Sep 17 00:00:00 2001
From: henny <kimhyein1105@gmail.com>
Date: Thu, 17 Jul 2025 22:44:17 +0900
Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-end/src/app/posts/page.tsx          |   8 +-
 front-end/src/styles/pages/post/post.scss | 559 +++++++++++++++++-----
 node_modules/.yarn-integrity              |  10 +
 yarn.lock                                 |   4 +
 4 files changed, 447 insertions(+), 134 deletions(-)
 create mode 100644 node_modules/.yarn-integrity
 create mode 100644 yarn.lock

diff --git a/front-end/src/app/posts/page.tsx b/front-end/src/app/posts/page.tsx
index 558b555..a92e7db 100644
--- a/front-end/src/app/posts/page.tsx
+++ b/front-end/src/app/posts/page.tsx
@@ -91,9 +91,9 @@ 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 +116,7 @@ export default function PostList() {
               ))
             ) : (
               <tr>
-                <td colSpan={4} style={{ textAlign: 'center' }}>
+                <td colSpan={4} className="empty_message">
                   게시글이 없습니다.
                 </td>
               </tr>
@@ -131,7 +131,7 @@ export default function PostList() {
           >
             이전
           </button>
-          <span>
+          <span className="page_info">
             {currentPage + 1} / {totalPages}
           </span>
           <button
diff --git a/front-end/src/styles/pages/post/post.scss b/front-end/src/styles/pages/post/post.scss
index 3d9ec3f..31040a3 100644
--- a/front-end/src/styles/pages/post/post.scss
+++ b/front-end/src/styles/pages/post/post.scss
@@ -1,196 +1,495 @@
+// 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;
-
-    select,
-    input {
-      padding: 0.8rem;
-      border: 0.1rem solid #ccc;
-      border-radius: 0.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;
+
+      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;
+        transition: all 0.2s ease;
+        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);
+        }
+      }
+    }
+
+    .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;
+        padding: 1.2rem 1.6rem;
+        border: 2px solid #e9ecef;
+        border-radius: 0.8rem;
+        font-size: 1.5rem;
+        background: #fff;
+        transition: border-color 0.2s ease;
+
+        @include mo {
+          width: 100%;
+          padding: 1rem 1.2rem;
+          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;
+        transition: background 0.2s ease;
+
+        @include mo {
+          width: 100%;
+          padding: 1rem 1.2rem;
+          font-size: 1.4rem;
+        }
+
+        &:hover {
+          background: var(--sub-btn-color);
+        }
+      }
     }
 
-    button {
-      padding: 0.8rem 1.2rem;
+    .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;
+      transition: background 0.2s ease;
+
+      @include mo {
+        width: 100%;
+        padding: 1rem 1.2rem;
+        font-size: 1.4rem;
+      }
 
       &:hover {
-        background: var(--btn-color);
+        background: var(--sub-btn-color);
+      }
+
+      &::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;
 
-      &:hover {
-        background: #f1f1f1;
+        @include mo {
+          font-size: 1.2rem;
+        }
+
+        &:first-child {
+          width: 10%;
+        }
+
+        &:nth-child(2) {
+          width: 55%;
+        }
+
+        &:nth-child(3) {
+          width: 20%;
+        }
+
+        &:last-child {
+          width: 15%;
+        }
+      }
+
+      tbody {
+        tr {
+          cursor: pointer;
+          transition: background 0.2s ease;
+
+          &:hover {
+            background: #f8f9fa;
+          }
+
+          &: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;
+
+              &:hover {
+                color: var(--btn-color);
+              }
+            }
+
+            &: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;
+        transition: all 0.2s ease;
+        min-width: 4.5rem;
 
-      &:hover {
-        background: var(--btn-color);
+        @include mo {
+          padding: 0.8rem 1.2rem;
+          font-size: 1.3rem;
+          min-width: 4rem;
+        }
+
+        &:hover:not(:disabled) {
+          background: var(--btn-color);
+          color: #fff;
+          border-color: var(--btn-color);
+        }
+
+        &: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;
+    border: 1px solid #e9ecef;
+    border-radius: 1rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
-  label {
-    font-size: 1.6rem;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-  }
+    @include mo {
+      padding: 2rem;
+      gap: 1.5rem;
+    }
+
+    .section_title {
+      font-size: 2.5rem;
+      font-weight: 700;
+      text-align: center;
+      margin-bottom: 3rem;
+      color: #1a1a1a;
+      letter-spacing: -0.02em;
 
-  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);
+      @include mo {
+        font-size: 2rem;
+        margin-bottom: 2rem;
+      }
     }
-  }
 
-  textarea {
-    height: 15rem;
-    resize: vertical;
-  }
+    .form_group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.8rem;
 
-  .button_group {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 1.5rem;
-    gap: 1rem;
+      label {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: #495057;
+        margin-bottom: 0.5rem;
 
-    button {
-      flex: 1;
-      padding: 1rem;
-      border: none;
-      font-size: 1.6rem;
-      border-radius: 0.5rem;
-      cursor: pointer;
-      transition: background 0.3s;
+        @include mo {
+          font-size: 1.4rem;
+        }
+      }
 
-      &:first-child {
-        background: var(--btn-color);
-        color: #fff;
+      select,
+      input,
+      textarea {
+        width: 100%;
+        padding: 1.2rem 1.6rem;
+        border: 2px solid #e9ecef;
+        border-radius: 0.8rem;
+        font-size: 1.5rem;
+        background: #fff;
+        transition: border-color 0.2s ease;
 
-        &:hover {
-          background: var(--btn-color);
+        @include mo {
+          padding: 1rem 1.2rem;
+          font-size: 1.4rem;
         }
 
-        &:disabled {
-          background: #ccc;
-          cursor: not-allowed;
+        &:focus {
+          outline: none;
+          border-color: var(--btn-color);
+        }
+
+        &::placeholder {
+          color: #adb5bd;
         }
       }
 
-      &:last-child {
-        background: #ccc;
-        color: #333;
+      textarea {
+        height: 18rem;
+        resize: vertical;
+        line-height: 1.6;
+        font-family: inherit;
 
-        &:hover {
-          background: #bbb;
+        @include mo {
+          height: 15rem;
         }
+      }
+    }
 
-        &:disabled {
-          background: #ddd;
-          cursor: not-allowed;
+    .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;
+        transition: all 0.2s ease;
+
+        @include mo {
+          padding: 1rem 1.2rem;
+          font-size: 1.4rem;
+        }
+
+        &.submit_btn {
+          background: var(--btn-color);
+          color: #fff;
+
+          &:hover:not(:disabled) {
+            background: var(--sub-btn-color);
+          }
+
+          &:disabled {
+            background: #adb5bd;
+            color: #6c757d;
+            cursor: not-allowed;
+          }
+        }
+
+        &.cancel_btn {
+          background: #f8f9fa;
+          color: #495057;
+          border: 2px solid #e9ecef;
+
+          &:hover {
+            background: #e9ecef;
+            border-color: #dee2e6;
+          }
         }
       }
     }
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
+
+

From 4b44b806ace26d3fba0b371dd55c2fd85c4de1fa Mon Sep 17 00:00:00 2001
From: henny <kimhyein1105@gmail.com>
Date: Thu, 17 Jul 2025 23:03:02 +0900
Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EC=BB=A4=EB=AE=A4=EB=8B=88?=
 =?UTF-8?q?=ED=8B=B0=20=EC=83=88=EA=B8=80=20=EC=9E=91=EC=84=B1=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-end/src/app/posts/new/page.tsx      |  64 ++++----
 front-end/src/app/posts/page.tsx          |  12 +-
 front-end/src/styles/pages/post/post.scss | 177 +++++++++-------------
 3 files changed, 121 insertions(+), 132 deletions(-)

diff --git a/front-end/src/app/posts/new/page.tsx b/front-end/src/app/posts/new/page.tsx
index 668e3a8..bd70c92 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>
+        
+        <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>
 
-        <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>
+          <input
+            type="text"
+            placeholder="제목을 입력하세요"
+            value={newPost.title}
+            onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
+          />
+        </div>
 
-        <button onClick={handleSubmit} disabled={loading}>
-          {loading ? '작성 중...' : '작성'}
-        </button>
-        <button onClick={() => router.back()} disabled={loading}>
-          취소
-        </button>
+        <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 a92e7db..823c08c 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 [searchType, setSearchType] = useState<'title' | 'author'>('title');
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [posts, setPosts] = useState<Post[]>([]);
   const [currentPage, setCurrentPage] = useState<number>(0);
@@ -45,8 +47,14 @@ 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');
diff --git a/front-end/src/styles/pages/post/post.scss b/front-end/src/styles/pages/post/post.scss
index 31040a3..db44a2d 100644
--- a/front-end/src/styles/pages/post/post.scss
+++ b/front-end/src/styles/pages/post/post.scss
@@ -43,29 +43,28 @@
       margin-left: auto;
       margin-right: auto;
 
-      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;
-        transition: all 0.2s ease;
-        position: relative;
-
-        @include mo {
-          padding: 1rem 1.8rem;
-          font-size: 1.4rem;
-        }
+              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);
+          &.active {
+            background: #fff;
+            color: var(--btn-color);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          }
         }
-      }
     }
 
     .search_bar {
@@ -84,16 +83,15 @@
 
       input {
         flex: 1;
-        padding: 1.2rem 1.6rem;
-        border: 2px solid #e9ecef;
-        border-radius: 0.8rem;
+        border: 1px solid #ccc;
+        border-radius: 0.5rem;
+        padding: 0 1rem;
         font-size: 1.5rem;
         background: #fff;
-        transition: border-color 0.2s ease;
+        height: 4.5rem;
 
         @include mo {
           width: 100%;
-          padding: 1rem 1.2rem;
           font-size: 1.4rem;
         }
 
@@ -117,17 +115,12 @@
         cursor: pointer;
         font-weight: 600;
         font-size: 1.5rem;
-        transition: background 0.2s ease;
 
         @include mo {
           width: 100%;
           padding: 1rem 1.2rem;
           font-size: 1.4rem;
         }
-
-        &:hover {
-          background: var(--sub-btn-color);
-        }
       }
     }
 
@@ -148,7 +141,6 @@
       font-size: 1.5rem;
       text-decoration: none;
       text-align: center;
-      transition: background 0.2s ease;
 
       @include mo {
         width: 100%;
@@ -156,10 +148,6 @@
         font-size: 1.4rem;
       }
 
-      &:hover {
-        background: var(--sub-btn-color);
-      }
-
       &::before {
         content: '+';
         font-size: 1.8rem;
@@ -219,60 +207,51 @@
         }
       }
 
-      tbody {
-        tr {
-          cursor: pointer;
-          transition: background 0.2s ease;
-
-          &:hover {
-            background: #f8f9fa;
-          }
+              tbody {
+          tr {
+            cursor: pointer;
 
-          &:last-child {
-            td {
-              border-bottom: none;
+            &:last-child {
+              td {
+                border-bottom: none;
+              }
             }
-          }
 
-          td {
-            font-size: 1.5rem;
-            color: #495057;
+            td {
+              font-size: 1.5rem;
+              color: #495057;
 
-            @include mo {
-              font-size: 1.3rem;
-            }
+              @include mo {
+                font-size: 1.3rem;
+              }
 
-            &:first-child {
-              color: #6c757d;
-              font-weight: 500;
-            }
+              &:first-child {
+                color: #6c757d;
+                font-weight: 500;
+              }
 
-            &:nth-child(2) {
-              font-weight: 600;
-              color: #212529;
+              &:nth-child(2) {
+                font-weight: 600;
+                color: #212529;
+              }
 
-              &:hover {
+              &:nth-child(3) {
                 color: var(--btn-color);
+                font-weight: 600;
+                cursor: pointer;
               }
-            }
 
-            &:nth-child(3) {
-              color: var(--btn-color);
-              font-weight: 600;
-              cursor: pointer;
-            }
+              &:last-child {
+                color: #6c757d;
+                font-size: 1.4rem;
 
-            &:last-child {
-              color: #6c757d;
-              font-size: 1.4rem;
-
-              @include mo {
-                font-size: 1.2rem;
+                @include mo {
+                  font-size: 1.2rem;
+                }
               }
             }
           }
         }
-      }
 
       .empty_message {
         text-align: center;
@@ -304,7 +283,6 @@
         border-radius: 0.6rem;
         font-weight: 600;
         font-size: 1.4rem;
-        transition: all 0.2s ease;
         min-width: 4.5rem;
 
         @include mo {
@@ -313,12 +291,6 @@
           min-width: 4rem;
         }
 
-        &:hover:not(:disabled) {
-          background: var(--btn-color);
-          color: #fff;
-          border-color: var(--btn-color);
-        }
-
         &:disabled {
           background: #f8f9fa;
           color: #adb5bd;
@@ -363,9 +335,6 @@
     gap: 2rem;
     background: #fff;
     padding: 3rem;
-    border: 1px solid #e9ecef;
-    border-radius: 1rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
     @include mo {
       padding: 2rem;
@@ -373,17 +342,21 @@
     }
 
     .section_title {
-      font-size: 2.5rem;
+      font-size: 3.5rem;
       font-weight: 700;
       text-align: center;
       margin-bottom: 3rem;
       color: #1a1a1a;
-      letter-spacing: -0.02em;
+      letter-spacing: -0.2rem;
 
       @include mo {
-        font-size: 2rem;
+        font-size: 3rem;
         margin-bottom: 2rem;
       }
+
+      @include mo_500 {
+        font-size: 2.3rem;
+      }
     }
 
     .form_group {
@@ -406,15 +379,13 @@
       input,
       textarea {
         width: 100%;
-        padding: 1.2rem 1.6rem;
-        border: 2px solid #e9ecef;
-        border-radius: 0.8rem;
+        border: 1px solid #ccc;
+        border-radius: 0.5rem;
+        padding: 0 1rem;
         font-size: 1.5rem;
         background: #fff;
-        transition: border-color 0.2s ease;
 
         @include mo {
-          padding: 1rem 1.2rem;
           font-size: 1.4rem;
         }
 
@@ -425,17 +396,25 @@
 
         &::placeholder {
           color: #adb5bd;
+          font-weight: 400;
         }
       }
 
+      select,
+      input {
+        height: 4.5rem;
+      }
+
       textarea {
         height: 18rem;
-        resize: vertical;
+        resize: none;
         line-height: 1.6;
         font-family: inherit;
+        padding: 1.2rem 1.6rem;
 
         @include mo {
           height: 15rem;
+          padding: 1rem 1.2rem;
         }
       }
     }
@@ -459,7 +438,6 @@
         border-radius: 0.8rem;
         cursor: pointer;
         font-weight: 600;
-        transition: all 0.2s ease;
 
         @include mo {
           padding: 1rem 1.2rem;
@@ -470,10 +448,6 @@
           background: var(--btn-color);
           color: #fff;
 
-          &:hover:not(:disabled) {
-            background: var(--sub-btn-color);
-          }
-
           &:disabled {
             background: #adb5bd;
             color: #6c757d;
@@ -485,11 +459,6 @@
           background: #f8f9fa;
           color: #495057;
           border: 2px solid #e9ecef;
-
-          &:hover {
-            background: #e9ecef;
-            border-color: #dee2e6;
-          }
         }
       }
     }

From 3d633d2221d7324eee159b7958dee5a1df1e1f3d Mon Sep 17 00:00:00 2001
From: henny <kimhyein1105@gmail.com>
Date: Thu, 17 Jul 2025 23:12:01 +0900
Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EA=B8=80=EC=93=B4=20=EC=82=AC?=
 =?UTF-8?q?=EB=9E=8C=EB=A7=8C=20=EC=88=98=EC=A0=95/=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=9E=88=EA=B2=8C=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-end/src/app/posts/[id]/page.tsx     |  77 +++++++++++--
 front-end/src/styles/pages/post/post.scss | 131 ++++++++++++++++++++++
 2 files changed, 196 insertions(+), 12 deletions(-)

diff --git a/front-end/src/app/posts/[id]/page.tsx b/front-end/src/app/posts/[id]/page.tsx
index d6690f5..b3fb716 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,65 @@ 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 style={{ textAlign: 'center', padding: '4rem 0' }}>
+            <div style={{ fontSize: '2rem', color: '#667eea', marginBottom: '1rem' }}>📖</div>
+            <p style={{ fontSize: '1.6rem', color: '#495057' }}>게시글을 불러오는 중...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  
+  if (error) {
+    return (
+      <div className="posts_container post_detail">
+        <div className="inner">
+          <div style={{ textAlign: 'center', padding: '4rem 0' }}>
+            <div style={{ fontSize: '2rem', color: '#ff6b6b', marginBottom: '1rem' }}>⚠️</div>
+            <p style={{ fontSize: '1.6rem', color: '#495057' }}>{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/styles/pages/post/post.scss b/front-end/src/styles/pages/post/post.scss
index db44a2d..4836645 100644
--- a/front-end/src/styles/pages/post/post.scss
+++ b/front-end/src/styles/pages/post/post.scss
@@ -464,3 +464,134 @@
     }
   }
 }
+
+// 게시글 상세 페이지 스타일
+.posts_container.post_detail {
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 4rem 2rem;
+
+  @include mo {
+    padding: 2rem 1rem;
+  }
+
+  .inner {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    background: #fff;
+    padding: 3rem;
+
+    @include mo {
+      padding: 2rem;
+      gap: 1.5rem;
+    }
+
+    .post_header {
+      border-bottom: 1px solid #e9ecef;
+      padding-bottom: 2rem;
+
+      .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;
+        }
+      }
+
+      .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;
+        }
+      }
+    }
+
+    .post_content {
+      padding: 2rem 0;
+      line-height: 1.8;
+      font-size: 1.6rem;
+      color: #495057;
+
+      @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;
+        }
+
+        &.edit_btn {
+          background: var(--btn-color);
+          color: #fff;
+        }
+
+        &.delete_btn {
+          background: #dc3545;
+          color: #fff;
+        }
+
+        &.list_btn {
+          background: #f8f9fa;
+          color: #495057;
+          border: 1px solid #dee2e6;
+        }
+      }
+    }
+  }
+}

From 49ea2fb0179977b16ca9569fe6a6de5a48cd6b13 Mon Sep 17 00:00:00 2001
From: henny <kimhyein1105@gmail.com>
Date: Thu, 17 Jul 2025 23:13:53 +0900
Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20api=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-end/src/app/posts/[id]/edit/page.tsx | 155 +++++++++++++++++----
 1 file changed, 126 insertions(+), 29 deletions(-)

diff --git a/front-end/src/app/posts/[id]/edit/page.tsx b/front-end/src/app/posts/[id]/edit/page.tsx
index 2f1590d..2d70758 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,89 @@ 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 style={{ textAlign: 'center', padding: '4rem 0' }}>
+            <div style={{ fontSize: '2rem', color: '#667eea', marginBottom: '1rem' }}>📝</div>
+            <p style={{ fontSize: '1.6rem', color: '#495057' }}>게시글을 불러오는 중...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="posts_container new_post">
+        <div className="inner">
+          <div style={{ textAlign: 'center', padding: '4rem 0' }}>
+            <div style={{ fontSize: '2rem', color: '#ff6b6b', marginBottom: '1rem' }}>⚠️</div>
+            <p style={{ fontSize: '1.6rem', color: '#495057', marginBottom: '2rem' }}>{error}</p>
+            <button 
+              onClick={() => router.push('/posts')}
+              style={{
+                padding: '1rem 2rem',
+                background: 'var(--btn-color)',
+                color: '#fff',
+                border: 'none',
+                borderRadius: '0.5rem',
+                cursor: 'pointer',
+                fontSize: '1.4rem'
+              }}
+            >
+              목록으로 돌아가기
+            </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>

From e2b86b4d4e9bff15348f2c171c453768515caa71 Mon Sep 17 00:00:00 2001
From: henny <kimhyein1105@gmail.com>
Date: Thu, 17 Jul 2025 23:32:42 +0900
Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0=20?=
 =?UTF-8?q?=EA=B8=80=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/mypage/MyPostsSection.tsx  | 186 +++++++++++++-----
 front-end/src/styles/pages/mypage/mypage.scss | 173 ++++++++++++++++
 2 files changed, 310 insertions(+), 49 deletions(-)

diff --git a/front-end/src/components/mypage/MyPostsSection.tsx b/front-end/src/components/mypage/MyPostsSection.tsx
index a3fe7f4..07f8a3c 100644
--- a/front-end/src/components/mypage/MyPostsSection.tsx
+++ b/front-end/src/components/mypage/MyPostsSection.tsx
@@ -17,18 +17,27 @@ 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);
+        const newPosts = response.data.content;
+        setAllPosts(prev => [...prev, ...newPosts]);
         setTotalPages(response.data.totalPages);
+        
+        // 더 보여줄 게시글이 있는지 확인
+        setHasMore(currentPage < response.data.totalPages - 1);
       } catch (error) {
         console.error('게시글 불러오기 실패:', error);
         setError('게시글을 불러오지 못했습니다.');
@@ -42,60 +51,139 @@ 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 style={{ textAlign: 'center', padding: '4rem 0' }}>
+          <div style={{ fontSize: '2rem', color: '#ff6b6b', marginBottom: '1rem' }}>🔒</div>
+          <p style={{ fontSize: '1.6rem', color: '#495057' }}>로그인이 필요합니다.</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="my_posts_section">
+        <div style={{ textAlign: 'center', padding: '4rem 0' }}>
+          <div style={{ fontSize: '2rem', color: '#667eea', marginBottom: '1rem' }}>📝</div>
+          <p style={{ fontSize: '1.6rem', color: '#495057' }}>게시글을 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="my_posts_section">
+        <div style={{ textAlign: 'center', padding: '4rem 0' }}>
+          <div style={{ fontSize: '2rem', color: '#ff6b6b', marginBottom: '1rem' }}>⚠️</div>
+          <p style={{ fontSize: '1.6rem', color: '#495057' }}>{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 style={{ fontSize: '2rem', color: '#28a745', marginBottom: '1rem' }}>🎉</div>
+                <p style={{ fontSize: '1.6rem', color: '#495057', marginBottom: '0.5rem' }}>
+                  모든 게시글을 확인했습니다!
+                </p>
+                <p style={{ fontSize: '1.4rem', color: '#6c757d' }}>
+                  총 {allPosts.length}개의 게시글을 작성하셨네요.
+                </p>
+              </div>
+            ) : null}
           </div>
         </>
       ) : (
-        <p>작성한 게시글이 없습니다.</p>
+        <div className="empty_state">
+          <div style={{ fontSize: '3rem', color: '#adb5bd', marginBottom: '1rem' }}>📝</div>
+          <p style={{ fontSize: '1.6rem', color: '#6c757d', marginBottom: '2rem' }}>
+            아직 작성한 게시글이 없습니다.
+          </p>
+          <button 
+            onClick={() => router.push('/posts/new')}
+            style={{
+              padding: '1rem 2rem',
+              background: 'var(--sub-btn-color)',
+              color: '#fff',
+              border: 'none',
+              borderRadius: '0.5rem',
+              cursor: 'pointer',
+              fontSize: '1.4rem'
+            }}
+          >
+            첫 게시글 작성하기
+          </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..9ae0ddd 100644
--- a/front-end/src/styles/pages/mypage/mypage.scss
+++ b/front-end/src/styles/pages/mypage/mypage.scss
@@ -170,6 +170,179 @@
         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;
+          }
+        }
+      }
+
+      .empty_state {
+        text-align: center;
+        padding: 4rem 2rem;
+
+        @include mo {
+          padding: 3rem 1rem;
+        }
+      }
+    }
+
     .video-title {
       font-size: 2rem;
       font-weight: bold;

From c4cce6217dcab6b782b5df7e8dce5cab6456f24d Mon Sep 17 00:00:00 2001
From: henny <kimhyein1105@gmail.com>
Date: Sat, 19 Jul 2025 23:34:03 +0900
Subject: [PATCH 6/7] =?UTF-8?q?chore:=20=EC=9D=B8=EB=9D=BC=EC=9D=B8=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-end/src/app/posts/[id]/edit/page.tsx    |  22 ++--
 front-end/src/app/posts/[id]/page.tsx         |  12 +-
 .../src/components/mypage/MyPostsSection.tsx  |  38 +++---
 front-end/src/styles/pages/mypage/mypage.scss | 119 ++++++++++++++++++
 front-end/src/styles/pages/post/post.scss     |  65 ++++++++++
 5 files changed, 212 insertions(+), 44 deletions(-)

diff --git a/front-end/src/app/posts/[id]/edit/page.tsx b/front-end/src/app/posts/[id]/edit/page.tsx
index 2d70758..a3c366e 100644
--- a/front-end/src/app/posts/[id]/edit/page.tsx
+++ b/front-end/src/app/posts/[id]/edit/page.tsx
@@ -97,9 +97,9 @@ export default function EditPost({ params }: { params: { id: string } }) {
     return (
       <div className="posts_container new_post">
         <div className="inner">
-          <div style={{ textAlign: 'center', padding: '4rem 0' }}>
-            <div style={{ fontSize: '2rem', color: '#667eea', marginBottom: '1rem' }}>📝</div>
-            <p style={{ fontSize: '1.6rem', color: '#495057' }}>게시글을 불러오는 중...</p>
+          <div className="loading_state">
+            <div className="icon">📝</div>
+            <p className="message">게시글을 불러오는 중...</p>
           </div>
         </div>
       </div>
@@ -110,20 +110,12 @@ export default function EditPost({ params }: { params: { id: string } }) {
     return (
       <div className="posts_container new_post">
         <div className="inner">
-          <div style={{ textAlign: 'center', padding: '4rem 0' }}>
-            <div style={{ fontSize: '2rem', color: '#ff6b6b', marginBottom: '1rem' }}>⚠️</div>
-            <p style={{ fontSize: '1.6rem', color: '#495057', marginBottom: '2rem' }}>{error}</p>
+          <div className="error_state">
+            <div className="icon">⚠️</div>
+            <p className="message">{error}</p>
             <button 
+              className="back_button"
               onClick={() => router.push('/posts')}
-              style={{
-                padding: '1rem 2rem',
-                background: 'var(--btn-color)',
-                color: '#fff',
-                border: 'none',
-                borderRadius: '0.5rem',
-                cursor: 'pointer',
-                fontSize: '1.4rem'
-              }}
             >
               목록으로 돌아가기
             </button>
diff --git a/front-end/src/app/posts/[id]/page.tsx b/front-end/src/app/posts/[id]/page.tsx
index b3fb716..2030716 100644
--- a/front-end/src/app/posts/[id]/page.tsx
+++ b/front-end/src/app/posts/[id]/page.tsx
@@ -72,9 +72,9 @@ export default function PostDetail({ params }: { params: { id: string } }) {
     return (
       <div className="posts_container post_detail">
         <div className="inner">
-          <div style={{ textAlign: 'center', padding: '4rem 0' }}>
-            <div style={{ fontSize: '2rem', color: '#667eea', marginBottom: '1rem' }}>📖</div>
-            <p style={{ fontSize: '1.6rem', color: '#495057' }}>게시글을 불러오는 중...</p>
+          <div className="loading_state">
+            <div className="icon">📖</div>
+            <p className="message">게시글을 불러오는 중...</p>
           </div>
         </div>
       </div>
@@ -85,9 +85,9 @@ export default function PostDetail({ params }: { params: { id: string } }) {
     return (
       <div className="posts_container post_detail">
         <div className="inner">
-          <div style={{ textAlign: 'center', padding: '4rem 0' }}>
-            <div style={{ fontSize: '2rem', color: '#ff6b6b', marginBottom: '1rem' }}>⚠️</div>
-            <p style={{ fontSize: '1.6rem', color: '#495057' }}>{error}</p>
+          <div className="error_state">
+            <div className="icon">⚠️</div>
+            <p className="message">{error}</p>
           </div>
         </div>
       </div>
diff --git a/front-end/src/components/mypage/MyPostsSection.tsx b/front-end/src/components/mypage/MyPostsSection.tsx
index 07f8a3c..2423147 100644
--- a/front-end/src/components/mypage/MyPostsSection.tsx
+++ b/front-end/src/components/mypage/MyPostsSection.tsx
@@ -71,9 +71,9 @@ export default function MyPostsSection() {
   if (!userInfo) {
     return (
       <div className="my_posts_section">
-        <div style={{ textAlign: 'center', padding: '4rem 0' }}>
-          <div style={{ fontSize: '2rem', color: '#ff6b6b', marginBottom: '1rem' }}>🔒</div>
-          <p style={{ fontSize: '1.6rem', color: '#495057' }}>로그인이 필요합니다.</p>
+        <div className="error_state">
+          <div className="icon">🔒</div>
+          <p className="message">로그인이 필요합니다.</p>
         </div>
       </div>
     );
@@ -82,9 +82,9 @@ export default function MyPostsSection() {
   if (loading) {
     return (
       <div className="my_posts_section">
-        <div style={{ textAlign: 'center', padding: '4rem 0' }}>
-          <div style={{ fontSize: '2rem', color: '#667eea', marginBottom: '1rem' }}>📝</div>
-          <p style={{ fontSize: '1.6rem', color: '#495057' }}>게시글을 불러오는 중...</p>
+        <div className="loading_state">
+          <div className="icon">📝</div>
+          <p className="message">게시글을 불러오는 중...</p>
         </div>
       </div>
     );
@@ -93,9 +93,9 @@ export default function MyPostsSection() {
   if (error) {
     return (
       <div className="my_posts_section">
-        <div style={{ textAlign: 'center', padding: '4rem 0' }}>
-          <div style={{ fontSize: '2rem', color: '#ff6b6b', marginBottom: '1rem' }}>⚠️</div>
-          <p style={{ fontSize: '1.6rem', color: '#495057' }}>{error}</p>
+        <div className="error_state">
+          <div className="icon">⚠️</div>
+          <p className="message">{error}</p>
         </div>
       </div>
     );
@@ -152,11 +152,11 @@ export default function MyPostsSection() {
               </button>
             ) : showCompletionMessage ? (
               <div className="completion_message">
-                <div style={{ fontSize: '2rem', color: '#28a745', marginBottom: '1rem' }}>🎉</div>
-                <p style={{ fontSize: '1.6rem', color: '#495057', marginBottom: '0.5rem' }}>
+                <div className="completion_icon">🎉</div>
+                <p className="completion_title">
                   모든 게시글을 확인했습니다!
                 </p>
-                <p style={{ fontSize: '1.4rem', color: '#6c757d' }}>
+                <p className="completion_subtitle">
                   총 {allPosts.length}개의 게시글을 작성하셨네요.
                 </p>
               </div>
@@ -165,21 +165,13 @@ export default function MyPostsSection() {
         </>
       ) : (
         <div className="empty_state">
-          <div style={{ fontSize: '3rem', color: '#adb5bd', marginBottom: '1rem' }}>📝</div>
-          <p style={{ fontSize: '1.6rem', color: '#6c757d', marginBottom: '2rem' }}>
+          <div className="empty_icon">📝</div>
+          <p className="empty_message">
             아직 작성한 게시글이 없습니다.
           </p>
           <button 
+            className="empty_button"
             onClick={() => router.push('/posts/new')}
-            style={{
-              padding: '1rem 2rem',
-              background: 'var(--sub-btn-color)',
-              color: '#fff',
-              border: 'none',
-              borderRadius: '0.5rem',
-              cursor: 'pointer',
-              fontSize: '1.4rem'
-            }}
           >
             첫 게시글 작성하기
           </button>
diff --git a/front-end/src/styles/pages/mypage/mypage.scss b/front-end/src/styles/pages/mypage/mypage.scss
index 9ae0ddd..b656f1d 100644
--- a/front-end/src/styles/pages/mypage/mypage.scss
+++ b/front-end/src/styles/pages/mypage/mypage.scss
@@ -330,6 +330,36 @@
           @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;
+            }
+          }
         }
       }
 
@@ -340,6 +370,95 @@
         @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;
+        }
       }
     }
 
diff --git a/front-end/src/styles/pages/post/post.scss b/front-end/src/styles/pages/post/post.scss
index 4836645..e217faa 100644
--- a/front-end/src/styles/pages/post/post.scss
+++ b/front-end/src/styles/pages/post/post.scss
@@ -595,3 +595,68 @@
     }
   }
 }
+
+// 로딩 및 에러 상태 스타일
+.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;
+      }
+    }
+  }
+}

From ccaf9c27ea4afd40d13193f51568cf659ddb80c2 Mon Sep 17 00:00:00 2001
From: henny <kimhyein1105@gmail.com>
Date: Sat, 19 Jul 2025 23:38:52 +0900
Subject: [PATCH 7/7] =?UTF-8?q?chore:=20Prettier=EC=99=80=20ESLint=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-end/src/app/posts/[id]/edit/page.tsx    | 13 ++---
 front-end/src/app/posts/[id]/page.tsx         |  8 ++--
 front-end/src/app/posts/new/page.tsx          |  2 +-
 front-end/src/app/posts/page.tsx              | 12 +++--
 .../src/components/mypage/MyPostsSection.tsx  | 47 +++++++------------
 5 files changed, 35 insertions(+), 47 deletions(-)

diff --git a/front-end/src/app/posts/[id]/edit/page.tsx b/front-end/src/app/posts/[id]/edit/page.tsx
index a3c366e..0f7a541 100644
--- a/front-end/src/app/posts/[id]/edit/page.tsx
+++ b/front-end/src/app/posts/[id]/edit/page.tsx
@@ -22,7 +22,7 @@ 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);
@@ -40,7 +40,7 @@ export default function EditPost({ params }: { params: { id: string } }) {
           foundPost = response.data.content.find((post: Post) => post.id.toString() === params.id);
           if (foundPost) break;
         }
-        
+
         if (!foundPost) {
           throw new Error('게시글을 찾을 수 없습니다.');
         }
@@ -69,7 +69,7 @@ export default function EditPost({ params }: { params: { id: string } }) {
       alert('제목을 입력해주세요.');
       return;
     }
-    
+
     if (!content.trim()) {
       alert('내용을 입력해주세요.');
       return;
@@ -113,10 +113,7 @@ export default function EditPost({ params }: { params: { id: string } }) {
           <div className="error_state">
             <div className="icon">⚠️</div>
             <p className="message">{error}</p>
-            <button 
-              className="back_button"
-              onClick={() => router.push('/posts')}
-            >
+            <button className="back_button" onClick={() => router.push('/posts')}>
               목록으로 돌아가기
             </button>
           </div>
@@ -129,7 +126,7 @@ export default function EditPost({ params }: { params: { id: string } }) {
     <div className="posts_container new_post">
       <div className="inner">
         <h2 className="section_title">게시글 수정</h2>
-        
+
         <div className="form_group">
           <label htmlFor="title">제목</label>
           <input
diff --git a/front-end/src/app/posts/[id]/page.tsx b/front-end/src/app/posts/[id]/page.tsx
index 2030716..84f28d9 100644
--- a/front-end/src/app/posts/[id]/page.tsx
+++ b/front-end/src/app/posts/[id]/page.tsx
@@ -57,7 +57,7 @@ export default function PostDetail({ params }: { params: { id: string } }) {
     if (!confirm('정말로 이 게시글을 삭제하시겠습니까?')) {
       return;
     }
-    
+
     try {
       await deletePost(params.id);
       alert('게시글이 삭제되었습니다.');
@@ -80,7 +80,7 @@ export default function PostDetail({ params }: { params: { id: string } }) {
       </div>
     );
   }
-  
+
   if (error) {
     return (
       <div className="posts_container post_detail">
@@ -100,7 +100,9 @@ export default function PostDetail({ params }: { params: { id: string } }) {
         <div className="post_header">
           <h2 className="section_title">{post?.title}</h2>
           <div className="post_meta">
-            <span className="category">{post?.category === 'FREE' ? '자유게시판' : '질문게시판'}</span>
+            <span className="category">
+              {post?.category === 'FREE' ? '자유게시판' : '질문게시판'}
+            </span>
             <span className="author">작성자: {post?.nickname}</span>
             <span className="date">
               {post?.writtenAt ? new Date(post.writtenAt).toLocaleDateString() : '-'}
diff --git a/front-end/src/app/posts/new/page.tsx b/front-end/src/app/posts/new/page.tsx
index bd70c92..f22516d 100644
--- a/front-end/src/app/posts/new/page.tsx
+++ b/front-end/src/app/posts/new/page.tsx
@@ -51,7 +51,7 @@ export default function PostForm() {
     <div className="posts_container new_post">
       <div className="inner">
         <h2 className="section_title">새 글 작성</h2>
-        
+
         <div className="form_group">
           <label>카테고리</label>
           <select
diff --git a/front-end/src/app/posts/page.tsx b/front-end/src/app/posts/page.tsx
index 823c08c..303a8eb 100644
--- a/front-end/src/app/posts/page.tsx
+++ b/front-end/src/app/posts/page.tsx
@@ -21,7 +21,7 @@ export default function PostList() {
   const isLoggedIn = userState.userInfo !== null;
   const [category, setCategory] = useState<'FREE' | 'QNA'>('FREE');
   const [query, setQuery] = useState<string>('');
-  const [searchType, setSearchType] = useState<'title' | 'author'>('title');
+
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [posts, setPosts] = useState<Post[]>([]);
   const [currentPage, setCurrentPage] = useState<number>(0);
@@ -49,9 +49,11 @@ export default function PostList() {
   const handleNewPost = () => {
     console.log('현재 로그인 상태:', isLoggedIn);
     console.log('Redux 상태:', userState);
-    
+
     if (!isLoggedIn) {
-      const shouldLogin = confirm('새 글을 작성하려면 로그인이 필요합니다.\n로그인 페이지로 이동하시겠습니까?');
+      const shouldLogin = confirm(
+        '새 글을 작성하려면 로그인이 필요합니다.\n로그인 페이지로 이동하시겠습니까?',
+      );
       if (shouldLogin) {
         router.push('/login');
       }
@@ -99,7 +101,9 @@ export default function PostList() {
           <button onClick={handleSearch}>검색</button>
         </div>
 
-        <button className="new_post_btn" onClick={handleNewPost}>새 글 작성</button>
+        <button className="new_post_btn" onClick={handleNewPost}>
+          새 글 작성
+        </button>
 
         <table className="posts_table">
           <thead>
diff --git a/front-end/src/components/mypage/MyPostsSection.tsx b/front-end/src/components/mypage/MyPostsSection.tsx
index 2423147..9c38698 100644
--- a/front-end/src/components/mypage/MyPostsSection.tsx
+++ b/front-end/src/components/mypage/MyPostsSection.tsx
@@ -22,7 +22,7 @@ export default function MyPostsSection() {
   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);
 
@@ -33,9 +33,8 @@ export default function MyPostsSection() {
       try {
         const response = await apiClient.get(`/post/my?page=${currentPage}`);
         const newPosts = response.data.content;
-        setAllPosts(prev => [...prev, ...newPosts]);
-        setTotalPages(response.data.totalPages);
-        
+        setAllPosts((prev) => [...prev, ...newPosts]);
+
         // 더 보여줄 게시글이 있는지 확인
         setHasMore(currentPage < response.data.totalPages - 1);
       } catch (error) {
@@ -53,14 +52,14 @@ export default function MyPostsSection() {
 
   const handleLoadMore = async () => {
     if (!hasMore) return;
-    
+
     setLoadingMore(true);
-    setCurrentPage(prev => prev + 1);
+    setCurrentPage((prev) => prev + 1);
     setLoadingMore(false);
   };
 
   const handleShowMore = () => {
-    setDisplayedCount(prev => prev + POSTS_PER_LOAD);
+    setDisplayedCount((prev) => prev + POSTS_PER_LOAD);
   };
 
   // 현재 표시할 게시글들
@@ -104,13 +103,13 @@ export default function MyPostsSection() {
   return (
     <div className="my_posts_section">
       <h2 className="section_title">내가 쓴 글 모음</h2>
-      
+
       {displayedPosts.length > 0 ? (
         <>
           <div className="posts_list">
             {displayedPosts.map((post, index) => (
-              <div 
-                key={post.id} 
+              <div
+                key={post.id}
                 className="post_item"
                 onClick={() => router.push(`/posts/${post.id}`)}
               >
@@ -126,36 +125,27 @@ export default function MyPostsSection() {
                     {new Date(post.writtenAt).toLocaleDateString('ko-KR', {
                       year: 'numeric',
                       month: 'long',
-                      day: 'numeric'
+                      day: 'numeric',
                     })}
                   </span>
                 </div>
               </div>
             ))}
           </div>
-          
+
           <div className="load_more_section">
             {canShowMore ? (
-              <button 
-                className="load_more_btn"
-                onClick={handleShowMore}
-              >
+              <button className="load_more_btn" onClick={handleShowMore}>
                 더보기
               </button>
             ) : hasMore ? (
-              <button 
-                className="load_more_btn"
-                onClick={handleLoadMore}
-                disabled={loadingMore}
-              >
+              <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_title">모든 게시글을 확인했습니다!</p>
                 <p className="completion_subtitle">
                   총 {allPosts.length}개의 게시글을 작성하셨네요.
                 </p>
@@ -166,13 +156,8 @@ export default function MyPostsSection() {
       ) : (
         <div className="empty_state">
           <div className="empty_icon">📝</div>
-          <p className="empty_message">
-            아직 작성한 게시글이 없습니다.
-          </p>
-          <button 
-            className="empty_button"
-            onClick={() => router.push('/posts/new')}
-          >
+          <p className="empty_message">아직 작성한 게시글이 없습니다.</p>
+          <button className="empty_button" onClick={() => router.push('/posts/new')}>
             첫 게시글 작성하기
           </button>
         </div>