<aside> 💬
사용자의 수면 패턴을 분석하여 맞춤형 수면 개선 솔루션을 제공하며 인지능력 테스트, 수면 기록, 실시간 데이터 시각화 기능을 통해 사용자가 자신의 수면 상태를 정확히 이해할 수 있도록 돕는 정보 공유 애플리케이션.
</aside>
✷ 문제 SRT, Symbol, Pattern 테스트를 각각 진행했지만, 백엔드는 공통된 sessionId가 있어야 CognitiveTestResult가 생성됨
✷ 해결 테스트 시작 시 /session/start/ API를 호출하여 sessionId를 생성하고, 이후 모든 테스트에서 해당 sessionId를 공유하도록 구조 통일
✷ 결과 모든 결과가 올바르게 연결되어 저장되었고, /result/ API에서 통합 전송이 가능해짐
✷ 문제 기록 조회 페이지에서 프론트에서 요구하는 데이터 구조(날짜별 점수, 수면 시간 등)에 비해 백엔드 응답 값이 부족하거나 형식이 상이하여 UI가 깨지는 문제가 발생
✷ 해결 화면에서 필요한 데이터 구조와 포맷을 명확히 정리하여 백엔드 팀과 공유하고, 협의 후 응답 포맷 수정 요청
→ 수정 전까지는 **프론트에서 응답값을 가공하여 예외 처리**하도록 코드 구조 변경
✷ 결과 프론트에서의 렌더링 오류 없이 정상적으로 UI가 표시되었고, 백엔드와의 구조 조율을 통해 팀 간 협업 능력도 향상됨
✷ 단순 반응 시간(SRT), 기호 매칭, 시각 패턴 기억 테스트 등 다양한 인지 테스트 UI 및 진행 로직 구현
✷ 라운드/시간 제한, 클릭 유효성, 정답 판별 등
게임 진행 흐름을 상태 기반으로 설계
✷ 반응 속도 및 정확도 기반 종합 점수 산출 로직 직접 구현 (ex. 평균 속도 보정, 가중치 계산 등)
[ 시연 GIF ]
✷ /users/mypage/records/list/, /detail/ API를 통해 사용자의 일/주/월별 기록을 조회하고, 상세 데이터 페이지 구현
✷ TanStack Query를 활용해 기간 필터링에 따른 데이터 캐싱 및 로딩 상태 분리 처리
✷ 기록 내역 시각화 및 요약 정보 구성 (ex. 수면 시간, 테스트 점수 등)
✷ 사용자 경험을 고려한 시각적 피드백 요소로 앱의 첫 인상을 개선
✷ Animated.Value와 Animated.timing을 활용하여 로고 이미지가 서서히 드러나는 애니메이션 효과 구현
✷ useRef로 애니메이션 값을 제어하고, useEffect로 컴포넌트 마운트 시 자연스럽게 동작하도록 설정
✷ position: absolute와
overflow: hidden 을 이용해
마스크 레이어를 통해 로고가 천천히
나타나는 구조 설계
✷ FOCUZ iOS 앱을 팀과 함께 앱스토어에 성공적으로 출시
✷ React Native 기반으로 수면 기록, 인지 테스트, 시각화 기능 등 주요 서비스 구현 참여
✷ 앱 출시 일정과 팀 인력 제약으로 안드로이드 버전은 진행하지 않고, iOS 중심으로 완성
✷ 출시까지 UI/UX 설계, 로딩 애니메이션, API 통신 등 핵심 기능 구현 및 안정화 담당
✷ 앱 출시 경험을 통해 모바일 앱 개발, 팀 협업, 배포 과정 전반을 경험하며 실무 역량 강화
