From 4239c2f20b002af80d3a3010b511798dae667aa8 Mon Sep 17 00:00:00 2001 From: Lee sang Yeop Date: Tue, 12 Nov 2024 00:00:05 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=EB=B0=A9=EC=9D=B4=20=EB=AA=A8?= =?UTF-8?q?=EC=A7=91=EC=A4=91=EC=9D=B8=20=EC=83=81=ED=83=9C=EC=97=90?= =?UTF-8?q?=EC=84=9C=EB=A7=8C=20=EC=95=8C=EB=A6=BC=EC=B0=BD=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=9D=B4=20=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/shared/roomCard/RoomCard.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/shared/roomCard/RoomCard.tsx b/frontend/src/components/shared/roomCard/RoomCard.tsx index f4e09888..1fdfd7e8 100644 --- a/frontend/src/components/shared/roomCard/RoomCard.tsx +++ b/frontend/src/components/shared/roomCard/RoomCard.tsx @@ -95,7 +95,9 @@ const RoomCard = React.memo(({ roomInfo }: RoomCardProps) => { - + From 9437d96a6f73041d63f4308aa8f317d30bce2ff4 Mon Sep 17 00:00:00 2001 From: Lee sang Yeop Date: Tue, 12 Nov 2024 00:08:21 +0900 Subject: [PATCH 2/5] =?UTF-8?q?chore:=20convertedDayToKorean=20=EC=98=A4?= =?UTF-8?q?=ED=83=80=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/shared/roomCard/RoomCard.tsx | 6 +++--- frontend/src/utils/convertToKorean.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/shared/roomCard/RoomCard.tsx b/frontend/src/components/shared/roomCard/RoomCard.tsx index 1fdfd7e8..9f6f3c8b 100644 --- a/frontend/src/components/shared/roomCard/RoomCard.tsx +++ b/frontend/src/components/shared/roomCard/RoomCard.tsx @@ -12,7 +12,7 @@ import { RoomInfo } from "@/@types/roomInfo"; import { MAX_KEYWORDS } from "@/constants/room"; import { HoverStyledLink } from "@/styles/common"; import { theme } from "@/styles/theme"; -import { convertdDayToKorean } from "@/utils/convertToKorean"; +import { convertedDayToKorean } from "@/utils/convertToKorean"; import { convertDateToKorean, formatDday, formatLeftTime } from "@/utils/dateFormatter"; const DisplayLeftTime = (roomInfo: RoomInfo) => { @@ -25,7 +25,7 @@ const DisplayLeftTime = (roomInfo: RoomInfo) => { {dDay !== "종료됨" && "모집 마감"} {dDay === "D-Day" ? leftTime : dDay} - {dDay === "D-Day" ? convertDateToKorean(leftTime) : convertdDayToKorean(dDay)} + {dDay === "D-Day" ? convertDateToKorean(leftTime) : convertedDayToKorean(dDay)} ); @@ -40,7 +40,7 @@ const DisplayLeftTime = (roomInfo: RoomInfo) => { {dDay !== "종료됨" && "리뷰 마감"} {dDay === "D-Day" ? leftTime : dDay} - {dDay === "D-Day" ? convertDateToKorean(leftTime) : convertdDayToKorean(dDay)} + {dDay === "D-Day" ? convertDateToKorean(leftTime) : convertedDayToKorean(dDay)} ); diff --git a/frontend/src/utils/convertToKorean.ts b/frontend/src/utils/convertToKorean.ts index 11701b63..0b8ab449 100644 --- a/frontend/src/utils/convertToKorean.ts +++ b/frontend/src/utils/convertToKorean.ts @@ -13,7 +13,7 @@ export const convertClassificationToKorean = (text: Classification) => { } }; -export const convertdDayToKorean = (dDay: string) => { +export const convertedDayToKorean = (dDay: string) => { const leftDay = dDay.split("-")[1]; return `${leftDay}일 전`; From 16186b33d3b434cfd1eb2f7fe5943f1149953550 Mon Sep 17 00:00:00 2001 From: Lee sang Yeop Date: Tue, 12 Nov 2024 02:18:58 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20roomInfo=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=EC=97=90=20isPrivate=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/@types/roomInfo.ts | 1 + .../roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx | 1 + frontend/src/components/shared/roomCard/RoomCard.stories.tsx | 1 + frontend/src/components/shared/roomCard/RoomCard.test.tsx | 1 + frontend/src/components/shared/roomCard/RoomCard.tsx | 4 +++- .../components/shared/roomCardModal/RoomCardModal.stories.tsx | 1 + frontend/src/components/shared/roomList/RoomList.stories.tsx | 1 + 7 files changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/src/@types/roomInfo.ts b/frontend/src/@types/roomInfo.ts index fbb8a805..429fbbe4 100644 --- a/frontend/src/@types/roomInfo.ts +++ b/frontend/src/@types/roomInfo.ts @@ -20,6 +20,7 @@ interface BaseRoomInfo { keywords: string[]; limitedParticipants: number; classification: Classification; + isPrivate: boolean; } export interface CreateRoomInfo extends BaseRoomInfo { recruitmentDeadline: Date; diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx index 86c9bd76..2a88cb1c 100644 --- a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx +++ b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx @@ -25,6 +25,7 @@ const mockBaseRoomInfo: RoomInfo = { recruitmentDeadline: "2024-10-05T10:30:00+09:00", reviewDeadline: "2024-10-08T10:30:00+09:00", message: "테스트 메세지", + isPrivate: false, }; describe("RoomInfoCard 컴포넌트 테스트", () => { diff --git a/frontend/src/components/shared/roomCard/RoomCard.stories.tsx b/frontend/src/components/shared/roomCard/RoomCard.stories.tsx index b046bbae..2f9b09a5 100644 --- a/frontend/src/components/shared/roomCard/RoomCard.stories.tsx +++ b/frontend/src/components/shared/roomCard/RoomCard.stories.tsx @@ -13,6 +13,7 @@ const sampleRoomList = { | "PULL_REQUEST_NOT_SUBMITTED", memberRole: roomInfo.memberRole as "BOTH" | "REVIEWER" | "REVIEWEE" | "NONE", classification: roomInfo.classification as "ALL" | "FRONTEND" | "BACKEND" | "ANDROID", + isPrivate: false, } satisfies RoomInfo; const meta = { diff --git a/frontend/src/components/shared/roomCard/RoomCard.test.tsx b/frontend/src/components/shared/roomCard/RoomCard.test.tsx index 36b255be..a3f624b2 100644 --- a/frontend/src/components/shared/roomCard/RoomCard.test.tsx +++ b/frontend/src/components/shared/roomCard/RoomCard.test.tsx @@ -24,6 +24,7 @@ const mockBaseRoomInfo: RoomInfo = { recruitmentDeadline: "2024-10-05T10:30:00+09:00", reviewDeadline: "2024-10-08T10:30:00+09:00", message: "테스트 메세지", + isPrivate: false, }; describe("RoomCard 컴포넌트 날짜 테스트", () => { diff --git a/frontend/src/components/shared/roomCard/RoomCard.tsx b/frontend/src/components/shared/roomCard/RoomCard.tsx index 9f6f3c8b..3c99fd54 100644 --- a/frontend/src/components/shared/roomCard/RoomCard.tsx +++ b/frontend/src/components/shared/roomCard/RoomCard.tsx @@ -96,7 +96,9 @@ const RoomCard = React.memo(({ roomInfo }: RoomCardProps) => { diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModal.stories.tsx b/frontend/src/components/shared/roomCardModal/RoomCardModal.stories.tsx index 222d9a88..3f281f8c 100644 --- a/frontend/src/components/shared/roomCardModal/RoomCardModal.stories.tsx +++ b/frontend/src/components/shared/roomCardModal/RoomCardModal.stories.tsx @@ -13,6 +13,7 @@ const sampleRoomList = { | "PULL_REQUEST_NOT_SUBMITTED", memberRole: roomInfo.memberRole as "BOTH" | "REVIEWER" | "REVIEWEE" | "NONE", classification: roomInfo.classification as "ALL" | "FRONTEND" | "BACKEND" | "ANDROID", + isPrivate: false, } satisfies RoomInfo; const meta: Meta = { diff --git a/frontend/src/components/shared/roomList/RoomList.stories.tsx b/frontend/src/components/shared/roomList/RoomList.stories.tsx index fd2be15c..c41b7d7c 100644 --- a/frontend/src/components/shared/roomList/RoomList.stories.tsx +++ b/frontend/src/components/shared/roomList/RoomList.stories.tsx @@ -14,6 +14,7 @@ const sampleRoomList = roomInfos.rooms.map((roomInfo) => ({ memberRole: roomInfo.memberRole as "BOTH" | "REVIEWER" | "REVIEWEE" | "NONE", classification: roomInfo.classification as "ALL" | "FRONTEND" | "BACKEND" | "ANDROID", + isPrivate: false, })) satisfies RoomInfo[]; const meta = { From 1cc94c717330a57d64a249b3cd326e33f45c7c7f Mon Sep 17 00:00:00 2001 From: Lee sang Yeop Date: Tue, 12 Nov 2024 02:19:28 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EB=B0=A9=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EC=8B=9C=20private=20=EC=A3=BC=EC=86=8C=EC=9D=B8=EC=A7=80=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../roomForm/RoomFormLayout.style.ts | 65 +++++++++++++++++++ .../components/roomForm/RoomFormLayout.tsx | 25 +++++++ 2 files changed, 90 insertions(+) diff --git a/frontend/src/components/roomForm/RoomFormLayout.style.ts b/frontend/src/components/roomForm/RoomFormLayout.style.ts index 95102184..5045bd0d 100644 --- a/frontend/src/components/roomForm/RoomFormLayout.style.ts +++ b/frontend/src/components/roomForm/RoomFormLayout.style.ts @@ -46,3 +46,68 @@ export const ContentInput = styled.div` gap: 1rem; width: 100%; `; + +export const ContentWrapper = styled.div` + display: flex; + flex-direction: row; + gap: 1rem; + align-items: center; + + font: ${({ theme }) => theme.TEXT.medium}; +`; + +export const ContentRadioInput = styled.input` + display: none; /* 기본 라디오 버튼은 숨김 */ +`; + +export const RadioLabel = styled.label` + cursor: pointer; + + position: relative; + + padding-left: 2.5rem; + + font-size: 1rem; + color: ${({ theme }) => theme.COLOR.grey2}; + + /* 라디오 버튼 원 모양 스타일링 */ + &::before { + content: ""; + + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + + width: 1.5rem; + height: 1.5rem; + + background-color: ${({ theme }) => theme.COLOR.white}; + border: 2px solid ${({ theme }) => theme.COLOR.grey3}; + border-radius: 50%; + + transition: 0.2s all ease-in-out; + } + + /* 선택된 상태에서 스타일링 */ + input:checked + &::before { + background-color: ${({ theme }) => theme.COLOR.primary2}; + border-color: ${({ theme }) => theme.COLOR.primary2}; + } + + /* 체크된 상태에서 원 안의 점 */ + input:checked + &::after { + content: ""; + + position: absolute; + top: 50%; + left: 0.6rem; + transform: translateY(-50%); + + width: 0.75rem; + height: 0.75rem; + + background-color: ${({ theme }) => theme.COLOR.white}; + border-radius: 50%; + } +`; diff --git a/frontend/src/components/roomForm/RoomFormLayout.tsx b/frontend/src/components/roomForm/RoomFormLayout.tsx index 1f0b1a55..a29fa1dc 100644 --- a/frontend/src/components/roomForm/RoomFormLayout.tsx +++ b/frontend/src/components/roomForm/RoomFormLayout.tsx @@ -37,6 +37,7 @@ const getInitialFormState = (data?: RoomInfo): CreateRoomInfo => ({ recruitmentDeadline: data ? new Date(data.recruitmentDeadline) : new Date(), reviewDeadline: data ? new Date(data.reviewDeadline) : new Date(), classification: data?.classification || "ALL", + isPrivate: false, }); const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => { @@ -237,6 +238,30 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => { + + 방 공개 여부 + + handleInputChange("isPrivate", true)} + /> + 예 + + + handleInputChange("isPrivate", false)} + /> + 아니요 + + +