Skip to content

fix: addteam페이지에서 사이드바 프로필 보이게 수정 #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jieunsse merged 3 commits into from
Feb 24, 2026
Merged

fix: addteam페이지에서 사이드바 프로필 보이게 수정 #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7635edc
fix: addteam페이지에서 사이드바 프로필 보이게 수정
Jieunsse Feb 24, 2026
405693a
feat: 팀 페이지 모바일 헤더 및 네비게이션 개선
Jieunsse Feb 24, 2026
5d6a76f
Merge branch 'main' into fix/kanban-url
Jieunsse Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/app/(root)/[teamid]/_domain/components/Kanban/KanbanItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ interface KanbanItemProps {
function KanbanItem({
task,
onItemCheckedChange,
onCardClick,
onDeleteTask,
onEditTask,
onUpdateTask,
Expand Down
6 changes: 5 additions & 1 deletion src/app/(root)/[teamid]/_domain/components/Team/TeamNavClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

import { MobileHeader, MobileDrawer } from '@/components/sidebar';
import ProfileImage from '@/components/profile-img/ProfileImage';
Expand All @@ -12,15 +13,17 @@ import styles from './TeamNavClient.module.css';
export default function TeamNavClient() {
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const { data: currentUser } = useCurrentUserQuery();
const router = useRouter();

const openDrawer = () => setIsDrawerOpen(true);
const closeDrawer = () => setIsDrawerOpen(false);
const handleProfileClick = () => router.push('/mypage');

return (
<>
{/* 태블릿 헤더 */}
<div className={styles.tabletWrapper}>
<TeamTabletHeader onMenuClick={openDrawer} />
<TeamTabletHeader onMenuClick={openDrawer} onProfileClick={handleProfileClick} />
</div>

{/* 모바일 헤더 */}
Expand All @@ -31,6 +34,7 @@ export default function TeamNavClient() {
<ProfileImage src={currentUser?.image} size="sm" variant="profile" showBorder={false} />
}
onMenuClick={openDrawer}
onProfileClick={handleProfileClick}
/>
</div>

Expand Down
4 changes: 4 additions & 0 deletions src/app/(root)/[teamid]/_domain/components/Team/TeamTabletHeader.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,8 @@
.profileArea {
display: flex;
align-items: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
12 changes: 9 additions & 3 deletions src/app/(root)/[teamid]/_domain/components/Team/TeamTabletHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ import styles from './TeamTabletHeader.module.css';

type Props = {
onMenuClick?: () => void;
onProfileClick?: () => void;
};

export default function TeamTabletHeader({ onMenuClick }: Props) {
export default function TeamTabletHeader({ onMenuClick, onProfileClick }: Props) {
const { data: currentUser } = useCurrentUserQuery();

return (
Expand All @@ -28,9 +29,14 @@ export default function TeamTabletHeader({ onMenuClick }: Props) {
<div className={styles.logo}>
<Image src={logoLarge} alt="COWORKERS" width={120} height={24} />
</div>
<div className={styles.profileArea}>
<button
type="button"
className={styles.profileArea}
onClick={onProfileClick}
aria-label="프로필"
>
<ProfileImage src={currentUser?.image} size="sm" variant="profile" showBorder={false} />
</div>
</button>
</header>
);
}
15 changes: 14 additions & 1 deletion src/app/(root)/addteam/_domain/components/AddTeamSidebarWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,22 @@

import { useRouter } from 'next/navigation';
import { Sidebar } from '@/components/sidebar';
import ProfileImage from '@/components/profile-img/ProfileImage';
import { useCurrentUserQuery } from '@/shared/queries/user/useCurrentUserQuery';

export default function AddTeamSidebarWrapper() {
const { data: currentUser } = useCurrentUserQuery();
const router = useRouter();

return <Sidebar onProfileClick={() => router.push('/mypage')} />;
return (
<Sidebar
isLoggedIn={!!currentUser}
profileImage={
<ProfileImage src={currentUser?.image} size="sm" variant="profile" showBorder={false} />
}
profileName={currentUser?.nickname}
profileTeam={currentUser?.email}
Comment on lines +14 to +19

@gemini-code-assist gemini-code-assist Bot Feb 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

이 페이지가 인증된 사용자 전용이라고 가정하면, useSuspenseCurrentUserQuery를 사용하는 것이 더 적절해 보입니다. 이렇게 하면 currentUser 데이터가 렌더링 전에 항상 존재함을 보장하여, '로그인' 버튼이 잠깐 나타났다 사라지는 UI 깜빡임 현상을 방지할 수 있습니다. 또한, 옵셔널 체이닝(?.) 없이 코드를 단순화할 수 있습니다.

이 변경사항을 적용하려면 9행에서 useCurrentUserQuery를 useSuspenseCurrentUserQuery로 교체하고, 6행의 import 구문도 함께 수정해주세요.

Suggested change
isLoggedIn={!!currentUser}
profileImage={
<ProfileImage src={currentUser?.image} size="sm" variant="profile" showBorder={false} />
}
profileName={currentUser?.nickname}
profileTeam={currentUser?.email}
isLoggedIn
profileImage={
<ProfileImage src={currentUser.image} size="sm" variant="profile" showBorder={false} />
}
profileName={currentUser.nickname}
profileTeam={currentUser.email}

onProfileClick={() => router.push('/mypage')}
/>
);
}
58 changes: 32 additions & 26 deletions src/app/(root)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
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 + '/'));

const handleProfileClick = () => {
if (isLoggedIn) {
router.push('/mypage');
Expand Down Expand Up @@ -139,33 +143,35 @@ export default function RootLayout({ children }: { children: React.ReactNode })
: undefined
}
/>
<MobileHeader
isLoggedIn={isLoggedIn}
onLogoClick={() => router.push('/addteam')}
profileImage={
user?.image ? (
<Image
src={user.image}
alt=""
width={32}
height={32}
style={{ borderRadius: 8, objectFit: 'cover' }}
{!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)}
/>
) : undefined
}
onMenuClick={() => setIsDrawerOpen(true)}
onProfileClick={handleProfileClick}
onLogout={handleLogout}
/>
<MobileDrawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
<SidebarButton
icon={<Image src={boardSmall} alt="" width={20} height={20} />}
label="자유게시판"
isActive
href="/boards"
onClick={() => setIsDrawerOpen(false)}
/>
</MobileDrawer>
</MobileDrawer>
</>
)}
<main className={styles.main}>{children}</main>
</div>
);
Expand Down
Loading