-
Notifications
You must be signed in to change notification settings - Fork 0
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
Conversation
There was a problem hiding this 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, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- 기존 SignUpRequestBody 타입을 MockUser로 변경하고 import에서 변경해서 사용하는 것 같은데, 이런 방식을 택한 이유가 있을까요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this 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>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 코드가 어떤 역할을 하는지 알려주실 수 있나요?
app/mocks/db.mock.ts
Outdated
|
||
interface MockDatabaseState { | ||
takenLectures: TakenLectures; | ||
resultCategoryDetailInfo: ResultCategoryDetailResponse; | ||
resultUserInfo: ResultUserInfo; | ||
credits: CreditResponse[]; | ||
users: MockUser[]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SignUpRequestBody
변경
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 ? ( |
There was a problem hiding this comment.
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 ? ( |
There was a problem hiding this comment.
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
📌 작업 내용
getUser의 제거
getUser: (authId: string) => MockUser | undefined;
기존 getUserInfo의 제거
기존 getAuth와 getUserInfo에서 사용되고 있는 getUserInfo는
isSumbitted
속성명이 내려오지 않고, 기존에 내려주는/users
의 다른 속성을 통해서(백엔드에서 null로 전달) user의role
('guest' | 'user' | 'init')
를 결정하기로 했기때문에 제거가 요구됩니다getResultUserInfo → fetchUserInfo 네이밍 변경
상단 스키마를 반환하는 getResultUserInfo의 네이밍을 fetchUserInfo로 변경을 진행했습니다.
getUserInfo의 type