[FE] roomInfoStore의 구조변경을 수행한다. #809

skiende74 · 2024-10-15T08:33:09Z

❗ Issue

[FE] 체크리스트 스토어 리팩토링 작업을 수행한다. #799

✨ 구현한 기능

roomInfo 스토어 구현
roomInfoValidated 구현
종전 존재하던 기능들 모두구현
사용처(컴포넌트, post)에 반영
mapper함수 구현 ( structure가 비어있으면 null로 바꿔주기 등 작업을 일괄수행 )

사용예시

// RoomName.tsx 컴포넌트
const roomName = useRoomInfoValidated('roomName');

<FormField.Input
        placeholder=""
        onChange={roomName.onChange}
        name="roomName"
        id="roomName"
        value={roomName.rawValue}
      />

구현내용은 종전 얘기한 방식과 크게 다르진 않지만 작은 차이가 있습니다.

roomInfoStore: 검증,비검증 안따지고 모두를 담는 저장소.

하나하나에 접근하고싶을때, useRoomInfoValidated 훅에서 접근. (내부적으로 roomInfoStore를 사용)
검증이필요없는 자료형은, useRoomInfoNonValidated 훅에서 접근. (내부적으로 roomInfoStore를 사용)

저장된 데이터를 가져다 POST API날리고싶을때 : 저장소(roomInfoStore)에 접근해 API요청함.

roomInfoStore가 모두를 담는 저장소가 됨에 따라
현재 존재하는 roomInfoNonValidatedStore는, 이 PR이 머지 되면 제거하는 방향으로 진행하고자 합니다.

고민한 것 공유 (그냥 참고)

이번 구현에 그치지 않고 향후 조금 복잡한(?) zustand 스토어를 구현할 때에도
동일한 방식으로 구현할 만한 보편적 패턴을 찾고 싶어 고민했습니다.

종전에는 검증 로직을 가진 아주 작은 스토어를 여러개 한꺼번에 갖고 있게 구현을 시도했었는데,
만들고보니 설계자체도 괜찮고 사용도 괜찮았지만, 짜는 과정에 타입적인 어려움이 좀 있었습니다.
zustand store의 제네릭도 일일이 신경써줘야했고, 배열메소드, 객체순회 돌릴때 타입추론이 썩 만족스럽지 않았습니다.

가까스로 해결을 하고 완성은 했었지만,
패턴은 손쉽게 짤 정도로 쉽고단순하지않으면 의미가 없다고 생각해 좀 더 쉬운 패턴으로 다시 짰습니다.

( store를 동적으로 만들 때 어렵다고 느낀 이유 : zustand store의 긴 제네릭도 일일이 신경써줘야하고, 객체순회시 타입스크립트의 추론이 만족스럽지 않아 어려움이 있었습니다. )

zustand 공식문서의 slice 패턴은 타입스크립트 환경에서는 그리 간단하지않다. - Tkdodo -

라는 Tkdodo 발언의 의미를 이 때 조금 느꼈습니다.
combine stores into slices - zustand 공식문서 tkdodo 발언

그래서 좀 더 직관적이고 쉬운 코드를 짜봤는데,
RoomInfo스토어 roomInfoStore는 로직이 거의 없이 저장 역할만 하고 (number이든, number[]이든, string이든 담음)
로직들은 훅(useRoomInfoValidated)에서 구현(입출력로직, 검증 등)하게 해봤습니다.

다 짜고 난 지금 이상적 형태가 무엇일까 한번더 생각해보면
단순한 스토어를 적당히 3~4개 짜고, 훅 1개가 이들을 사용하는 형태라고 생각합니다. (현재는 스토어1개, 훅2개)

📢 논의하고 싶은 내용

🎸 기타

github-actions · 2024-10-15T08:34:42Z

🚀 storybook: https://669cc4025d9f500bb8c34778-rabaerjbfq.chromatic.com/

github-actions · 2024-10-15T08:38:13Z

🚀 storybook: https://669cc4025d9f500bb8c34778-twbbvrokqx.chromatic.com/

ooherin · 2024-10-16T02:21:38Z

정말 고생하셨습니다 제이드..!! 이 PR 은 정말 제이드의 많은 능력과 노력이 담긴 대단한 PR 인 것 같아요..ㅎㅎ
아마 방 구조와 관리비 포함 항목은 제가 맡아서 해야겠군요! 진짜 수고하셨습니다😁😁

ooherin · 2024-10-16T02:32:44Z

roomInfoNonValidatedStore 가 없어질 줄은 몰랐네요..! 이미 모든 AddressModal 의 로직을 해당 스토어를 사용하도록 리팩토링 했는데, 제이드가 아마 만들면서 더 유용하다고 생각해서 하신 것 같아요. 혹시 그 이유를 들어볼 수 있을까요? 예전에 훅을 만들면서, 스토어가 너무 비대해져서 나눈다고 들었던 것 같아서요!

healim01

전반적으로 매우 깔끔하게 리팩토링되었네요~!!! 매우 좋습니다.
특히 action 에서 각각의 value name 으로 변경되니 가독성이 더 좋아진거 같아요!

대신 기존에 action 을 통합해서 묶었던 방식에서 변경된거 같은데 정확히 이해한게 맞을까요?

healim01 · 2024-10-16T05:17:39Z

frontend/src/apis/checklist.ts

+  checklist.room = roomInfoApiMapper(checklist.room);
+  const response = await fetcher.post({
+    url: BASE_URL + ENDPOINT.CHECKLISTS_V1,
+    body: { ...checklist, room: checklist.room },
+  });


healim01 · 2024-10-16T05:18:25Z

frontend/src/components/NewChecklist/NewRoomInfoForm/DepositAndRent.tsx

+  const deposit = useRoomInfoValidated('deposit');
+  const rent = useRoomInfoValidated('rent');

-  const errorMessage = errorMessageDeposit || errorMessageRent;
+  const errorMessage = deposit.errorMessage || rent.errorMessage;


👍 매우 깔끔해졌네요~!! 최곱니다

healim01 · 2024-10-16T05:20:15Z

frontend/src/types/room.ts

+
+// export type RoomInfo0 = {
+//   roomName: string;
+//   deposit: number;
+//   rent: number;
+//   maintenanceFee: number;
+//   contractTerm: number;
+//   floorLevel: string;
+//   floor: number;
+//   station: string;
+//   walkingTime: number;
+//   realEstate: string;
+//   size: number;
+//   structure: string;
+//   occupancyMonth: number;
+//   occupancyPeriod: OccupancyPeriod;
+//   summary: string;
+//   memo: string;
+//   type: string;
+//   // createdAt?: string;
+//   address: string;
+//   buildingName: string;
+//   includedMaintenances: number[]; // 관리비 포함항목
+// };


불필요한 주석이 함께 포함되었네요~!

ooherin · 2024-10-16T02:22:00Z

frontend/src/types/room.ts

@@ -25,4 +25,28 @@ export type RoomInfo = Partial<{
  buildingName: string;
  includedMaintenances: number[]; // 관리비 포함항목
 }>;
+


불필요해진 타입일까요?

테스트용으로 만들고 주석쳐놓은거라 지울게요

ooherin · 2024-10-16T02:22:58Z

frontend/src/store/roomInfoStore.ts

+);
+
+export const roomInfoApiMapper = (values: RoomInfo | Nullable<RoomInfo>) => {
+  const result = { ...values, structure: values.structure === '' ? undefined : '' };


방 구조의 경우만 '' 일때 undefined으로 고친 이유는 undefined 로 post 가 가야해서 그런걸까요?

방구조 API타입이 null | '원룸' | '투룸' 이런느낌이라서
비어있을때 null로 보내야하기때문에 undefined해줬습니다.
(프젝내부의 undefined는 나중에 null로 바뀌기때문)

ooherin · 2024-10-16T02:23:48Z

frontend/src/store/roomInfoStore.ts

+        setRawValues: (rawValues: Partial<RoomInfo>) => {
+          set({ ...objectMap(rawValues, ([key, value]) => [key, value.rawValue]) });
+        },
+        getRawValues: () => {


다른 메서드들은 쉽게 이해가 되는 데 getRawValues, getParsedValues 의 경우 저번에 정한 컨벤션 처럼 docs 를 간략하게 달아주면 많은 도움이 될 것 같습니다:)

알겠습니다

ooherin · 2024-10-16T02:24:22Z

frontend/src/store/roomInfoStore.ts

+  getParsedValues: () => RoomInfo;
+}
+
+export const roomInfoStore = createStore<RoomInfoState & { actions: RoomInfoActions }>()(


진짜 너무 많이 깔끔해졌네요...가독성도,사용성도👍👍

ooherin · 2024-10-16T02:27:08Z

frontend/src/hooks/useRoomInfoValidated.ts

+  const actions = useStore(roomInfoStore, state => state.actions);
+  const value = parseRoomInfo(name, rawValue);
+
+  const set = useCallback(


useRoomInfoUnvalidate 에 들어갈 roomStructure 같은 경우는 값 변환 함수를 사용해서 만들면 될까요??

mapper는 api에서 쓰는용도라 스토어내부의 액션을 사용해주시면됩니다.

단일값을 set해주고싶으면 set({rawValue:'넣을내용',errorMessage:''})
여러 값을 한꺼번에 set해주고싶으면 setRawValues를 이용하면됩니다.

get도 마찬가지로
단일값을 get해주고싶으면 get 해서 rawValue를 꺼내서쓰고
여러값을 한꺼번에 get해주고싶으면 getRawValues를 해주면됩니다.

github-actions · 2024-10-16T06:30:05Z

🚀 storybook: https://669cc4025d9f500bb8c34778-ryzfuhawhw.chromatic.com/

github-actions · 2024-10-16T06:46:16Z

🚀 storybook: https://669cc4025d9f500bb8c34778-texkcqgeme.chromatic.com/

github-actions · 2024-10-16T09:10:54Z

🚀 storybook: https://669cc4025d9f500bb8c34778-lqibxvjzoo.chromatic.com/

github-actions · 2024-10-17T01:52:46Z

🚀 storybook: https://669cc4025d9f500bb8c34778-oqamhsraqf.chromatic.com/

github-actions · 2024-10-17T02:00:47Z

🚀 storybook: https://669cc4025d9f500bb8c34778-ozzxcpmmbn.chromatic.com/

skiende74 added 8 commits October 14, 2024 15:44

feat: store 및 훅 구현

f7f5628

feat: 사용처 반영. (memoModal, depositAndRent)

d0f3532

style: 주석추가

198c2e0

feat: 사용처(우선 방정보 컴포넌트)들에 반영

aaad247

feat: 훅 및 제출페이지 등 사용처에도 반영. mapper작성중

bc03379

feat: RoomInfo 타입에서 ?를 하나남기고 제거. API 매핑함수 구현

50c4bca

feat: RoomInfo 타입 다시 Partial로 되돌림

c018b76

feat: includedMaintenances에서 타입에러해결. roomInfoStore는 Required타입

0bcfadc

skiende74 added 🔑 FE 😊 Feature 🔧 Refactor labels Oct 15, 2024

skiende74 self-assigned this Oct 15, 2024

skiende74 had a problem deploying to frontend-msw October 15, 2024 08:33 — with GitHub Actions Failure

skiende74 temporarily deployed to frontend-msw October 15, 2024 08:36 — with GitHub Actions Inactive

skiende74 changed the title ~~[FE] roomInfoStore의 리팩토링을 수행한다.~~ [FE] roomInfoStore의 구조변경을 수행한다. Oct 16, 2024

healim01 reviewed Oct 16, 2024

View reviewed changes

ooherin reviewed Oct 16, 2024

View reviewed changes

skiende74 added 2 commits October 16, 2024 15:28

merge

526d1dc

merge: roomNameDefault 컴포넌트도 적용

e93c3e5

skiende74 had a problem deploying to frontend-msw October 16, 2024 06:28 — with GitHub Actions Failure

리안 헤일리 리뷰반영

2467e45

skiende74 temporarily deployed to frontend-msw October 16, 2024 06:44 — with GitHub Actions Inactive

skiende74 marked this pull request as draft October 16, 2024 07:41

style: 사소한 이름수정

c72227c

skiende74 temporarily deployed to frontend-msw October 16, 2024 09:09 — with GitHub Actions Inactive

skiende74 marked this pull request as ready for review October 17, 2024 01:49

skiende74 added 2 commits October 17, 2024 10:50

fix: 타입에러해결

ceaf4d9

fix: 이전PR에러해결 (fetcher, Subway)

f15c2b5

skiende74 temporarily deployed to frontend-msw October 17, 2024 01:51 — with GitHub Actions Inactive

git: 이전 PR에서 잘못 올라가있던 playwright-report 깃에서 제거

bc22129

skiende74 temporarily deployed to frontend-msw October 17, 2024 01:59 — with GitHub Actions Inactive

skiende74 merged commit 69396f5 into dev-fe Oct 17, 2024
3 checks passed

skiende74 deleted the feat/799-remake-store branch October 17, 2024 01:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] roomInfoStore의 구조변경을 수행한다. #809

[FE] roomInfoStore의 구조변경을 수행한다. #809

skiende74 commented Oct 15, 2024 •

edited

Loading

github-actions bot commented Oct 15, 2024

github-actions bot commented Oct 15, 2024

ooherin commented Oct 16, 2024

ooherin commented Oct 16, 2024

healim01 left a comment

healim01 Oct 16, 2024

healim01 Oct 16, 2024

healim01 Oct 16, 2024

ooherin Oct 16, 2024

skiende74 Oct 16, 2024

ooherin Oct 16, 2024

skiende74 Oct 16, 2024

ooherin Oct 16, 2024

skiende74 Oct 16, 2024

ooherin Oct 16, 2024

ooherin Oct 16, 2024

skiende74 Oct 16, 2024

github-actions bot commented Oct 16, 2024

github-actions bot commented Oct 16, 2024

github-actions bot commented Oct 16, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

[FE] roomInfoStore의 구조변경을 수행한다. #809

[FE] roomInfoStore의 구조변경을 수행한다. #809

Conversation

skiende74 commented Oct 15, 2024 • edited Loading

❗ Issue

✨ 구현한 기능

사용예시

고민한 것 공유 (그냥 참고)

📢 논의하고 싶은 내용

🎸 기타

github-actions bot commented Oct 15, 2024

github-actions bot commented Oct 15, 2024

ooherin commented Oct 16, 2024

ooherin commented Oct 16, 2024

healim01 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Oct 16, 2024

github-actions bot commented Oct 16, 2024

github-actions bot commented Oct 16, 2024

github-actions bot commented Oct 17, 2024

github-actions bot commented Oct 17, 2024

skiende74 commented Oct 15, 2024 •

edited

Loading