Feat(landing): 랜딩 페이지 세션 구현 by huniversal · Pull Request #347 · team-kareer/kareer-client

huniversal · 2026-08-25T08:52:21Z

📌 Summary

[Feat] 랜딩페이지 세션 구현 및 페이지 조립 #346

📚 Tasks

Feature01~03 구현
Real Voices 세션 구현
Why Kareer 세션 구현
Final Early Access 세션 구현
Footer 구현
LanguageSelector 구현

👀 To Reviewer

1. 세션 & 컴포넌트 구조

  sections/
  ├── job-recommendation/
  ├── career-roadmap/
  ├── todo-management/
  ├── real-voices/
  ├── why-kareer/
  └── early-access/

특정 세션에서만 사용하는 컴포넌트는 해당 세션 내부에 배치하면서 여러 세션에서 재사용하는
Badge, EarlyAccessForm, FeatureSection는 컴포넌트에 유지하였습니다.

2. `LanguageSelector`를 apps/web에서 재사용하지 않은 이유

apps/web에 기존에 사용하던 LanguageSelector가 있지만 재사용하지 않았습니다.

기존의 컴폰넌트가 apps/web의 shared/i18n/constants에 의존
Feature 레이어에 위치함

위와 같은 이유로 재사용을 하기 위해선 기존에 사용하던 LanguageSelector를 shared로 이동시키는 작업이 필요하기 때문에 우선 apps/landing에 동일한 컴포넌트를 배치시켰습니다.

이 부분은 어떻게 생각하시는지 궁금합니다!!
기존 apps/web에서 사용하던 컴포넌트를 재사용 하는 방식으로 진행 or apps/landing에서 별도로 구현하는 방식(현재)

📸 Screenshot

다국어

default.mov

세션

default.mov

jeonghoon11

이 부분은 어떻게 생각하시는지 궁금합니다!!
기존 apps/web에서 사용하던 컴포넌트를 재사용 하는 방식으로 진행 or apps/landing에서 별도로 구현하는 방식(현재)

좀 고민되긴 하네요.그렇다고 web에서 import 해오는건 안 좋은것 같아서 급하니 일단 놔두고 나중에 한번 더 얘기해봐요 😄

퍼블리싱 작업이기도 하고 크게 크리티컬한건 없는것 같네요! 고생했어요 굿굿굿 최고입니다 👍👍

jeonghoon11 · 2026-08-26T09:10:57Z

잘생기셨네요 👍👍

이미지 적긴 하지만 webp 변환은 어떠신가용?

jeonghoon11 · 2026-08-26T09:15:55Z

이 부분은 다국어 적용 안되는거죠?? JW!

밑에 다른부분들도! section에 미리보기? 영역은 그냥 영어로 두는건가요?? RJW

네 이 부분은 그냥 영어로 두려고 합니다! 따로 번역본도 없어서🫡

jeonghoon11 · 2026-08-26T09:17:52Z

+  {
+    id: 'regular',
+    company: 'Junghoon',
+    title: 'Backend Developer',


전 Frontend Developer인데요 ㅠ

jeonghoon11 · 2026-08-26T09:33:34Z

+
+      <div className={styles.jobGrid}>
+        {JOB_PREVIEWS.map(({ id, ...job }) => (
+          <JobPreviewCard key={id} {...job} />


위에는 구조분해할당 하다가 여기는 spread 처리한 이유가 궁금하네용!

JobPreviewCard 같은 경우는 부모에서 따로 가공하지 않고 Card로 넘기는 구조라 스프레드로 넘기게 되었습니다.
다른(로드맵/투두)는 필드로 스타일을 정하거나 조건부 렌더링이 필요한 로직이 있어 구조분해할당으로 넘겼습니다!

다만 일관성이 떨어질 수 있어 JobPreviewCard도 구조분해할당으로 변경할까요?

괜찮을것 같네요!😄 답변 감사합니당

* Refactor(web): 온보딩 페이지 훅 분리 개선 (#331) * refactor: 온보딩 스텝 계산 및 다음 활성화 훅 분리 * fix: useWatch 제거 및 오타 수정 * refactor: 온보딩 제출 로직 훅 분리 * fix: background field 상수 변경 * fix: 온보딩 위젯 Deep import 제거 * fix: onError 파라미터 name 수정 * Feat(desktop): Electron 앱 및 macOS DMG 배포 환경 구성 (#334) * chore: Node.js 실행 환경을 22로 상향 * feat: LogoIcon SVG 에셋 export 추가 * feat: Electron macOS 앱 배포 환경 구성 * refactor: Electron 코드를 TypeScript로 전환 * fix: 테스트코드 삭제 * fix: 앱 내부 탐색 URL 제한 * Feat(web): 로드맵 생성 로딩 카드 구현 (#336) * feat: 로드맵 생성 로딩 카드 추가 * feat: 로드맵 로딩 단계 진행 로직 분리 * Feat(web): SSE 기반 로드맵 생성 단계별 진행 상태별 로딩 구현 (#340) * Feat(landing): 랜딩 페이지 아키텍처 구현 (#342) * feat: landing page 라우터 세팅 * feat: landingPage 다국어 세팅 * feat: LandingPage Header 구현 * feat: 랜딩 페이지 다국어 리소스 추가 * style: 랜딩 헤더 스타일 정리 * feat: 랜딩 히어로 세션 구현 * feat: 통계 세션 다국어 문구 추가 * feat: 통계 세션 UI 구현 * feat: 통계 세션 추가 * feat: 공통 FeatureSection 컴포넌트 구현 * feat: Feature 세션 다국어 문구 추가 * feat: Feat 01 세션 추가 * feat: Feat02, 03 다국어 추가 * feat: 랜딩 Feat 02 구현 * feat: Feat03 구현 * feat: voice 다국어 추가 * feat: voice 세션 구현 * feat: kareer reason 세션 다국어 적용 * style: 백그라운드 이미지 추가 * feat: kareer reson 세션 추가 * feat: early access 세션 다국어 추가 * feat: 히어로 세션 early access form 분리 * feat: early access form 컴포넌트 구현 * feat: early access 세션 구현 * feat: 푸터 저작권 문구 추가 * feat: 푸터 구현 * style: 타이포그라피 수정 * refactor: 데이터 구조 통합 * fix: border 단위 통일 * refactor: 시맨틱 태그 변경 * feat: 랜딩 헤더 세션 이동 * feat: 스클로 위치에 따른 랜딩 헤더 인터랙션 * feat: 랜딩 통계 카운트업 인터랙션 추가 * refactor: 랜딩 페이지 독립 앱으로 분리 * refactor: 정적 데이터 상수로 분리 * fix: 다국어 미적용 수정 * style: 이모지 제거 및 KDS 아이콘 대체 * refactor: badge 컴포넌트 분리 * refactor: painpoint Card 구현 * refactor: 카운트 훅 분리 * refactor: 박스 컴포넌트 분리 * refactor: landing 앱 아키텍처 구조 리팩토링 * fix: landing alias 수정 * fix: 기존 shared에 위치하고 있던 hooks을 사용처로 이동 * style: og 이미지 추가 * style: KDS 디자인 토큰 재활용 * fix: 불필요한 Idnex 제거 * fix: 브런치 작업 범위 분리 * refactor: 랜딩 아키텍처 단순화 * refactor: baseUrl 및 경로 수정 * Feat(landing): 랜딩 페이지 공통 컴포넌트 및 히어로 세션 UI 구현 (#344) * feat: 랜딩 페이지 다국어 구조 세팅 * feat: 뱃지 컴포넌트 구현 * feat: early access form 컴포넌트 구현 * feat: Feature 세션 컴포넌트 구현 * feat: 랜딩 헤더 구현 * feat: 랜딩 히어로 세션 구현 * feat: Status 세션 구현 * fix: gitkeep 파일 제거 * refactor: NAVIGATION_ITEMS 위치 변경 * refactor: 훅 ref 참조 로직 단순화 * refactor: Hero 전용 상수 위치 변경 * refactor: 형변환 및 유니온 제거 * refactor: 다국어 locale 파일 구조 단순화 * Feat(landing): 랜딩 페이지 세션 구현 (#347) * feat: Job Recommendation 세션 구현 * feat: Career Roadmap 세션 구현 * feat: Todo management 세션 구현 * feat: real voice 세션 구현 * feat: why-kareer 세션 구현 * feat: Early Access 세션 구현 * feat: 푸터 구현 * fix: 주석 제거 * feat: 헤더 language-selector 구현 * Refactor: 서비스 도메인 변경 및 얼리엑세스 이메일 연동 (#351) * fix: 웹 URL 변경 * feat: 얼리 액세스 신청 폼 구현 및 성공/오류 메시지 추가 * fix: FORMSPREE_FORM_ID에서 trim() 제거 * Feat(web): Todo 생성/수정/삭제 API 연동 및 Toast 컴포넌트 액션 props 추가 (#341) * chore: todo kebab, 삭제 아이콘 추가 * chore: 아이콘 배럴 export 추가 * feat: toast 액션 버튼 추가 * refactor: refactor: todo 마감일 계산 - widgets/../utils/format-due-in-days.ts의 영어 혼재 계산 -> entities/todo/model/get-due-in-days.ts에서 마감일 숫자만 계산 (다국어 지원 고려) * feat: todo 생성/수정/삭제 API 연동 - todo-draft: 폼 값 검증 로직 - todo-cache: 캐시 업데이트 헬퍼 함수 (insert/update/remove) - API 구현 (create/update/delete/unwrap-action-item) * Feat(web): Todo Panel UI 개편 (#345) * feat: Todo 문구 다국어 적용 * refactor: TodoItem에 action 슬롯 추가 및 완료 섹션 컴포넌트 분리 * refactor: Todo 입력값 검증 규칙 추가 * feat: Todo 생성, 수정, 삭제, 완료 토글 훅 추가 * feat: Todo 인라인 폼, 케밥 메뉴, 실행 취소 버튼 추가 * refactor: Todo 패널 조립 * fix: 토스트 배치 수정 * chore: 마감일 검증 다국어 문구 수정 * style: 패널 스타일 수정 * fix: 토스트 만료 시점에 삭제 확정 * chore: 불필요한 토스트 키 제거 * refactor: 말줄임표 호버시 툴팁 추가 * refactor: toast undo 버튼용 text_inverse button preset 추가 * refactor: TodoUndoToastAction 추상화 제거 * refactor: DaysField 컴포넌트 코드 위치 조정 * chore: 불필요한 주석 제거 * refactor: getSortedTodos 유틸함수로 분리 * refactor: 동작하지 않는 TodoItemForm isPending 제거 * fix: Todo 생성 요청 중 EmptyView 노출 방지 * fix: 마감일 없거나 유효하지 않은 경우 NaN대신 null로 처리 * refactor: Todo 목록 렌더링을 TodoItemList로 분리 * chore: 임시 커밋 * refactor: mutation 훅에서 queryOptions의 queryKey 재사용 * refactor: DUE_DAYS_MIN 상수 사용 * fix: Toast anchor 옵셔널로 변경 (#353) --------- Co-authored-by: 이훈진 <hunivers0523@naver.com>

huniversal added 9 commits August 25, 2026 03:41

feat: Job Recommendation 세션 구현

64e4df8

feat: Career Roadmap 세션 구현

4fe3622

feat: Todo management 세션 구현

8ddf670

feat: real voice 세션 구현

db324b7

feat: why-kareer 세션 구현

5141616

feat: Early Access 세션 구현

5127da6

feat: 푸터 구현

858f6bb

fix: 주석 제거

7b221dd

feat: 헤더 language-selector 구현

2c77df4

huniversal requested a review from a team as a code owner August 25, 2026 08:52

github-project-automation Bot added this to Kareer-Client-Backlog Aug 25, 2026

huniversal linked an issue Aug 25, 2026 that may be closed by this pull request

[Feat] 랜딩페이지 세션 구현 및 페이지 조립 #346

Closed

4 tasks

github-project-automation Bot moved this to Todo in Kareer-Client-Backlog Aug 25, 2026

github-actions Bot added ⭐️ FEAT 새로운 기능 개발 🦍 훈진 labels Aug 25, 2026

github-actions Bot assigned huniversal Aug 25, 2026

jeonghoon11 approved these changes Aug 26, 2026

View reviewed changes

huniversal merged commit ffc47b7 into develop Aug 26, 2026
4 checks passed

huniversal deleted the feat/landing-section/#346 branch August 26, 2026 21:30

github-project-automation Bot moved this from Todo to Done in Kareer-Client-Backlog Aug 26, 2026

Navigation Menu

Uh oh!

Feat(landing): 랜딩 페이지 세션 구현 - #347

Feat(landing): 랜딩 페이지 세션 구현#347
huniversal merged 9 commits into
developfrom
feat/landing-section/#346

huniversal commented Aug 25, 2026 •

edited

Loading

Uh oh!

jeonghoon11 left a comment

Uh oh!

jeonghoon11 Aug 26, 2026

Uh oh!

jeonghoon11 Aug 26, 2026

Uh oh!

jeonghoon11 Aug 26, 2026

Uh oh!

jeonghoon11 Aug 26, 2026

Uh oh!

huniversal Aug 26, 2026

Uh oh!

jeonghoon11 Aug 26, 2026

Uh oh!

jeonghoon11 Aug 26, 2026

Uh oh!

jeonghoon11 Aug 26, 2026

Uh oh!

huniversal Aug 26, 2026

Uh oh!

jeonghoon11 Aug 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

huniversal commented Aug 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

📚 Tasks

👀 To Reviewer

1. 세션 & 컴포넌트 구조

2. LanguageSelector를 apps/web에서 재사용하지 않은 이유

📸 Screenshot

다국어

세션

Uh oh!

jeonghoon11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

huniversal commented Aug 25, 2026 •

edited

Loading

2. `LanguageSelector`를 apps/web에서 재사용하지 않은 이유