[FEAT] 온보딩 화면 구현 #36

AAminha · 2024-05-16T16:53:05Z

1️⃣ 요약

회원가입 이후 보여지는 온보딩 화면을 구현하고 API 연동을 진행했습니다.
useFunnel이라는 커스텀 훅을 적용했습니다.
Dropdown 컴포넌트와 Input 컴포넌트를 제작했습니다.
유저 상태(비로그인, 로그인 중, 로그인 완료)에 따라 접근할 수 있는 페이지를 제한하는 로직을 구현했습니다.
- MemberPrivateRoute.tsx
- MemberPrivateRoute.tsx
resolved [FEAT] 온보딩 화면 구현 #26

2️⃣ 변경사항

기존 코드에 영향을 미치는 변경사항

토큰 체크하는 로직에서 잘못된 부분이 있어서 수정했습니다.
레지스터 토큰은 새로고침으로 날라가면 재발급할 방법이 없어서 세션 스토리지에 저장하는 방식으로 수정했습니다.
컴포넌트 이름 변경이나 파일 위치 이동된 사항이 있습니다.
Layout이 반응형이냐 아니냐에 따라 나누는게 이상한 것 같아 삭제하고 하나로 통일했습니다.

기존 코드에 영향을 미치지 않는 변경사항

버그 수정을 위한 변경사항

Dropdown 컴포넌트 변경으로 인해 홈페이지 일부 섹션에서 관련 코드를 주석처리했습니다. 이 부분은 다음 이슈에서 처리하도록 하겠습니다.

3️⃣ 참고사항

이슈에 없는 수정사항

테스트 로직에서 비로그인 사용자는 noAuthClient, 로그인 사용자는 authClient를 사용하도록 수정했습니다.
온보딩과 테스트 화면에서 중복으로 쓰이는 KeywordChip 컴포넌트를 제작이 완료되어 테스트 화면에도 적용했습니다.

4️⃣ 추후 작업

5️⃣ 리뷰 요구사항

- primary2 variant 디자인 추가 - disabled 디자인 추가 - PlainButtonProps 타입 수정

- 케이스 추가 - 파일 위치 변경 - check 아이콘 추가

- DropdownContent의 maxHeight 속성 추가 - multiple이 아닐 경우 드롭다운이 닫히도록 수정 - title이 없을 경우 드롭다운이 안열리는 문제 해결

- SetupBasicInfo 컴포넌트와 중복되는 스타일 코드 분리

- useFunnel 커스텀 훅 구현

- 삭제 아이콘 제거 - selected의 hover 디자인 추가

…tend into feat/#26/onboarding

- selected가 string인 경우 추가 - 커스텀 Scrollbar 적용

- 레지스터 토큰 관리 방식 추가 - 로직 오류 수정

- ScoreRangeBar 값 수정 방식 변경

- 레지스터 토큰 저장 - 로그인 후 이동 path 수정

- LoginPage는 비로그인 사용자만 접근하도록 수정 - OnboradingPage는 로그인 중인 사용자만 접근하도록 수정

- 아이콘 여백으로 스크롤 생기는 문제 해결 - 배경 이미지 오류로 이미지 변경

- router 파일 위치 수정

…tend into feat/#26/onboarding

AAminha added 30 commits May 13, 2024 11:59

feat: DefaultInput 컴포넌트 구현 (#26)

e972950

feat: ButtonInput 컴포넌트 구현 (#26)

f6bacec

fix: PlainButton 컴포넌트 수정 (#26)

c87c132

- primary2 variant 디자인 추가 - disabled 디자인 추가 - PlainButtonProps 타입 수정

feat: KeywordChip 컴포넌트 구현 (#26)

82e6c34

feat: Dropdown 컴포넌트 리팩토링 및 디자인 추가 (#26)

3543e06

- 케이스 추가 - 파일 위치 변경 - check 아이콘 추가

fix: Dropdown 컴포넌트 수정 (#26)

a029872

- DropdownContent의 maxHeight 속성 추가 - multiple이 아닐 경우 드롭다운이 닫히도록 수정 - title이 없을 경우 드롭다운이 안열리는 문제 해결

fix: ButtonInput 컴포넌트의 disabled 속성 수정 (#26)

757d048

feat: SetupBasicInfo 컴포넌트 구현 (#26)

132579e

fix: KeywordChip 파일 위치 변경 및 핸들러 함수 추가 (#26)

b6d19d3

feat: ScoreRangeBar 컴포넌트 구현 (#26)

a4f0a99

feat: SetupBranding 컴포넌트 구현 (#26)

1ce33aa

- SetupBasicInfo 컴포넌트와 중복되는 스타일 코드 분리

feat: ProfileSetup 컴포넌트 구현 (#26)

d72011a

- useFunnel 커스텀 훅 구현

feat: OnboardingPage 구현 (#26)

0b812a0

fix: KeywordChip 컴포넌트 수정 (#26)

197f36d

- 삭제 아이콘 제거 - selected의 hover 디자인 추가

Merge branch 'develop' of https://github.com/KUSITMS-29th-TEAM-D/Fron…

74c23aa

…tend into feat/#26/onboarding

design: 그림자 속성 수정 (#26)

c1e620c

feat: 닉네임 중복 체크 API 연동 (#26)

70ac61d

feat: 온보딩에 필요한 상수 업데이트 (#26)

7e94a5e

fix: Dropdown 컴포넌트 수정 (#26)

9e636fc

- selected가 string인 경우 추가 - 커스텀 Scrollbar 적용

feat: 온보딩 정보를 전역 상태로 관리하도록 구현 (#26)

08f5680

fix: 토큰 헤더 재설정 로직 수정 (#26)

615425e

- 레지스터 토큰 관리 방식 추가 - 로직 오류 수정

feat: SetupBranding에서 온보딩 정보를 전역 상태로 관리하도록 구현 (#26)

1e67461

- ScoreRangeBar 값 수정 방식 변경

fix: RedirectPage 수정 (#26)

5982293

- 레지스터 토큰 저장 - 로그인 후 이동 path 수정

fix: 페이지 권한 수정 (#26)

fd90173

- LoginPage는 비로그인 사용자만 접근하도록 수정 - OnboradingPage는 로그인 중인 사용자만 접근하도록 수정

design: LoginDesktopPage 디자인적 오류 수정

4e0ee79

- 아이콘 여백으로 스크롤 생기는 문제 해결 - 배경 이미지 오류로 이미지 변경

design: 레이아웃 수정

dd01f31

feat: 유저 상태에 따른 PrivateRoute 적용 (#26)

9b4e9c5

- router 파일 위치 수정

style: 작업 과정 중 생기는 에러 주석처리 (#26)

77ec504

rename: ProgressBar 파일 위치 이동 (#26)

5b7506d

fix: axios interceptor 내 제대로 동작하지 않는 코드 수정 (#26)

787b898

AAminha added 4 commits May 16, 2024 23:27

Merge branch 'develop' of https://github.com/KUSITMS-29th-TEAM-D/Fron…

fb14de8

…tend into feat/#26/onboarding

fix: Define 테스트 페이지에서 로그인 여부에 따른 client를 다르게 적용하도록 수정

b066099

rename: Chip -> PlainChip으로 컴포넌트명 변경 (#26)

3288fdb

fix: 테스트 화면에 KeywordChip이 적용되도록 수정 (#26)

5e6d15e

AAminha added the ✨Feature 기능 개발 이슈 label May 16, 2024

AAminha self-assigned this May 16, 2024

AAminha requested a review from mungjin01 as a code owner May 16, 2024 16:53

mungjin01 approved these changes May 16, 2024

View reviewed changes

fix: PlainButton 내 불필요한 flex 설정 삭제 (#26)

e820265

AAminha merged commit e7f6d71 into develop May 17, 2024

AAminha deleted the feat/#26/onboarding branch May 17, 2024 02:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEAT] 온보딩 화면 구현 #36

[FEAT] 온보딩 화면 구현 #36

AAminha commented May 16, 2024 •

edited

Loading

[FEAT] 온보딩 화면 구현 #36

[FEAT] 온보딩 화면 구현 #36

Conversation

AAminha commented May 16, 2024 • edited Loading

1️⃣ 요약

2️⃣ 변경사항

기존 코드에 영향을 미치는 변경사항

기존 코드에 영향을 미치지 않는 변경사항

버그 수정을 위한 변경사항

3️⃣ 참고사항

이슈에 없는 수정사항

4️⃣ 추후 작업

5️⃣ 리뷰 요구사항

AAminha commented May 16, 2024 •

edited

Loading