[FE/CLI] 파일 관리 인라인 UX 고도화 및 시스템 전반 인터페이스 현대화 #348
Merged
+1,633
−1,017
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
파일 이름 변경 기능을 위해 InlineFileInput에 초기값 전달 기능을 추가하고 레이아웃을 개선함 - initialValue prop 추가 및 value 상태 초기화 로직 반영 - 에러 메시지 노출 시 하단 여백(mb-5) 처리 방식 개선 - 불필요한 마진(my-0.5) 제거
기존 다이얼로그 방식의 이름 변경 인터페이스를 InlineFileInput을 사용하는 인라인 방식으로 개편하여 UX 개선 - RenameDialog 제거 및 isRenaming 상태 기반 InlineFileInput 렌더링 추가 - handleRenameSubmit 구현: 변경사항이 없을 경우 조기 종료 및 이름 변경 로직 통합 - 에러 발생 시 토스트 알림 추가 - 파일 목록 아이템의 너비를 100%로 보장하도록 수정 (w-full 추가)
디자인 시스템의 일관성을 위해 Progress 컴포넌트의 유연성을 확장하고 저장 용량 표시기에 적용함 - Progress: Label, Value, Track, Indicator 하위 컴포넌트 추가 및 커스텀 클래스 지원 - CapacityGauge: 새로운 Progress 컴포넌트를 사용하여 레이아웃 및 시각적 피드백 개선 - UI 패키지 export 정리
파일 중복 처리 경험을 개선하기 위해 다이얼로그 구조와 자동 이름 생성 로직을 전면 개편함 - RadixDialog에서 AlertDialog 시스템으로 마이그레이션 (중요도 강조) - generateAutoName: 스마트한 사본 이름 생성 로직 구현 (예: "file (1).txt", "file (2).txt") - 툴팁을 통해 변경될 사본 이름을 미리 확인할 수 있는 기능 추가 - 덮어쓰기/자동이름변경 콜백 props 추가로 유연성 확보 - 중복된 레거시 파일(DuplicateDialog_new.tsx) 삭제
복잡하게 나뉘어 있던 하위 컴포넌트들을 통합하고 디자인 시스템의 기본 컴포넌트들을 적용하여 유지보수성을 높임 - @codejam/ui의 Dialog, Button, Input, Label 컴포넌트 적용 - 폼 구조 단순화 및 스타일링 개선 (Grid 레이아웃 적용) - 불필요한 내부 함수 및 컴포넌트 선언 제거
별도의 다이얼로그 없이 파일 목록 내에서 생성, 이름 변경, 중복 처리가 가능하도록 인라인 워크플로우를 완성함 - File: 인라인 이름 변경 연동 및 이름 충돌 시 DuplicateDialog 연동 - FileList: 인라인 생성 과정에서의 중복 처리(덮어쓰기/사본생성) 로직 통합 - FileHeaderActions: NewFileDialog 제거 및 인라인 생성 트리거로 전환 - RoomPage: 전역 DuplicateDialog 제거 (개별 위젯 내에서 상황에 맞게 처리) - 덮어쓰기 시 기존 파일 내용 유지 및 사본 생성 시 자동 넘버링 지원
파일 관리 기능이 파일 탭 위젯으로 통합됨에 따라, 헤더 영역의 미사용 버튼 컴포넌트들을 정리함 - FileUploadButton.tsx 삭제 - NewFileButton.tsx 삭제
inaemin
added
FE
inaemin
changed the title
사이드바의 고정 상태를 유지하기 위해 Zustand persist 미들웨어를 적용하고 관련 로직 구현 - isPinned 상태 및 togglePin 액션 추가 - localStorage를 통한 isPinned 상태 유지 (zustand/middleware/persist) - 고정 상태일 때 탭 토글 로직 보완 (고정 시 닫히지 않도록 처리)
사이드바 고정 기능을 시각적으로 제어하기 위한 버튼 컴포넌트와 전용 SVG 아이콘 추가 - PinButton: 고정 상태(isPinned)에 따라 아이콘 및 툴팁 전환 - poly_pin.svg, pin-outline.svg 신규 아이콘 추가
고정 상태(isPinned)에 따라 사이드바 패널의 개폐 로직을 변경하고, 각 탭 헤더에 PinButton을 배치함 - RoomSidebar: isPinned가 true일 때 패널을 항상 열어두도록 로직 수정 - visibleTab 계산 로직 도입: 탭이 닫혀있어도 고정 상태라면 기본적으로 FILES 탭 노출 - FileList, Participants, More, Settings 모든 탭 헤더에 PinButton 통합
사이드바 고정 버튼 등 액션 아이템들이 추가됨에 따라 레이아웃 안정성을 위해 스타일 조정 - 헤더 높이를 h-5에서 h-6으로 변경 - 액션 영역에 flex-center 정렬 적용
inaemin
changed the title
CI 결과 ✅
🎉 모든 검사를 통과했습니다! |
🍯 새로운 잼이 완성됐어요!
|
검색 및 명령 팔레트 기능을 위한 cmdk 기반 Command 컴포넌트 도입 - Command, CommandDialog, CommandInput 등 하위 컴포넌트 구현 - DialogContent에 onInteractOutside, onEscapeKeyDown 핸들러 추가 - 스토리북 예제 추가 및 패키지 의존성(cmdk) 설치
ROOM_JOIN_STATUS.FULL 상태일 때 에러를 던지는 대신 상태를 반환하도록 변경하여 페이지 진입 후 처리가 가능하도록 함
ErrorDialog를 widgets/dialog로 이동하고, 방이 가득 찼을 때의 안내 문구와 버튼 레이블을 더 친절하게 수정함
방 생성 폼의 인원 수 조절 버튼을 길게 누르고 있으면 값이 연속적으로 변화하도록 개선하고, useCallback과 ref를 활용하여 성능 및 로직을 최적화함
기존 다이얼로그 방식 대신 Command 컴포넌트를 사용하여 파일 검색 및 선택 UX를 개선하고 코드를 단순화함
닉네임 입력 다이얼로그를 AlertDialog 시스템으로 전환하고, nicknameSchema를 활용한 실시간 유효성 검사 및 에러 메시지 피드백을 추가함
비밀번호 입력 다이얼로그를 AlertDialog로 전환하고, 비밀번호 보이기/숨기기 토글 기능 및 실시간 유효성 검사 로직을 추가함
파일 목록의 상단 여백을 조정하여 시각적 일관성을 높이고, ShareDialogTrigger의 렌더링 방식을 수정하여 불필요한 DOM 요소를 제거함
inaemin
changed the title
… into refactor/file-management-ux
사용자가 탭에서 직접 코드를 실행하거나 탭을 닫을 수 있도록 직관적인 UI 제공 - 컨텍스트 메뉴(ContextMenu)를 제거하고 인라인 버튼(Play, X)으로 교체 - 실행 가능 파일(isFileExecutable) 여부에 따른 플레이 버튼 노출 제어 - handleExecuteCode: 개별 파일 탭 단위의 코드 실행 로직 구현 - 탭 트리거 내 레이아웃 조정 및 호버/활성 스타일 적용
탭 내부로 코드 실행 기능이 이동함에 따라 헤더의 코드 실행 버튼 임포트 구문을 주석 처리함
inaemin
changed the title
TabsTrigger에서 지원하지 않는 render prop 관련 제약 및 버튼 중첩 문제를 해결하기 위해 span(role=button)으로 교체 - TabsTrigger 내부에서 Button 컴포넌트 사용 시 발생하는 스타일 및 이벤트 간섭 이슈 해결 - span에 role="button" 및 tabIndex를 부여하여 기능적 버튼 역할 수행 - 키보드 접근성을 위한 onKeyDown 핸들러 추가
inaemin
force-pushed
the
refactor/file-management-ux
branch
from
0f73124 to
028fc5c
Compare
프로그래밍 언어별 시각적 구분을 위해 주요 확장자(C, C++, Java, JS, TS, Python) 아이콘 추가
파일 이름에 따라 해당하는 언어 아이콘을 표시하여 가독성 향상 - TabViewer: 탭 제목 옆에 아이콘 추가 및 간격 조정 - File (목록 아이템): 파일명 옆에 아이콘 추가 및 레이아웃 수정 - FileSelectDialog: 검색 결과 목록에 아이콘 추가 - C, CPP, Java, JS, TS, Python 확장자 지원
inaemin
changed the title
사이드바 프로필 카드에서 닉네임을 직접 수정할 수 있도록 유효성 검사 및 소켓 통신 로직을 포함한 커스텀 훅 구현
사이드바 하단 프로필 카드의 레이아웃을 다듬고 닉네임 인라인 수정 기능을 통합함 - ProfileCardContent: useNicknameEdit 적용, 아바타 및 배너 레이아웃 최적화 - SidebarProfile: PopoverTrigger 렌더링 방식 변경 및 호버 애니메이션 추가 - 닉네임 수정 시 실시간 에러 메시지 노출 처리
배너 위를 지나가는 아이콘들의 위치와 가독성을 개선함 - 아이콘 크기 확대(24->28) 및 선 두께(1.5->2) 조정 - 불투명도 조절로 시각적 균형 확보 (white/20 -> white/50) - 각 애니메이션 변동 위치(yOffset) 미세 조정
inaemin
changed the title
헤더의 역할 뱃지와 참가자 목록의 본인 표시 라벨의 레이아웃 및 여백 조정 - RoleBadge: 불필요한 wrapper div 제거 및 padding 조정으로 간결화 - Participant: 'YOU' 라벨 여백 수정 및 leading-0 적용으로 수직 정렬 개선
inaemin
changed the title
브랜드 아이덴티티 강화를 위해 포커스 링 색상을 brand-blue로 변경하고, 로딩/에러 페이지의 다이얼로그 가독성을 개선함 - Input, InputGroup: focus-visible 시 brand-blue 색상 적용 - JoinPage, NotFoundPage: 다크 모드 대응 배경색 및 텍스트 색상 추가
사용자 편의성 향상을 위해 텍스트 입력 후 엔터 키를 눌러 즉시 제출할 수 있도록 개선 - NicknameInputDialog: Enter 키 입력 시 유효성 검사 후 제출 로직 추가 - PasswordInputDialog: Enter 키 입력 시 유효성 검사 후 제출 로직 추가
참가 토큰을 쿠키에 저장하여 세션 유지를 보장하고, 방이 가득 찬 상태를 페이지 내에서 우아하게 처리함 - js-cookie 라이브러리 추가 - JoinPage: URL 파라미터로 받은 토큰을 쿠키(auth_ROOMCODE)에 저장 - RoomPage: FULL 상태일 때 전용 에러 다이얼로그 노출 - API: checkRoomJoinable에서 FULL 상태를 예외 대신 상태값으로 반환
CLI를 통해 방을 생성할 때 서버에서 내려주는 토큰을 파싱하여 세션을 유지하고, 서버 에러 발생 시 상세 메시지를 노출함 - ApiClient: 서버의 Set-Cookie 헤더에서 인증 토큰 추출 로직 추가 - start 커맨드: 커스텀 방 생성 시 JOIN 라우트로 접속하여 토큰 주입 처리 - API 에러 발생 시 JSON 응답의 에러 메시지 우선 노출
inaemin
changed the title
inaemin
changed the title
kindsmell
approved these changes
Feb 6, 2026
Happysttim
approved these changes
Feb 6, 2026
son-hyejun
approved these changes
Feb 6, 2026
lnxhigh
approved these changes
Feb 6, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📋 작업 범위 (Scope)
🔗 관련 이슈 (Related Issue)
🛠️ 작업 내용 (Description)
프로젝트 전반의 사용자 경험을 인라인 편집과 현대적인 인터페이스 가이드에 맞춰 대대적으로 리팩토링하고 고도화했습니다.
1. 에디터 및 파일 관리 UX 혁신
InlineFileInput을 통합했습니다.Play) 및 닫기(X) 버튼을 제공하고, 언어별 SVG 아이콘을 적용하여 가독성을 높였습니다.file (1).txt) 옵션을 제공하는 고도화된DuplicateDialog를 적용했습니다.2. 입장 프로세스 및 세션 관리 개선
js-cookie를 도입하여 입장 토큰을 브라우저 쿠키에 저장, 새로고침 후에도 세션을 유지하도록 개선했습니다.FULL) 등의 상태를 페이지 진입 후 사용자 친화적인 다이얼로그로 안내합니다.3. 다이얼로그 시스템 및 입력 환경 개편
AlertDialog를 적용하고 엔터 키 제출을 지원합니다.cmdk기반의Command검색 UI를 도입하여 빠른 파일 탐색 경험을 제공합니다.zod기반 실시간 검증 및 시각적 피드백을 강화했습니다.4. UI/UX 세부 최적화 및 정책 변경
MIN_PTS: 2)📦 패키지 변경 사항 (Dependencies)
cmdk^1.1.1(검색 및 명령 팔레트용)js-cookie^3.0.5(클라이언트 세션 관리용)✅ 체크리스트 (Self Checklist)