남현준

아비쥬 온라인 예약 서비스

피부과 온라인 예약 서비스 - 본인인증 로그인 · 마이페이지 담당

• SMS 본인인증 로그인 플로우 전담 개발
• [상황]
• 로그인·예약 두 화면에 동일한 본인인증이 필요 → 별도 구현 시 중복 코드가 늘고, 서버 상태와 연동된 인증 흐름이 화면마다 달라질 가능성 존재
• [수행]
• 검증·API 로직은 하나로 유지하고, UI 차이만 prop으로 분기, 부가 영역은 children으로 주입
• Zod 스키마로 재사용성을 확보하고, superRefine으로 에러 노출 우선순위를 제어
• 인증 판단이 전역 토큰·로컬 상태로 분산돼 로그아웃 후 화면이 안 바뀌던 문제를, accessToken 기준 리마운트로 해결
• [결과]
• 본인인증 폼을 예약 페이지에 직접 적용하며 담당 동료의 개발 시간 단축
• 검증 규칙 변경 시 스키마 한 곳만 수정, 조건이 겹쳐도 에러를 하나씩만 노출해 사용자가 순차적으로 수정하도록 안내
• 로그아웃 후 인증 상태와 화면이 어긋나던 문제 해소, 로컬 상태 개별 추적 없이 일괄 초기화로 재발 방지
• 액세스 토큰 자동 재발급 구조 설계
• [상황]
• 액세스 토큰 만료 시 화면 곳곳의 요청이 동시에 401을 반환해 재발급 API가 중복 호출되고, 일부 요청의 재발급 실패가 로그아웃으로 이어져 사용 중이던 흐름이 끊길 수 있는 구조
• [수행]
• Axios 응답 인터셉터에서 401 감지 시 HttpOnly 쿠키의 refreshToken으로 재발급 후 원 요청을 자동 재시도
• 갱신 중 발생한 401은 대기열에 보관한 뒤, 재발급 완료 후 신규 토큰으로 일괄 재시도
• 전역 캐시 대신 사용자 종속 쿼리만 선별 제거해 잔여 refetch로 인한 401 연쇄를 차단하고 로그아웃 처리
• [결과]
• 동시다발적 401 발생 시에도 refresh API 호출 1회로 수렴, 불필요한 인증 서버 부하 제거
• 토큰 만료로 인한 작업 중단·강제 로그아웃 없이 세션 유지
• 로그아웃 시 잔여 쿼리의 401 연쇄 재요청 차단, 불필요한 네트워크 호출 제거

아비쥬 차트 프로그램 (EMR)

피부과 전자차트 프로그램 - 접수 현황 보드 · 코드 관리 담당

• 접수 현황 보드 신규 개발
• 예약·접수·상담·준비·시술·퇴원 6단계 컬럼형 보드와 사이드바(날짜 선택, 근무자 현황, 공지) 신규 개발
• [상황]
• 여러 직원이 동시에 동일 환자의 접수 상태를 변경할 때, 먼저 처리된 상태와 다른 요청이 뒤늦게 반영되며 충돌이 발생하는 문제 확인
• [수행]
• 백엔드에 충돌 상황을 구분할 수 있는 응답 추가를 요청해 협의하고, 해당 에러 코드로 원인을 구분해 분기 처리
• 충돌 시 안내 메시지를 노출하고, 관련 데이터 캐시를 무효화해 최신 상태로 재조회
• [결과]
• 환자 접수 정보를 여러 직원이 동시에 다루는 의료 현장 특성상, 접수 정보가 어긋나면 실제 진료 흐름에 혼선을 줄 수 있는 문제를 배포 전에 선제적으로 차단
• 고객 검색 기능 공통화 및 중복 제거
• [상황]
• 예약 등록, 컴플레인 상담, 멤버십 양도, 고객 등록, 현장 접수 등 화면마다 고객 검색 UI가 각각 따로 구현되어 있어, 화면이 늘어날수록 중복 코드와 유지보수 부담이 증가
• [수행]
• 검색·결과·고객 선택 UI는 하나의 공통 컴포넌트로 통합하고, 화면별 선택 이후 동작과 검증 조건은 props로 분리
• 기존 화면별로 따로 구현돼 있던 검색 팝업을 공통 컴포넌트로 교체
• [결과]
• 6개 이상 화면에서 동일 컴포넌트를 재사용하게 되면서 중복 코드 300줄 이상 제거
• 검색 로직 수정 범위를 단일 컴포넌트로 축소해 6개 이상 화면의 유지보수 일관성 확보
• 신규 화면에서도 검색 로직을 재구현하지 않고 기존 컴포넌트를 재사용할 수 있는 구조 확보

피키토키(Picki Talki)

소원해진 관계를 다시 연결하고 추억을 쌓는 관계 회복 서비스 (디자이너 2 · BE 2 · FE 2)

• NextAuth 토큰 갱신 로직 개선하여 끊김 없는 사용자 경험 제공블로그 포스팅↗
• 카카오 소셜 로그인을 구현하며, 서버 사이드에서 사용자 인증과 채널 정보를 검증해 상황에 따라 리다이렉트 처리
• 사용자가 아무 액션 없이 머무는 동안 토큰 만료 시점에도 jwt 콜백이 실행되지 않아 만료된 세션이 유지되는 이슈 -> 주기적으로 만료를 체크하여 useSession 훅의 update를 호출함으로써 jwt 콜백을 실행하고 세션을 갱신하며 해결
• 퍼널(Funnel) 패턴을 활용한 회원가입 과정 플로우 구축블로그 포스팅↗
• 코드 흐름 파악과 전역 상태 관리의 어려움을 개선하고자 퍼널(Funnel) 패턴을 도입
• 퍼널(Funnel) 패턴을 적용하여 회원 등록 과정(닉네임 설정, 채널 생성, 초대 코드 입력)을 단계별 진행 가능하도록 설계
• react-hook-form과 zodResolver를 도입하여 각 퍼널의 유효성 검증을 상위 컴포넌트에서 통합적으로 관리하도록 개선함.

WDYTA (이거어때)

음악, 식당, 영화, 전자기기 등 다양한 분야의 상품을 리뷰하는 플랫폼 (FE 5)

• 아이콘, 이미지, 상품 카드 UI를 모듈화하여 팀 개발 생산성 향상블로그 포스팅↗
• 프로젝트 내 아이콘과 이미지 리소스가 많아지면서, 이를 개별적으로 불러오고 관리하는 방식이 비효율적이라 판단
• TypeScript + SVGR 도입하여 아이콘·이미지 컴포넌트화, props 기반 타입 안전성 확보
• TSDoc과 PR로 스타일 가이드를 문서화해 팀 내 사용 기준 공유
• 이미지 최적화를 통해 이미지 로딩 시간 1.8s -> 1.1s까지 단축 (약 38% 성능 개선)블로그 포스팅↗
• 프로필 이미지 변경 시 용량이 클수록 로딩 지연이 두드러지는 문제 발생
• fill 사용 시 sizes 기본값 100vw로 인해 실제 표시 크기와 무관하게 뷰포트 너비 기준 이미지를 요청한 것이 원인
• sizes에 요소별 실제 렌더링 크기를 지정하고 next.config의 imageSizes·deviceSizes를 정리

IT 연합 동아리 'DND'

디자이너, 백엔드, 프론트엔드 개발자와 함께 기획 단계부터 협업하며 하나의 팀 프로젝트를 진행했습니다.

왓에버 멘토링

JavaScript로 Virtual DOM을 구현하며 JSX의 트랜스파일 과정을 이해하고, 동작 원리를 학습했습니다.

코드잇 스프린트 프론트엔드 엔지니어 부트캠프 수료

GitHub를 통한 협업과 코드 리뷰 과정을 통해 협업 능력을 키웠으며, 프로젝트 배포까지 완료했습니다.

팀 프로젝트에서 Next.js를 활용해 SSR 적용해보며, CSR 차이를 경험하고 이해했습니다.

충남대학교 정보통계학과

R 프로그래밍을 활용한 데이터 분석 및 다양한 분석 기법에 대해 학습했습니다.