프로젝트 소개
- 지역기업과 지역 대학생을 연결하는 인턴십 플랫폼
- Frontend 2명, Backend 2명 총 4명
- 소셜벤처 기업 인증
링크
기여한 부분
1. 공통 기능 개발
- 다단계 프로세스를 위한
useFunnel 커스텀 훅 구현
- AS-IS:
- 기존 아이디/비밀번호 찾기 페이지는 중첩 라우팅을 통해 단계별 상태를 관리했으나, 단계가 깊어질수록 라우트와 페이지 관리의 복잡성이 증가했음.
- SEO가 필요하지 않으며 URL을 통한 접근이 불필요하여 개별 라우트로 관리할 필요가 없었음.
- Challenge:
useFunnel 훅을 활용하여 각 단계를 하나의 state(step)로 관리하고, setStep을 통해 상태를 변경하도록 설계.Funnel 컴포넌트는 name과 현재 단계(step)가 일치하는지를 판단하여 해당 Step만 렌더링하도록 구현하여 불필요한 UI 렌더링을 방지.Step 컴포넌트를 활용하여 다단계 폼을 컴포넌트 기반으로 선언적 관리 가능하도록 구조화.
- TO-BE:
- 브라우저 히스토리를 남기지 않으면서도, SEO가 필요 없는 페이지의 특성에 맞춘 다단계 폼 구조를 도입하여 관리가 용이해짐.
- 중첩 라우팅 없이도 다단계 프로세스를 처리할 수 있어 라우트 및 페이지 관리의 복잡성을 줄이고 유지보수성을 향상.
- 학생·사업주별
Navigator 컴포넌트 구현
- AS-IS: 학생과 사업주 모두 동일한 네비게이션 구조를 사용하여, 사용자의 인증 상태 및 역할에 따라 동적으로 메뉴가 렌더링될 필요가 있었음.
- Challenge:
- 로컬스토리지의
account-type 값을 참조하여, 사용자가 학생(AccountType.STUDENT)인지, 사업주(AccountType.ENTERPRISE)인지 판별하고, 그에 맞는 네비게이션 항목을 필터링하여 렌더링.
- 현재 경로가 네비게이션의
path 목록과 일치하는지 정규표현식을 통해 검증하고 네비게이션이 활성화(active)될 수 있도록 처리.
- TO-BE:
- 사용자의 인증 상태 및 역할을 기반으로 네비게이션을 유연하게 렌더링할 수 있도록 구조 개선.
- 비즈니스 로직과 네비게이션 UI를 분리하여 코드의 가독성과 유지보수성을 향상.
2. 학생 사용자 기능 개발
- iOS 환경에서 지도 서비스 로드 문제 해결 및
Map 컴포넌트 추상화
- AS-IS:
Capacitor로 앱 패키징 후 iOS 환경에서 공고 상세 정보 페이지의 카카오 맵 로드 실패 발생.- 카카오 맵은
Capacitor의 기본 프로토콜(capacitor://)을 지원하지 않아 App Transport Security(ATS) 문제 발생.
iosScheme 설정을 http 또는 https로 변경하려 했으나, iOS 운영체제에서 이를 차단하여 적용 불가.
- Challenge:
- 웹 및 안드로이드에서는 카카오 맵을 유지하고, iOS에서는 네이버 맵을 적용하는 대안 추진.
- iOS와 안드로이드/웹 환경에서 각각 다른 지도 서비스를 사용하더라도 일관된 API와 인터페이스를 유지할 수 있도록
Map 컴포넌트 추상화.
- TO-BE: iOS 환경에서는 네이버 맵을**,** 웹 및 안드로이드에서는 카카오 맵을 유지하는 방식으로 OS별 최적화된 지도 서비스를 제공할 수 있게 됨.
- 개인 맞춤 인턴 및 대외활동 공고 추천 기능 구현
- 채용공고 및 대외활동 공고 검색 기능 구현
- 일반 검색 기능: 사용자가 입력한 키워드를 기반으로 채용 및 대외활동 공고를 구분하여 추천.
- 상세 검색 기능
- 채용공고: 지역, 직군/직무, 경력, 성별, 연령, 근무기간, 근무요일, 근무형태 등 사용자가 작성한 폼을 기반으로 필터링하여 관련 채용공고를 추천.
- 대외활동: 공고 유형(공모전, 교육/강연 등)에 따라 동적으로 폼을 렌더링하고, 사용자가 설정한 조건을 기반으로 맞춤 대외활동 공고를 추천.
3. 사업주 사용자 기능 개발
- 채용공고 및 대외활동 등록 기능 개발
- RHF 및
zod를 활용한 유효성 검사 적용.
- 약 17개 입력 필드에 대해
controlled 및 uncontrolled input 방식을 적용하여 폼 구성.
- 근무지 주소 입력 시 Daum 주소 API를 활용하여 자동완성 기능 제공.
- 공고 수정 및 삭제 기능 구현
- 지원자 관리 기능: 등록된 공고에 지원한 지원자의 정보를 확인하고, 심사할 수 있도록 기능 구현.
- 맞춤 인재 및 인재 찾기 기능: 사업주가 적합한 인재를 스크랩하고, 스크랩한 지원자의 이력서를 확인할 수 있도록 기능 제공.
4. Capcitor를 활용한 크로스플랫폼 앱 패키징
AOS, IOS 각 플랫폼에 필요로하는 기능과 빌드 환경을 분리하여 개발 환경을 구성.