- 전체 개발 기간 : 2025-01-20 ~ 2025-02-19
- UI 구현 : 2025-01-20 ~ 2025-02-05
- 기능 구현 : 2025-02-05 ~ 2025-02-07
- QA 및 테스트 : 2025-02-07 ~ 2025-02-19
- GitHub Issues와 Jira를 사용하여 진행 상황을 공유했습니다.
- 데일리스크럼을 통해 작업 순서와 방향성, 컴포넌트 관리, 프로젝트에 대한 고민을 나누었습니다.
- Discord를 통해 Github PR 코드리뷰 및 승인 요청과 머지 완료 여부를 공유했습니다.
- Node.js 버전: v20.12.0
- 사용된 패키지 매니저: npm
프로젝트 실행을 위해 다음 환경 변수를 설정해야 합니다:
.env파일을 프로젝트 루트 디렉토리에 생성하고 아래와 같이 설정합니다:
MODE=development
PORT=3000
REACT_APP_BASE_URL=https://tikitaka.kr- 버전 및 이슈관리 : Jira, Github Issues
- 협업 툴 : Discord, Notion, Jira
- 서비스 배포 환경 :
https://www.tikitaka.kr - 디자인 : Figma
- 코드 컨벤션
- 기술 선정 배경
- 담당자 티켓 대시보드 : 담당자는 티켓을 상태별, 담당자별, 카테고리별, 유형별로 대시보드에서 조회 가능
- 담당자 티켓 관리 : 담당자는 본인 티켓을 관리 가능
- 담당자 통계 관리 : 담당자는 일별 / 월별로 티켓 통계 조회 가능
- 사용자 티켓 대시보드 : 사용자는 본인이 생성한 티켓을 상태별, 담당자별, 카테고리별, 유형별로 대시보드에서 조회 가능
- 티켓 생성 : 사용자는 본인이 작성한 템플릿을 불러와 티켓을 생성 가능
- 관리자 계정 관리 : 관리자는 계정 등록 신청을 승인/거절 가능하고 등록된 유저 목록 조회 가능
- 관리자 카테고리 관리 : 관리자는 카테고리를 생성/수정/삭제 가능하고 카테고리별 요청 양식을 생성/수정/삭제 가능
- 관리자 문의/요청 관리 : 관리자는 사용자들의 문의 및 요청 사항에 답변을 등록하고 관리 가능
| Backend / PM | Backend / PL | Backend / Infrastructure | Backend | Backend |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| @Hojun-IM | @DaveLee-b | @HaejunJang | @upsc208 | @Kangai1 |
| 임호준 (PM) | 이동석 (PL) | 장해준 (인프라) | 김기훈 | 강민재 |
| Frontend / PL | Frontend / 디자인 | Frontend |
|---|---|---|
 |
 |
 |
| @lamiiiii | @yeonilil | @NAKDO |
| 김규리 (PL) | 곽서연 (디자인) | 김낙도 |
-
사이드바 및 탑바 UI 구현
- 고정형 Sidebar: 메뉴 호버 시 토글 효과 제공, 현재 위치 표시
- 사용자 정보 표시(UserBox): 로그인한 사용자의 프로필 정보(아이디, 이메일, 프로필 변경 등) 표시
- 탑바: 로그인한 사용자의 역할 표시, 프로필 및 비밀번호 변경, 로그아웃 메뉴 추가
-
초기 페이지(로그인 & 계정 등록) 및 인증 시스템
- 로그인, 회원가입 페이지 구현 (
react-hook-form+yup검증 적용) - JWT 기반 인증 시스템 구축 (
access token+refresh token방식) - 로그아웃 기능 포함,
access token만료 시 자동 로그아웃 처리 - Axios 인터셉터(Intercept) 활용, 토큰 자동 갱신 및 요청 처리
- 로그인, 회원가입 페이지 구현 (
-
티켓 생성 페이지 & 티켓 수정 페이지:
- 마크다운 뷰어 커스텀 및 폼 입력 기능 구현
- 첨부 파일 업로드 및 미리보기 제공
- 티켓 수정 페이지: 기존 데이터를 불러와 수정 가능하도록 구현
- DOMPurify 적용
-
티켓 템플릿 관리:
- 생성/수정/삭제/조회 기능 개발
- Split View UI 적용, 템플릿을 보면서 생성 가능하도록 구현
- 커스텀 Split 기능 추가, 유동적인 사이즈 조절 가능
- Optimistic UI 적용, 템플릿 변경 시 빠른 사용자 경험 제공
-
인증 및 인가 관리:
- JWT 기반 인증 시스템 구축 (
access token+refresh token방식) - Axios 인터셉터(Interceptor) 적용, 토큰 자동 갱신 및 요청 처리
access token은 HTTP 요청 헤더에 자동으로 추가- Refresh token을 쿠키로 확인하여, 만료된
access token을 갱신 refresh token만료 시, 자동으로 재로그인 처리
- 로그인 시 비밀번호 변경 필요 여부 확인, 필요시 비밀번호 변경 페이지로 리디렉션
- Auth Guard 적용:
- 역할 기반 접근 제어: 각 역할에 맞지 않는 페이지는 접근 불가
- 로그인 관리: 로그인하지 않은 유저는 접근 불가, 이미 로그인한 유저는 로그인 페이지 접근 시 기존 페이지로 리디렉션
- JWT 기반 인증 시스템 구축 (
-
기본 개발 환경 구성:
- TailwindCSS 세팅, ESLint & Prettier 설정을 통한 코드 스타일 표준화
- 초기 개발 환경 세팅 및 전체 라우팅 시스템 담당
-
DOMPurify 적용:
- XSS 방지 기능 모든 폼에 적용
-
UI/UX 디자인 시스템 구축:
- Figma를 활용한 디자인 시스템 설계
-
사용자 티켓 대시보드:
- 목록에서 다중 선택 및 일괄 작업 가능하도록 구현
-
사용자 티켓 상세 조회 페이지
- 서버 상태 동기화 (
useMutation,invalidateQueries) 적용 - 담당자 상태 및 설정 변경을 실시간으로 반영
- 서버 상태 동기화 (
-
담당자 통계 관리 페이지
- Chart.js 기반 대시보드 구현, 주요 지표 시각화
- React Suspense 적용, 로딩 UX 최적화
-
담당자 티켓 목록 페이지:
- 담당자가 편리하게 작업할 수 있도록 목록에서 상태 변경 기능 추가
- 담당자별, 상태별 필터링 및 정렬 기능 구현
-
관리자 페이지 개발:
- 계정 관리: 계정 생성, 수정, 삭제 기능 구현
- 카테고리 관리: 카테고리 CRUD 기능 개발
-
API 통신
axios활용하여 공통 API 호출 모듈 제작
-
상태 관리
zustand를 활용한 전역 상태 관리, 불필요한 리렌더링 최소화React Query(useMutation,invalidateQueries) 활용하여 실시간 데이터 동기화- Optimistic UI 적용, API 응답을 기다리지 않고 즉시 UI 업데이트
-
보안 및 성능 최적화
- XSS 방지:
DOMPurify를 활용하여 입력 필드 및 마크다운 렌더링 보호 - Lazy Loading & Code Splitting 적용, 페이지별 성능 최적화
- XSS 방지:
- Lazy Loading: 페이지 컴포넌트를 초기 번들에 포함하지 않고, 사용자가 해당 페이지를 방문할 때만 로드하여 초기 로딩 시간을 최적화.
- Suspense와 Fallback 컴포넌트 사용: 컴포넌트가 로드될 때까지 기다리고 로딩 상태를 처리. 이로 인해 사용자가 페이지를 로드할 때 깜빡임이나 빈 화면을 경험하지 않도록 개선.
- 메타 제목(title) 및 설명(description) 최적화: 페이지의 주제와 내용을 정확히 설정하여 검색엔진 크롤러가 더 잘 인식하도록 개선. 이는 검색 결과에서 페이지 노출도를 높이고 클릭률(CTR)을 증가시킵니다.