user fetch refactoring /#98 #100

yougyung · 2024-05-09T08:10:27Z

📌 작업 내용

구현 내용 및 작업 했던 내역

getUser의 제거

getUser: (authId: string) => MockUser | undefined;

사용되고 있지 않아서 제거했습니다

기존 getUserInfo의 제거

기존 getAuth와 getUserInfo에서 사용되고 있는 getUserInfo는

getAuth→ isSumbitted를 사용하기 위한 목적으로
getUserInfo→ studentNumber, studentName, major등 사용자의 정보를 제공하기 위한 목적으로 mypage에서 사용됩니다

  studentNumber: string;
  studentName: string;
  major: string;
  isSumbitted: boolean;

이전에 성훈선배랑 수환이랑 나눈 논의에서 isSumbitted 속성명이 내려오지 않고, 기존에 내려주는 /users의 다른 속성을 통해서(백엔드에서 null로 전달) user의 role ('guest' | 'user' | 'init')를 결정하기로 했기때문에 제거가 요구됩니다
상단에 노출되어져있는 타입은 mock data로서 user에 대해서 실제 백엔드에서 전송해주는 스키마로의 변경이 요구됩니다
getResultUserInfo가 하위 스키마를 반환하고 있던 저번 PR에서 생성된 api에 해당됩니다

//실제 전송받는 schema

export const UserInfoResponseSchema = z.object({
  studentNumber: z.string(),
  studentName: z.string(),
  completionDivision: z.array(
    z.object({
      majorType: z.enum(['PRIMARY', 'DUAL', 'SUB']),
      major: z.string(),
    }),
  ),
  totalCredit: z.number(),
  takenCredit: z.number(),
  graduated: z.boolean(),
});

export const InitUserInfoResponseSchema = z.object({
  studentNumber: z.string(),
  studentName: z.null(),
  completionDivision: z.null(),
  totalCredit: z.null(),
  takenCredit: z.null(),
  graduated: z.null(),
});

getResultUserInfo → fetchUserInfo 네이밍 변경

상단 스키마를 반환하는 getResultUserInfo의 네이밍을 fetchUserInfo로 변경을 진행했습니다.

getUserInfo의 type

PDF를 upload하기 이전 /user는 null값을 반환합니다.
nullable()로 type을 표기하는 방법도 존재하지만 타입을 좁게 한정하기 위한 목적으로 아래와 같이 type을 선언했습니다.

export type UserInfoResponse = z.infer<typeof UserInfoResponseSchema | typeof InitUserInfoResponseSchema>;

github-actions · 2024-05-09T08:13:16Z

🚀storybook: https://65ccb85d5afe55a024495bc0-nkelnttsgk.chromatic.com/

github-actions · 2024-05-09T08:18:15Z

🚀storybook: https://65ccb85d5afe55a024495bc0-vyrvalbjyx.chromatic.com/

seonghunYang

수고하셨습니다.
벌써 100번째 이슈네요. 2월부터 시작해 정말 꽤 많은 시간을 함께 달려온 것 같아요. 제가 표현을 잘 못했는데, 다들 잘해주셔서 항상 고마워하고 있어요. 지금까지 수고 많으셨고, 마지막까지 잘 마무리 해봅시다.

seonghunYang · 2024-05-09T13:31:36Z

app/mocks/handlers/user-handler.mock.ts

@@ -2,14 +2,13 @@ import { HttpResponse, http, delay } from 'msw';
 import { API_PATH } from '../../business/api-path';
 import { mockDatabase } from '../db.mock';
 import {
-  SignUpRequestBody,
+  MockUser as SignUpRequestBody,


기존 SignUpRequestBody 타입을 MockUser로 변경하고 import에서 변경해서 사용하는 것 같은데, 이런 방식을 택한 이유가 있을까요?

gahyuun

100번째 이슈,,, 고생하셨습니다 😆

gahyuun · 2024-05-10T02:25:35Z

app/ui/user/user-info-card/user-info-card.tsx

@@ -11,7 +13,7 @@ async function UserInfoCard() {
    totalCredit,
    takenCredit,
    graduated,
-  } = await fetchResultUserInfo();
+  } = (await fetchUserInfo()) as z.infer<typeof UserInfoResponseSchema>;


이 코드가 어떤 역할을 하는지 알려주실 수 있나요?

yougyung · 2024-05-10T04:34:35Z

app/mocks/db.mock.ts


 interface MockDatabaseState {
  takenLectures: TakenLectures;
  resultCategoryDetailInfo: ResultCategoryDetailResponse;
-  resultUserInfo: ResultUserInfo;
  credits: CreditResponse[];
  users: MockUser[];


SignUpRequestBody 변경

github-actions · 2024-05-10T11:27:10Z

🚀storybook: https://65ccb85d5afe55a024495bc0-ftokcmcpdd.chromatic.com/

gahyuun · 2024-05-11T01:56:54Z

app/ui/user/user-info-card/user-info-card.tsx

+    if (majors) {
+      return majors.map((major, index) => {
+        const { major: majorName, majorType } = major;

-      return <li key={index}>{notation === 'title' ? MAJOR_NOTATION[majorType] : majorName}</li>;
-    });
+        return <li key={index}>{notation === 'title' ? MAJOR_NOTATION[majorType] : majorName}</li>;
+      });
+    }
  };

  return (
    <>
-      <p className="font-bold text-sm md:text-xl">
-        졸업필요학점보다 <span className="text-point-blue">{totalCredit - takenCredit}</span>학점이 부족합니다.
-      </p>
-      <div className="flex border-t-2 my-4 py-4 justify-between items-center">
-        <div className="flex font-medium text-xs md:text-lg gap-4 md:gap-14 ">
-          <ul className="text-gray-6 flex flex-col gap-1">
-            <li>이름</li>
-            <li>학번</li>
-            {displaySeveralMajor('title')}
-            <li>졸업필요학점</li>
-            <li>총 이수 학점</li>
-            <li>졸업가능여부</li>
-          </ul>
-          <ul className="flex flex-col gap-1">
-            <li>{studentNumber}</li>
-            <li>{studentName}</li>
-            {displaySeveralMajor('major')}
-            <li>{totalCredit}</li>
-            <li>{takenCredit}</li>
-            <li>{graduated ? '가능' : '불가능'}</li>
-          </ul>
+      {studentName ? (


majors나 studentName으로 분기처리하는 것보다
let isNotInitUser = major && studentName ....
요론 식으로 변수만든 후 isNotInitUser ? ~~~ 코드를 작성하면 더 가독성이 올라가지 않을까요!?

seonghunYang · 2024-05-11T03:51:42Z

app/ui/user/user-info-card/user-info-card.tsx

-            <li>{takenCredit}</li>
-            <li>{graduated ? '가능' : '불가능'}</li>
-          </ul>
+      {studentName ? (


어제 제가 생각했던 방식은 사용자 정의 타입 가드를 사용하여 타입을 확정하고 분기 처리하는 것이었습니다. 이를 참조한 링크는 아래에 있습니다. 이 방식으로 처리하면 어떨까요? 함수를 통해 추상화하면 init 상황과 그렇지 않은 상황을 구별할 수 있을 뿐만 아니라, 타입 확정으로 인해 더욱 명확한 코드를 작성할 수 있을 것 같습니다.
https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards

github-actions · 2024-05-11T09:02:58Z

🚀storybook: https://65ccb85d5afe55a024495bc0-upzubcwwam.chromatic.com/

github-actions · 2024-05-11T10:03:38Z

🚀storybook: https://65ccb85d5afe55a024495bc0-nolgvkrule.chromatic.com/

github-actions · 2024-05-11T10:10:28Z

🚀storybook: https://65ccb85d5afe55a024495bc0-msrnhgytec.chromatic.com/

yougyung added 8 commits May 6, 2024 14:18

fix: change UserInfo fetch api

b5c78c1

fix: remove getUser MockDatabaseAction

7981845

fix: remove resultUserInfo

2a5541f

fix: change UserInfoResponseSchema

4cc780a

fix: separate type in result in query file

1e6945d

fix: remove redendancy type

820cb4e

fix: change naming getUserInfo to fetchUserInfo

e7c6517

chore: change Missing changes

a773ede

yougyung self-assigned this May 9, 2024

yougyung requested review from seonghunYang and gahyuun as code owners May 9, 2024 08:10

yougyung linked an issue May 9, 2024 that may be closed by this pull request

user mock fetching 분리 및 통합 #98

Closed

fix: add type assertion at fetchUserInfo

1989ef5

seonghunYang reviewed May 9, 2024

View reviewed changes

gahyuun previously approved these changes May 10, 2024

View reviewed changes

yougyung commented May 10, 2024

View reviewed changes

fix: change to type guard in fetchUserInfo

e1b285b

yougyung dismissed gahyuun’s stale review via e1b285b May 10, 2024 11:24

gahyuun reviewed May 11, 2024

View reviewed changes

seonghunYang reviewed May 11, 2024

View reviewed changes

fix: change type naming MockUser to SignUpRequestBody

eacbef1

fix: change to type guard in fetchUserInfo

ce0b464

chore: commit for merge

77c03ad

seonghunYang approved these changes May 11, 2024

View reviewed changes

gahyuun approved these changes May 11, 2024

View reviewed changes

yougyung merged commit cd88b6f into main May 11, 2024
3 checks passed

yougyung deleted the user/#98 branch May 11, 2024 12:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

user fetch refactoring /#98 #100

user fetch refactoring /#98 #100

yougyung commented May 9, 2024

github-actions bot commented May 9, 2024

github-actions bot commented May 9, 2024

seonghunYang left a comment

seonghunYang May 9, 2024

yougyung May 11, 2024

gahyuun left a comment

gahyuun May 10, 2024

yougyung May 10, 2024

github-actions bot commented May 10, 2024

gahyuun May 11, 2024

seonghunYang May 11, 2024

github-actions bot commented May 11, 2024

github-actions bot commented May 11, 2024

github-actions bot commented May 11, 2024

user fetch refactoring /#98 #100

user fetch refactoring /#98 #100

Conversation

yougyung commented May 9, 2024

📌 작업 내용

getUser의 제거

기존 getUserInfo의 제거

getResultUserInfo → fetchUserInfo 네이밍 변경

getUserInfo의 type

github-actions bot commented May 9, 2024

github-actions bot commented May 9, 2024

seonghunYang left a comment

Choose a reason for hiding this comment

seonghunYang May 9, 2024

Choose a reason for hiding this comment

yougyung May 11, 2024

Choose a reason for hiding this comment

gahyuun left a comment

Choose a reason for hiding this comment

gahyuun May 10, 2024

Choose a reason for hiding this comment

yougyung May 10, 2024

Choose a reason for hiding this comment

github-actions bot commented May 10, 2024

gahyuun May 11, 2024

Choose a reason for hiding this comment

seonghunYang May 11, 2024

Choose a reason for hiding this comment

github-actions bot commented May 11, 2024

github-actions bot commented May 11, 2024

github-actions bot commented May 11, 2024