Kareer

한국에서 커리어를 시작/전환하는 외국인 유학생을 위한 커리어·비자 가이드
Korea + Career = Kareer, 나만의 커리어 여정을 정리하다

ㄴ 전공/언어/비자 상태 기반으로 지원 가능한 직무,비자 옵션을 자동 제시
ㄴ 개인 맞춤 타임라인과 To-Do로 준비 단계를 한눈에 정리

👨🏻‍💻 팀원 소개

👑 장정훈	이훈진	김윤지	손하은
@jeonghoon11	@huniversal	@yooncandooit	@sonnnnhe

🛠 기술 스택

Kareer 팀 기술 스택 선정과정 바로가기

역할	종류	선정 이유
UI Library		컴포넌트 기반 개발로 유지보수성과 재사용성을 높이기 위해 선정
Programming Language		코드 안정성과 생산성을 동시에 확보하기 위해 사용
Build Tool		빠른 번들링과 HMR로 개발 속도를 높이기 위해 사용
Styling		Zero-runtime과 타입 안전 스타일링으로 일관성을 확보하기 위함
Data Fetching		캐싱/동기화와 경량 HTTP 클라이언트로 안정적인 데이터 흐름을 위해 선정
Error Tracking		운영 환경 에러를 빠르게 탐지하고 원인을 추적하기 위해 도입
Build System		모노레포에서 캐싱/병렬 빌드로 생산성을 높이기 위해 사용
Package Manager		워크스페이스 의존성 관리와 설치 속도를 개선하기 위해 사용
Version Control		협업과 코드 리뷰 흐름을 표준화하기 위해 사용
Git Hook		커밋 전 자동 검증으로 품질 기준을 지키기 위해 도입
Deployment		해외 사용자 대응을 위해 글로벌 엣지 서버 기반 전송이 가능한 플랫폼을 선택
Formatting		코드 스타일과 품질 기준을 일관되게 유지하기 위해 사용

📁 아키텍처 구조

본 프로젝트는 FSD 아키텍처를 기반으로 구성되어 있습니다. FSD는 확장 가능하고 유지보수가 용이한 프론트엔드 아키텍처 패턴으로, 계층적 구조와 명확한 의존성 규칙을 통해 코드의 가독성과 재사용성을 높입니다.

레이어 구조

프로젝트는 다음과 같은 6개의 주요 레이어로 구성됩니다

1. app/ - 애플리케이션 진입점

• 애플리케이션 초기화 및 전역 설정
• 라우터, 프로바이더 등 앱 레벨 설정
• App.tsx, main.tsx 등 진입점 파일

2. pages/ - 페이지 레이어

• 라우팅과 직접 연결된 페이지 컴포넌트
• 각 페이지는 해당하는 위젯들을 조합하여 구성

3. widgets/ - 위젯 레이어

• 페이지의 독립적인 큰 섹션 단위
• 여러 features와 entities를 조합하여 복합적인 UI 블록 구성

4. features/ - 기능 레이어

• 사용자 시나리오를 구현하는 비즈니스 기능 단위
• 특정 사용자 액션과 연관된 로직과 UI를 포함

5. entities/ - 엔티티 레이어

• 비즈니스 도메인의 핵심 엔티티
• 도메인 모델, API 호출, 쿼리, UI 컴포넌트를 포함

6. shared/ - 공유 레이어

• 프로젝트 전반에서 재사용되는 공통 코드
• UI 컴포넌트, 유틸리티, API 설정, 라우터, 훅 등

세그먼트 구조

각 레이어 내부는 다음과 같은 세그먼트로 구성됩니다:

• api/ - API 호출 함수
• model/ - 타입 정의, 상수, 변환 함수, 유효성 검사 등
• queries/ - React Query 쿼리 및 뮤테이션 정의
• ui/ - UI 컴포넌트
• hooks/ - 커스텀 훅
• utils/ - 유틸리티 함수

📂 프로젝트 구조

src/
├── app/ # 앱 초기화
│ ├── App.tsx
│ └── main.tsx
├── pages/ # 페이지 컴포넌트
│ ├── dashboard/
│ ├── onboarding/
│ └── roadmap/
├── widgets/ # 복합 UI 블록
│ ├── dashboard/
│ │ └── ui/
│ │ ├── phase-overview-section/
│ │ └── visa-status-list-section/
│ └── onboarding/
│ └── ui/
│ └── step/
├── features/ # 비즈니스 기능
│ ├── auth/
│ │ ├── api/
│ │ ├── model/
│ │ └── ui/
│ └── onboarding/
│ ├── api/
│ ├── hooks/
│ └── model/
├── entities/ # 도메인 엔티티
│ ├── user/
│ │ ├── api/
│ │ ├── model/
│ │ ├── queries/
│ │ └── ui/
│ └── job/
│ ├── api/
│ ├── model/
│ ├── queries/
│ └── ui/
└── shared/ # 공유 
├── apis/ # API 설정
├── router/ # 라우팅 설정
├── ui/ # 공통 UI 컴포넌트
├── utils/ # 유틸리티 함수
└── hooks/ # 공통 훅

개인 TASK

• 1. FSD 구조세팅 및 절대경로 세팅
• 2. Global Router 세팅
• 3. Ky 세팅
• 4. Funnel 구조 설정 및 커스텀 훅 구현 ➡️ team-kareer#108
• 5. 컴포넌트 및 API 연동 사항
  • Tag 공통 컴포넌트
  • Section Header 공통 컴포넌트
  • Action Required Card 공통 컴포넌트
  • Autocomplete 공통 컴포넌트
  • Onboarding Step 페이지 컴포넌트
  • Onbaording 유효성 검사 커스텀 훅 구현
  • Onboarding API 연결

온보딩 다이어그램

화면 구성 및 주요 기능