Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

user fetch refactoring /#98 #100

Merged
merged 13 commits into from
May 11, 2024
Merged

user fetch refactoring /#98 #100

merged 13 commits into from
May 11, 2024

Conversation

yougyung
Copy link
Member

@yougyung yougyung commented May 9, 2024

📌 작업 내용

구현 내용 및 작업 했던 내역

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;
  1. 이전에 성훈선배랑 수환이랑 나눈 논의에서 isSumbitted 속성명이 내려오지 않고, 기존에 내려주는 /users의 다른 속성을 통해서(백엔드에서 null로 전달) user의 role ('guest' | 'user' | 'init')를 결정하기로 했기때문에 제거가 요구됩니다
  2. 상단에 노출되어져있는 타입은 mock data로서 user에 대해서 실제 백엔드에서 전송해주는 스키마로의 변경이 요구됩니다
  3. 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>;

@yougyung yougyung self-assigned this May 9, 2024
@yougyung yougyung linked an issue May 9, 2024 that may be closed by this pull request
Copy link

github-actions bot commented May 9, 2024

Copy link

github-actions bot commented May 9, 2024

Copy link
Collaborator

@seonghunYang seonghunYang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -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,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gahyuun
gahyuun previously approved these changes May 10, 2024
Copy link
Member

@gahyuun gahyuun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


interface MockDatabaseState {
takenLectures: TakenLectures;
resultCategoryDetailInfo: ResultCategoryDetailResponse;
resultUserInfo: ResultUserInfo;
credits: CreditResponse[];
users: MockUser[];
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SignUpRequestBody 변경

Copy link

Comment on lines 17 to 28
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 ? (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

<li>{takenCredit}</li>
<li>{graduated ? '가능' : '불가능'}</li>
</ul>
{studentName ? (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

Copy link

Copy link

@yougyung yougyung merged commit cd88b6f into main May 11, 2024
3 checks passed
@yougyung yougyung deleted the user/#98 branch May 11, 2024 12:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

user mock fetching 분리 및 통합
3 participants