[FE] 변경된 API 적용 및 사용하지 않는 코드 제거, 지출내역 추가 flow 및 UI 변경 #574

Todari · 2024-09-20T08:34:00Z

issue

close [FE] 변경된 API 적용 및 사용하지 않는 코드 제거, 지출내역 추가 flow 및 UI 변경 #550

구현 목적

유저 Flow 및 UX/UI 대폭 변경

유저테스트 이후 피드백에서 많은 비율을 차지하는 내용이 "사용법이 복잡하다.", "어떻게 사용하는지 모르겠다.", "한눈에 들어오지 않는다."와 같은 피드백이었습니다.
이를 개선하기 위해서 유저가 집중적으로 사용할 만한 지출내역 추가, 행사 생성 에 대한 flow와 UX writing을 유저 친화적으로 개선합니다.

api 구조 변경

관리자 권한 확인 API 변경 [BE] 관리자 권한 확인 API 수정 #275 으로 인해서, 기존에 사용하고 있던 TEMP_PREFIX = /api/events 상수를 쓸 수 없고, 관리자 인증 토큰 포함 여부에 따라 endpoint Prefix를 나눕니다.
또한, UX 개선을 위한 view가 대규모 변경되면서 이에 효율적으로 사용할 수 있는 방향으로 데이터 구조와 api 요청 및 응답이 변경되어 이에 맞게 구현합니다.

중복된 Type 제거

현재 types/serviceType.ts, apis/request/의 파일들, hooks/queries/의 파일들 등 다양한 곳에서 중복되는 Type들이 통일성 없이 무분별하게 사용되고 생성되고 있습니다.
이를 이용하여 불필요한 코드를 줄이고, 재사용성을 높여 유지보수에 도움이 되도록 변경하고자 합니다.

변경된 데이터 구조에 맞게 파일들 및 변수명 이름 수정

기존에 별도의 용어 정리 단계가 없이 서로 협업을 하다 보니 같은 개념에 대해서 다양한 동의어로 코드를 작성하여 서로의 코드를 예측할 수 없는 문제가 있었습니다.
이를 해결하기 위해 변경된 백엔드 구조에 맞춰서 용어를 통일하고자 합니다.

예시

변경된 API에 대응하기 위한 MSW 코드 작성

현재 변경된 api구조로 인해 MSW 코드를 사용할 수 없어 패러럴한 개발 방식에 문제가 생길 수 있다고 생각했습니다.
이에 MSW 코드를 구현하고자 합니다.

구현 내용

유저 Flow 및 UX/UI 대폭 변경

행사 생성 페이지, 관리 페이지의 지출 추가 부분에 대한 UI/UX 변경 구현 완료했습니다.
이후 추가적인 기능을 붙이는 작업이 필요합니다.

api 구조 변경

고려사항 및 적용사항

event
- 참여자별 정산 현황 조회에서 member를 flat하게 내보낼지, 객체로 내보낼지 고민중.
- eventName 뿐 아니라, 추후 개발될 기능에 대응하기 위해 bankName, accountNumber 도 함께 주도록 변경.
members
- isDeposited 필드 추가
- postMember에서 name의 객체 배열을 건네주면, member 배열을 건네줌 (id, member).
bills
- Steps의 도메인을 만드는 방법에 대해서 고려중.
- 현재는 bills가 bills와 members를 포함하고 있는 하나의 큰 개념.

중복된 Type 제거

현재 serviceType.ts, apis/request/의 파일들, hooks/queries/의 파일들 등 다양한 곳에서 중복되는 Type들이 통일성 없이 무분별하게 사용되고 생성되고 있습니다.
이를 이용하여 불필요한 코드를 줄이고, 재사용성을 높여 유지보수에 도움이 되도록 변경하고자 합니다.

고려사항

types/serviceType.ts에는 api에서 응답으로 받아오는 response 타입만 남겨두는것이 깔끔하지 않을까 싶습니다. 현재에는 클라이언트 내부에서도 사용하는 다양한 타입들이 남겨져 있고, 파일 이름과 목적과도 어울리지 않습니다.
apis/requests/내부에 request에 대한 타입은 있는 것이 좋아보입니다. react-query의 mutate 함수에서도 이를 사용할 수 있을 것으로 보여집니다.

적용 사항

api의 request prop에 대한 type들은 apis/request 내부의 requset 파일들에서 선언
response type들은 type/serviceType.ts에서 선언
query hook에서 muataeProp에 필요한 type들 apis/request file에서 import

변경된 API에 대응하기 위한 MSW 코드 작성

아직 완벽하게 실제 production 앱처럼 작동하진 않지만, 모든 API를 mocking하여 사용할 수 있도록 구현했습니다.

TODO: intercept 되지 않는 오류 수정 중

1. request 함수 내에서 Request type 선언하도록 변경 2. react-query에서 data를 정제 및 이름을 변경하여 return 하도록 변경 3. react-query hook들을 domain 별로 그룹화 4. react-qeury hook 및 request 함수 backEnd에서 사용하는 이름 및 model과 통일되도록 변경 Co-authored-by: Soyeon Choe <[email protected]> Co-authored-by: JinHo Kim <[email protected]>

Co-authored-by: Soyeon Choe <[email protected]> Co-authored-by: JinHo Kim <[email protected]>

github-actions · 2024-09-20T08:36:19Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-qffdtvkcxe.chromatic.com/

github-actions · 2024-09-20T08:41:03Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-bgwdddfoqs.chromatic.com/

github-actions · 2024-09-20T08:44:26Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-wigfwlhogv.chromatic.com/

github-actions · 2024-09-20T08:59:03Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-bvqnzmmztm.chromatic.com/

soi-ha

가보자고~

jinhokim98

고생하셨습니다. 퍼널 구조로 바꾼 덕분에 사용자가 헷갈리지 않고 직관적으로 사용할 수 있을 것 같아요

Todari added 30 commits September 10, 2024 13:58

feat: NumberKeyboard 구현

cf91eae

feature: Top Top.Line component 구현 및 행사 생성 플로우 UX 개선

a68c167

fix: 공백을 포함하지 않던 문제 수정

881fd37

refactor: useNumberKeyboard로 기능 관련 역할 분리

e90ff49

feat: keyboard type에 string 추가

ddfc4e8

style: lint 적용

bf6aa31

feature: CompleteCreateEventPage 변경

3a05da3

refactor: api 변경에 따라, USER_API_PREFIX, ADMIN_API_PREFIX로 구분

d56b7aa

chore: MSW 설정 변경 중

a7b9066

TODO: intercept 되지 않는 오류 수정 중

fix: 사용하지 않는 Button component의 isFull 속성 제거

5ac606d

fix: mockEndpointPrefix 경로 수정

2db1ecc

feat: Amount Component 구현

4dbf1a1

fix: meatball Icon 추가

d1106e5

fix: 잘못 적용된 endpoint 적용

0ec52fc

fix: Title component 수정

1d725eb

test: Top component storybook 추가

ae73909

feat: ListItem Component 추가

fb89ce6

feat: Chip Component 추가

d6545f8

feat: ChipGroup Component 생성

2fdce49

design: ChipGroup style 수정

8b4b5bc

Merge branch 'feature/#547' into feature/#550

17a657b

fix: FixedButton에 onBackClick prop 추가

5d59fb8

refactor: 변경된 api 구조에 맞게 수정 및 type 생성에 대한 통일화

73e5af1

fix: 변경된 api에 맞게 MSW 코드 변경

d0ae83c

feature: ChipButton component 구현

3e1f034

feature: AmountInput Component 구현

8a7ce61

design: Button disabled color 변경

0396774

move: NumberKeyboard 위치 변경

b0b3851

feature: AddBillFunnel page 구현

5b394c6

fix: API 및 UX 변경사항으로 인해 함꼐 변경이 필요한 사항들 적용

2621084

Todari and others added 6 commits September 19, 2024 17:45

move: NumberKeyboard component 위치 변경

ada748b

remove: 개선 과정에서 사용하지 않는 레거시 파일 삭제

0ab4dce

Co-authored-by: Soyeon Choe <[email protected]> Co-authored-by: JinHo Kim <[email protected]>

fix: 현재 사용하지 않지만, 추후 사용 가능성이 있는 코드 이름 변경 및 주석 처리

1656602

Co-authored-by: Soyeon Choe <[email protected]> Co-authored-by: JinHo Kim <[email protected]>

refactor: API 변경 사항 및 전체 구조 변경에 따른 코드 반영 및 경로 수정, 이름 변경

bdc385e

Co-authored-by: Soyeon Choe <[email protected]> Co-authored-by: JinHo Kim <[email protected]>

fix: MSW mocking 해제

5f1856a

Todari added 🖥️ FE Frontend 🚧 refactor refactoring labels Sep 20, 2024

Todari added this to the lev4 milestone Sep 20, 2024

Todari requested review from pakxe, soi-ha and jinhokim98 September 20, 2024 08:34

Todari self-assigned this Sep 20, 2024

style: lint 적용

6496966

Todari added 2 commits September 20, 2024 17:39

style: 사용하지 않는 코드 제거

3204e00

fix: NumberKeyboard import 잘못 지정된 오류 수정

d0a6ebf

style: lint 적용

d54ca78

fix: 사용하지 않는 테스트 코드 제거

f89d895

soi-ha approved these changes Sep 20, 2024

View reviewed changes

jinhokim98 approved these changes Sep 20, 2024

View reviewed changes

Todari merged commit 47e6bd9 into fe-dev Sep 20, 2024
2 checks passed

Todari deleted the feature/#550 branch September 20, 2024 09:22

This was referenced Sep 22, 2024

[FE] 지출 내역 생성하기 기능 추가 #587

Merged

[FE] 금액 입력 가상 키보드 구현 #553

Closed

Todari added this to the v2.0.0 milestone Sep 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 변경된 API 적용 및 사용하지 않는 코드 제거, 지출내역 추가 flow 및 UI 변경 #574

[FE] 변경된 API 적용 및 사용하지 않는 코드 제거, 지출내역 추가 flow 및 UI 변경 #574

Todari commented Sep 20, 2024 •

edited

Loading

github-actions bot commented Sep 20, 2024

github-actions bot commented Sep 20, 2024

github-actions bot commented Sep 20, 2024

github-actions bot commented Sep 20, 2024

soi-ha left a comment

jinhokim98 left a comment

[FE] 변경된 API 적용 및 사용하지 않는 코드 제거, 지출내역 추가 flow 및 UI 변경 #574

[FE] 변경된 API 적용 및 사용하지 않는 코드 제거, 지출내역 추가 flow 및 UI 변경 #574

Conversation

Todari commented Sep 20, 2024 • edited Loading

issue

구현 목적

유저 Flow 및 UX/UI 대폭 변경

api 구조 변경

중복된 Type 제거

변경된 데이터 구조에 맞게 파일들 및 변수명 이름 수정

변경된 API에 대응하기 위한 MSW 코드 작성

구현 내용

유저 Flow 및 UX/UI 대폭 변경

api 구조 변경

고려사항 및 적용사항

중복된 Type 제거

고려사항

적용 사항

변경된 API에 대응하기 위한 MSW 코드 작성

github-actions bot commented Sep 20, 2024

github-actions bot commented Sep 20, 2024

github-actions bot commented Sep 20, 2024

github-actions bot commented Sep 20, 2024

soi-ha left a comment

Choose a reason for hiding this comment

jinhokim98 left a comment

Choose a reason for hiding this comment

Todari commented Sep 20, 2024 •

edited

Loading