[FE] 모집중 이외의 방 클릭시에도 방 참여 알림이 보여지는 문제 해결(#754) (#755)

woowacourse-teams · Nov 13, 2024 · 1eed2aa · 1eed2aa
2 parents 722a6dd + 7ab28c0
commit 1eed2aa
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 5 deletions.
diff --git 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
@@ -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/roomForm/RoomFormLayout.style.ts b/frontend/src/components/roomForm/RoomFormLayout.style.ts
@@ -46,3 +46,66 @@ 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
@@ -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) => {
           </S.ContentInput>
         </S.RowContainer>
 
+        <S.RowContainer>
+          <S.ContentLabel>방 공개 여부</S.ContentLabel>
+          <S.ContentWrapper>
+            <S.ContentRadioInput
+              type="radio"
+              id="yes"
+              name="isPrivate"
+              checked={formState.isPrivate}
+              onChange={() => handleInputChange("isPrivate", true)}
+            />
+            <S.RadioLabel htmlFor="yes">예</S.RadioLabel>
+          </S.ContentWrapper>
+          <S.ContentWrapper>
+            <S.ContentRadioInput
+              type="radio"
+              id="no"
+              name="isPrivate"
+              checked={!formState.isPrivate}
+              onChange={() => handleInputChange("isPrivate", false)}
+            />
+            <S.RadioLabel htmlFor="no">아니요</S.RadioLabel>
+          </S.ContentWrapper>
+        </S.RowContainer>
+
         <Button
           onClick={() => {
             if (isFormValid) handleOpenModal();

diff --git 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
@@ -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
@@ -11,7 +11,7 @@ import RoomCardModal from "@/components/shared/roomCardModal/RoomCardModal";
 import { RoomInfo } from "@/@types/roomInfo";
 import { MAX_KEYWORDS } from "@/constants/room";
 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) => {
@@ -24,7 +24,7 @@ const DisplayLeftTime = (roomInfo: RoomInfo) => {
         {dDay !== "종료됨" && "모집 마감"}
         <S.StyledDday aria-hidden>{dDay === "D-Day" ? leftTime : dDay}</S.StyledDday>
         <S.ScreenReader>
-          {dDay === "D-Day" ? convertDateToKorean(leftTime) : convertdDayToKorean(dDay)}
+          {dDay === "D-Day" ? convertDateToKorean(leftTime) : convertedDayToKorean(dDay)}
         </S.ScreenReader>
       </>
     );
@@ -39,7 +39,7 @@ const DisplayLeftTime = (roomInfo: RoomInfo) => {
         {dDay !== "종료됨" && "리뷰 마감"}
         <S.StyledDday aria-hidden>{dDay === "D-Day" ? leftTime : dDay}</S.StyledDday>
         <S.ScreenReader>
-          {dDay === "D-Day" ? convertDateToKorean(leftTime) : convertdDayToKorean(dDay)}
+          {dDay === "D-Day" ? convertDateToKorean(leftTime) : convertedDayToKorean(dDay)}
         </S.ScreenReader>
       </>
     );
@@ -74,7 +74,11 @@ const RoomCard = React.memo(({ roomInfo }: RoomCardProps) => {
     <>
       <RoomCardModal isOpen={isModalOpen} onClose={handleCloseModal} roomInfo={roomInfo} />
 
-      <S.RoomCardContainer onClick={handleOpenModal}>
+      <S.RoomCardContainer
+        onClick={
+          roomInfo.roomStatus === "OPEN" && roomInfo.isPrivate ? handleNoticeModal : handleOpenModal
+        }
+      >
         <S.ClassificationBadgeWrapper>
           <ClassificationBadge text={roomInfo.classification} />
         </S.ClassificationBadgeWrapper>

diff --git 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<typeof RoomCardModal> = {

diff --git 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 = {

diff --git 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}일 전`;