diff --git a/src/app/(root)/boards/BoardsPage.module.css b/src/app/(root)/boards/BoardsPage.module.css
new file mode 100644
index 0000000..aa08000
--- /dev/null
+++ b/src/app/(root)/boards/BoardsPage.module.css
@@ -0,0 +1,254 @@
+.container {
+  position: relative;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 24px 80px;
+}
+
+/* Header */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 40px;
+}
+
+.pageTitle {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.searchWrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 400px;
+  height: 48px;
+  padding: 0 20px;
+  border: 2px solid var(--color-brand-primary);
+  border-radius: 24px;
+  background: var(--color-background-inverse);
+}
+
+.searchIcon {
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.searchInput {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-pretendard), 'Pretendard', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-text-tertiary);
+}
+
+.searchInput::placeholder {
+  color: var(--color-text-default);
+}
+
+/* Section Common */
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.moreButton {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  border: none;
+  background: none;
+  font-family: var(--font-pretendard), 'Pretendard', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-text-default);
+  cursor: pointer;
+}
+
+.moreButton:hover {
+  color: var(--color-text-secondary);
+}
+
+/* Best Section */
+.bestSection {
+  margin-bottom: 48px;
+  background: var(--color-background-secondary);
+  border-radius: 16px;
+  padding: 24px;
+}
+
+.carouselContainer {
+  overflow: hidden;
+}
+
+.carouselTrack {
+  display: flex;
+  gap: 16px;
+  align-items: stretch;
+}
+
+.bestCardWrapper {
+  flex: 1;
+  min-width: 0;
+}
+
+.carouselControls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16px;
+}
+
+.dots {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 auto;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border: none;
+  border-radius: 4px;
+  padding: 0;
+  background: #cbd5e1;
+  cursor: pointer;
+  transition:
+    width 0.3s ease,
+    background 0.2s ease;
+}
+
+.dotActive {
+  width: 20px;
+  background: var(--color-interaction-inactive);
+}
+
+.arrows {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.arrowButton {
+  cursor: pointer;
+}
+
+/* All Section */
+.allSection {
+  margin-bottom: 40px;
+}
+
+.articleGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  align-items: stretch;
+}
+
+/* Dropdown Override */
+.dropdownMenu {
+  min-height: auto;
+}
+
+/* Floating Button - 카드 영역 오른쪽에 떠있음 */
+.floatingButtonWrapper {
+  position: fixed;
+  bottom: 120px;
+  left: calc(72px + (100vw - 72px) / 2 + 600px + 24px);
+}
+
+/* Tablet */
+@media (max-width: 1199px) {
+  .container {
+    padding: 32px 24px 80px;
+  }
+
+  .searchWrapper {
+    width: 320px;
+  }
+
+  .bestSection {
+    margin-left: -24px;
+    margin-right: -24px;
+    border-radius: 0;
+  }
+
+  .bestCardWrapper {
+    flex: 0 0 100%;
+  }
+
+  .articleGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .floatingButtonWrapper {
+    left: auto;
+    bottom: 32px;
+    right: 32px;
+  }
+}
+
+/* Mobile */
+@media (max-width: 767px) {
+  .container {
+    padding: 24px 16px 80px;
+  }
+
+  .bestSection {
+    margin-left: -16px;
+    margin-right: -16px;
+  }
+
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .searchWrapper {
+    width: 100%;
+  }
+
+  .pageTitle {
+    font-size: 20px;
+  }
+
+  .sectionTitle {
+    font-size: 18px;
+  }
+
+  .carouselTrack {
+    gap: 12px;
+  }
+
+  .bestCardWrapper {
+    flex: 0 0 100%;
+  }
+
+  .articleGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .floatingButtonWrapper {
+    left: auto;
+    bottom: 24px;
+    right: 24px;
+  }
+}
diff --git a/src/app/(root)/boards/BoardsPage.tsx b/src/app/(root)/boards/BoardsPage.tsx
new file mode 100644
index 0000000..fd882d6
--- /dev/null
+++ b/src/app/(root)/boards/BoardsPage.tsx
@@ -0,0 +1,248 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { motion, AnimatePresence } from 'framer-motion';
+import ArticleCard from '@/components/Card/ArticleCard/ArticleCard';
+import FloatingButton from '@/components/Button/domain/FloatingButton/FloatingButton';
+import Dropdown from '@/components/dropdown/Dropdown';
+import useBreakpoint from './useBreakpoint';
+import searchIcon from '@/assets/icons/search/searchLarge.svg';
+import arrowLeftIcon from '@/assets/buttons/arrow/leftArrowButton.svg';
+import arrowRightIcon from '@/assets/buttons/arrow/rightArrowButton.svg';
+import arrowRightLarge from '@/assets/icons/arrow/arrowRightLarge.svg';
+import styles from './BoardsPage.module.css';
+
+interface Article {
+  id: number;
+  title: string;
+  content?: string;
+  writer: { nickname: string; id: number };
+  createdAt: string;
+  likeCount: number;
+  image?: string | null;
+}
+
+interface BoardsPageProps {
+  bestArticles?: Article[];
+  articles?: Article[];
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+  onSearch?: (keyword: string) => void;
+  onSort?: (orderBy: 'recent' | 'like') => void;
+}
+
+const VISIBLE_COUNT_MAP = { desktop: 3, tablet: 2, mobile: 1 } as const;
+
+const SORT_OPTIONS = [
+  { value: 'latest', label: '최신순' },
+  { value: 'likes', label: '좋아요 많은순' },
+];
+
+const SORT_ORDER_MAP: Record<string, 'recent' | 'like'> = {
+  latest: 'recent',
+  likes: 'like',
+};
+
+export default function BoardsPage({
+  bestArticles = [],
+  articles = [],
+  hasMore = false,
+  onLoadMore,
+  onSearch,
+  onSort,
+}: BoardsPageProps) {
+  const router = useRouter();
+  const breakpoint = useBreakpoint();
+  const visibleCount = VISIBLE_COUNT_MAP[breakpoint];
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [, setSortBy] = useState('latest');
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  const handleIntersect = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      if (entries[0].isIntersecting && hasMore) {
+        onLoadMore?.();
+      }
+    },
+    [hasMore, onLoadMore],
+  );
+
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(handleIntersect, { rootMargin: '200px' });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [handleIntersect]);
+
+  const totalPages = Math.ceil(bestArticles.length / visibleCount);
+  const safePage = Math.min(currentPage, Math.max(0, totalPages - 1));
+
+  if (safePage !== currentPage) {
+    setCurrentPage(safePage);
+  }
+
+  const visibleBestArticles = bestArticles.slice(
+    safePage * visibleCount,
+    safePage * visibleCount + visibleCount,
+  );
+
+  const handleSearchSubmit = () => {
+    onSearch?.(searchQuery);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSearchSubmit();
+    }
+  };
+
+  const handleSortChange = (value: string) => {
+    setSortBy(value);
+    onSort?.(SORT_ORDER_MAP[value] || 'recent');
+  };
+
+  const handlePrev = () => {
+    setDirection(-1);
+    setCurrentPage((prev) => Math.max(0, prev - 1));
+  };
+  const handleNext = () => {
+    setDirection(1);
+    setCurrentPage((prev) => Math.min(totalPages - 1, prev + 1));
+  };
+
+  return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <h1 className={styles.pageTitle}>자유게시판</h1>
+        <div className={styles.searchWrapper}>
+          <Image
+            src={searchIcon}
+            alt="검색"
+            width={32}
+            height={32}
+            className={styles.searchIcon}
+            onClick={handleSearchSubmit}
+          />
+          <input
+            type="text"
+            className={styles.searchInput}
+            placeholder="검색어를 입력해주세요"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        </div>
+      </header>
+
+      <section className={styles.bestSection}>
+        <div className={styles.sectionHeader}>
+          <h2 className={styles.sectionTitle}>베스트 게시글</h2>
+          <button type="button" className={styles.moreButton}>
+            더보기
+            <Image src={arrowRightLarge} alt="" width={16} height={16} />
+          </button>
+        </div>
+
+        <div className={styles.carouselContainer}>
+          <AnimatePresence initial={false} custom={direction} mode="wait">
+            <motion.div
+              key={currentPage}
+              custom={direction}
+              variants={{
+                enter: (d: number) => ({ x: d > 0 ? 40 : -40, opacity: 0 }),
+                center: { x: 0, opacity: 1 },
+                exit: (d: number) => ({ x: d > 0 ? -40 : 40, opacity: 0 }),
+              }}
+              initial="enter"
+              animate="center"
+              exit="exit"
+              transition={{ duration: 0.25, ease: 'easeInOut' }}
+              className={styles.carouselTrack}
+            >
+              {visibleBestArticles.map((article) => (
+                <div key={article.id} className={styles.bestCardWrapper}>
+                  <ArticleCard
+                    {...article}
+                    image={article.image ?? undefined}
+                    isBest
+                    onClick={() => router.push(`/boards/${article.id}`)}
+                  />
+                </div>
+              ))}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+
+        <div className={styles.carouselControls}>
+          <div className={styles.dots}>
+            {Array.from({ length: totalPages }).map((_, i) => (
+              <button
+                key={i}
+                type="button"
+                className={`${styles.dot} ${i === currentPage ? styles.dotActive : ''}`}
+                onClick={() => {
+                  setDirection(i > currentPage ? 1 : -1);
+                  setCurrentPage(i);
+                }}
+                aria-label={`페이지 ${i + 1}`}
+              />
+            ))}
+          </div>
+          <div className={styles.arrows}>
+            <Image
+              src={arrowLeftIcon}
+              alt="이전"
+              width={32}
+              height={32}
+              className={styles.arrowButton}
+              onClick={handlePrev}
+            />
+            <Image
+              src={arrowRightIcon}
+              alt="다음"
+              width={32}
+              height={32}
+              className={styles.arrowButton}
+              onClick={handleNext}
+            />
+          </div>
+        </div>
+      </section>
+
+      <section className={styles.allSection}>
+        <div className={styles.sectionHeader}>
+          <h2 className={styles.sectionTitle}>전체</h2>
+          <Dropdown
+            items={SORT_OPTIONS}
+            defaultValue="latest"
+            ariaLabel="정렬 기준"
+            menuClassName={styles.dropdownMenu}
+            onChange={handleSortChange}
+          />
+        </div>
+
+        <div className={styles.articleGrid}>
+          {articles.map((article) => (
+            <ArticleCard
+              key={article.id}
+              {...article}
+              image={article.image ?? undefined}
+              onClick={() => router.push(`/boards/${article.id}`)}
+            />
+          ))}
+        </div>
+        <div ref={sentinelRef} />
+      </section>
+
+      <div className={styles.floatingButtonWrapper}>
+        <FloatingButton icon="edit" onClick={() => router.push('/boards/write')} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(root)/boards/[articleId]/ArticleDetailPage.module.css b/src/app/(root)/boards/[articleId]/ArticleDetailPage.module.css
new file mode 100644
index 0000000..bafa67f
--- /dev/null
+++ b/src/app/(root)/boards/[articleId]/ArticleDetailPage.module.css
@@ -0,0 +1,338 @@
+.page {
+  min-height: 100vh;
+  background: var(--color-background-secondary);
+  padding: 40px 24px 80px;
+}
+
+.layout {
+  display: flex;
+  gap: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+  align-items: flex-start;
+}
+
+/* Card */
+.card {
+  flex: 1;
+  min-width: 0;
+  background: var(--color-background-primary);
+  border-radius: 16px;
+  padding: 32px;
+}
+
+/* Header */
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--color-text-primary);
+}
+
+.kebabWrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.kebabButton {
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.kebabMenu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  background: var(--color-background-primary);
+  border: 1px solid var(--color-background-tertiary);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  z-index: 10;
+  min-width: 120px;
+  overflow: hidden;
+}
+
+.kebabMenuItem {
+  display: block;
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  background: none;
+  text-align: left;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  color: var(--color-text-primary);
+}
+
+.kebabMenuItem:hover {
+  background: var(--color-background-secondary);
+}
+
+.kebabMenuDanger {
+  color: var(--color-status-danger);
+}
+
+/* Author Row */
+.authorRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.nickname {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+.divider {
+  font-size: 14px;
+  color: var(--color-text-disabled);
+}
+
+.date {
+  font-size: 14px;
+  color: var(--color-text-disabled);
+}
+
+/* Separator */
+.separator {
+  border: none;
+  border-top: 1px solid var(--color-background-tertiary);
+  margin: 24px 0;
+}
+
+/* Body */
+.body {
+  margin-bottom: 40px;
+}
+
+.text {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.8;
+  color: var(--color-text-primary);
+  white-space: pre-wrap;
+}
+
+.imageWrapper {
+  margin-top: 24px;
+  width: 200px;
+  height: 200px;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.articleImage {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Like Button - inline (hidden on desktop, shown on tablet/mobile) */
+.inlineLike {
+  display: none;
+  justify-content: flex-end;
+  margin-top: 24px;
+}
+
+.likeButton {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--color-text-disabled);
+}
+
+/* Like Button - floating sidebar (hidden on tablet/mobile) */
+.floatingWrapper {
+  position: sticky;
+  top: 120px;
+  flex-shrink: 0;
+}
+
+/* Comment Section */
+.commentSection {
+  padding-top: 24px;
+}
+
+.commentTitle {
+  margin: 0 0 16px;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.commentCount {
+  color: var(--color-brand-primary);
+}
+
+.commentList {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.commentItem {
+  position: relative;
+}
+
+.emptyComment {
+  margin: 40px 0;
+  text-align: center;
+  font-size: 14px;
+  color: var(--color-text-disabled);
+}
+
+/* Comment Edit Form */
+.commentEditForm {
+  display: flex;
+  gap: 12px;
+  padding-top: 16px;
+  position: relative;
+}
+
+.commentEditForm::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 16px;
+  right: 0;
+  border-top: 1px solid var(--color-background-tertiary);
+}
+
+.commentEditBody {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.commentEditTextarea {
+  width: 100%;
+  min-height: 80px;
+  padding: 12px;
+  border: 1px solid var(--color-background-tertiary);
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--color-text-primary);
+  resize: vertical;
+  outline: none;
+}
+
+.commentEditTextarea:focus {
+  border-color: var(--color-brand-primary);
+}
+
+.commentEditActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.commentEditCancel {
+  padding: 8px 16px;
+  border: 1px solid var(--color-background-tertiary);
+  border-radius: 8px;
+  background: none;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.commentEditSave {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  background: var(--color-brand-primary);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: #fff;
+  cursor: pointer;
+}
+
+.commentEditSave:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Toast */
+.toastWrapper {
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+}
+
+/* Tablet */
+@media (max-width: 1199px) {
+  .page {
+    padding: 32px 24px 80px;
+  }
+
+  .inlineLike {
+    display: flex;
+  }
+
+  .floatingWrapper {
+    display: none;
+  }
+}
+
+/* Mobile */
+@media (max-width: 767px) {
+  .page {
+    padding: 16px;
+  }
+
+  .card {
+    padding: 24px 16px;
+    border-radius: 12px;
+  }
+
+  .title {
+    font-size: 18px;
+  }
+
+  .text {
+    font-size: 14px;
+  }
+
+  .imageWrapper {
+    width: 160px;
+    height: 160px;
+  }
+
+  .commentTitle {
+    font-size: 16px;
+  }
+}
diff --git a/src/app/(root)/boards/[articleId]/ArticleDetailPage.tsx b/src/app/(root)/boards/[articleId]/ArticleDetailPage.tsx
new file mode 100644
index 0000000..b164576
--- /dev/null
+++ b/src/app/(root)/boards/[articleId]/ArticleDetailPage.tsx
@@ -0,0 +1,390 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import CommentInput from '@/components/input/CommentInput';
+import CommentCard from '@/components/comment/CommentCard';
+import FloatingLikeButton from '@/components/Button/domain/FloatingButton/FloatingLikeButton';
+import Toast from '@/components/toast/Toast';
+import WarningModal from '@/components/Modal/domain/components/WarningModal/WarningModal';
+import { useDeleteArticle, useLikeArticle } from '../hooks/useArticles';
+import { useCreateComment, useUpdateComment, useDeleteComment } from '../hooks/useComments';
+import type { ArticleDetail } from '../apis/types';
+import type { Comment } from '../apis/comments';
+import kebabIcon from '@/assets/icons/kebab/kebabLarge.svg';
+import emptyHeartIcon from '@/assets/icons/heart/emptyHeartLarge.svg';
+import fullHeartIcon from '@/assets/icons/heart/fullHeartLarge.svg';
+import humanBig from '@/assets/buttons/human/humanBig.svg';
+import styles from './ArticleDetailPage.module.css';
+
+function renderAvatar(image: string | null, size = 32) {
+  if (image) {
+    return (
+      <div
+        style={{ width: size, height: size, borderRadius: 8, overflow: 'hidden', flexShrink: 0 }}
+      >
+        <Image
+          src={image}
+          alt=""
+          width={size}
+          height={size}
+          style={{ objectFit: 'cover', width: '100%', height: '100%' }}
+        />
+      </div>
+    );
+  }
+  return <Image src={humanBig} alt="" width={size} height={size} />;
+}
+
+interface ArticleDetailPageProps {
+  article: ArticleDetail;
+  comments?: Comment[];
+  currentUserImage?: string | null;
+}
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  return `${year}. ${month}. ${day}`;
+}
+
+export default function ArticleDetailPage({
+  article,
+  comments = [],
+  currentUserImage,
+}: ArticleDetailPageProps) {
+  const router = useRouter();
+  const [commentInput, setCommentInput] = useState('');
+
+  // Mutations
+  const deleteArticleMutation = useDeleteArticle();
+  const likeMutation = useLikeArticle();
+  const createCommentMutation = useCreateComment(article.id);
+  const updateCommentMutation = useUpdateComment(article.id);
+  const deleteCommentMutation = useDeleteComment(article.id);
+
+  // Article kebab menu
+  const [showArticleMenu, setShowArticleMenu] = useState(false);
+  const articleMenuRef = useRef<HTMLDivElement>(null);
+
+  // Comment kebab menus
+  const [activeCommentMenu, setActiveCommentMenu] = useState<number | null>(null);
+  const commentMenuRef = useRef<HTMLDivElement>(null);
+
+  // Comment editing
+  const [editingCommentId, setEditingCommentId] = useState<number | null>(null);
+  const [editingContent, setEditingContent] = useState('');
+
+  // Modal & Toast
+  const [deleteModal, setDeleteModal] = useState<{
+    type: 'article' | 'comment';
+    commentId?: number;
+  } | null>(null);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (articleMenuRef.current && !articleMenuRef.current.contains(e.target as Node)) {
+        setShowArticleMenu(false);
+      }
+      if (commentMenuRef.current && !commentMenuRef.current.contains(e.target as Node)) {
+        setActiveCommentMenu(null);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const showToast = (message: string) => {
+    setToastMessage(null);
+    setTimeout(() => setToastMessage(message), 0);
+  };
+
+  const handleCommentSubmit = () => {
+    if (!commentInput.trim()) return;
+    createCommentMutation.mutate(commentInput.trim(), {
+      onSuccess: () => setCommentInput(''),
+      onError: () => showToast('댓글 작성에 실패했습니다.'),
+    });
+  };
+
+  const handleLikeToggle = () => {
+    likeMutation.mutate({ articleId: article.id, isLiked: article.isLiked });
+  };
+
+  const handleArticleDelete = () => {
+    setDeleteModal({ type: 'article' });
+  };
+
+  const handleDeleteConfirm = () => {
+    if (!deleteModal) return;
+
+    if (deleteModal.type === 'article') {
+      deleteArticleMutation.mutate(article.id, {
+        onSuccess: () => {
+          setDeleteModal(null);
+          router.push('/boards');
+        },
+        onError: () => {
+          setDeleteModal(null);
+          showToast('게시글 삭제에 실패했습니다.');
+        },
+      });
+    } else if (deleteModal.type === 'comment' && deleteModal.commentId) {
+      deleteCommentMutation.mutate(deleteModal.commentId, {
+        onSuccess: () => setDeleteModal(null),
+        onError: () => {
+          setDeleteModal(null);
+          showToast('댓글 삭제에 실패했습니다.');
+        },
+      });
+    }
+    setActiveCommentMenu(null);
+  };
+
+  const handleCommentEdit = (comment: Comment) => {
+    setEditingCommentId(comment.id);
+    setEditingContent(comment.content);
+    setActiveCommentMenu(null);
+  };
+
+  const handleCommentEditSubmit = () => {
+    if (!editingCommentId || !editingContent.trim()) return;
+    updateCommentMutation.mutate(
+      { commentId: editingCommentId, content: editingContent.trim() },
+      {
+        onSuccess: () => {
+          setEditingCommentId(null);
+          setEditingContent('');
+        },
+        onError: () => showToast('댓글 수정에 실패했습니다.'),
+      },
+    );
+  };
+
+  const handleCommentDelete = (commentId: number) => {
+    setDeleteModal({ type: 'comment', commentId });
+  };
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.layout}>
+        <article className={styles.card}>
+          <div className={styles.header}>
+            <h1 className={styles.title}>{article.title}</h1>
+            <div className={styles.kebabWrapper} ref={articleMenuRef}>
+              <button
+                type="button"
+                className={styles.kebabButton}
+                aria-label="더보기"
+                onClick={() => setShowArticleMenu((prev) => !prev)}
+              >
+                <Image src={kebabIcon} alt="" width={24} height={24} />
+              </button>
+              {showArticleMenu && (
+                <div className={styles.kebabMenu}>
+                  <button
+                    type="button"
+                    className={styles.kebabMenuItem}
+                    onClick={() => {
+                      setShowArticleMenu(false);
+                      router.push(`/boards/${article.id}/edit`);
+                    }}
+                  >
+                    수정하기
+                  </button>
+                  <button
+                    type="button"
+                    className={`${styles.kebabMenuItem} ${styles.kebabMenuDanger}`}
+                    onClick={() => {
+                      setShowArticleMenu(false);
+                      handleArticleDelete();
+                    }}
+                  >
+                    삭제하기
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className={styles.authorRow}>
+            {renderAvatar(article.writer.image)}
+            <span className={styles.nickname}>{article.writer.nickname}</span>
+            <span className={styles.divider}>|</span>
+            <time className={styles.date} dateTime={article.createdAt}>
+              {formatDate(article.createdAt)}
+            </time>
+          </div>
+
+          <hr className={styles.separator} />
+
+          <div className={styles.body}>
+            {article.content && <p className={styles.text}>{article.content}</p>}
+            {article.image && (
+              <div className={styles.imageWrapper}>
+                <img src={article.image} alt="" className={styles.articleImage} />
+              </div>
+            )}
+            <div className={styles.inlineLike}>
+              <button
+                type="button"
+                className={styles.likeButton}
+                onClick={handleLikeToggle}
+                aria-label={article.isLiked ? '좋아요 취소' : '좋아요'}
+                aria-pressed={article.isLiked}
+              >
+                <Image
+                  src={article.isLiked ? fullHeartIcon : emptyHeartIcon}
+                  alt=""
+                  width={20}
+                  height={20}
+                />
+                <span>{article.likeCount > 999 ? '999+' : article.likeCount}</span>
+              </button>
+            </div>
+          </div>
+
+          <section className={styles.commentSection}>
+            <h2 className={styles.commentTitle}>
+              댓글 <span className={styles.commentCount}>{comments.length}</span>
+            </h2>
+            <CommentInput
+              placeholder="댓글을 입력해주세요"
+              value={commentInput}
+              onChange={(e) => setCommentInput(e.target.value)}
+              onSubmit={handleCommentSubmit}
+              profileImage={renderAvatar(currentUserImage ?? null)}
+            />
+
+            {comments.length > 0 ? (
+              <div className={styles.commentList}>
+                {comments.map((comment) => (
+                  <div key={comment.id} className={styles.commentItem}>
+                    {editingCommentId === comment.id ? (
+                      <div className={styles.commentEditForm}>
+                        {renderAvatar(comment.writer.image)}
+                        <div className={styles.commentEditBody}>
+                          <textarea
+                            className={styles.commentEditTextarea}
+                            value={editingContent}
+                            onChange={(e) => setEditingContent(e.target.value)}
+                          />
+                          <div className={styles.commentEditActions}>
+                            <button
+                              type="button"
+                              className={styles.commentEditCancel}
+                              onClick={() => {
+                                setEditingCommentId(null);
+                                setEditingContent('');
+                              }}
+                            >
+                              취소
+                            </button>
+                            <button
+                              type="button"
+                              className={styles.commentEditSave}
+                              onClick={handleCommentEditSubmit}
+                              disabled={!editingContent.trim()}
+                            >
+                              수정하기
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      <CommentCard
+                        profileImage={renderAvatar(comment.writer.image)}
+                        name={comment.writer.nickname}
+                        content={comment.content}
+                        date={formatDate(comment.createdAt)}
+                        dateTime={comment.createdAt}
+                        icon={
+                          <div
+                            className={styles.kebabWrapper}
+                            ref={activeCommentMenu === comment.id ? commentMenuRef : undefined}
+                          >
+                            <button
+                              type="button"
+                              className={styles.kebabButton}
+                              aria-label="더보기"
+                              onClick={() =>
+                                setActiveCommentMenu((prev) =>
+                                  prev === comment.id ? null : comment.id,
+                                )
+                              }
+                            >
+                              <Image src={kebabIcon} alt="" width={24} height={24} />
+                            </button>
+                            {activeCommentMenu === comment.id && (
+                              <div className={styles.kebabMenu}>
+                                <button
+                                  type="button"
+                                  className={styles.kebabMenuItem}
+                                  onClick={() => handleCommentEdit(comment)}
+                                >
+                                  수정하기
+                                </button>
+                                <button
+                                  type="button"
+                                  className={`${styles.kebabMenuItem} ${styles.kebabMenuDanger}`}
+                                  onClick={() => handleCommentDelete(comment.id)}
+                                >
+                                  삭제하기
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        }
+                      />
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className={styles.emptyComment}>아직 작성된 댓글이 없습니다.</p>
+            )}
+          </section>
+        </article>
+
+        <div className={styles.floatingWrapper}>
+          <FloatingLikeButton
+            isLiked={article.isLiked}
+            count={article.likeCount}
+            onToggle={handleLikeToggle}
+          />
+        </div>
+      </div>
+
+      <WarningModal
+        isOpen={deleteModal !== null}
+        onClose={() => setDeleteModal(null)}
+        onConfirm={handleDeleteConfirm}
+        text={{
+          title:
+            deleteModal?.type === 'article' ? '게시글을 삭제하시겠어요?' : '댓글을 삭제하시겠어요?',
+          description:
+            deleteModal?.type === 'article'
+              ? '삭제된 게시글은 복구할 수 없습니다.'
+              : '삭제된 댓글은 복구할 수 없습니다.',
+          closeLabel: '취소',
+          confirmLabel: '삭제하기',
+        }}
+      />
+
+      {toastMessage && (
+        <div className={styles.toastWrapper}>
+          <Toast
+            isOpen
+            message={toastMessage}
+            actionLabel=""
+            onDismiss={() => setToastMessage(null)}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(root)/boards/[articleId]/edit/ArticleEditPage.tsx b/src/app/(root)/boards/[articleId]/edit/ArticleEditPage.tsx
new file mode 100644
index 0000000..ae9ac12
--- /dev/null
+++ b/src/app/(root)/boards/[articleId]/edit/ArticleEditPage.tsx
@@ -0,0 +1,126 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Input from '@/components/input/Input';
+import TextArea from '@/components/input/TextArea';
+import ImageUpload from '@/components/Card/ImageUpload/ImageUpload';
+import BaseButton from '@/components/Button/base/BaseButton';
+import { useArticleDetail, useUpdateArticle } from '../../hooks/useArticles';
+import { uploadImage } from '../../apis/image';
+import styles from '../../write/ArticleWritePage.module.css';
+
+interface ArticleEditPageProps {
+  articleId: number;
+}
+
+interface ArticleData {
+  title: string;
+  content: string;
+  image?: string | null;
+}
+
+function ArticleEditForm({ articleId, article }: { articleId: number; article: ArticleData }) {
+  const router = useRouter();
+  const updateArticleMutation = useUpdateArticle();
+
+  const [title, setTitle] = useState(article.title);
+  const [content, setContent] = useState(article.content);
+  const [images, setImages] = useState<string[]>(article.image ? [article.image] : []);
+
+  const isValid = title.trim().length > 0 && content.trim().length > 0;
+
+  const handleFileSelect = async (file: File) => {
+    try {
+      const url = await uploadImage(file);
+      setImages((prev) => [...prev, url]);
+    } catch {
+      alert('이미지 업로드에 실패했습니다.');
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setImages((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = () => {
+    if (!isValid || updateArticleMutation.isPending) return;
+    updateArticleMutation.mutate(
+      {
+        articleId,
+        body: {
+          title: title.trim(),
+          content: content.trim(),
+          ...(images[0] ? { image: images[0] } : {}),
+        },
+      },
+      {
+        onSuccess: () => router.push(`/boards/${articleId}`),
+        onError: () => alert('게시글 수정에 실패했습니다.'),
+      },
+    );
+  };
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.card}>
+        <h1 className={styles.pageTitle}>게시글 수정</h1>
+
+        <div className={styles.field}>
+          <label className={styles.label}>
+            제목 <span className={styles.required}>*</span>
+          </label>
+          <Input
+            placeholder="제목을 입력해주세요."
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </div>
+
+        <div className={styles.field}>
+          <label className={styles.label}>
+            내용 <span className={styles.required}>*</span>
+          </label>
+          <TextArea
+            className={styles.contentTextarea}
+            placeholder="내용을 입력하세요"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+          />
+        </div>
+
+        <div className={styles.field}>
+          <label className={styles.label}>이미지</label>
+          <ImageUpload
+            images={images}
+            onFileSelect={handleFileSelect}
+            onRemove={handleRemoveImage}
+          />
+        </div>
+
+        <BaseButton
+          className={styles.submitButton}
+          disabled={!isValid || updateArticleMutation.isPending}
+          onClick={handleSubmit}
+        >
+          수정하기
+        </BaseButton>
+      </div>
+    </div>
+  );
+}
+
+export default function ArticleEditPage({ articleId }: ArticleEditPageProps) {
+  const router = useRouter();
+  const { data: article, isError } = useArticleDetail(articleId);
+
+  if (isError) {
+    alert('게시글을 불러오는데 실패했습니다.');
+    router.back();
+    return null;
+  }
+
+  if (!article) return null;
+
+  return <ArticleEditForm articleId={articleId} article={article} />;
+}
diff --git a/src/app/(root)/boards/[articleId]/edit/page.tsx b/src/app/(root)/boards/[articleId]/edit/page.tsx
new file mode 100644
index 0000000..16a5248
--- /dev/null
+++ b/src/app/(root)/boards/[articleId]/edit/page.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import { use } from 'react';
+import ArticleEditPage from './ArticleEditPage';
+
+export default function Page({ params }: { params: Promise<{ articleId: string }> }) {
+  const { articleId } = use(params);
+
+  return <ArticleEditPage articleId={Number(articleId)} />;
+}
diff --git a/src/app/(root)/boards/[articleId]/page.tsx b/src/app/(root)/boards/[articleId]/page.tsx
new file mode 100644
index 0000000..c5429df
--- /dev/null
+++ b/src/app/(root)/boards/[articleId]/page.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { use } from 'react';
+import { useArticleDetail } from '../hooks/useArticles';
+import { useComments } from '../hooks/useComments';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import ArticleDetailPage from './ArticleDetailPage';
+
+export default function Page({ params }: { params: Promise<{ articleId: string }> }) {
+  const { articleId } = use(params);
+  const id = Number(articleId);
+
+  const { data: article } = useArticleDetail(id);
+  const { data: comments = [] } = useComments(id);
+  const { data: user } = useCurrentUser();
+
+  if (!article) return null;
+
+  return (
+    <ArticleDetailPage
+      article={article}
+      comments={comments}
+      currentUserImage={user?.image ?? null}
+    />
+  );
+}
diff --git a/src/app/(root)/boards/apis/article.ts b/src/app/(root)/boards/apis/article.ts
new file mode 100644
index 0000000..0cbb04e
--- /dev/null
+++ b/src/app/(root)/boards/apis/article.ts
@@ -0,0 +1,82 @@
+import type {
+  ArticleListResponse,
+  ArticleDetail,
+  Article,
+  CreateArticleRequest,
+  UpdateArticleRequest,
+  DeleteArticleResponse,
+} from './types';
+
+const PROXY = '/api/proxy';
+
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(`${PROXY}${path}`, options);
+  if (!response.ok) {
+    throw new Error(`요청에 실패했습니다. (status: ${response.status})`);
+  }
+  return response.json() as Promise<T>;
+}
+
+interface GetArticlesParams {
+  page?: number;
+  pageSize?: number;
+  orderBy?: 'recent' | 'like';
+  keyword?: string;
+}
+
+export function getArticles({
+  page = 1,
+  pageSize = 10,
+  orderBy = 'recent',
+  keyword,
+}: GetArticlesParams = {}): Promise<ArticleListResponse> {
+  const params = new URLSearchParams({
+    page: String(page),
+    pageSize: String(pageSize),
+    orderBy,
+  });
+  if (keyword) params.set('keyword', keyword);
+
+  return request<ArticleListResponse>(`/articles?${params}`);
+}
+
+export function getArticleDetail(articleId: number): Promise<ArticleDetail> {
+  return request<ArticleDetail>(`/articles/${articleId}`);
+}
+
+export function createArticle(body: CreateArticleRequest): Promise<Article> {
+  return request<Article>('/articles', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+}
+
+export function updateArticle(
+  articleId: number,
+  body: UpdateArticleRequest,
+): Promise<ArticleDetail> {
+  return request<ArticleDetail>(`/articles/${articleId}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+}
+
+export function deleteArticle(articleId: number): Promise<DeleteArticleResponse> {
+  return request<DeleteArticleResponse>(`/articles/${articleId}`, {
+    method: 'DELETE',
+  });
+}
+
+export function likeArticle(articleId: number): Promise<ArticleDetail> {
+  return request<ArticleDetail>(`/articles/${articleId}/like`, {
+    method: 'POST',
+  });
+}
+
+export function unlikeArticle(articleId: number): Promise<ArticleDetail> {
+  return request<ArticleDetail>(`/articles/${articleId}/like`, {
+    method: 'DELETE',
+  });
+}
diff --git a/src/app/(root)/boards/apis/comments.ts b/src/app/(root)/boards/apis/comments.ts
new file mode 100644
index 0000000..4957b05
--- /dev/null
+++ b/src/app/(root)/boards/apis/comments.ts
@@ -0,0 +1,61 @@
+const PROXY = '/api/proxy';
+
+export interface CommentWriter {
+  image: string | null;
+  nickname: string;
+  id: number;
+}
+
+export interface Comment {
+  id: number;
+  content: string;
+  writer: CommentWriter;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CommentListResponse {
+  nextCursor: number | null;
+  list: Comment[];
+}
+
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(`${PROXY}${path}`, options);
+  if (!response.ok) {
+    throw new Error(`요청에 실패했습니다. (status: ${response.status})`);
+  }
+  return response.json() as Promise<T>;
+}
+
+export function getComments(
+  articleId: number,
+  limit: number,
+  cursor?: number,
+): Promise<CommentListResponse> {
+  const params = new URLSearchParams({ limit: String(limit) });
+  if (cursor) params.set('cursor', String(cursor));
+
+  return request<CommentListResponse>(`/articles/${articleId}/comments?${params}`);
+}
+
+export function createComment(articleId: number, content: string): Promise<Comment> {
+  return request<Comment>(`/articles/${articleId}/comments`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ content }),
+  });
+}
+
+export function updateComment(commentId: number, content: string): Promise<Comment> {
+  return request<Comment>(`/comments/${commentId}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ content }),
+  });
+}
+
+export function deleteComment(commentId: number): Promise<{ id: number }> {
+  return request<{ id: number }>(`/comments/${commentId}`, {
+    method: 'DELETE',
+  });
+}
diff --git a/src/app/(root)/boards/apis/image.ts b/src/app/(root)/boards/apis/image.ts
new file mode 100644
index 0000000..875a0a3
--- /dev/null
+++ b/src/app/(root)/boards/apis/image.ts
@@ -0,0 +1,16 @@
+export async function uploadImage(file: File): Promise<string> {
+  const formData = new FormData();
+  formData.append('image', file);
+
+  const response = await fetch('/api/images/upload', {
+    method: 'POST',
+    body: formData,
+  });
+
+  if (!response.ok) {
+    throw new Error(`이미지 업로드에 실패했습니다. (status: ${response.status})`);
+  }
+
+  const data = (await response.json()) as { url: string };
+  return data.url;
+}
diff --git a/src/app/(root)/boards/apis/types.ts b/src/app/(root)/boards/apis/types.ts
new file mode 100644
index 0000000..86b859f
--- /dev/null
+++ b/src/app/(root)/boards/apis/types.ts
@@ -0,0 +1,38 @@
+export interface Writer {
+  image: string | null;
+  nickname: string;
+  id: number;
+}
+
+export interface Article {
+  id: number;
+  title: string;
+  content: string;
+  image: string | null;
+  writer: Writer;
+  likeCount: number;
+  commentCount: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ArticleDetail extends Article {
+  isLiked: boolean;
+}
+
+export interface ArticleListResponse {
+  totalCount: number;
+  list: Article[];
+}
+
+export interface CreateArticleRequest {
+  title: string;
+  content: string;
+  image?: string;
+}
+
+export type UpdateArticleRequest = Partial<CreateArticleRequest>;
+
+export interface DeleteArticleResponse {
+  id: number;
+}
diff --git a/src/app/(root)/boards/hooks/useArticles.ts b/src/app/(root)/boards/hooks/useArticles.ts
new file mode 100644
index 0000000..0e6e577
--- /dev/null
+++ b/src/app/(root)/boards/hooks/useArticles.ts
@@ -0,0 +1,97 @@
+'use client';
+
+import { useQuery, useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  getArticles,
+  getArticleDetail,
+  createArticle,
+  updateArticle,
+  deleteArticle,
+  likeArticle,
+  unlikeArticle,
+} from '../apis/article';
+import type { CreateArticleRequest, UpdateArticleRequest } from '../apis/types';
+
+const PAGE_SIZE = 10;
+const BEST_PAGE_SIZE = 15;
+
+export function useBestArticles() {
+  return useQuery({
+    queryKey: ['bestArticles'],
+    queryFn: () => getArticles({ page: 1, pageSize: BEST_PAGE_SIZE, orderBy: 'like' }),
+    select: (data) => data.list,
+    staleTime: 60_000,
+    retry: 1,
+  });
+}
+
+export function useArticles(keyword: string, orderBy: 'recent' | 'like') {
+  return useInfiniteQuery({
+    queryKey: ['articles', { keyword: keyword || undefined, orderBy }],
+    queryFn: ({ pageParam = 1 }) =>
+      getArticles({ page: pageParam, pageSize: PAGE_SIZE, orderBy, keyword: keyword || undefined }),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, allPages) => {
+      const loaded = allPages.length * PAGE_SIZE;
+      return loaded < lastPage.totalCount ? allPages.length + 1 : undefined;
+    },
+    staleTime: 60_000,
+    retry: 1,
+  });
+}
+
+export function useArticleDetail(articleId: number) {
+  return useQuery({
+    queryKey: ['article', articleId],
+    queryFn: () => getArticleDetail(articleId),
+    enabled: articleId > 0,
+    staleTime: 60_000,
+    retry: 1,
+  });
+}
+
+export function useCreateArticle() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (body: CreateArticleRequest) => createArticle(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
+      queryClient.invalidateQueries({ queryKey: ['bestArticles'] });
+    },
+  });
+}
+
+export function useUpdateArticle() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ articleId, body }: { articleId: number; body: UpdateArticleRequest }) =>
+      updateArticle(articleId, body),
+    onSuccess: (_, { articleId }) => {
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
+      queryClient.invalidateQueries({ queryKey: ['bestArticles'] });
+      queryClient.invalidateQueries({ queryKey: ['article', articleId] });
+    },
+  });
+}
+
+export function useDeleteArticle() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (articleId: number) => deleteArticle(articleId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['articles'] });
+      queryClient.invalidateQueries({ queryKey: ['bestArticles'] });
+    },
+  });
+}
+
+export function useLikeArticle() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ articleId, isLiked }: { articleId: number; isLiked: boolean }) =>
+      isLiked ? unlikeArticle(articleId) : likeArticle(articleId),
+    onSuccess: (data, { articleId }) => {
+      queryClient.setQueryData(['article', articleId], data);
+    },
+  });
+}
diff --git a/src/app/(root)/boards/hooks/useComments.ts b/src/app/(root)/boards/hooks/useComments.ts
new file mode 100644
index 0000000..5784869
--- /dev/null
+++ b/src/app/(root)/boards/hooks/useComments.ts
@@ -0,0 +1,46 @@
+'use client';
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { getComments, createComment, updateComment, deleteComment } from '../apis/comments';
+
+export function useComments(articleId: number) {
+  return useQuery({
+    queryKey: ['comments', articleId],
+    queryFn: () => getComments(articleId, 100),
+    select: (data) => data.list,
+    enabled: articleId > 0,
+    staleTime: 60_000,
+    retry: 1,
+  });
+}
+
+export function useCreateComment(articleId: number) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (content: string) => createComment(articleId, content),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments', articleId] });
+    },
+  });
+}
+
+export function useUpdateComment(articleId: number) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ commentId, content }: { commentId: number; content: string }) =>
+      updateComment(commentId, content),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments', articleId] });
+    },
+  });
+}
+
+export function useDeleteComment(articleId: number) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (commentId: number) => deleteComment(commentId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments', articleId] });
+    },
+  });
+}
diff --git a/src/app/(root)/boards/page.tsx b/src/app/(root)/boards/page.tsx
new file mode 100644
index 0000000..ae639a7
--- /dev/null
+++ b/src/app/(root)/boards/page.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { useBestArticles, useArticles } from './hooks/useArticles';
+import BoardsPage from './BoardsPage';
+
+export default function Page() {
+  const [keyword, setKeyword] = useState('');
+  const [orderBy, setOrderBy] = useState<'recent' | 'like'>('recent');
+
+  const { data: bestArticles = [] } = useBestArticles();
+  const {
+    data: articlesData,
+    fetchNextPage,
+    hasNextPage = false,
+    isFetchingNextPage,
+  } = useArticles(keyword, orderBy);
+
+  const articles = useMemo(
+    () => articlesData?.pages.flatMap((page) => page.list) ?? [],
+    [articlesData],
+  );
+
+  return (
+    <BoardsPage
+      bestArticles={bestArticles}
+      articles={articles}
+      hasMore={hasNextPage && !isFetchingNextPage}
+      onLoadMore={() => fetchNextPage()}
+      onSearch={setKeyword}
+      onSort={setOrderBy}
+    />
+  );
+}
diff --git a/src/app/(root)/boards/useBreakpoint.ts b/src/app/(root)/boards/useBreakpoint.ts
new file mode 100644
index 0000000..a69c989
--- /dev/null
+++ b/src/app/(root)/boards/useBreakpoint.ts
@@ -0,0 +1,24 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+type Breakpoint = 'desktop' | 'tablet' | 'mobile';
+
+function getBreakpoint(width: number): Breakpoint {
+  if (width >= 1200) return 'desktop';
+  if (width >= 768) return 'tablet';
+  return 'mobile';
+}
+
+export default function useBreakpoint(): Breakpoint {
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>('desktop');
+
+  useEffect(() => {
+    const handleResize = () => setBreakpoint(getBreakpoint(window.innerWidth));
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return breakpoint;
+}
diff --git a/src/app/(root)/boards/write/ArticleWritePage.module.css b/src/app/(root)/boards/write/ArticleWritePage.module.css
new file mode 100644
index 0000000..538635a
--- /dev/null
+++ b/src/app/(root)/boards/write/ArticleWritePage.module.css
@@ -0,0 +1,76 @@
+.page {
+  min-height: 100vh;
+  background: var(--color-background-secondary);
+  padding: 40px 24px 80px;
+}
+
+.card {
+  max-width: 800px;
+  margin: 0 auto;
+  background: var(--color-background-primary);
+  border-radius: 16px;
+  padding: 32px;
+}
+
+.pageTitle {
+  margin: 0 0 32px;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.field {
+  margin-bottom: 24px;
+}
+
+.label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.required {
+  color: var(--color-status-danger);
+}
+
+.contentTextarea {
+  min-height: 200px;
+}
+
+.submitButton {
+  margin-top: 16px;
+}
+
+/* Tablet */
+@media (max-width: 1199px) {
+  .page {
+    padding: 32px 24px 80px;
+  }
+}
+
+/* Mobile */
+@media (max-width: 767px) {
+  .page {
+    padding: 16px;
+  }
+
+  .card {
+    padding: 24px 16px;
+    border-radius: 12px;
+  }
+
+  .pageTitle {
+    font-size: 20px;
+    margin-bottom: 24px;
+  }
+
+  .field {
+    margin-bottom: 20px;
+  }
+
+  .contentTextarea {
+    min-height: 150px;
+  }
+}
diff --git a/src/app/(root)/boards/write/ArticleWritePage.tsx b/src/app/(root)/boards/write/ArticleWritePage.tsx
new file mode 100644
index 0000000..b212868
--- /dev/null
+++ b/src/app/(root)/boards/write/ArticleWritePage.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Input from '@/components/input/Input';
+import TextArea from '@/components/input/TextArea';
+import ImageUpload from '@/components/Card/ImageUpload/ImageUpload';
+import BaseButton from '@/components/Button/base/BaseButton';
+import { useCreateArticle } from '../hooks/useArticles';
+import { uploadImage } from '../apis/image';
+import styles from './ArticleWritePage.module.css';
+
+export default function ArticleWritePage() {
+  const router = useRouter();
+  const createArticleMutation = useCreateArticle();
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [images, setImages] = useState<string[]>([]);
+
+  const isValid = title.trim().length > 0 && content.trim().length > 0;
+
+  const handleFileSelect = async (file: File) => {
+    try {
+      const url = await uploadImage(file);
+      setImages((prev) => [...prev, url]);
+    } catch {
+      alert('이미지 업로드에 실패했습니다.');
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setImages((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = () => {
+    if (!isValid || createArticleMutation.isPending) return;
+    createArticleMutation.mutate(
+      {
+        title: title.trim(),
+        content: content.trim(),
+        ...(images[0] ? { image: images[0] } : {}),
+      },
+      {
+        onSuccess: () => router.push('/boards'),
+        onError: () => alert('게시글 작성에 실패했습니다.'),
+      },
+    );
+  };
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.card}>
+        <h1 className={styles.pageTitle}>게시글 쓰기</h1>
+
+        <div className={styles.field}>
+          <label className={styles.label}>
+            제목 <span className={styles.required}>*</span>
+          </label>
+          <Input
+            placeholder="제목을 입력해주세요."
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </div>
+
+        <div className={styles.field}>
+          <label className={styles.label}>
+            내용 <span className={styles.required}>*</span>
+          </label>
+          <TextArea
+            className={styles.contentTextarea}
+            placeholder="내용을 입력하세요"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+          />
+        </div>
+
+        <div className={styles.field}>
+          <label className={styles.label}>이미지</label>
+          <ImageUpload
+            images={images}
+            onFileSelect={handleFileSelect}
+            onRemove={handleRemoveImage}
+          />
+        </div>
+
+        <BaseButton
+          className={styles.submitButton}
+          disabled={!isValid || createArticleMutation.isPending}
+          onClick={handleSubmit}
+        >
+          등록하기
+        </BaseButton>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(root)/boards/write/page.tsx b/src/app/(root)/boards/write/page.tsx
new file mode 100644
index 0000000..08499a3
--- /dev/null
+++ b/src/app/(root)/boards/write/page.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import ArticleWritePage from './ArticleWritePage';
+
+export default function Page() {
+  return <ArticleWritePage />;
+}
diff --git a/src/app/(root)/layout.module.css b/src/app/(root)/layout.module.css
new file mode 100644
index 0000000..daf3dd8
--- /dev/null
+++ b/src/app/(root)/layout.module.css
@@ -0,0 +1,15 @@
+.layout {
+  min-height: 100vh;
+}
+
+.main {
+  margin-left: 72px;
+  min-width: 0;
+  overflow-y: auto;
+}
+
+@media (max-width: 1199px) {
+  .main {
+    margin-left: 0;
+  }
+}
diff --git a/src/app/(root)/layout.tsx b/src/app/(root)/layout.tsx
new file mode 100644
index 0000000..35836f3
--- /dev/null
+++ b/src/app/(root)/layout.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import { usePathname, useRouter } from 'next/navigation';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import {
+  Sidebar,
+  SidebarButton,
+  SidebarTeamSelect,
+  SidebarAddButton,
+  MobileHeader,
+  MobileDrawer,
+} from '@/components/sidebar';
+import boardSmall from '@/assets/icons/board/boardSmall.svg';
+import boardLarge from '@/assets/icons/board/boardLarge.svg';
+import chessSmall from '@/assets/icons/chess/chessSmall.svg';
+import chessBig from '@/assets/icons/chess/chessBig.svg';
+import humanBig from '@/assets/buttons/human/humanBig.svg';
+import styles from './layout.module.css';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const { data: user } = useCurrentUser();
+
+  const isLoggedIn = user !== null && user !== undefined;
+  const isLanding = pathname === '/';
+  const firstGroup = user?.memberships?.[0]?.group;
+
+  const handleProfileClick = () => {
+    if (isLoggedIn) {
+      router.push('/mypage');
+    } else {
+      router.push('/login');
+    }
+  };
+
+  return (
+    <div className={styles.layout}>
+      <Sidebar
+        defaultCollapsed={isLanding}
+        isLoggedIn={isLoggedIn}
+        onProfileClick={handleProfileClick}
+        profileImage={
+          user?.image ? (
+            <Image
+              src={user.image}
+              alt=""
+              width={40}
+              height={40}
+              style={{ borderRadius: 12, objectFit: 'cover' }}
+            />
+          ) : (
+            <Image src={humanBig} alt="" width={40} height={40} />
+          )
+        }
+        profileName={user?.nickname ?? '사용자'}
+        profileTeam={firstGroup?.name ?? ''}
+        teamSelect={(isCollapsed: boolean) =>
+          firstGroup ? (
+            !isCollapsed ? (
+              <SidebarTeamSelect
+                icon={
+                  firstGroup.image ? (
+                    <Image
+                      src={firstGroup.image}
+                      alt=""
+                      width={20}
+                      height={20}
+                      style={{ borderRadius: 4, objectFit: 'cover' }}
+                    />
+                  ) : (
+                    <Image src={chessSmall} alt="" width={20} height={20} />
+                  )
+                }
+                label={firstGroup.name}
+                isSelected
+              />
+            ) : (
+              <SidebarButton
+                icon={
+                  firstGroup.image ? (
+                    <Image
+                      src={firstGroup.image}
+                      alt=""
+                      width={24}
+                      height={24}
+                      style={{ borderRadius: 4, objectFit: 'cover' }}
+                    />
+                  ) : (
+                    <Image src={chessBig} alt="" width={24} height={24} />
+                  )
+                }
+                label={firstGroup.name}
+                isActive
+                iconOnly
+              />
+            )
+          ) : null
+        }
+        addButton={(isCollapsed: boolean) => (
+          <>
+            {!isCollapsed && <SidebarAddButton label="팀 추가하기" onClick={() => {}} />}
+            <hr style={{ border: 'none', borderTop: '1px solid #e2e8f0', margin: '8px 0' }} />
+            <SidebarButton
+              icon={
+                <Image
+                  src={isCollapsed ? boardLarge : boardSmall}
+                  alt=""
+                  width={isCollapsed ? 24 : 20}
+                  height={isCollapsed ? 24 : 20}
+                />
+              }
+              label="자유게시판"
+              isActive
+              iconOnly={isCollapsed}
+              href="/boards"
+            />
+          </>
+        )}
+      />
+      <MobileHeader
+        isLoggedIn={isLoggedIn}
+        profileImage={
+          user?.image ? (
+            <Image
+              src={user.image}
+              alt=""
+              width={32}
+              height={32}
+              style={{ borderRadius: 8, objectFit: 'cover' }}
+            />
+          ) : undefined
+        }
+        onMenuClick={() => setIsDrawerOpen(true)}
+        onProfileClick={handleProfileClick}
+      />
+      <MobileDrawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
+        <SidebarButton
+          icon={<Image src={boardSmall} alt="" width={20} height={20} />}
+          label="자유게시판"
+          isActive
+          href="/boards"
+          onClick={() => setIsDrawerOpen(false)}
+        />
+      </MobileDrawer>
+      <main className={styles.main}>{children}</main>
+    </div>
+  );
+}
diff --git a/src/shared/apis/user/index.ts b/src/app/(root)/mypage/apis/index.ts
similarity index 100%
rename from src/shared/apis/user/index.ts
rename to src/app/(root)/mypage/apis/index.ts
diff --git a/src/shared/apis/user/types.ts b/src/app/(root)/mypage/apis/types.ts
similarity index 100%
rename from src/shared/apis/user/types.ts
rename to src/app/(root)/mypage/apis/types.ts
diff --git a/src/shared/apis/user/userApi.ts b/src/app/(root)/mypage/apis/userApi.ts
similarity index 81%
rename from src/shared/apis/user/userApi.ts
rename to src/app/(root)/mypage/apis/userApi.ts
index 7bda703..718a137 100644
--- a/src/shared/apis/user/userApi.ts
+++ b/src/app/(root)/mypage/apis/userApi.ts
@@ -7,9 +7,11 @@ import type {
   ImageUploadResponse,
 } from './types';
 
+const PROXY = '/api/proxy';
+
 /** 현재 유저 정보 조회 */
 export async function getUser(): Promise<UserResponse> {
-  const response = await fetch('/api/proxy/user');
+  const response = await fetch(`${PROXY}/user`);
 
   if (!response.ok) {
     throw new Error('유저 정보를 불러오는데 실패했습니다.');
@@ -20,7 +22,7 @@ export async function getUser(): Promise<UserResponse> {
 
 /** 유저 정보 수정 */
 export async function updateUser(data: UpdateUserRequest): Promise<UpdateUserResponse> {
-  const response = await fetch('/api/proxy/user', {
+  const response = await fetch(`${PROXY}/user`, {
     method: 'PATCH',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(data),
@@ -35,18 +37,19 @@ export async function updateUser(data: UpdateUserRequest): Promise<UpdateUserRes
 
 /** 회원 탈퇴 */
 export async function deleteUser(): Promise<void> {
-  const response = await fetch('/api/proxy/user', {
+  const response = await fetch(`${PROXY}/user`, {
     method: 'DELETE',
   });
 
-  if (!response.ok) {
+  // 백엔드가 500을 반환하지만 실제 삭제는 수행되므로 200, 204, 500 모두 허용
+  if (!response.ok && response.status !== 500) {
     throw new Error('회원 탈퇴에 실패했습니다.');
   }
 }
 
 /** 비밀번호 변경 */
 export async function changePassword(data: ChangePasswordRequest): Promise<ChangePasswordResponse> {
-  const response = await fetch('/api/proxy/user/password', {
+  const response = await fetch(`${PROXY}/user/password`, {
     method: 'PATCH',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(data),
diff --git a/src/app/(root)/mypage/hooks/useUser.ts b/src/app/(root)/mypage/hooks/useUser.ts
index 0f87c94..8f1943d 100644
--- a/src/app/(root)/mypage/hooks/useUser.ts
+++ b/src/app/(root)/mypage/hooks/useUser.ts
@@ -1,124 +1,110 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-
-import {
-  getUser,
-  updateUser,
-  deleteUser,
-  changePassword,
-  uploadImage,
-} from '@/shared/apis/user/index';
-import type { UserResponse } from '@/shared/apis/user/index';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { updateUser, deleteUser, changePassword, uploadImage } from '../apis';
 
 export function useUser() {
   const router = useRouter();
+  const queryClient = useQueryClient();
+  const { data: user, isLoading, error: queryError } = useCurrentUser();
 
-  const [user, setUser] = useState<UserResponse | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   // 폼 상태
   const [name, setName] = useState('');
   const [originalName, setOriginalName] = useState('');
   const [profileImage, setProfileImage] = useState<string | null>(null);
+  const [prevUserId, setPrevUserId] = useState<number | null>(null);
 
-  const hasChanges = name !== originalName || profileImage !== user?.image;
-
-  // 유저 정보 조회
-  useEffect(() => {
-    async function fetchUser() {
-      try {
-        setError(null);
-        const data = await getUser();
-        setUser(data);
-        // 폼 초기화
-        setName(data.nickname);
-        setOriginalName(data.nickname);
-        setProfileImage(data.image);
-      } catch (err) {
-        console.error('유저 정보 조회 실패:', err);
-        setError('유저 정보를 불러오는데 실패했습니다.');
-      } finally {
-        setIsLoading(false);
-      }
-    }
+  // 렌더 시 상태 조정 — user 도착 시 1회 폼 초기화
+  if (user && user.id !== prevUserId) {
+    setPrevUserId(user.id);
+    setName(user.nickname);
+    setOriginalName(user.nickname);
+    setProfileImage(user.image);
+  }
 
-    fetchUser();
-  }, []);
+  const hasChanges = name !== originalName || profileImage !== user?.image;
 
   // 프로필 수정
-  const updateProfile = useCallback(async () => {
+  const updateProfileMutation = useMutation({
+    mutationFn: (body: { nickname?: string; image?: string }) => updateUser(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['currentUser'] });
+    },
+  });
+
+  const updateProfile = async (overrides?: { nickname?: string; image?: string }) => {
     try {
       setError(null);
-      await updateUser({
-        nickname: name,
-        image: profileImage ?? undefined,
-      });
-      // 수정 성공 후 유저 정보 다시 조회
-      const refreshedUser = await getUser();
-      setUser(refreshedUser);
-      setOriginalName(refreshedUser.nickname);
+      const body: { nickname?: string; image?: string } = {};
+      if (overrides) {
+        if (overrides.nickname) body.nickname = overrides.nickname;
+        if (overrides.image) body.image = overrides.image;
+      } else {
+        if (name !== originalName) body.nickname = name;
+        if (profileImage !== user?.image) body.image = profileImage ?? undefined;
+      }
+      if (Object.keys(body).length === 0) return { success: true };
+      await updateProfileMutation.mutateAsync(body);
+      setOriginalName(body.nickname ?? originalName);
       return { success: true };
-    } catch (err) {
-      console.error('프로필 수정 실패:', err);
+    } catch {
       setError('프로필 수정에 실패했습니다.');
       return { success: false };
     }
-  }, [name, profileImage]);
+  };
 
   // 회원 탈퇴
-  const deleteAccount = useCallback(async () => {
+  const deleteAccount = async () => {
     try {
       setError(null);
       await deleteUser();
+      await fetch('/api/auth/logout', { method: 'POST' }).catch(() => {});
+      queryClient.removeQueries({ queryKey: ['currentUser'] });
       router.push('/');
       return { success: true };
-    } catch (err) {
-      console.error('회원 탈퇴 실패:', err);
+    } catch {
       setError('회원 탈퇴에 실패했습니다.');
       return { success: false };
     }
-  }, [router]);
+  };
 
   // 비밀번호 변경
-  const updatePassword = useCallback(
-    async (data: { password: string; passwordConfirmation: string }) => {
-      try {
-        setError(null);
-        await changePassword(data);
-        return { success: true };
-      } catch (err) {
-        console.error('비밀번호 변경 실패:', err);
-        setError('비밀번호 변경에 실패했습니다.');
-        return { success: false };
-      }
-    },
-    [],
-  );
+  const updatePassword = async (data: { password: string; passwordConfirmation: string }) => {
+    try {
+      setError(null);
+      await changePassword(data);
+      return { success: true };
+    } catch {
+      setError('비밀번호 변경에 실패했습니다.');
+      return { success: false };
+    }
+  };
 
   // 프로필 이미지 업로드
-  const uploadProfileImage = useCallback(async (file: File) => {
+  const uploadProfileImage = async (file: File) => {
     try {
       setError(null);
       const { url } = await uploadImage(file);
       return { success: true, url };
-    } catch (err) {
-      console.error('이미지 업로드 실패:', err);
+    } catch {
       setError('이미지 업로드에 실패했습니다.');
       return { success: false, url: null };
     }
-  }, []);
+  };
 
   // 팀 목록
-  const teams = user?.memberships.map((m) => m.group.name) ?? [];
+  const teams = user?.memberships?.map((m) => m.group.name) ?? [];
 
   return {
     user,
     teams,
     isLoading,
-    error,
+    error: error ?? (queryError ? '유저 정보를 불러오는데 실패했습니다.' : null),
     // 폼 상태
     name,
     setName,
diff --git a/src/app/(root)/mypage/page.module.css b/src/app/(root)/mypage/page.module.css
index fff15e5..4760a48 100644
--- a/src/app/(root)/mypage/page.module.css
+++ b/src/app/(root)/mypage/page.module.css
@@ -1,27 +1,6 @@
-.layout {
-  display: flex;
-  flex-direction: column;
+.page {
   min-height: 100vh;
   background-color: var(--color-background-secondary);
-}
-
-/* 모바일 헤더 - 모바일에서만 표시 */
-.mobileHeader {
-  display: none;
-}
-
-/* 사이드바 - 태블릿/데스크탑에서 표시 */
-.sidebar {
-  display: block;
-}
-
-/* 모바일 타이틀 - 모바일에서만 표시 */
-.mobileTitle {
-  display: none;
-}
-
-.main {
-  flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -120,53 +99,16 @@
   width: 100%;
 }
 
-/* 태블릿/데스크탑 레이아웃 */
-@media (min-width: 768px) {
-  .layout {
-    flex-direction: row;
-  }
-}
-
-/* 태블릿 (767px 이하) */
-@media (max-width: 767px) {
-  .layout {
-    flex-direction: row;
-  }
-
-  .main {
+/* Tablet */
+@media (max-width: 1199px) {
+  .page {
     padding: 32px 24px;
   }
-
-  .card {
-    max-width: 100%;
-  }
 }
 
-/* 모바일 (375px 이하) */
-@media (max-width: 375px) {
-  .layout {
-    flex-direction: column;
-  }
-
-  .mobileHeader {
-    display: block;
-  }
-
-  .sidebar {
-    display: none;
-  }
-
-  .mobileTitle {
-    display: block;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--color-text-primary);
-    margin: 0 0 16px;
-    align-self: flex-start;
-  }
-
-  .main {
-    flex: 1;
+/* Mobile */
+@media (max-width: 767px) {
+  .page {
     justify-content: flex-start;
     padding: 24px 16px;
   }
@@ -177,7 +119,8 @@
   }
 
   .title {
-    display: none;
+    font-size: 18px;
+    margin-bottom: 24px;
   }
 
   .profileImageWrapper {
@@ -191,36 +134,4 @@
   .label {
     font-size: 12px;
   }
-
-  /* 모바일 모달 - 하단 고정 */
-  :global(section[class*='overlay']) {
-    align-items: flex-end !important;
-  }
-
-  :global(section[class*='overlay'] > div[class*='contentsBox']) {
-    width: 100% !important;
-    max-width: 100% !important;
-    border-radius: 12px 12px 0 0 !important;
-  }
-
-  :global([class*='modalContent']) {
-    width: 100% !important;
-    max-width: 100% !important;
-    height: auto !important;
-  }
-
-  :global([class*='field']) {
-    width: 100% !important;
-  }
-
-  :global([class*='actions']) {
-    width: 100% !important;
-  }
-
-  :global([class*='closeButton']),
-  :global([class*='submitButton']),
-  :global([class*='confirmButton']) {
-    flex: 1 !important;
-    width: auto !important;
-  }
 }
diff --git a/src/app/(root)/mypage/page.tsx b/src/app/(root)/mypage/page.tsx
index e4c1403..ad70982 100644
--- a/src/app/(root)/mypage/page.tsx
+++ b/src/app/(root)/mypage/page.tsx
@@ -5,12 +5,6 @@ import Image from 'next/image';
 
 import { useUser } from './hooks';
 
-import Sidebar from '@/components/sidebar/Sidebar';
-import SidebarButton from '@/components/sidebar/SidebarButton';
-import SidebarTeamSelect from '@/components/sidebar/SidebarTeamSelect';
-import SidebarAddButton from '@/components/sidebar/SidebarAddButton';
-import MobileHeader from '@/components/sidebar/MobileHeader';
-import MobileDrawer from '@/components/sidebar/MobileDrawer';
 import { ProfileImage } from '@/components/profile-img';
 import Input from '@/components/input/Input';
 import accountInputStyles from '@/components/input/styles/AccountInput.module.css';
@@ -20,17 +14,12 @@ import ChangePassword from '@/components/Modal/domain/components/ChangePassword/
 import WarningModal from '@/components/Modal/domain/components/WarningModal/WarningModal';
 
 import outIcon from '@/assets/icons/out/out.svg';
-import chessSmall from '@/assets/icons/chess/chessSmall.svg';
-import chessBig from '@/assets/icons/chess/chessBig.svg';
-import boardSmall from '@/assets/icons/board/boardSmall.svg';
-import boardLarge from '@/assets/icons/board/boardLarge.svg';
 
 import styles from './page.module.css';
 
 export default function ProfilePage() {
   const {
     user,
-    teams,
     isLoading,
     name,
     setName,
@@ -44,7 +33,6 @@ export default function ProfilePage() {
   } = useUser();
 
   const [showToast, setShowToast] = useState(false);
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
   const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
   const [newPassword, setNewPassword] = useState('');
@@ -89,237 +77,113 @@ export default function ProfilePage() {
     }
   };
 
-  const drawerContent = (
-    <>
-      <SidebarTeamSelect
-        icon={<Image src={chessSmall} alt="" width={20} height={20} />}
-        label="팀 선택"
-        isSelected={false}
-      />
-      {teams.map((team: string) => (
-        <SidebarButton
-          key={team}
-          icon={<Image src={chessSmall} alt="" width={20} height={20} />}
-          label={team}
-          isActive={team === teams[0]}
-        />
-      ))}
-      <SidebarAddButton label="팀 추가하기" />
-      <hr
-        aria-hidden="true"
-        style={{ border: 'none', borderTop: '1px solid #e2e8f0', margin: '8px 0' }}
-      />
-      <SidebarButton
-        icon={<Image src={boardSmall} alt="" width={20} height={20} />}
-        label="자유게시판"
-      />
-    </>
-  );
-
   if (isLoading) {
     return (
-      <div className={styles.layout}>
-        <div className={styles.main}>
-          <p>로딩 중...</p>
-        </div>
+      <div className={styles.page}>
+        <p>로딩 중...</p>
       </div>
     );
   }
 
   return (
-    <div className={styles.layout}>
-      {/* 모바일 헤더 */}
-      <div className={styles.mobileHeader}>
-        <MobileHeader
-          isLoggedIn
-          onMenuClick={() => setIsDrawerOpen(true)}
-          onProfileClick={() => {}}
-          profileImage={
-            user?.image ? (
-              <Image src={user.image} alt="" width={32} height={32} style={{ borderRadius: 12 }} />
-            ) : (
-              <div style={{ width: 32, height: 32, borderRadius: 12, background: '#cbd5e1' }} />
-            )
-          }
-        />
-      </div>
-
-      {/* 모바일 드로어 */}
-      <MobileDrawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
-        {drawerContent}
-      </MobileDrawer>
-
-      {/* 데스크탑/태블릿 사이드바 */}
-      <div className={styles.sidebar}>
-        <Sidebar
-          teamSelect={(isCollapsed) =>
-            !isCollapsed && (
-              <SidebarTeamSelect
-                icon={<Image src={chessSmall} alt="" width={20} height={20} />}
-                label="팀 선택"
-                isSelected={false}
-              />
-            )
-          }
-          addButton={(isCollapsed) => (
-            <>
-              {!isCollapsed && <SidebarAddButton label="팀 추가하기" />}
-              <hr
-                aria-hidden="true"
-                style={{ border: 'none', borderTop: '1px solid #e2e8f0', margin: '8px 0' }}
-              />
-              <SidebarButton
-                icon={
-                  <Image
-                    src={isCollapsed ? boardLarge : boardSmall}
-                    alt=""
-                    width={isCollapsed ? 24 : 20}
-                    height={isCollapsed ? 24 : 20}
-                  />
+    <div className={styles.page}>
+      <div className={styles.cardWrapper}>
+        <div className={styles.card}>
+          <h1 className={styles.title}>계정 설정</h1>
+
+          <div className={styles.profileImageWrapper}>
+            <ProfileImage
+              src={profileImage}
+              size="xl"
+              responsiveSize={{ base: 'lg', sm: 'xl', md: 'xl', lg: 'xl', xl: 'xl' }}
+              editable
+              showEditButton
+              onFileChange={async (file) => {
+                const localUrl = URL.createObjectURL(file);
+                setProfileImage(localUrl);
+
+                const result = await uploadProfileImage(file);
+                if (result.success && result.url) {
+                  setProfileImage(result.url);
+                  await updateProfile({ image: result.url });
                 }
-                label="자유게시판"
-                iconOnly={isCollapsed}
-              />
-            </>
-          )}
-          profileImage={
-            user?.image ? (
-              <Image src={user.image} alt="" width={40} height={40} style={{ borderRadius: 12 }} />
-            ) : (
-              <div style={{ width: 40, height: 40, borderRadius: 12, background: '#cbd5e1' }} />
-            )
-          }
-          profileName={user?.nickname ?? ''}
-          profileTeam={teams[0] ?? ''}
-        >
-          {(isCollapsed) =>
-            !isCollapsed ? (
-              teams.map((team: string) => (
-                <SidebarButton
-                  key={team}
-                  icon={<Image src={chessSmall} alt="" width={20} height={20} />}
-                  label={team}
-                  isActive={team === teams[0]}
-                />
-              ))
-            ) : (
-              <SidebarButton
-                icon={<Image src={chessBig} alt="" width={24} height={24} />}
-                label={teams[0] ?? ''}
-                isActive
-                iconOnly
-              />
-            )
-          }
-        </Sidebar>
-      </div>
-
-      <main className={styles.main}>
-        {/* 모바일 타이틀 - 스크린 리더는 카드 내부 제목 사용 */}
-        <p className={styles.mobileTitle} aria-hidden="true">
-          계정 설정
-        </p>
-
-        <div className={styles.cardWrapper}>
-          <div className={styles.card}>
-            <h1 className={styles.title}>계정 설정</h1>
-
-            <div className={styles.profileImageWrapper}>
-              <ProfileImage
-                src={profileImage}
-                size="xl"
-                responsiveSize={{ base: 'lg', sm: 'xl', md: 'xl', lg: 'xl', xl: 'xl' }}
-                editable
-                showEditButton
-                onFileChange={async (file) => {
-                  // 로컬 미리보기
-                  const localUrl = URL.createObjectURL(file);
-                  setProfileImage(localUrl);
+              }}
+            />
+          </div>
 
-                  // 서버에 업로드
-                  const result = await uploadProfileImage(file);
-                  if (result.success && result.url) {
-                    setProfileImage(result.url);
-                    setShowToast(true);
-                  }
-                }}
+          <form
+            className={styles.form}
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleSave();
+            }}
+          >
+            <div className={styles.field}>
+              <label htmlFor="profile-name" className={styles.label}>
+                이름
+              </label>
+              <Input
+                id="profile-name"
+                type="text"
+                value={name}
+                onChange={handleNameChange}
+                placeholder="이름을 입력해 주세요."
               />
             </div>
 
-            <form
-              className={styles.form}
-              onSubmit={(e) => {
-                e.preventDefault();
-                handleSave();
-              }}
-            >
-              <div className={styles.field}>
-                <label htmlFor="profile-name" className={styles.label}>
-                  이름
-                </label>
-                <Input
-                  id="profile-name"
-                  type="text"
-                  value={name}
-                  onChange={handleNameChange}
-                  placeholder="이름을 입력해 주세요."
-                />
-              </div>
+            <div className={styles.field}>
+              <label htmlFor="profile-email" className={styles.label}>
+                이메일
+              </label>
+              <Input
+                id="profile-email"
+                type="email"
+                value={user?.email ?? ''}
+                disabled
+                className={accountInputStyles.readOnly}
+              />
+            </div>
 
-              <div className={styles.field}>
-                <label htmlFor="profile-email" className={styles.label}>
-                  이메일
-                </label>
+            <div className={styles.field}>
+              <label htmlFor="profile-password" className={styles.label}>
+                비밀번호
+              </label>
+              <div className={styles.passwordField}>
                 <Input
-                  id="profile-email"
-                  type="email"
-                  value={user?.email ?? ''}
+                  id="profile-password"
+                  type="password"
+                  value="••••••••"
                   disabled
-                  className={accountInputStyles.readOnly}
+                  className={`${accountInputStyles.readOnly} ${styles.passwordInput}`}
                 />
-              </div>
-
-              <div className={styles.field}>
-                <label htmlFor="profile-password" className={styles.label}>
-                  비밀번호
-                </label>
-                <div className={styles.passwordField}>
-                  <Input
-                    id="profile-password"
-                    type="password"
-                    value="••••••••"
-                    disabled
-                    className={`${accountInputStyles.readOnly} ${styles.passwordInput}`}
-                  />
-                  <div className={styles.changeButton}>
-                    <BaseButton size="small" onClick={handleChangePassword}>
-                      변경하기
-                    </BaseButton>
-                  </div>
+                <div className={styles.changeButton}>
+                  <BaseButton size="small" onClick={handleChangePassword}>
+                    변경하기
+                  </BaseButton>
                 </div>
               </div>
-
-              <button type="button" className={styles.withdrawButton} onClick={handleWithdraw}>
-                <Image src={outIcon} alt="" width={20} height={20} />
-                회원 탈퇴하기
-              </button>
-            </form>
-          </div>
-
-          {hasChanges && (
-            <div className={styles.toastWrapper}>
-              <Toast
-                isOpen={showToast}
-                message="저장하지 않은 변경사항이 있어요!"
-                actionLabel="변경사항 저장하기"
-                onAction={handleSave}
-                onDismiss={() => setShowToast(false)}
-                className={styles.toast}
-              />
             </div>
-          )}
+
+            <button type="button" className={styles.withdrawButton} onClick={handleWithdraw}>
+              <Image src={outIcon} alt="" width={20} height={20} />
+              회원 탈퇴하기
+            </button>
+          </form>
         </div>
-      </main>
+
+        {hasChanges && (
+          <div className={styles.toastWrapper}>
+            <Toast
+              isOpen={showToast}
+              message="저장하지 않은 변경사항이 있어요!"
+              actionLabel="변경사항 저장하기"
+              onAction={handleSave}
+              onDismiss={() => setShowToast(false)}
+              className={styles.toast}
+            />
+          </div>
+        )}
+      </div>
 
       <ChangePassword
         isOpen={isPasswordModalOpen}
diff --git a/src/components/Card/ArticleCard/ArticleCard.module.css b/src/components/Card/ArticleCard/ArticleCard.module.css
index 15a5619..3486fc8 100644
--- a/src/components/Card/ArticleCard/ArticleCard.module.css
+++ b/src/components/Card/ArticleCard/ArticleCard.module.css
@@ -1,12 +1,15 @@
 .card {
   display: flex;
+  justify-content: space-between;
   gap: 16px;
   padding: 20px;
+  height: 100%;
   background: var(--color-background-primary);
-  border: 1px solid var(--color-border-primary);
+  border: 1px solid var(--color-background-tertiary);
   border-radius: 12px;
   cursor: pointer;
   transition: transform 0.2s ease;
+  box-sizing: border-box;
 }
 
 .card:hover {
@@ -18,7 +21,7 @@
 }
 
 .content {
-  flex: 1;
+  flex: 0 0 70%;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -90,6 +93,7 @@
 
 .date {
   font-weight: 400;
+  color: var(--color-text-disabled);
 }
 
 .rightSection {
@@ -97,12 +101,13 @@
   flex-direction: column;
   align-items: flex-end;
   gap: 8px;
+  min-height: 88px;
 }
 
 .imageWrapper {
   flex-shrink: 0;
-  width: 120px;
-  height: 120px;
+  width: 88px;
+  height: 88px;
   border-radius: 8px;
   overflow: hidden;
   background: var(--color-background-secondary);
@@ -121,7 +126,45 @@
   margin-top: auto;
   font-size: 14px;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--color-text-disabled);
+}
+
+/* Best card */
+.best {
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 12px;
+}
+
+.bestBody {
+  display: flex;
+  gap: 12px;
+  flex: 1;
+  min-height: 0;
+}
+
+.bestText {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.bestImageWrapper {
+  flex-shrink: 0;
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--color-background-secondary);
+}
+
+.bestFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
 }
 
 /* 태블릿 */
@@ -130,9 +173,13 @@
     padding: 16px;
   }
 
+  .rightSection {
+    min-height: 88px;
+  }
+
   .imageWrapper {
-    width: 100px;
-    height: 100px;
+    width: 88px;
+    height: 88px;
   }
 }
 
@@ -159,8 +206,12 @@
     font-size: 12px;
   }
 
+  .rightSection {
+    min-height: 72px;
+  }
+
   .imageWrapper {
-    width: 80px;
-    height: 80px;
+    width: 72px;
+    height: 72px;
   }
 }
diff --git a/src/components/Card/ArticleCard/ArticleCard.tsx b/src/components/Card/ArticleCard/ArticleCard.tsx
index 78a3209..d5e33ed 100644
--- a/src/components/Card/ArticleCard/ArticleCard.tsx
+++ b/src/components/Card/ArticleCard/ArticleCard.tsx
@@ -64,16 +64,50 @@ export default function ArticleCard({
     return count.toString();
   };
 
+  if (isBest) {
+    return (
+      <article className={`${styles.card} ${styles.best}`} onClick={onClick}>
+        <div className={styles.badge}>
+          <Image src={bestIcon} alt="" width={16} height={16} />
+          <span>인기</span>
+        </div>
+
+        <div className={styles.bestBody}>
+          <div className={styles.bestText}>
+            <h3 className={styles.title}>{title}</h3>
+            {content && (
+              <p className={styles.preview}>
+                {content.length > 100 ? `${content.slice(0, 100)}...` : content}
+              </p>
+            )}
+          </div>
+          {image && (
+            <div className={styles.bestImageWrapper}>
+              <img src={image} alt="" className={styles.image} />
+            </div>
+          )}
+        </div>
+
+        <div className={styles.bestFooter}>
+          <div className={styles.meta}>
+            <span className={styles.writer}>{writer.nickname}</span>
+            <span className={styles.divider}>|</span>
+            <time className={styles.date} dateTime={createdAt}>
+              {formatDate(createdAt)}
+            </time>
+          </div>
+          <div className={styles.like}>
+            <Image src={emptyHeartIcon} alt="" width={16} height={16} />
+            <span>{formatLikeCount(likeCount)}</span>
+          </div>
+        </div>
+      </article>
+    );
+  }
+
   return (
     <article className={styles.card} onClick={onClick}>
       <div className={styles.content}>
-        {isBest && (
-          <div className={styles.badge}>
-            <Image src={bestIcon} alt="" width={16} height={16} />
-            <span>인기</span>
-          </div>
-        )}
-
         <h3 className={styles.title}>{title}</h3>
 
         {content && (
diff --git a/src/components/input/styles/CommentInput.module.css b/src/components/input/styles/CommentInput.module.css
index 77dc7c8..a140d81 100644
--- a/src/components/input/styles/CommentInput.module.css
+++ b/src/components/input/styles/CommentInput.module.css
@@ -22,7 +22,8 @@
   flex-shrink: 0;
 }
 
-.textarea {
+.withProfile .textarea,
+.wrapper .textarea {
   border: none;
   border-radius: 0;
 }
diff --git a/src/components/sidebar/styles/Sidebar.module.css b/src/components/sidebar/styles/Sidebar.module.css
index 8e87f70..276703c 100644
--- a/src/components/sidebar/styles/Sidebar.module.css
+++ b/src/components/sidebar/styles/Sidebar.module.css
@@ -18,7 +18,7 @@
 }
 
 .collapsed {
-  position: relative;
+  /* position: fixed 유지 — 접혀도 오버레이 방식 */
 }
 
 .header {
diff --git a/src/hooks/useCurrentUser.ts b/src/hooks/useCurrentUser.ts
new file mode 100644
index 0000000..f141aa9
--- /dev/null
+++ b/src/hooks/useCurrentUser.ts
@@ -0,0 +1,20 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { getUser } from '@/app/(root)/mypage/apis';
+import type { UserResponse } from '@/app/(root)/mypage/apis';
+
+export function useCurrentUser() {
+  return useQuery<UserResponse | null>({
+    queryKey: ['currentUser'],
+    queryFn: async () => {
+      try {
+        return await getUser();
+      } catch {
+        return null;
+      }
+    },
+    staleTime: 60_000,
+    retry: 1,
+  });
+}