fix: 로그아웃 기능 사이드바 내장 기능으로 구현, 마이페이지및 자유게시판 사이드바 드롭다운 사용, 변경시 성공 토스트 구현

src/app/(root)/layout.tsx

@@ -1,40 +1,29 @@
 '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 { Sidebar, MobileHeader } from '@/components/sidebar';
+import TeamSidebarDropdown from './[teamid]/_domain/components/Team/TeamSidebarDropdown';
 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, isPending } = useCurrentUser();
 
   // isPending: 최초 로딩 중 (undefined)
   // user === null: 로딩 완료 후 비로그인
   // user !== null: 로그인
   const isLoggedIn = !isPending && user !== null && user !== undefined;
   const isLanding = pathname === '/';
-  const firstGroup = user?.memberships?.[0]?.group;
 
-  // [teamid] 페이지는 자체 모바일 헤더(TeamNavClient)를 사용하므로 root layout의 MobileHeader를 숨김
-  const knownPaths = ['/', '/addteam', '/boards', '/mypage', '/history', '/list'];
-  const isTeamIdPage = !knownPaths.some((p) => pathname === p || pathname.startsWith(p + '/'));
+  // 자체 사이드바가 없는 페이지에서만 root layout 사이드바 표시
+  const rootSidebarPaths = ['/', '/boards', '/mypage'];
+  const showRootSidebar = rootSidebarPaths.some(
+    (p) => pathname === p || pathname.startsWith(p + '/'),
+  );
 
   const handleProfileClick = () => {
     if (isLoggedIn) {
@@ -51,126 +40,53 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
   return (
     <div className={styles.layout}>
-      <Sidebar
-        defaultCollapsed={isLanding}
-        isLoggedIn={isLoggedIn}
-        onProfileClick={handleProfileClick}
-        onLogout={handleLogout}
-        onLogoClick={() => router.push('/addteam')}
-        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
-                onClick={() => router.push(`/${firstGroup.id}`)}
+      {showRootSidebar && (
+        <Sidebar
+          defaultCollapsed={isLanding}
+          isLoggedIn={isLoggedIn}
+          onProfileClick={handleProfileClick}
+          onLogout={handleLogout}
+          onLogoClick={() => router.push('/addteam')}
+          profileImage={
+            user?.image ? (
+              <Image
+                src={user.image}
+                alt=""
+                width={40}
+                height={40}
+                style={{ borderRadius: 12, objectFit: 'cover' }}
               />
             ) : (
-              <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
-                onClick={() => router.push(`/${firstGroup.id}`)}
-              />
+              <Image src={humanBig} alt="" width={40} height={40} />
             )
-          ) : null
-        }
-        addButton={
-          isLoggedIn
-            ? (isCollapsed: boolean) => (
-                <>
-                  {!isCollapsed && (
-                    <SidebarAddButton label="팀 추가하기" onClick={() => router.push('/addteam')} />
-                  )}
-                  <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"
-                  />
-                </>
-              )
-            : undefined
-        }
-      />
-      {!isTeamIdPage && (
-        <>
-          <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>
-        </>
+          }
+          profileName={user?.nickname ?? '사용자'}
+          profileTeam={user?.memberships?.[0]?.group?.name ?? ''}
+          teamSelect={
+            isLoggedIn
+              ? (isCollapsed: boolean) => <TeamSidebarDropdown isCollapsed={isCollapsed} />
+              : undefined
+          }
+        />
+      )}
+      {showRootSidebar && (
+        <MobileHeader
+          isLoggedIn={isLoggedIn}
+          profileImage={
+            user?.image ? (
+              <Image
+                src={user.image}
+                alt=""
+                width={32}
+                height={32}
+                style={{ borderRadius: 8, objectFit: 'cover' }}
+              />
+            ) : undefined
+          }
+          onProfileClick={handleProfileClick}
+          onLogout={handleLogout}
+          drawerContent={<TeamSidebarDropdown />}
+        />
       )}
       <main className={styles.main}>{children}</main>
     </div>

src/app/(root)/mypage/page.tsx

@@ -33,6 +33,7 @@ export default function ProfilePage() {
   } = useUser();
 
   const [showToast, setShowToast] = useState(false);
+  const [successToast, setSuccessToast] = useState<string | null>(null);
   const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
   const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
   const newPasswordRef = useRef<HTMLInputElement>(null);
@@ -47,6 +48,7 @@ export default function ProfilePage() {
     const result = await updateProfile();
     if (result.success) {
       setShowToast(false);
+      setSuccessToast('이름이 변경되었습니다.');
     }
   };
 
@@ -63,6 +65,7 @@ export default function ProfilePage() {
       setIsPasswordModalOpen(false);
       if (newPasswordRef.current) newPasswordRef.current.value = '';
       if (confirmPasswordRef.current) confirmPasswordRef.current.value = '';
+      setSuccessToast('비밀번호가 변경되었습니다.');
     }
   };
 
@@ -171,8 +174,8 @@ export default function ProfilePage() {
           </form>
         </div>
 
-        {hasChanges && (
-          <div className={styles.toastWrapper}>
+        <div className={styles.toastWrapper}>
+          {hasChanges && (
             <Toast
               isOpen={showToast}
               message="저장하지 않은 변경사항이 있어요!"
@@ -181,8 +184,17 @@ export default function ProfilePage() {
               onDismiss={() => setShowToast(false)}
               className={styles.toast}
             />
-          </div>
-        )}
+          )}
+          {successToast && (
+            <Toast
+              isOpen
+              message={successToast}
+              actionLabel=""
+              onDismiss={() => setSuccessToast(null)}
+              className={styles.toast}
+            />
+          )}
+        </div>
       </div>
 
       <ChangePassword

src/components/sidebar/MobileHeader.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { type ReactNode, useState, useRef, useEffect } from 'react';
+import { type ReactNode, useState, useRef, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import clsx from 'clsx';
+import MobileDrawer from './MobileDrawer';
 
 import styles from './styles/MobileHeader.module.css';
 import logoSmall from '@/assets/logos/logoSmall.svg';
@@ -15,8 +17,10 @@ type MobileHeaderProps = {
   isLoggedIn?: boolean;
   /** 프로필 이미지 (ReactNode로 자유롭게 주입, 미전달 시 기본 아이콘) */
   profileImage?: ReactNode;
-  /** 햄버거 메뉴 버튼 클릭 시 호출되는 콜백 */
+  /** @deprecated 내부 드로어로 대체됨. 호환성을 위해 유지 */
   onMenuClick?: () => void;
+  /** 드로어 내부 콘텐츠 (전달 시 햄버거 메뉴 클릭으로 드로어 표시) */
+  drawerContent?: ReactNode;
   /** 프로필 버튼 클릭 시 호출되는 콜백 */
   onProfileClick?: () => void;
   /** 로그아웃 클릭 시 호출되는 콜백 */
@@ -37,16 +41,27 @@ type MobileHeaderProps = {
 export default function MobileHeader({
   isLoggedIn,
   profileImage,
-  onMenuClick,
+  drawerContent,
   onProfileClick,
   onLogout,
   onLogoClick,
   logoWidth = 102,
   logoHeight = 20,
 }: MobileHeaderProps) {
+  const router = useRouter();
   const [showProfileMenu, setShowProfileMenu] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const profileMenuRef = useRef<HTMLDivElement>(null);
 
+  const defaultLogout = useCallback(async () => {
+    await fetch('/api/auth/logout', { method: 'POST' });
+    router.push('/login');
+  }, [router]);
+
+  const handleLogout = onLogout ?? defaultLogout;
+  const handleProfileClick = onProfileClick ?? (() => router.push('/mypage'));
+  const handleLogoClick = onLogoClick ?? (() => router.push('/addteam'));
+
   useEffect(() => {
     if (!showProfileMenu) return;
     const handleClickOutside = (e: MouseEvent) => {
@@ -61,12 +76,7 @@ export default function MobileHeader({
   if (!isLoggedIn) {
     return (
       <header className={styles.header}>
-        <div
-          className={styles.logo}
-          onClick={onLogoClick}
-          role={onLogoClick ? 'button' : undefined}
-          tabIndex={onLogoClick ? 0 : undefined}
-        >
+        <div className={styles.logo} onClick={handleLogoClick} role="button" tabIndex={0}>
           <Image src={logoSmall} alt="COWORKERS" width={logoWidth} height={logoHeight} />
         </div>
       </header>
@@ -79,17 +89,12 @@ export default function MobileHeader({
         <button
           type="button"
           className={styles.menuButton}
-          onClick={onMenuClick}
+          onClick={() => setIsDrawerOpen(true)}
           aria-label="메뉴 열기"
         >
           <Image src={hamburger} alt="" width={24} height={24} />
         </button>
-        <div
-          className={styles.logo}
-          onClick={onLogoClick}
-          role={onLogoClick ? 'button' : undefined}
-          tabIndex={onLogoClick ? 0 : undefined}
-        >
+        <div className={styles.logo} onClick={handleLogoClick} role="button" tabIndex={0}>
           <Image src={logoIcon} alt="COWORKERS" width={24} height={24} />
         </div>
       </div>
@@ -109,7 +114,7 @@ export default function MobileHeader({
               className={styles.profileMenuItem}
               onClick={() => {
                 setShowProfileMenu(false);
-                onProfileClick?.();
+                handleProfileClick();
               }}
             >
               마이페이지
@@ -119,14 +124,19 @@ export default function MobileHeader({
               className={`${styles.profileMenuItem} ${styles.profileMenuDanger}`}
               onClick={() => {
                 setShowProfileMenu(false);
-                onLogout?.();
+                handleLogout();
               }}
             >
               로그아웃
             </button>
           </div>
         )}
       </div>
+      {drawerContent && (
+        <MobileDrawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
+          {drawerContent}
+        </MobileDrawer>
+      )}
     </header>
   );
 }