팀워크를 정리하고 이끄는 프론트엔드 개발자입니다.
- 팀이 같은 방향을 보도록 정리하고 이끌어가고자 합니다.
- 좋은 결과는 좋은 협업에서 온다는 신념으로 팀의 에너지를 높입니다.
- 빠른 소통을 통해 팀적으로 불편한 것이 없도록 노력합니다.
개발자가 편해지는 환경을 만들고자합니다.
- 개발 경험을 개선하면 팀의 결과물이 달라진다고 믿습니다. 반복 작업을 자동화하고, 빌드 환경을 최적화하며, 누구나 기여할 수 있는 구조를 만드는 데 집중합니다.
- 문서화, 코드 스타일 가이드, 공통 컴포넌트 시스템 등 작은 불편을 제거해 팀 전체의 생산성을 끌어올립니다. 팀에 storybook 사용 제안 후 설치부터 배포까지 한 경험이 있습니다.
- 개발자가 편해야 더 좋은 서비스가 나옵니다. 그 기반을 만드는 일을 즐기고자 합니다.
Team Project.
망각 방지를 위한 세 번째 도구 빠르게 잊혀지는 시대 속에서, 기억을 오래 남기는 학습 시스템을 만듭니다. 연필과 공책 다음, 당신의 기억을 책임질 도구 — Third Tool
React
TimeTile은 팬의 시선으로 아티스트의 활동을 연대기 형태로 아카이빙하고 각자의 기록을 타일처럼 쌓아가는 타임라인 기반 덕질 아카이빙 서비스입니다.
Next.jsTypeScriptstyled-componentsjotaistorybook
- 카카오, 구글 소셜 로그인과 자체 회원가입/로그인 구현
- 단계별 회원가입(
약관 → 계정 정보 → 프로필 설정) 플로우를 퍼널 구조로 설계
소셜 로그인 여부에 따라 동적 단계 구성 가능 useFunnel커스텀 훅 사용으로 단계 간 자연스러운 이동과 상태 유지- 메인페이지 구현 - 로그인 여부에 따라 다르게 렌더링
- 전체 검색, 데크 검색, 유저 검색, 타임타일 검색, 마이타일 검색 구현
마이타일 검색의 경우 이미지 검색 모드도 제공하여variant상태를 통해
다중 뷰 전환 지원 (타일 리스트 / 이미지 그리드) - 검색 결과 없을 시 안내 메시지 및 추천 검색어 노출로 사용자 친화적 UX 제공
- 아티스트 정보 조회, 팔로우 기능, 연도별 스케줄 조회 구현
- 커스텀 캘린더를 통한 연/월/일 선택 UX 최적화
- 관련 자료 URL 메타 정보 자동 로드 및 미리보기 기능 구현
IntersectionObserver, 캐싱 전략, 모드별 편집/뷰 상태 관리로 데이터 효율화Storybook설치 및 설정,Chromatic배포,Github Actions기반 CI/CD 자동화 구축
2023 홍익대학교 대동제 홈페이지입니다. 총학생회와 협업하여 진행한 프로젝트로, 2023 홍익대학교 대동제와 관련된 모든 정보를 확인할 수 있습니다.
Reactstyled-components
- 페이지 레이아웃, 헤더/푸터, 사이드바, 만든이들/총학생회 페이지 등 전반적인 UI 담당
- 동적 사이드바 및 내비게이션
- 반응형 웹 구현 (모바일, 태블릿, 데스크탑)
- 대동제 기간 동안 실제 배포되어 거의 모든 재학생 및 대동제 방문 외부인들이 사이트를 통해 축제 정보 확인
- 행사 관련 정보, 부스, 공연, 편의시설 등 실시간 안내 제공
취향을 찾다, 마음이 닿다. TIFY 사용자의 취향을 파악해서 상품을 추천해주는 서비스입니다. 친구의 취향에 맞는 상품을 선물할 수 있습니다.
TypeScriptstorybookrecoilstyled-components
- 멀티스텝 온보딩 플로우 구현
(약관 → 이름/아이디 입력 → 생년월일/성별 입력 → 취향 선택 → 프로필 이미지 업로드) - 온보딩 단계가 진행될수록 화면에 순차적으로 누적되는 구조로 설계,
사용자가 이전 단계를 클릭하면 해당 단계로 자연스럽게 복귀할 수 있도록 구현 - 뒤로가기(backHandler) 대응 및 단계별 상태 유지
이전 단계로 이동해도 입력 데이터가 유지되도록 분기 처리 - 검색 기반 추천 취향 노출 기능 - 입력된 키워드로 서버에 요청 후 검색 결과 수신,
결과에서 무작위 4개 선택하여 추천 섹션으로 구성 - 무한스크롤 기반 선물 추천 페이지 구현
커스텀 훅(useInfiniteQueries)으로 스크롤 위치 기반 데이터 자동 로딩 처리 - 태그 기반 필터링 로직 및 초기 카테고리 자동 설정 처리
- UI 세부 처리 강화: 카테고리별 기본 이미지(fallback) 적용, 가격 천 단위 포매팅 등 사용자 친화적 디테일 구현
Storybook을 활용한 컴포넌트 단위 문서화 경험
홍익대학교 멋쟁이사자처럼의 활동 철학과 커리큘럼, 프로젝트 소개, 지원 안내 등의 컨텐츠를 담은 홈페이지입니다. 리크루팅과 관련된 전반적인 내용들 뿐만 아니라, 커뮤니티를 통한 동아리원 간의 소통과 과제 제출 등이 가능합니다.
TypeScriptReactstyled-componentsRecoilReact-Query
- 리크루트용 페이지 구현 - 타임라인, 직군별 카드, FAQ, 팁, 자격요건 등
- 반응형 레이아웃 구현 (모바일, 태블릿, 데스크탑)
styled-components를 활용한 세밀한 스타일링 및 코드 재사용성 확보framer-motion을 사용한 컴포넌트 애니메이션 적용으로 시각적 몰입감 제공- 마이페이지 구현
- 프로필 이미지 업로드 기능 구현 - S3 presigned URL 업로드
- 배포 후 동아리 다음 기수 모집에 실제로 활용하였으며, 모집 이후에는 동아리원들이 가입하여 해당 웹사이트를 통해 커뮤니티 활동과 과제 제출 등을 진행함
