Skip to content

Fix(#278): 사이드바 개선 #279

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
L0521 merged 5 commits into from
May 21, 2026
Merged

Fix(#278): 사이드바 개선 #279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bb358c6
fix: 최근 노트-저장소 간격 24px, UserIcon 16px 정렬, 크레딧 여백 정리
L0521 May 21, 2026
95e7229
feat: 노트 목록 아이템 hover/active 스타일 및 드롭다운 UI 수정
L0521 May 21, 2026
284bbb3
style: 노트 아이템 호버 시 배경색 제거
L0521 May 21, 2026
7669466
fix: 삭제 확인 모달 z-index 최상위, 드롭다운 버튼 가운데 정렬
L0521 May 21, 2026
97f9f4e
fix: 삭제 모달 createPortal로 stacking context 우회, 노트 선택 패딩 축소
L0521 May 21, 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
2 changes: 1 addition & 1 deletion src/features/sidebar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const Sidebar = ({
/>

{/* 메인 메뉴 영역 (고정) */}
<nav className="mb-[52px] flex w-[240px] shrink-0 flex-col gap-[12px] py-3">
<nav className="mb-[24px] flex w-[240px] shrink-0 flex-col gap-[12px] py-3">
<NavItem
to="/app/home"
icon={HomeIcon}
Expand Down
73 changes: 38 additions & 35 deletions src/features/sidebar/components/RecentNotes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import {
useInfiniteNoteList,
useDeleteNote,
Expand Down Expand Up @@ -193,42 +194,44 @@ export const RecentNotes = ({ isCollapsed }: RecentNotesProps) => {
</ul>
</div>

{/* 단건 삭제 확인 모달 */}
{deleteTargetId !== null && (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-[#00000033]"
onClick={(e) => {
if (e.target === e.currentTarget && !isDeleting) {
setDeleteTargetId(null);
}
}}
>
<div className="w-[360px] rounded-[20px] bg-white px-8 py-8 shadow-[0px_10px_40px_rgba(0,0,0,0.1)]">
<h2 className="text-center text-[22px] leading-[32px] font-semibold text-black">
이 노트를 삭제하시겠습니까?
</h2>
<p className="mt-3 text-center text-[15px] text-[#00000066]">
삭제된 노트는 복구가 불가능합니다.
</p>
<div className="mt-6 flex gap-3">
<button
onClick={() => setDeleteTargetId(null)}
disabled={isDeleting}
className="flex h-[48px] flex-1 items-center justify-center rounded-[16px] border border-[#D1D6DE] bg-[#F1F4F8] text-[16px] font-semibold text-[#6B7280] disabled:opacity-50"
>
취소
</button>
<button
onClick={handleDeleteConfirm}
disabled={isDeleting}
className="flex h-[48px] flex-1 items-center justify-center rounded-[16px] bg-[#2A6AFF] text-[16px] font-semibold text-white disabled:opacity-70"
>
{isDeleting ? "삭제 중..." : "삭제"}
</button>
{/* 단건 삭제 확인 모달 — portal로 body에 마운트해 stacking context 우회 */}
{deleteTargetId !== null &&
createPortal(
<div
className="fixed inset-0 z-[9999] flex items-center justify-center bg-[#00000033]"
onClick={(e) => {
if (e.target === e.currentTarget && !isDeleting) {
setDeleteTargetId(null);
}
}}
>
<div className="w-[360px] rounded-[20px] bg-white px-8 py-8 shadow-[0px_10px_40px_rgba(0,0,0,0.1)]">
<h2 className="text-center text-[22px] leading-[32px] font-semibold text-black">
이 노트를 삭제하시겠습니까?
</h2>
<p className="mt-3 text-center text-[15px] text-[#00000066]">
삭제된 노트는 복구가 불가능합니다.
</p>
<div className="mt-6 flex gap-3">
<button
onClick={() => setDeleteTargetId(null)}
disabled={isDeleting}
className="flex h-[48px] flex-1 items-center justify-center rounded-[16px] border border-[#D1D6DE] bg-[#F1F4F8] text-[16px] font-semibold text-[#6B7280] disabled:opacity-50"
>
취소
</button>
<button
onClick={handleDeleteConfirm}
disabled={isDeleting}
className="flex h-[48px] flex-1 items-center justify-center rounded-[16px] bg-[#2A6AFF] text-[16px] font-semibold text-white disabled:opacity-70"
>
{isDeleting ? "삭제 중..." : "삭제"}
</button>
</div>
</div>
</div>
</div>
)}
</div>,
document.body,
)}
</>
);
};
18 changes: 10 additions & 8 deletions src/features/sidebar/components/SidebarNoteItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,10 @@ export const SidebarNoteItem = ({
to={`/app/chat/${note.noteId}`}
state={{ chatEntrySource: "sidebar-recent-notes" }}
className={({ isActive }) =>
`block truncate rounded-lg py-[6px] pr-[28px] pl-[12px] text-[16px] leading-[24px] font-normal text-[#6B7280] transition-colors ${
isActive ? "mr-[-6px] bg-[#EBEBEB]" : "hover:bg-[#F5F5F5]"
`block truncate rounded-lg py-[3px] pr-[28px] pl-[12px] text-[16px] leading-[24px] transition-colors ${
isActive
? "mr-[-6px] bg-[#EBEBEB] font-medium text-black"
: "font-normal text-[#6B7280] hover:text-black"
}`
}
>
Expand All @@ -102,7 +104,7 @@ export const SidebarNoteItem = ({
{!isRenaming && (
<div
ref={menuRef}
className="absolute top-1/2 right-1 -translate-y-1/2"
className="absolute top-1/2 right-[-6px] -translate-y-1/2"
>
<button
onClick={(e) => {
Expand Down Expand Up @@ -142,25 +144,25 @@ export const SidebarNoteItem = ({
</button>

{isMenuOpen && (
<div className="absolute top-full right-0 z-50 mt-1 w-[120px] rounded-lg border border-[#E3E7ED] bg-white py-1 shadow-lg">
<div className="absolute top-full right-0 z-50 mt-1 flex w-[105px] flex-col items-center rounded-[8px] border-[0.5px] border-[#D1D6DE] bg-white p-[8px] shadow-[4px_4px_20px_0px_rgba(0,0,0,0.05)]">
<button
onClick={() => {
setTitleInput(note.title);
setIsRenaming(true);
setIsMenuOpen(false);
}}
className="w-full px-3 py-[6px] text-left text-[13px] text-[#454545] hover:bg-[#F5F5F5]"
className="w-full rounded px-3 py-[6px] text-center text-[13px] leading-[24px] font-normal text-[#6B7280] transition-colors hover:text-black active:font-medium active:text-black"
>
이름 변경
수정하기
</button>
<button
onClick={() => {
onDeleteRequest();
setIsMenuOpen(false);
}}
className="w-full px-3 py-[6px] text-left text-[13px] text-red-500 hover:bg-[#FFF5F5]"
className="w-full rounded px-3 py-[6px] text-center text-[13px] leading-[24px] font-normal text-[#6B7280] transition-colors hover:text-black active:font-medium active:text-black"
>
삭제
삭제하기
</button>
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/features/sidebar/components/SidebarProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export const SidebarProfile = ({

{/* 유저 행 - UserIcon은 absolute로 분리해 깜빡임 방지, 여기선 spacer만 */}
<div
className="ml-[18px] flex w-[200px] cursor-pointer items-center justify-between rounded-[12px] py-1 pr-2 transition-colors hover:bg-gray-100"
className="ml-[16px] flex w-[200px] cursor-pointer items-center justify-between rounded-[12px] py-1 pr-2 transition-colors hover:bg-gray-100"
onClick={onSettingsClick}
>
<div className="flex items-center gap-2">
Expand Down Expand Up @@ -132,7 +132,7 @@ export const SidebarProfile = ({
{/* ── UserIcon 단독 고정 (opacity 전환 없이 항상 동일 위치) ── */}
<button
type="button"
className="absolute bottom-[24px] left-[18px] cursor-pointer border-none bg-transparent p-0"
className="absolute bottom-[24px] left-[16px] cursor-pointer border-none bg-transparent p-0"
onMouseEnter={() => setIsUserIconHovered(true)}
onMouseLeave={() => setIsUserIconHovered(false)}
onClick={(e) => {
Expand Down