직팅

회원가입은 약관 동의 → 아이디/비밀번호 → 닉네임 → 본인인증까지 4단계로 구성됩니다. 한 화면에 모든 입력을 몰아넣는 대신, useFunnel 커스텀 훅을 만들어 단계별 퍼널 UI를 구현했습니다. 이전/다음 단계 이동이 자연스럽고, 각 단계에서 입력한 데이터가 유실되지 않도록 상위 컴포넌트에서 상태를 관리합니다.

react-hook-form과 자체 validation 함수를 조합해 아이디, 비밀번호, 닉네임, 전화번호 등의 입력값을 서버 요청 전에 검증합니다. 잘못된 입력은 서버에 요청을 보내지 않아 불필요한 서버 부담을 줄였습니다.

추천된 팀에 호감을 보내고, 받은 호감을 수락하거나 거절할 수 있습니다.

프로필 이미지를 리사이징하고 WebP로 변환해 용량을 최대 60% 감소시켰습니다. 또한 이미지에 고정 비율을 설정해 LightHouse CLS 수치를 0.037에서 0으로 개선했습니다.

사진 슬라이드에서 과도한 스크롤 이벤트 발생을 debounce로 제어하고, 컴포넌트 언마운트 시 이벤트 리스너를 제거해 메모리 누수를 방지했습니다.

Stomp.js와 WebSocket을 활용해 다대다 실시간 채팅을 구현했습니다. useStompClient 커스텀 훅으로 subscribe/publish 로직을 분리하고, 컴포넌트 언마운트 시 WebSocket 연결을 해제해 리소스 누수를 방지했습니다.

Axios Interceptor로 JWT Access Token 자동 갱신(Silent Refresh)을 구현했습니다. Access Token 만료 시 Refresh Token으로 자동 재발급하고, Refresh Token까지 만료되면 로그아웃 처리합니다. 사용자는 토큰 만료를 인식하지 못한 채 끊김 없이 서비스를 이용할 수 있습니다.

직장인 전용 서비스인 만큼, 회사 이메일 인증 단계를 거칩니다. 이메일 입력 후 인증번호 입력란을 화면 최상단에 배치해 추가 스크롤 없이 바로 입력할 수 있도록 설계했습니다.

프로필 수정, 닉네임 변경, 비밀번호 변경 등 개인정보 관리 기능을 제공합니다.

Slack Bot을 제작해 코드 리뷰 요청부터 리뷰 완료까지의 시간을 10분 이내로 단축했습니다. 4L 회고(Liked, Learned, Lacked, Longed for)를 통해 팀의 장점을 극대화하고 부족한 점을 보완했습니다. Jira 시간 추적 기능을 활용해 예상 작업시간과 실제 작업시간의 차이를 지속적으로 줄여나갔습니다.