Hyungi Ahn 642685a7c7 feat: 진행 중 탭 카드 형식으로 개편 - 입력 편의성 대폭 향상 ...

🎯 Card-Based Interface for In-Progress Issues:
- 테이블 형태에서 카드 형태로 완전 변경
- 입력하기 편한 사용자 친화적 인터페이스 구현
- 진행 중/완료됨 탭별 다른 레이아웃 적용

📋 Enhanced Card Layout:
- 2컬럼 그리드 레이아웃 (기본정보 vs 편집정보)
- 카드 헤더: No. + 프로젝트명 + 액션 버튼들
- 왼쪽: 읽기전용 정보 (내용, 원인, 업로드사진)
- 오른쪽: 편집가능 정보 (해결방안, 담당부서/담당자, 예상일)

🎨 Visual Improvements:
- 아이콘과 색상으로 필드 구분
- 호버 효과 (카드 상승, 입력 필드 확대)
- 상태 배지 및 진행 상황 표시
- 사진 썸네일 개선 (테두리, 호버 효과)

✏️ Input Field Enhancements:
- 해결방안: 3줄 textarea with placeholder
- 담당부서: 아이콘이 있는 select 드롭다운
- 담당자: placeholder가 있는 text input
- 조치예상일: date picker with 아이콘
- 모든 필드에 focus 효과 적용

🔄 Tab-Specific Rendering:
- 진행 중: 카드 형식 (space-y-4 컨테이너)
- 완료됨: 테이블 형식 (기존 유지)
- displayIssues()에서 currentTab에 따른 조건부 렌더링

🎯 User Experience Focus:
- 입력하기 편한 넓은 필드들
- 시각적으로 구분되는 정보 영역
- 직관적인 아이콘과 라벨링
- 부드러운 애니메이션 효과

🔧 Technical Implementation:
- createInProgressRow(): 카드 HTML 생성
- CSS 애니메이션 및 호버 효과
- 반응형 그리드 레이아웃 (lg:grid-cols-2)
- 아이콘 정렬 및 스타일링

Expected Result:
✅ 진행 중 이슈 입력이 훨씬 편리해짐
✅ 시각적으로 구분되는 정보 영역
✅ 카드별 독립적인 작업 공간 제공
✅ 완료됨은 기존 테이블 형태 유지

2025-10-26 10:11:36 +09:00

63 KiB

Raw Blame History

View Raw