프로필 이미지 삭제 직후 렌더링이 안되는 문제 해결

This commit is contained in:
dohyeons
2025-09-30 15:45:21 +09:00
parent 318436475a
commit 6da8d14845
6 changed files with 90 additions and 58 deletions
+18 -14
View File
@@ -215,8 +215,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
};
checkIsMobile();
window.addEventListener('resize', checkIsMobile);
return () => window.removeEventListener('resize', checkIsMobile);
window.addEventListener("resize", checkIsMobile);
return () => window.removeEventListener("resize", checkIsMobile);
}, []);
// 프로필 관련 로직
@@ -322,18 +322,20 @@ function AppLayoutInner({ children }: AppLayoutProps) {
return (
<div key={menu.id}>
<div
className={`group flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out h-10 ${
className={`group flex h-10 cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out ${
pathname === menu.url
? "bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900 border-l-4 border-blue-500"
? "border-l-4 border-blue-500 bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
: isExpanded
? "bg-slate-100 text-slate-900"
: "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
} ${level > 0 ? "ml-6" : ""}`}
onClick={() => handleMenuClick(menu)}
>
<div className="flex items-center min-w-0 flex-1">
<div className="flex min-w-0 flex-1 items-center">
{menu.icon}
<span className="ml-3 truncate" title={menu.name}>{menu.name}</span>
<span className="ml-3 truncate" title={menu.name}>
{menu.name}
</span>
</div>
{menu.hasChildren && (
<div className="ml-auto">
@@ -350,14 +352,16 @@ function AppLayoutInner({ children }: AppLayoutProps) {
key={child.id}
className={`flex cursor-pointer items-center rounded-lg px-3 py-2 text-sm transition-colors hover:cursor-pointer ${
pathname === child.url
? "bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900 border-l-4 border-blue-500"
? "border-l-4 border-blue-500 bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
: "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
}`}
onClick={() => handleMenuClick(child)}
>
<div className="flex items-center min-w-0 flex-1">
<div className="flex min-w-0 flex-1 items-center">
{child.icon}
<span className="ml-3 truncate" title={child.name}>{child.name}</span>
<span className="ml-3 truncate" title={child.name}>
{child.name}
</span>
</div>
</div>
))}
@@ -406,10 +410,10 @@ function AppLayoutInner({ children }: AppLayoutProps) {
{/* 왼쪽 사이드바 */}
<aside
className={`${
isMobile
isMobile
? (sidebarOpen ? "translate-x-0" : "-translate-x-full") + " fixed top-14 left-0 z-40"
: "translate-x-0 relative top-0 z-auto"
} flex h-full w-72 min-w-72 max-w-72 flex-col border-r border-slate-200 bg-white transition-transform duration-300`}
: "relative top-0 z-auto translate-x-0"
} flex h-full w-72 max-w-72 min-w-72 flex-col border-r border-slate-200 bg-white transition-transform duration-300`}
>
{/* 사이드바 상단 - Admin/User 모드 전환 버튼 (관리자만) */}
{(user as ExtendedUserInfo)?.userType === "admin" && (
@@ -453,7 +457,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
</aside>
{/* 가운데 컨텐츠 영역 - overflow 문제 해결 */}
<main className="flex-1 min-w-0 bg-white overflow-auto">{children}</main>
<main className="min-w-0 flex-1 overflow-auto bg-white">{children}</main>
</div>
{/* 프로필 수정 모달 */}
@@ -461,7 +465,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
isOpen={isModalOpen}
user={user}
formData={formData}
selectedImage={selectedImage}
selectedImage={selectedImage || ""}
isSaving={isSaving}
departments={departments}
alertModal={alertModal}