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.

Sign up for GitHub

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

Jump to bottom

[FE] 방 생성 때 방장도 참여 정할수 있게 변경 & 데이터 타입 변경(#798) #799

Merged
merged 12 commits into from
Dec 9, 2024
Merged

[FE] 방 생성 때 방장도 참여 정할수 있게 변경 & 데이터 타입 변경(#798) #799

merged 12 commits into from
Dec 9, 2024

Conversation

github-actions[bot]
Copy link
Contributor

@github-actions github-actions bot commented Dec 6, 2024 •
edited by chlwlstlf
Loading

📓 스토리북 링크

바로가기

📌 관련 이슈

✨ PR 세부 내용

설명

  • 방 생성할 때 요청 데이터, 생성 후 서버의 응답 데이터만 새로운 dto로 바꼈고 기존의 응답/요청 데이터는 레거시 코드가 되어 점차 리팩토링할 예정이라고 합니다.
  • 바뀐 이유는 방을 생성할 때 방장 정보도 입력해야 하는데 방 정보와 방장 정보가 depth없이 한 번에 입력되어 혼란을 야기할 수 있다는 점 때문이었습니다.

데이터 형태

요청 데이터

export interface RoomCreateRequest {
  roomInfoRequest: RoomInfoRequest;
  deadlineRequest: DeadlineRequest;
  repositoryRequest: RepositoryRequest;
  managerParticipationRequest: ManagerParticipationRequest;
}

응답 데이터

export interface RoomDetailResponse {
  roomInfoResponse: RoomInfoResponse;
  deadlineResponse: DeadlineResponse;
  repositoryResponse: RepositoryResponse;
  participationResponse: ParticipationResponse;
}

논의할 점

image

나의 정보(= 방장 정보)를 이렇게 입력할 수 있게 하였는데 더 추가하거나 아니면 변경했으면 좋겠는 부분 알려주세요!! 적극적으로 반영하겠습니다😊

@github-actions github-actions bot added the FE 프론트 개발 관련 작업 label Dec 6, 2024
@chlwlstlf chlwlstlf self-assigned this Dec 8, 2024
@github-actions github-actions bot requested review from 00kang and pp449 December 8, 2024 05:50
pp449
pp449 approved these changes Dec 8, 2024
View reviewed changes
Copy link
Contributor

@pp449 pp449 left a comment

Choose a reason for hiding this comment

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

리뷰어, 리뷰이로 둘 다 참여 등 직관적인 텍스트를 이용하여 정보를 제공해주는게 이전의 공개 여부 보다는 훨씬 좋은거 같아요!

참여 역할이 본인한테만 적용인지 방 전체에 대한 적용인지 조금 헷갈릴수도 있을것 같다는 생각이 들기는 했는데 우선은 이렇게 적용을 해보고 나중에 에로사항이 있으면 수정해봐도 좋을거 같네요~~

frontend/src/components/roomDetailPage/controlButton/ControlButton.tsx
@@ -86,9 +86,8 @@ const ControlButton = ({ roomInfo, participationStatus }: ControlButtonProps) =>
<FocusTrap onEscapeFocusTrap={() => handleToggleDropdown()}>
<S.DropdownItemWrapper>
{dropdownItems.map((item: DropdownItem, index) => (
<>
<React.Fragment key={item.name}>
Copy link
Contributor

Choose a reason for hiding this comment

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

key 를 상위에서 선언해주도록 바꿔준거 좋네요 👍

Copy link
Contributor

Choose a reason for hiding this comment

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

콘솔에 에러 뜨고 있더라구요 ...ㅎ 바로 바꿨습니다😄

frontend/src/utils/roomMapper.ts
import { CreateRoomInfo, RoomCreateRequest, RoomDetailResponse, RoomInfo } from "@/@types/roomInfo";

// RoomDetailResponse를 RoomInfo로 변환
export const mapRoomDetailResponseToRoomInfo = (response: RoomDetailResponse): RoomInfo => ({
Copy link
Contributor

Choose a reason for hiding this comment

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

서버에 응답받은 객체값을 평탄화시킨 이유가 있나요 ??

Copy link
Contributor

Choose a reason for hiding this comment

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

생성은 RoomDetailResponse 타입이고 수정은 여전히 RoomInfo 였습니다. 생성과 수정에서 handleInputChange를 재사용하고 싶어서 매핑하였습니다.

수정의 타입도 RoomDetailResponse로 바뀌면 매핑 함수를 없애는 방향도 생각해보려고 합니당😊

00kang
00kang approved these changes Dec 9, 2024
View reviewed changes
Copy link
Member

@00kang 00kang left a comment

Choose a reason for hiding this comment

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

바뀐 데이터 구조에 맞게 작업하느라고 수고하셨어요~
이제 진짜 방 생성 기능을 오픈한다고 하니 기대되네요 :) 수고하셨어요~

frontend/src/@types/roomInfo.ts Outdated
Comment on lines 47 to 48
// 요청(Request) 구조
export interface RoomInfoRequest {
Copy link
Member

Choose a reason for hiding this comment

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

타입 정의할 때 ~Request, ~Response 이렇게 정의하니 더 명확해지고 좋네요~
그래서 주석은 굳이 없어도 될 것 같아요!

frontend/src/components/common/modal/alertModal/AlertModal.tsx

const AlertCustomStyle = {
height: "fit-content",
};

const AlertModal = ({ ...rest }: AlertModalProps) => {
const AlertModal = ({ confirmButtonText = "확인", ...rest }: AlertModalProps) => {
Copy link
Member

Choose a reason for hiding this comment

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

ConfirmModal과의 통일성을 위해서 작업한 것 같은데 꼼꼼하게 해주셨네요 👍

frontend/src/components/roomForm/RoomFormLayout.tsx Outdated
원하는 상호 리뷰 인원 <S.RequiredLabel>*</S.RequiredLabel>
</S.ContentLabel>
<S.HelpText>
리뷰할 사람 수는 자신의 학습 목표나 시간 여유에 맞춰 선택하세요.
Copy link
Member

Choose a reason for hiding this comment

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

create 페이지 내의 정보가 많아져서 이런 설명 부분은 상수처리해도 좋을 것 같아요~

Copy link
Contributor

Choose a reason for hiding this comment

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

HELP_MESSAGES 객체 만들어서 분리했습니다! 양이 엄청 많네요😮 이 객체도 앞으로 잘 사용할 수 있을 것 같아요ㅎㅎㅎㅎ

@00kang
Copy link
Member

00kang commented Dec 9, 2024

반영해주셔서 감사해요~ 머지하겠습니당

@00kang 00kang merged commit c50b9f5 into develop Dec 9, 2024
2 checks passed
@00kang 00kang deleted the feat/#798 branch December 9, 2024 01:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chlwlstlf chlwlstlf chlwlstlf left review comments

@pp449 pp449 pp449 approved these changes

@00kang 00kang 00kang approved these changes

Assignees

@chlwlstlf chlwlstlf

Labels
FE 프론트 개발 관련 작업
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[FE] 방 생성 때 방장도 참여 정할수 있게 변경 & 데이터 타입 변경
3 participants
@00kang @chlwlstlf @pp449