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

frontend/src/@types/profile.ts

@@ -1,4 +1,4 @@
-interface ProfileData {
+export interface ProfileData {
   profileImage: string;
   nickname: string;
   receivedReviewCount: number;

frontend/src/@types/roomInfo.ts

@@ -1,3 +1,4 @@
+// 공통 타입 정의
 export type Classification = "ALL" | "FRONTEND" | "BACKEND" | "ANDROID";
 
 export type RoomStatus = "OPEN" | "CLOSE" | "PROGRESS" | "FAIL";
@@ -9,28 +10,21 @@ export type ParticipationStatus =
   | "MANAGER"
   | "PULL_REQUEST_NOT_SUBMITTED";
 
-export type Role = "BOTH" | "REVIEWER" | "REVIEWEE" | "NONE";
+export type MemberRole = "BOTH" | "REVIEWER" | "REVIEWEE" | "NONE";
 
-interface BaseRoomInfo {
+// 통합된 roomInfo
+export interface BaseRoomInfo {
   title: string;
   content: string;
-  repositoryLink: string;
   thumbnailLink: string;
   matchingSize: number;
   keywords: string[];
   limitedParticipants: number;
-  classification: Classification;
-  isPublic: boolean;
-}
-export interface CreateRoomInfo extends BaseRoomInfo {
-  recruitmentDeadline: Date;
-  reviewDeadline: Date;
-}
-
-export interface SubmitRoomInfo extends BaseRoomInfo {
-  roomId?: number;
   recruitmentDeadline: string;
   reviewDeadline: string;
+  repositoryLink: string;
+  classification: Classification;
+  isPublic: boolean;
 }
 
 export interface RoomInfo extends BaseRoomInfo {
@@ -40,12 +34,76 @@ export interface RoomInfo extends BaseRoomInfo {
   bothCount: number;
   roomStatus: RoomStatus;
   participationStatus: ParticipationStatus;
-  memberRole: Role;
+  message: string;
+  memberRole: MemberRole;
+}
+
+export interface CreateRoomInfo extends BaseRoomInfo {
+  roomId?: number;
+  managerMemberRole?: MemberRole;
+  managerMatchingSize?: number;
+}
+
+// 요청(Request) 구조
+export interface RoomInfoRequest {
+  title: string;
+  content: string;
+  thumbnailLink: string;
+  matchingSize: number;
+  keywords: string[];
+  limitedParticipants: number;
+}
+
+export interface DeadlineRequest {
   recruitmentDeadline: string;
   reviewDeadline: string;
+}
+
+export interface RepositoryRequest {
+  repositoryLink: string;
+  classification: Classification;
+  isPublic: boolean;
+}
+
+export interface ManagerParticipationRequest {
+  memberRole?: MemberRole;
+  matchingSize?: number;
+}
+
+export interface RoomCreateRequest {
+  roomInfoRequest: RoomInfoRequest;
+  deadlineRequest: DeadlineRequest;
+  repositoryRequest: RepositoryRequest;
+  managerParticipationRequest: ManagerParticipationRequest;
+}
+
+// 응답(Response) 구조
+export interface RoomInfoResponse extends RoomInfoRequest {
+  roomId: number;
+  manager: string;
+  roomStatus: RoomStatus;
+  reviewerCount: number;
+  bothCount: number;
   message: string;
 }
 
+export interface DeadlineResponse extends DeadlineRequest {}
+
+export interface RepositoryResponse extends RepositoryRequest {}
+
+export interface ParticipationResponse {
+  participationStatus: ParticipationStatus;
+  memberRole: MemberRole;
+  matchingSize: number;
+}
+
+export interface RoomDetailResponse {
+  roomInfoResponse: RoomInfoResponse;
+  deadlineResponse: DeadlineResponse;
+  repositoryResponse: RepositoryResponse;
+  participationResponse: ParticipationResponse;
+}
+
 export interface RoomListInfo {
   rooms: RoomInfo[];
   isLastPage: boolean;

frontend/src/apis/profile.api.ts

@@ -1,3 +1,4 @@
+import { ProfileData } from "@/@types/profile";
 import apiClient from "@/apis/apiClient";
 import { API_ENDPOINTS } from "@/apis/endpoints";
 import MESSAGES from "@/constants/message";

frontend/src/apis/rooms.api.ts

@@ -3,11 +3,13 @@ import { API_ENDPOINTS } from "./endpoints";
 import { ParticipantListInfo } from "@/@types/participantList";
 import {
   Classification,
-  Role,
+  CreateRoomInfo,
+  MemberRole,
+  RoomCreateRequest,
+  RoomDetailResponse,
   RoomInfo,
   RoomListInfo,
   RoomStatus,
-  SubmitRoomInfo,
 } from "@/@types/roomInfo";
 import MESSAGES from "@/constants/message";
 
@@ -80,15 +82,15 @@ export const getRoomDetailInfo = async (id: number): Promise<RoomInfo> => {
   return res;
 };
 
-export const postCreateRoom = async (roomData: SubmitRoomInfo): Promise<void> => {
+export const postCreateRoom = async (roomData: RoomCreateRequest): Promise<RoomDetailResponse> => {
   return apiClient.post({
     endpoint: API_ENDPOINTS.ROOMS,
     body: roomData,
     errorMessage: MESSAGES.ERROR.POST_CREATE_ROOM,
   });
 };
 
-export const putEditRoom = async (roomData: SubmitRoomInfo): Promise<void> => {
+export const putEditRoom = async (roomData: CreateRoomInfo): Promise<void> => {
   return apiClient.put({
     endpoint: API_ENDPOINTS.ROOMS,
     body: roomData,
@@ -98,7 +100,7 @@ export const putEditRoom = async (roomData: SubmitRoomInfo): Promise<void> => {
 
 export const postParticipateIn = async (
   roomId: number,
-  role: Role,
+  role: MemberRole,
   matchingSize: number,
 ): Promise<void> => {
   return apiClient.post({

frontend/src/components/common/modal/Modal.tsx

@@ -9,8 +9,6 @@ const portalElement = document.getElementById("modal") as HTMLElement;
 export interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onConfirm?: () => void;
-  onCancel?: () => void;
   hasCloseButton?: boolean;
   style?: CSSProperties;
   children?: ReactNode;

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

@@ -2,19 +2,22 @@ import Modal, { ModalProps } from "../Modal";
 import Button from "@/components/common/button/Button";
 import * as S from "@/components/common/modal/confirmModal/ConfirmModal.style";
 
-type AlertModalProps = Omit<ModalProps, "onCancel" | "onConfirm">;
+interface AlertModalProps extends ModalProps {
+  onConfirm: () => void;
+  confirmButtonText?: string;
+}
 
 const AlertCustomStyle = {
   height: "fit-content",
 };
 
-const AlertModal = ({ ...rest }: AlertModalProps) => {
+const AlertModal = ({ confirmButtonText = "확인", ...rest }: AlertModalProps) => {
   return (
     <Modal style={AlertCustomStyle} {...rest}>
       <S.ConfirmModalContainer>{rest.children}</S.ConfirmModalContainer>
       <S.ButtonWrapper>
-        <Button size="small" onClick={rest.onClose}>
-          확인
+        <Button size="small" onClick={rest.onConfirm}>
+          {confirmButtonText}
         </Button>
       </S.ButtonWrapper>
     </Modal>

frontend/src/components/common/modal/confirmModal/ConfirmModal.tsx

@@ -7,6 +7,8 @@ const ConfirmCustomStyle = {
 };
 
 interface ConfirmModalProps extends ModalProps {
+  onConfirm: () => void;
+  onCancel: () => void;
   confirmButtonText?: string;
   cancelButtonText?: string;
 }

frontend/src/components/profile/profileCard/ProfileCard.tsx

@@ -1,6 +1,7 @@
 import Icon from "@/components/common/icon/Icon";
 import Profile from "@/components/common/profile/Profile";
 import * as S from "@/components/profile/profileCard/ProfileCard.style";
+import { ProfileData } from "@/@types/profile";
 import { HoverStyledLink } from "@/styles/common";
 
 const ProfileCard = (profileData: ProfileData) => {

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}>
                     <S.DropdownItem
-                      key={item.name}
                       onClick={() => handleDropdownItemClick(item.action)}
                       tabIndex={0}
                       onKeyDown={(e) => {
@@ -98,7 +97,7 @@ const ControlButton = ({ roomInfo, participationStatus }: ControlButtonProps) =>
                       {item.name}
                     </S.DropdownItem>
                     {index < dropdownItems.length - 1 && <S.Divider />}
-                  </>
+                  </React.Fragment>
                 ))}
               </S.DropdownItemWrapper>
             </FocusTrap>

frontend/src/components/roomForm/RoomFormLayout.style.ts

@@ -24,6 +24,17 @@ export const SectionTitle = styled.h1`
   color: ${({ theme }) => theme.COLOR.grey4};
 `;
 
+export const SubSectionTitle = styled.h1`
+  display: flex;
+  gap: 1rem;
+  align-items: flex-end;
+
+  width: 100%;
+
+  font: ${({ theme }) => theme.TEXT.medium_bold};
+  color: ${({ theme }) => theme.COLOR.grey4};
+`;
+
 export const HelpText = styled.p`
   font: ${({ theme }) => theme.TEXT.xSmall};
   color: ${({ theme }) => theme.COLOR.grey3};
@@ -53,7 +64,7 @@ export const RowContainer = styled.div`
 `;
 
 export const ContentLabel = styled.span`
-  font: ${({ theme }) => theme.TEXT.medium_bold};
+  font: ${({ theme }) => theme.TEXT.small_bold};
 `;
 
 export const RequiredLabel = styled.span`
@@ -77,6 +88,21 @@ export const ContentWrapper = styled.div`
   padding: 1rem 0;
 `;
 
+export const ContentRadioWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: flex-start;
+
+  padding: 1rem 0;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+`;
+
 export const ContentRadioInput = styled.input`
   display: none;
 `;