[DEPOLY] v1.2.0: 파일 UX 고도화, CLI 세션 연동 및 Command 팔레트 도입 #349
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 삭제
사이드바의 고정 상태를 유지하기 위해 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 정렬 적용
검색 및 명령 팔레트 기능을 위한 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 요소를 제거함
인라인 편집 및 사이드바 통합으로 더 이상 사용하지 않는 다이얼로그들을 제거하고 백업을 위해 deprecated 폴더로 이동함
… into refactor/file-management-ux
사용자가 탭에서 직접 코드를 실행하거나 탭을 닫을 수 있도록 직관적인 UI 제공 - 컨텍스트 메뉴(ContextMenu)를 제거하고 인라인 버튼(Play, X)으로 교체 - 실행 가능 파일(isFileExecutable) 여부에 따른 플레이 버튼 노출 제어 - handleExecuteCode: 개별 파일 탭 단위의 코드 실행 로직 구현 - 탭 트리거 내 레이아웃 조정 및 호버/활성 스타일 적용
탭 내부로 코드 실행 기능이 이동함에 따라 헤더의 코드 실행 버튼 임포트 구문을 주석 처리함
TabsTrigger에서 지원하지 않는 render prop 관련 제약 및 버튼 중첩 문제를 해결하기 위해 span(role=button)으로 교체 - TabsTrigger 내부에서 Button 컴포넌트 사용 시 발생하는 스타일 및 이벤트 간섭 이슈 해결 - span에 role="button" 및 tabIndex를 부여하여 기능적 버튼 역할 수행 - 키보드 접근성을 위한 onKeyDown 핸들러 추가
프로그래밍 언어별 시각적 구분을 위해 주요 확장자(C, C++, Java, JS, TS, Python) 아이콘 추가
파일 이름에 따라 해당하는 언어 아이콘을 표시하여 가독성 향상 - TabViewer: 탭 제목 옆에 아이콘 추가 및 간격 조정 - File (목록 아이템): 파일명 옆에 아이콘 추가 및 레이아웃 수정 - FileSelectDialog: 검색 결과 목록에 아이콘 추가 - C, CPP, Java, JS, TS, Python 확장자 지원
사이드바 프로필 카드에서 닉네임을 직접 수정할 수 있도록 유효성 검사 및 소켓 통신 로직을 포함한 커스텀 훅 구현
사이드바 하단 프로필 카드의 레이아웃을 다듬고 닉네임 인라인 수정 기능을 통합함 - ProfileCardContent: useNicknameEdit 적용, 아바타 및 배너 레이아웃 최적화 - SidebarProfile: PopoverTrigger 렌더링 방식 변경 및 호버 애니메이션 추가 - 닉네임 수정 시 실시간 에러 메시지 노출 처리
배너 위를 지나가는 아이콘들의 위치와 가독성을 개선함 - 아이콘 크기 확대(24->28) 및 선 두께(1.5->2) 조정 - 불투명도 조절로 시각적 균형 확보 (white/20 -> white/50) - 각 애니메이션 변동 위치(yOffset) 미세 조정
헤더의 역할 뱃지와 참가자 목록의 본인 표시 라벨의 레이아웃 및 여백 조정 - RoleBadge: 불필요한 wrapper div 제거 및 padding 조정으로 간결화 - Participant: 'YOU' 라벨 여백 수정 및 leading-0 적용으로 수직 정렬 개선
브랜드 아이덴티티 강화를 위해 포커스 링 색상을 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 응답의 에러 메시지 우선 노출
[FE/CLI] 파일 관리 인라인 UX 고도화 및 시스템 전반 인터페이스 현대화
npm 배포 패키지 이름과 일치하도록 문서 업데이트 - @codejam/cli → codejam-cli로 변경 - 설치 명령어 3곳 수정
패키지 문서 및 버전 업데이트 - CONTRIBUTING.md 패키지 이름 수정 (@codejam/cli → codejam-cli) - package.json 버전 업데이트 (1.0.0 → 1.0.1)
@codejam/common을 번들에 포함하여 npm 배포 시 의존성 문제 해결 - @codejam/common을 devDependencies로 이동 - tsup.config.ts 추가하여 noExternal 설정 - 빌드 시 @codejam/common을 번들에 포함 - 버전 1.0.1 → 1.0.2
CLI 의존성 변경 반영
update 명령어에서 사용하는 패키지명을 codejam-cli로 수정 - common/config.ts: CLI_PACKAGE_NAME 수정 - 버전 1.0.2 → 1.0.3
getCurrentVersion이 항상 1.0.0을 반환하는 문제 수정 - package.json을 JSON import로 직접 불러오도록 변경 - 파일 시스템 읽기 대신 번들링된 버전 사용 - 버전 1.0.3 → 1.0.4
CLI로 커스텀 방을 생성할 때 사용자가 참가자 대신 호스트로 인증되도록 수정 - CLI가 Set-Cookie 헤더에서 추출한 토큰을 브라우저 URL에 포함 - JoinPage가 URL의 토큰을 쿠키에 저장하여 호스트 권한 유지 - ApiClient의 토큰 추출 로직 정리 (디버그 로그 제거)
한글 입력 시 Enter 키가 두 번 입력되는 문제 수정 - NicknameInputDialog: isComposing 체크 추가 - PasswordInputDialog: isComposing 체크 추가 - IME 조합 완료 Enter와 실제 Enter 키 입력 구분
EXECUTE_CODE 이벤트에서 PermissionGuard 제거
inaemin
changed the title
inaemin
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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)
✨ New Features & UX Improvements
cmdk기반의 명령 팔레트를 도입하여 키보드 중심의 파일 검색 및 선택 경험을 제공합니다.♻️ Refactoring
AlertDialog기반으로 중요도 높은 다이얼로그를 개편하고 디자인 시스템을 일관되게 적용했습니다.InputGroup,Progress,Empty컴포넌트 등을 도입하여 코드 재사용성을 높였습니다.FULL상태 처리 및 쿠키 기반 토큰 저장 로직을 개선했습니다.🐛 Bug Fixes
tsup), 버전 체크 로직, 패키지명(codejam-cli) 수정을 통해 npm 배포 문제를 해결했습니다.EXECUTE_CODE이벤트에서 불필요한PermissionGuard를 제거했습니다.📦 패키지 변경 사항 (Dependencies)
cmdk: 커맨드 팔레트 구현js-cookie: 클라이언트 쿠키 관리zustand/middleware/persist: 상태 영구 저장@codejam/cli: 패키지명 변경 및 의존성 조정✅ 체크리스트 (Self Checklist)