diff --git a/next.config.ts b/next.config.ts
index d504471..ae7b4fb 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,6 +3,11 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   images: {
     remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'sprint-fe-project.s3.ap-northeast-2.amazonaws.com',
+        pathname: '/Coworkers/**',
+      },
       {
         protocol: 'https',
         hostname: '**.kakaocdn.net',
diff --git a/src/app/(root)/boards/BoardsPage.module.css b/src/app/(root)/boards/BoardsPage.module.css
index aa08000..7584bc9 100644
--- a/src/app/(root)/boards/BoardsPage.module.css
+++ b/src/app/(root)/boards/BoardsPage.module.css
@@ -147,9 +147,63 @@
 }
 
 .arrowButton {
+  padding: 0;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
 }
 
+.arrowButton:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* Loading Indicator */
+.sentinel {
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loadingIndicator {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.loadingDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-interaction-inactive);
+  animation: dotPulse 1.2s ease-in-out infinite;
+}
+
+.loadingDot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.loadingDot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes dotPulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 /* All Section */
 .allSection {
   margin-bottom: 40px;
diff --git a/src/app/(root)/boards/BoardsPage.tsx b/src/app/(root)/boards/BoardsPage.tsx
index fd882d6..3dc8453 100644
--- a/src/app/(root)/boards/BoardsPage.tsx
+++ b/src/app/(root)/boards/BoardsPage.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback, memo } from 'react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -28,6 +28,7 @@ interface BoardsPageProps {
   bestArticles?: Article[];
   articles?: Article[];
   hasMore?: boolean;
+  isFetchingMore?: boolean;
   onLoadMore?: () => void;
   onSearch?: (keyword: string) => void;
   onSort?: (orderBy: 'recent' | 'like') => void;
@@ -45,22 +46,139 @@ const SORT_ORDER_MAP: Record<string, 'recent' | 'like'> = {
   likes: 'like',
 };
 
+const ArticleSortHeader = memo(function ArticleSortHeader({
+  onSortChange,
+}: {
+  onSortChange: (value: string) => void;
+}) {
+  return (
+    <div className={styles.sectionHeader}>
+      <h2 className={styles.sectionTitle}>전체</h2>
+      <Dropdown
+        items={SORT_OPTIONS}
+        defaultValue="latest"
+        ariaLabel="정렬 기준"
+        menuClassName={styles.dropdownMenu}
+        onChange={onSortChange}
+      />
+    </div>
+  );
+});
+
+const BestSection = memo(function BestSection({ bestArticles }: { bestArticles: Article[] }) {
+  const breakpoint = useBreakpoint();
+  const visibleCount = VISIBLE_COUNT_MAP[breakpoint];
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [direction, setDirection] = useState(0);
+
+  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 handlePrev = () => {
+    setDirection(-1);
+    setCurrentPage((prev) => Math.max(0, prev - 1));
+  };
+  const handleNext = () => {
+    setDirection(1);
+    setCurrentPage((prev) => Math.min(totalPages - 1, prev + 1));
+  };
+
+  return (
+    <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 />
+              </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}>
+          <button
+            type="button"
+            className={styles.arrowButton}
+            onClick={handlePrev}
+            aria-label="이전"
+            disabled={currentPage === 0}
+          >
+            <Image src={arrowLeftIcon} alt="" width={32} height={32} />
+          </button>
+          <button
+            type="button"
+            className={styles.arrowButton}
+            onClick={handleNext}
+            aria-label="다음"
+            disabled={currentPage >= totalPages - 1}
+          >
+            <Image src={arrowRightIcon} alt="" width={32} height={32} />
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+});
+
 export default function BoardsPage({
   bestArticles = [],
   articles = [],
   hasMore = false,
+  isFetchingMore = 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 searchRef = useRef<HTMLInputElement>(null);
   const sentinelRef = useRef<HTMLDivElement>(null);
 
   const handleIntersect = useCallback(
@@ -80,21 +198,9 @@ export default function BoardsPage({
     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 handleSearchSubmit = useCallback(() => {
+    onSearch?.(searchRef.current?.value ?? '');
+  }, [onSearch]);
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
@@ -102,19 +208,12 @@ export default function BoardsPage({
     }
   };
 
-  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));
-  };
+  const handleSortChange = useCallback(
+    (value: string) => {
+      onSort?.(SORT_ORDER_MAP[value] || 'recent');
+    },
+    [onSort],
+  );
 
   return (
     <div className={styles.container}>
@@ -130,114 +229,35 @@ export default function BoardsPage({
             onClick={handleSearchSubmit}
           />
           <input
+            ref={searchRef}
             type="text"
             className={styles.searchInput}
             placeholder="검색어를 입력해주세요"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
+            defaultValue=""
             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>
+      <BestSection bestArticles={bestArticles} />
 
       <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>
+        <ArticleSortHeader onSortChange={handleSortChange} />
 
         <div className={styles.articleGrid}>
           {articles.map((article) => (
-            <ArticleCard
-              key={article.id}
-              {...article}
-              image={article.image ?? undefined}
-              onClick={() => router.push(`/boards/${article.id}`)}
-            />
+            <ArticleCard key={article.id} {...article} image={article.image ?? undefined} />
           ))}
         </div>
-        <div ref={sentinelRef} />
+        <div ref={sentinelRef} className={styles.sentinel}>
+          {isFetchingMore && (
+            <div className={styles.loadingIndicator} role="status" aria-label="더 불러오는 중">
+              <span className={styles.loadingDot} />
+              <span className={styles.loadingDot} />
+              <span className={styles.loadingDot} />
+            </div>
+          )}
+        </div>
       </section>
 
       <div className={styles.floatingButtonWrapper}>
diff --git a/src/app/(root)/boards/[articleId]/ArticleDetailPage.module.css b/src/app/(root)/boards/[articleId]/ArticleDetailPage.module.css
index bafa67f..abcddf5 100644
--- a/src/app/(root)/boards/[articleId]/ArticleDetailPage.module.css
+++ b/src/app/(root)/boards/[articleId]/ArticleDetailPage.module.css
@@ -284,15 +284,6 @@
   cursor: not-allowed;
 }
 
-/* Toast */
-.toastWrapper {
-  position: fixed;
-  bottom: 40px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 100;
-}
-
 /* Tablet */
 @media (max-width: 1199px) {
   .page {
diff --git a/src/app/(root)/boards/[articleId]/ArticleDetailPage.tsx b/src/app/(root)/boards/[articleId]/ArticleDetailPage.tsx
index b164576..e588ff4 100644
--- a/src/app/(root)/boards/[articleId]/ArticleDetailPage.tsx
+++ b/src/app/(root)/boards/[articleId]/ArticleDetailPage.tsx
@@ -376,14 +376,12 @@ export default function ArticleDetailPage({
       />
 
       {toastMessage && (
-        <div className={styles.toastWrapper}>
-          <Toast
-            isOpen
-            message={toastMessage}
-            actionLabel=""
-            onDismiss={() => setToastMessage(null)}
-          />
-        </div>
+        <Toast
+          isOpen
+          message={toastMessage}
+          actionLabel=""
+          onDismiss={() => setToastMessage(null)}
+        />
       )}
     </div>
   );
diff --git a/src/app/(root)/boards/[articleId]/edit/ArticleEditPage.tsx b/src/app/(root)/boards/[articleId]/edit/ArticleEditPage.tsx
index ae9ac12..5f4fde5 100644
--- a/src/app/(root)/boards/[articleId]/edit/ArticleEditPage.tsx
+++ b/src/app/(root)/boards/[articleId]/edit/ArticleEditPage.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import Input from '@/components/input/Input';
 import TextArea from '@/components/input/TextArea';
@@ -23,12 +23,17 @@ interface ArticleData {
 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 titleRef = useRef<HTMLInputElement>(null);
+  const contentRef = useRef<HTMLTextAreaElement>(null);
+  const [isValid, setIsValid] = useState(true);
   const [images, setImages] = useState<string[]>(article.image ? [article.image] : []);
 
-  const isValid = title.trim().length > 0 && content.trim().length > 0;
+  const checkValidity = () => {
+    const valid =
+      (titleRef.current?.value.trim().length ?? 0) > 0 &&
+      (contentRef.current?.value.trim().length ?? 0) > 0;
+    setIsValid((prev) => (prev !== valid ? valid : prev));
+  };
 
   const handleFileSelect = async (file: File) => {
     try {
@@ -44,13 +49,15 @@ function ArticleEditForm({ articleId, article }: { articleId: number; article: A
   };
 
   const handleSubmit = () => {
-    if (!isValid || updateArticleMutation.isPending) return;
+    const title = titleRef.current?.value.trim() ?? '';
+    const content = contentRef.current?.value.trim() ?? '';
+    if (!title || !content || updateArticleMutation.isPending) return;
     updateArticleMutation.mutate(
       {
         articleId,
         body: {
-          title: title.trim(),
-          content: content.trim(),
+          title,
+          content,
           ...(images[0] ? { image: images[0] } : {}),
         },
       },
@@ -71,9 +78,10 @@ function ArticleEditForm({ articleId, article }: { articleId: number; article: A
             제목 <span className={styles.required}>*</span>
           </label>
           <Input
+            ref={titleRef}
             placeholder="제목을 입력해주세요."
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
+            defaultValue={article.title}
+            onChange={checkValidity}
           />
         </div>
 
@@ -82,10 +90,11 @@ function ArticleEditForm({ articleId, article }: { articleId: number; article: A
             내용 <span className={styles.required}>*</span>
           </label>
           <TextArea
+            ref={contentRef}
             className={styles.contentTextarea}
             placeholder="내용을 입력하세요"
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
+            defaultValue={article.content}
+            onChange={checkValidity}
           />
         </div>
 
diff --git a/src/app/(root)/boards/page.tsx b/src/app/(root)/boards/page.tsx
index ae639a7..fcb69d2 100644
--- a/src/app/(root)/boards/page.tsx
+++ b/src/app/(root)/boards/page.tsx
@@ -26,6 +26,7 @@ export default function Page() {
       bestArticles={bestArticles}
       articles={articles}
       hasMore={hasNextPage && !isFetchingNextPage}
+      isFetchingMore={isFetchingNextPage}
       onLoadMore={() => fetchNextPage()}
       onSearch={setKeyword}
       onSort={setOrderBy}
diff --git a/src/app/(root)/boards/write/ArticleWritePage.tsx b/src/app/(root)/boards/write/ArticleWritePage.tsx
index b212868..580ed08 100644
--- a/src/app/(root)/boards/write/ArticleWritePage.tsx
+++ b/src/app/(root)/boards/write/ArticleWritePage.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import Input from '@/components/input/Input';
 import TextArea from '@/components/input/TextArea';
@@ -13,11 +13,17 @@ 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 titleRef = useRef<HTMLInputElement>(null);
+  const contentRef = useRef<HTMLTextAreaElement>(null);
+  const [isValid, setIsValid] = useState(false);
   const [images, setImages] = useState<string[]>([]);
 
-  const isValid = title.trim().length > 0 && content.trim().length > 0;
+  const checkValidity = () => {
+    const valid =
+      (titleRef.current?.value.trim().length ?? 0) > 0 &&
+      (contentRef.current?.value.trim().length ?? 0) > 0;
+    setIsValid((prev) => (prev !== valid ? valid : prev));
+  };
 
   const handleFileSelect = async (file: File) => {
     try {
@@ -33,11 +39,13 @@ export default function ArticleWritePage() {
   };
 
   const handleSubmit = () => {
-    if (!isValid || createArticleMutation.isPending) return;
+    const title = titleRef.current?.value.trim() ?? '';
+    const content = contentRef.current?.value.trim() ?? '';
+    if (!title || !content || createArticleMutation.isPending) return;
     createArticleMutation.mutate(
       {
-        title: title.trim(),
-        content: content.trim(),
+        title,
+        content,
         ...(images[0] ? { image: images[0] } : {}),
       },
       {
@@ -57,9 +65,10 @@ export default function ArticleWritePage() {
             제목 <span className={styles.required}>*</span>
           </label>
           <Input
+            ref={titleRef}
             placeholder="제목을 입력해주세요."
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
+            defaultValue=""
+            onChange={checkValidity}
           />
         </div>
 
@@ -68,10 +77,11 @@ export default function ArticleWritePage() {
             내용 <span className={styles.required}>*</span>
           </label>
           <TextArea
+            ref={contentRef}
             className={styles.contentTextarea}
             placeholder="내용을 입력하세요"
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
+            defaultValue=""
+            onChange={checkValidity}
           />
         </div>
 
diff --git a/src/app/(root)/layout.tsx b/src/app/(root)/layout.tsx
index 5322a4d..97d1595 100644
--- a/src/app/(root)/layout.tsx
+++ b/src/app/(root)/layout.tsx
@@ -40,12 +40,19 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     }
   };
 
+  const handleLogout = async () => {
+    await fetch('/api/auth/logout', { method: 'POST' });
+    router.push('/login');
+  };
+
   return (
     <div className={styles.layout}>
       <Sidebar
         defaultCollapsed={isLanding}
         isLoggedIn={isLoggedIn}
         onProfileClick={handleProfileClick}
+        onLogout={handleLogout}
+        onLogoClick={() => router.push('/addteam')}
         profileImage={
           user?.image ? (
             <Image
@@ -80,6 +87,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 }
                 label={firstGroup.name}
                 isSelected
+                onClick={() => router.push(`/${firstGroup.id}`)}
               />
             ) : (
               <SidebarButton
@@ -99,6 +107,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 label={firstGroup.name}
                 isActive
                 iconOnly
+                onClick={() => router.push(`/${firstGroup.id}`)}
               />
             )
           ) : null
@@ -107,7 +116,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           isLoggedIn
             ? (isCollapsed: boolean) => (
                 <>
-                  {!isCollapsed && <SidebarAddButton label="팀 추가하기" onClick={() => {}} />}
+                  {!isCollapsed && (
+                    <SidebarAddButton label="팀 추가하기" onClick={() => router.push('/addteam')} />
+                  )}
                   <hr style={{ border: 'none', borderTop: '1px solid #e2e8f0', margin: '8px 0' }} />
                   <SidebarButton
                     icon={
@@ -130,6 +141,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       />
       <MobileHeader
         isLoggedIn={isLoggedIn}
+        onLogoClick={() => router.push('/addteam')}
         profileImage={
           user?.image ? (
             <Image
@@ -143,6 +155,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         }
         onMenuClick={() => setIsDrawerOpen(true)}
         onProfileClick={handleProfileClick}
+        onLogout={handleLogout}
       />
       <MobileDrawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
         <SidebarButton
diff --git a/src/app/(root)/mypage/page.tsx b/src/app/(root)/mypage/page.tsx
index ad70982..badc6c1 100644
--- a/src/app/(root)/mypage/page.tsx
+++ b/src/app/(root)/mypage/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import Image from 'next/image';
 
 import { useUser } from './hooks';
@@ -35,8 +35,8 @@ export default function ProfilePage() {
   const [showToast, setShowToast] = useState(false);
   const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
   const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const newPasswordRef = useRef<HTMLInputElement>(null);
+  const confirmPasswordRef = useRef<HTMLInputElement>(null);
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setName(e.target.value);
@@ -55,14 +55,14 @@ export default function ProfilePage() {
   };
 
   const handlePasswordSubmit = async () => {
-    const result = await updatePassword({
-      password: newPassword,
-      passwordConfirmation: confirmPassword,
-    });
+    const password = newPasswordRef.current?.value ?? '';
+    const passwordConfirmation = confirmPasswordRef.current?.value ?? '';
+    if (!password || !passwordConfirmation) return;
+    const result = await updatePassword({ password, passwordConfirmation });
     if (result.success) {
       setIsPasswordModalOpen(false);
-      setNewPassword('');
-      setConfirmPassword('');
+      if (newPasswordRef.current) newPasswordRef.current.value = '';
+      if (confirmPasswordRef.current) confirmPasswordRef.current.value = '';
     }
   };
 
@@ -189,18 +189,16 @@ export default function ProfilePage() {
         isOpen={isPasswordModalOpen}
         onClose={() => {
           setIsPasswordModalOpen(false);
-          setNewPassword('');
-          setConfirmPassword('');
+          if (newPasswordRef.current) newPasswordRef.current.value = '';
+          if (confirmPasswordRef.current) confirmPasswordRef.current.value = '';
         }}
         onSubmit={handlePasswordSubmit}
         input={{
           newPassword: {
-            value: newPassword,
-            onChange: (e) => setNewPassword(e.target.value),
+            ref: newPasswordRef,
           },
           confirmPassword: {
-            value: confirmPassword,
-            onChange: (e) => setConfirmPassword(e.target.value),
+            ref: confirmPasswordRef,
           },
         }}
       />
diff --git a/src/components/Card/ArticleCard/ArticleCard.module.css b/src/components/Card/ArticleCard/ArticleCard.module.css
index 3486fc8..97c8070 100644
--- a/src/components/Card/ArticleCard/ArticleCard.module.css
+++ b/src/components/Card/ArticleCard/ArticleCard.module.css
@@ -10,6 +10,8 @@
   cursor: pointer;
   transition: transform 0.2s ease;
   box-sizing: border-box;
+  text-decoration: none;
+  color: inherit;
 }
 
 .card:hover {
diff --git a/src/components/Card/ArticleCard/ArticleCard.stories.tsx b/src/components/Card/ArticleCard/ArticleCard.stories.tsx
index 9819670..6fb9687 100644
--- a/src/components/Card/ArticleCard/ArticleCard.stories.tsx
+++ b/src/components/Card/ArticleCard/ArticleCard.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { fn } from 'storybook/test';
 import ArticleCard from './ArticleCard';
 
 const meta = {
@@ -54,9 +53,9 @@ ArticleCard는 자유게시판 게시글을 카드 형태로 표시하는 컴포
       control: 'boolean',
       description: '인기글 여부',
     },
-    onClick: {
-      action: 'clicked',
-      description: '클릭 이벤트 핸들러',
+    href: {
+      control: 'text',
+      description: '클릭 시 이동할 경로 (미전달 시 /boards/{id})',
     },
   },
 } satisfies Meta<typeof ArticleCard>;
@@ -78,7 +77,6 @@ export const Default: Story = {
     writer: mockWriter,
     createdAt: '2024-07-25T09:00:00Z',
     likeCount: 24,
-    onClick: fn(),
   },
   decorators: [
     (Story) => (
@@ -105,7 +103,6 @@ export const Best: Story = {
     createdAt: '2024-07-25T09:00:00Z',
     likeCount: 999,
     isBest: true,
-    onClick: fn(),
   },
   decorators: [
     (Story) => (
@@ -132,7 +129,6 @@ export const WithImage: Story = {
     createdAt: '2024-07-25T09:00:00Z',
     likeCount: 24,
     image: 'https://picsum.photos/400/400',
-    onClick: fn(),
   },
   decorators: [
     (Story) => (
@@ -162,7 +158,6 @@ export const BestWithImageAndContent: Story = {
     likeCount: 999,
     image: 'https://picsum.photos/400/400',
     isBest: true,
-    onClick: fn(),
   },
   decorators: [
     (Story) => (
@@ -190,7 +185,6 @@ export const WithContent: Story = {
     writer: mockWriter,
     createdAt: '2024-07-25T09:00:00Z',
     likeCount: 24,
-    onClick: fn(),
   },
   decorators: [
     (Story) => (
@@ -217,7 +211,6 @@ export const LongTitle: Story = {
     writer: mockWriter,
     createdAt: '2024-07-25T09:00:00Z',
     likeCount: 5,
-    onClick: fn(),
   },
   decorators: [
     (Story) => (
@@ -244,7 +237,6 @@ export const HighLikes: Story = {
     createdAt: '2024-07-25T09:00:00Z',
     likeCount: 1234,
     isBest: true,
-    onClick: fn(),
   },
   decorators: [
     (Story) => (
@@ -301,7 +293,7 @@ export const MultipleAll: Story = {
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '523px' }}>
         {articles.map((article) => (
-          <ArticleCard key={article.id} {...article} onClick={fn()} />
+          <ArticleCard key={article.id} {...article} />
         ))}
       </div>
     );
@@ -361,7 +353,7 @@ export const MultipleBest: Story = {
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '350px' }}>
         {articles.map((article) => (
-          <ArticleCard key={article.id} {...article} onClick={fn()} />
+          <ArticleCard key={article.id} {...article} />
         ))}
       </div>
     );
diff --git a/src/components/Card/ArticleCard/ArticleCard.tsx b/src/components/Card/ArticleCard/ArticleCard.tsx
index d5e33ed..ae060cc 100644
--- a/src/components/Card/ArticleCard/ArticleCard.tsx
+++ b/src/components/Card/ArticleCard/ArticleCard.tsx
@@ -1,3 +1,5 @@
+import { memo } from 'react';
+import Link from 'next/link';
 import Image from 'next/image';
 import styles from './ArticleCard.module.css';
 import bestIcon from '@/assets/icons/best/best.svg';
@@ -16,30 +18,26 @@ interface ArticleCardProps {
   likeCount: number;
   image?: string;
   isBest?: boolean;
-  onClick?: () => void;
+  href?: string;
 }
 
-/**
- * ArticleCard
- *
- * 자유게시판 게시글을 카드 형태로 표시하는 컴포넌트입니다.
- *
- * @remarks
- * - 목록 조회 API(ArticleListType)의 데이터 구조와 일치합니다.
- * - `isBest` prop은 페이지에서 계산하여 전달합니다 (좋아요 상위 N개).
- * - `content` 필드는 현재 API에 없지만, 추후 추가를 대비해 optional로 정의했습니다.
- * - 이미지가 있으면 우측에 표시되고, 없으면 텍스트가 전체 공간을 차지합니다.
- *
- * @example
- * ```tsx
- * <ArticleCard
- *   {...article}
- *   isBest={bestArticles.includes(article)}
- *   onClick={() => router.push(`/articles/${article.id}`)}
- * />
- * ```
- */
-export default function ArticleCard({
+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}`;
+}
+
+function formatLikeCount(count: number): string {
+  if (count >= 1000) {
+    return '999+';
+  }
+  return count.toString();
+}
+
+function ArticleCard({
+  id,
   title,
   content,
   writer,
@@ -47,26 +45,13 @@ export default function ArticleCard({
   likeCount,
   image,
   isBest = false,
-  onClick,
+  href,
 }: ArticleCardProps) {
-  const 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}`;
-  };
-
-  const formatLikeCount = (count: number): string => {
-    if (count >= 1000) {
-      return '999+';
-    }
-    return count.toString();
-  };
+  const cardHref = href ?? `/boards/${id}`;
 
   if (isBest) {
     return (
-      <article className={`${styles.card} ${styles.best}`} onClick={onClick}>
+      <Link href={cardHref} className={`${styles.card} ${styles.best}`}>
         <div className={styles.badge}>
           <Image src={bestIcon} alt="" width={16} height={16} />
           <span>인기</span>
@@ -101,12 +86,12 @@ export default function ArticleCard({
             <span>{formatLikeCount(likeCount)}</span>
           </div>
         </div>
-      </article>
+      </Link>
     );
   }
 
   return (
-    <article className={styles.card} onClick={onClick}>
+    <Link href={cardHref} className={styles.card}>
       <div className={styles.content}>
         <h3 className={styles.title}>{title}</h3>
 
@@ -137,6 +122,8 @@ export default function ArticleCard({
           <span>{formatLikeCount(likeCount)}</span>
         </div>
       </div>
-    </article>
+    </Link>
   );
 }
+
+export default memo(ArticleCard);
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index 3696db0..e5a8a92 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -10,13 +10,14 @@ import styles from './styles/Input.module.css';
  * 네이티브 `<input>`의 모든 속성을 지원하며, errorMessage를 전달하면
  * 빨간 테두리 + 하단 에러 텍스트가 자동으로 표시됩니다.
  */
-export default function Input({ className, errorMessage, isError, ...props }: InputProps) {
+export default function Input({ className, errorMessage, isError, ref, ...props }: InputProps) {
   const hasError = isError || !!errorMessage;
   const errorId = useId();
 
   return (
     <>
       <input
+        ref={ref}
         aria-invalid={hasError || undefined}
         aria-describedby={errorMessage ? errorId : undefined}
         {...props}
diff --git a/src/components/input/types/types.ts b/src/components/input/types/types.ts
index 9f07c68..3fd773a 100644
--- a/src/components/input/types/types.ts
+++ b/src/components/input/types/types.ts
@@ -1,6 +1,8 @@
 import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 
 export type InputProps = ComponentPropsWithoutRef<'input'> & {
+  /** input DOM 참조 */
+  ref?: Ref<HTMLInputElement>;
   /** 입력 필드 하단에 표시할 에러 메시지 */
   errorMessage?: string;
   /** 에러 스타일 적용 여부 (errorMessage 없이 테두리만 빨갛게 할 때 사용) */
diff --git a/src/components/sidebar/MobileHeader.tsx b/src/components/sidebar/MobileHeader.tsx
index 1f535fe..851ed95 100644
--- a/src/components/sidebar/MobileHeader.tsx
+++ b/src/components/sidebar/MobileHeader.tsx
@@ -1,4 +1,6 @@
-import type { ReactNode } from 'react';
+'use client';
+
+import { type ReactNode, useState, useRef, useEffect } from 'react';
 import Image from 'next/image';
 import clsx from 'clsx';
 
@@ -17,6 +19,10 @@ type MobileHeaderProps = {
   onMenuClick?: () => void;
   /** 프로필 버튼 클릭 시 호출되는 콜백 */
   onProfileClick?: () => void;
+  /** 로그아웃 클릭 시 호출되는 콜백 */
+  onLogout?: () => void;
+  /** 로고 클릭 시 호출되는 콜백 */
+  onLogoClick?: () => void;
   /** 로고 너비 (기본값: 102) */
   logoWidth?: number;
   /** 로고 높이 (기본값: 20) */
@@ -33,13 +39,34 @@ export default function MobileHeader({
   profileImage,
   onMenuClick,
   onProfileClick,
+  onLogout,
+  onLogoClick,
   logoWidth = 102,
   logoHeight = 20,
 }: MobileHeaderProps) {
+  const [showProfileMenu, setShowProfileMenu] = useState(false);
+  const profileMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!showProfileMenu) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (profileMenuRef.current && !profileMenuRef.current.contains(e.target as Node)) {
+        setShowProfileMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showProfileMenu]);
+
   if (!isLoggedIn) {
     return (
       <header className={styles.header}>
-        <div className={styles.logo}>
+        <div
+          className={styles.logo}
+          onClick={onLogoClick}
+          role={onLogoClick ? 'button' : undefined}
+          tabIndex={onLogoClick ? 0 : undefined}
+        >
           <Image src={logoSmall} alt="COWORKERS" width={logoWidth} height={logoHeight} />
         </div>
       </header>
@@ -57,18 +84,49 @@ export default function MobileHeader({
         >
           <Image src={hamburger} alt="" width={24} height={24} />
         </button>
-        <div className={styles.logo}>
+        <div
+          className={styles.logo}
+          onClick={onLogoClick}
+          role={onLogoClick ? 'button' : undefined}
+          tabIndex={onLogoClick ? 0 : undefined}
+        >
           <Image src={logoIcon} alt="COWORKERS" width={24} height={24} />
         </div>
       </div>
-      <button
-        type="button"
-        className={styles.profileButton}
-        onClick={onProfileClick}
-        aria-label="프로필"
-      >
-        {profileImage ?? <Image src={humanBig} alt="" width={32} height={32} />}
-      </button>
+      <div className={styles.profileWrapper} ref={profileMenuRef}>
+        <button
+          type="button"
+          className={styles.profileButton}
+          onClick={() => setShowProfileMenu((prev) => !prev)}
+          aria-label="프로필"
+        >
+          {profileImage ?? <Image src={humanBig} alt="" width={32} height={32} />}
+        </button>
+        {showProfileMenu && (
+          <div className={styles.profileMenu}>
+            <button
+              type="button"
+              className={styles.profileMenuItem}
+              onClick={() => {
+                setShowProfileMenu(false);
+                onProfileClick?.();
+              }}
+            >
+              마이페이지
+            </button>
+            <button
+              type="button"
+              className={`${styles.profileMenuItem} ${styles.profileMenuDanger}`}
+              onClick={() => {
+                setShowProfileMenu(false);
+                onLogout?.();
+              }}
+            >
+              로그아웃
+            </button>
+          </div>
+        )}
+      </div>
     </header>
   );
 }
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index baa0da2..dc814ed 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import Image from 'next/image';
 import clsx from 'clsx';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -24,6 +24,8 @@ type SidebarProps = {
   defaultCollapsed?: boolean;
   isLoggedIn?: boolean;
   onProfileClick?: () => void;
+  onLogout?: () => void;
+  onLogoClick?: () => void;
 };
 
 /**
@@ -44,8 +46,23 @@ export default function Sidebar({
   defaultCollapsed,
   isLoggedIn,
   onProfileClick,
+  onLogout,
+  onLogoClick,
 }: SidebarProps) {
   const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed ?? false);
+  const [showProfileMenu, setShowProfileMenu] = useState(false);
+  const profileMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!showProfileMenu) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (profileMenuRef.current && !profileMenuRef.current.contains(e.target as Node)) {
+        setShowProfileMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showProfileMenu]);
 
   const renderSlot = (slot: SlotNode) => {
     if (!slot) return null;
@@ -85,22 +102,48 @@ export default function Sidebar({
     }
 
     return (
-      <div className={styles.footer} onClick={onProfileClick}>
-        <div className={styles.profileImage}>{profileImage}</div>
-        <AnimatePresence>
-          {!isCollapsed && (
-            <motion.div
-              className={styles.profileInfo}
-              initial={{ opacity: 0, x: -10 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -10 }}
-              transition={{ duration: 0.2 }}
+      <div className={styles.footerWrapper} ref={profileMenuRef}>
+        {showProfileMenu && (
+          <div className={clsx(styles.profileMenu, isCollapsed && styles.profileMenuRight)}>
+            <button
+              type="button"
+              className={styles.profileMenuItem}
+              onClick={() => {
+                setShowProfileMenu(false);
+                onProfileClick?.();
+              }}
             >
-              <span className={styles.profileName}>{profileName}</span>
-              <span className={styles.profileTeam}>{profileTeam}</span>
-            </motion.div>
-          )}
-        </AnimatePresence>
+              마이페이지
+            </button>
+            <button
+              type="button"
+              className={`${styles.profileMenuItem} ${styles.profileMenuDanger}`}
+              onClick={() => {
+                setShowProfileMenu(false);
+                onLogout?.();
+              }}
+            >
+              로그아웃
+            </button>
+          </div>
+        )}
+        <div className={styles.footer} onClick={() => setShowProfileMenu((prev) => !prev)}>
+          <div className={styles.profileImage}>{profileImage}</div>
+          <AnimatePresence>
+            {!isCollapsed && (
+              <motion.div
+                className={styles.profileInfo}
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -10 }}
+                transition={{ duration: 0.2 }}
+              >
+                <span className={styles.profileName}>{profileName}</span>
+                <span className={styles.profileTeam}>{profileTeam}</span>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
       </div>
     );
   };
@@ -112,7 +155,12 @@ export default function Sidebar({
       transition={{ duration: 0.3, ease: 'easeInOut' }}
     >
       <div className={styles.header}>
-        <div className={styles.logo}>
+        <div
+          className={styles.logo}
+          onClick={onLogoClick}
+          role={onLogoClick ? 'button' : undefined}
+          tabIndex={onLogoClick ? 0 : undefined}
+        >
           <AnimatePresence mode="wait">
             {isCollapsed ? (
               <motion.div
diff --git a/src/components/sidebar/styles/MobileHeader.module.css b/src/components/sidebar/styles/MobileHeader.module.css
index 295d1cf..f0cbe71 100644
--- a/src/components/sidebar/styles/MobileHeader.module.css
+++ b/src/components/sidebar/styles/MobileHeader.module.css
@@ -49,6 +49,11 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  cursor: pointer;
+}
+
+.profileWrapper {
+  position: relative;
 }
 
 .profileButton {
@@ -64,3 +69,38 @@
   padding: 0;
   overflow: hidden;
 }
+
+.profileMenu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  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: 140px;
+  overflow: hidden;
+}
+
+.profileMenuItem {
+  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);
+}
+
+.profileMenuItem:hover {
+  background: var(--color-background-secondary);
+}
+
+.profileMenuDanger {
+  color: var(--color-status-danger);
+}
diff --git a/src/components/sidebar/styles/Sidebar.module.css b/src/components/sidebar/styles/Sidebar.module.css
index 276703c..1f5795b 100644
--- a/src/components/sidebar/styles/Sidebar.module.css
+++ b/src/components/sidebar/styles/Sidebar.module.css
@@ -37,6 +37,7 @@
 
 .logo {
   flex-shrink: 0;
+  cursor: pointer;
 }
 
 .foldButton {
@@ -76,6 +77,11 @@
   align-items: center;
 }
 
+.footerWrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
 .footer {
   display: flex;
   align-items: center;
@@ -87,6 +93,49 @@
   cursor: pointer;
 }
 
+.profileMenu {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 16px;
+  right: 16px;
+  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;
+  overflow: hidden;
+}
+
+.profileMenuItem {
+  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);
+}
+
+.profileMenuItem:hover {
+  background: var(--color-background-secondary);
+}
+
+.profileMenuRight {
+  bottom: auto;
+  top: 0;
+  left: calc(100% + 8px);
+  right: auto;
+  min-width: 140px;
+}
+
+.profileMenuDanger {
+  color: var(--color-status-danger);
+}
+
 .loginText {
   font-family: Pretendard, sans-serif;
   font-weight: 600;