[FEAT] 워크스페이스 API 구현 및 연동#113
Conversation
| if (isPending) return; // 중복 요청 방지 | ||
| if (workspaceUrl) return; // 이미 URL 있으면 재요청 막기 |
There was a problem hiding this comment.
useMutation의 isPending을 이용해서 중복 요청을 방지하는 거 좋은 것 같아요~!
There was a problem hiding this comment.
오 저도 해당 방식 공통적으로 적용하여 처리하면 좋을 것 같아요 👍
| // 워크스페이스 생성 | ||
| export interface CreateWorkspaceRequest { | ||
| workspaceName: string; | ||
| } | ||
|
|
||
| export type CreateWorkspaceResponse = CommonResponse<{ | ||
| workspaceId: number; | ||
| workspaceName: string; | ||
| workspaceUrl: string; | ||
| inviteUrl: string; | ||
| invitePassWord: string; | ||
| defaultTeamId: number; | ||
| }>; | ||
|
|
||
| // 워크스페이스 URL 생성 | ||
| export interface CreateWorkspaceUrlRequest { | ||
| workspaceName: string; | ||
| } | ||
|
|
||
| export type CreateWorkspaceUrlResponse = CommonResponse<{ | ||
| workspaceUrl: string; | ||
| }>; | ||
|
|
||
| // 워크스페이스 참여 | ||
| export interface JoinWorkspaceRequest { | ||
| token: string; | ||
| password: string; | ||
| } | ||
|
|
||
| export type JoinWorkspaceResponse = CommonResponse<{ | ||
| workspaceId: number; | ||
| joinedAt: string; | ||
| } | null>; |
There was a problem hiding this comment.
P2: 타입 관련 제안드립니다!
-
현재 interface와 type이 혼용되어 있는데, 혹시 기준이 있다면 공유 부탁드리고,
없다면 일관성을 맞춰보는 것도 좋을 것 같습니다 -
또한
workspaceName: string같은 속성이 여러 타입에 반복적으로 정의되어 있는데,
공통 타입으로 추출하면 유지보수에 더 좋을 것 같아 제안드려요!
There was a problem hiding this comment.
저는 보통 CommonResponse처럼 유틸리티 타입과 조합해서 사용하는 경우에는 type을 사용하고, 단순히 객체의 구조를 정의할 때는 interface 를 사용합니다. 응답 타입은 대부분 고정된 구조라 type이 더 간결하고, 요청 타입은 확장 가능성이 있어 interface로 작성하는 편입니다. 물론 더 좋은 방식이 있다면 언제든 함께 논의하고 수정할 수 있습니다 :)
두 번째로 말씀해주신 부분은 리팩토링 시 수정하겠습니다! 좋은 의견 감사합니다 🤩
There was a problem hiding this comment.
오~ 처음 안 사실이에요! interface는 전역 타입 확장이나 선언 병합이 가능해서, 변동 가능성이 높은 요청의 타입으로 사용하기 좋군요! 저는 둘의 차이점을 몰랐어서 type으로만 사용했는데, 유민님처럼 사용하면 더 확장성 뛰어난 코드를 작성할 수 있을 것 같네요 알려주셔서 감사합니다 👍✨
HiJuwon
left a comment
HiJuwon
left a comment
There was a problem hiding this comment.
넵 확인했습니다. '구글로 계속하기' 누를 경우 리다이렉트되는 주소 부분에 대해서만 추후 대응해주시면 좋을 것 같습니다~~!!
| return; | ||
| } | ||
|
|
||
| // 백엔드로 중복 체크 및 URL 생성 요청 |
There was a problem hiding this comment.
그럼 다음을 눌러야 중복 확인이 되는 구조 맞을까요??
There was a problem hiding this comment.
중복 확인은 벡엔드 측에서 하는 것으로 알고 있습니다! 따라서 다른 사용자가 같은 이름으로 요청을 보내면 중복되는 워크스페이스 URL이 존재하게 되므로 벡엔드측에서는 뒤의 숫자 suffix를 자동으로 붙이는 형태로 작업하셨습니다.
sunhwa 입력했는데 이미 존재할 경우 -> sunhwa-1 이런 식으로요!
4 participants
체크리스트
📌 관련 이슈번호
✅ Key Changes
apis/workspace폴더 속에 useMutation을 적용하여 hook화 해두었습니다.📸 스크린샷 or 실행영상
프론트에서 워크스페이스 이름 유효성 검사 함수를 실행하여 에러가 발생하면 요청을 보내지 않습니다.
create-url.mp4
벡엔드에서 유효성 검사를 거쳐 slug가 생성된 뒤, 이를 포함한 workspaceUrl이 반환됩니다. 이때 사용자가 체크 버튼을 여러 번 누르더라도 중복 요청이 가지 않습니다.
(
YU MIN으로 입력했을 때 벡엔드 변환을 거치면yu-min이라는 slug가 생성됩니다. 이 부분은 노션의 정책집에 자세히 적혀 있으니 참고하시면 됩니다.)create-url.mp4
저는 현재 최초 로그인 상태가 아니므로 벡엔드 측에서 리다이렉트 설정해두신 경로로 이동합니다.
google.mp4
💬 To Reviewers
로컬에서 /onboarding 경로에서 구글로 계속하기 버튼을 누르실 경우 정상적으로 구글 계정을 선택하실 수 있을겁니다. 그러나 리다이렉트 주소는 현재 vercel 경로로 되어있다는 점 유의해주세요./oauth2/authorization/google/google이지만 추후/oauth2/authorization/google로 변경하신다고 합니다.