[FE] 방 생성 QA 반영(#800)

frontend/src/components/common/timeDropdown/TimeDropdown.tsx

@@ -21,26 +21,41 @@ const TimePicker = ({
   time: Date;
   onTimeInputChange: (event: TimeDropdownChangeProps) => void;
 }) => {
-  const hourRef = useRef<HTMLButtonElement | null>(null);
-  const minuteRef = useRef<HTMLButtonElement | null>(null);
+  const hourContainerRef = useRef<HTMLDivElement | null>(null);
+  const minuteContainerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (hourRef.current) {
-      hourRef.current.scrollIntoView({ block: "start" });
+    const buttonHeight = 35;
+
+    if (hourContainerRef.current) {
+      const activeHourButton = hourContainerRef.current.querySelector(
+        `[data-hour="${time.getHours()}"]`,
+      ) as HTMLButtonElement | null;
+
+      if (activeHourButton) {
+        hourContainerRef.current.scrollTop = activeHourButton.offsetTop - buttonHeight / 2;
+      }
     }
-    if (minuteRef.current) {
-      minuteRef.current.scrollIntoView({ block: "start" });
+
+    if (minuteContainerRef.current) {
+      const activeMinuteButton = minuteContainerRef.current.querySelector(
+        `[data-minute="${time.getMinutes()}"]`,
+      ) as HTMLButtonElement | null;
+
+      if (activeMinuteButton) {
+        minuteContainerRef.current.scrollTop = activeMinuteButton.offsetTop - buttonHeight / 2;
+      }
     }
   }, [time]);
 
   return (
     <S.TimePickerWrapper>
-      <S.TimeSelector>
+      <S.TimeSelector ref={hourContainerRef}>
         {Array.from({ length: 24 }).map((_, hour) => (
           <S.TimeButton
             key={hour}
             isActive={hour === time.getHours()}
-            ref={hour === time.getHours() ? hourRef : null}
+            data-hour={hour}
             onClick={() => {
               const newTime = new Date(time);
               newTime.setHours(hour);
@@ -52,12 +67,12 @@ const TimePicker = ({
         ))}
       </S.TimeSelector>
 
-      <S.TimeSelector>
+      <S.TimeSelector ref={minuteContainerRef}>
         {Array.from({ length: 60 }).map((_, minute) => (
           <S.TimeButton
             key={minute}
             isActive={minute === time.getMinutes()}
-            ref={minute === time.getMinutes() ? minuteRef : null}
+            data-minute={minute}
             onClick={() => {
               const newTime = new Date(time);
               newTime.setMinutes(minute);

frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts

@@ -2,22 +2,10 @@ import styled from "styled-components";
 import { EllipsisText, VisuallyHidden } from "@/styles/common";
 import media from "@/styles/media";
 
-export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
+export const FeedbackCardContainer = styled.div`
   position: relative;
-
-  overflow-y: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 3rem;
-
   width: 40%;
   height: 700px;
-  padding: 1rem;
-
-  border: 3px solid
-    ${({ theme, $isTypeDevelop }) =>
-      $isTypeDevelop ? theme.COLOR.primary2 : theme.COLOR.secondary};
-  border-radius: 10px;
 
   ${media.medium`
     width: 100%;
@@ -29,33 +17,28 @@ export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
   `}
 `;
 
-export const Overlay = styled.div`
-  pointer-events: auto;
-
-  position: absolute;
-  top: 60px;
-  left: 0;
+export const FeedbackCardBox = styled.div<{ $isTypeDevelop: boolean }>`
+  position: relative;
 
+  overflow: hidden auto;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  gap: 3rem;
 
   width: 100%;
-  height: calc(100% - 60px);
-
-  background-color: rgb(255 255 255 / 50%);
-`;
+  height: 100%;
+  padding: 1rem;
 
-export const ButtonWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: center;
-  justify-content: center;
+  border: 3px solid
+    ${({ theme, $isTypeDevelop }) =>
+      $isTypeDevelop ? theme.COLOR.primary2 : theme.COLOR.secondary};
+  border-radius: 10px;
 
-  width: 100%;
+  -ms-overflow-style: none;
 
-  font: ${({ theme }) => theme.TEXT.large_bold};
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 export const FeedbackContent = styled.div<{ $isWrited: boolean }>`
@@ -83,8 +66,6 @@ export const FeedbackKeywordWrapper = styled.div`
   flex-wrap: wrap;
   gap: 1rem;
   align-content: flex-start;
-
-  height: 122px;
 `;
 
 export const FeedbackHeader = styled.div`
@@ -143,6 +124,7 @@ export const FeedbackDetailContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
+  margin-bottom: 70px;
 `;
 
 export const FeedbackDetail = styled.p`
@@ -156,3 +138,35 @@ export const FeedbackDetail = styled.p`
 export const ScreenReader = styled.div`
   ${VisuallyHidden}
 `;
+
+export const ButtonWrapper = styled.div`
+  position: absolute;
+  bottom: 20px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+
+  font: ${({ theme }) => theme.TEXT.large_bold};
+`;
+
+export const Overlay = styled.div`
+  pointer-events: auto;
+
+  position: absolute;
+  top: 60px;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: calc(100% - 60px);
+
+  background-color: rgb(255 255 255 / 50%);
+`;

frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx

@@ -56,10 +56,10 @@ const FeedbackCard = ({
   };
 
   return (
-    <>
+    <S.FeedbackCardContainer>
       <S.ScreenReader>미션의 상세 피드백 내용입니다.</S.ScreenReader>
 
-      <S.FeedbackCardContainer $isTypeDevelop={feedbackType === "develop"}>
+      <S.FeedbackCardBox $isTypeDevelop={feedbackType === "develop"}>
         <S.FeedbackHeader>
           <HoverStyledLink to={`/profile/${feedbackCardData.username}`} tabIndex={-1}>
             <S.FeedbackProfile>
@@ -114,18 +114,6 @@ const FeedbackCard = ({
               disabled
             />
           </S.FeedbackDetailContainer>
-
-          {selectedFeedbackType === "쓴 피드백" && (
-            <S.ButtonWrapper>
-              <Button
-                onClick={handleNavigateMyFeedbackPage}
-                variant={feedbackType === "develop" ? "primary" : "secondary"}
-                size="small"
-              >
-                수정하기
-              </Button>
-            </S.ButtonWrapper>
-          )}
         </S.FeedbackContent>
 
         {!feedbackCardData.isWrited && (
@@ -141,8 +129,20 @@ const FeedbackCard = ({
             </S.ButtonWrapper>
           </S.Overlay>
         )}
-      </S.FeedbackCardContainer>
-    </>
+      </S.FeedbackCardBox>
+
+      {selectedFeedbackType === "쓴 피드백" && (
+        <S.ButtonWrapper>
+          <Button
+            onClick={handleNavigateMyFeedbackPage}
+            variant={feedbackType === "develop" ? "primary" : "secondary"}
+            size="small"
+          >
+            수정하기
+          </Button>
+        </S.ButtonWrapper>
+      )}
+    </S.FeedbackCardContainer>
   );
 };
 

frontend/src/components/roomDetailPage/controlButton/ControlButton.tsx

@@ -17,7 +17,7 @@ export type DropdownItem = {
 
 export const dropdownItemsConfig: Record<string, DropdownItem[]> = {
   MANAGER: [
-    { name: "수정하기", action: "EDIT_ROOM" },
+    // { name: "수정하기", action: "EDIT_ROOM" },
     { name: "삭제하기", action: "DELETE_ROOM" },
   ],
   PARTICIPATED: [{ name: "방 나가기", action: "EXIT_ROOM" }],

frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx

@@ -64,15 +64,15 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
           <S.RoomContentSmall>
             <S.ContentLineBreak aria-hidden>
               <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-              <S.ContentTerm>총 인원: </S.ContentTerm>
+              <S.ContentTerm>참여 인원: </S.ContentTerm>
               <S.ContentDescription>
-                {roomInfo.reviewerCount + roomInfo.bothCount} /{roomInfo.limitedParticipants}명
+                {roomInfo.bothCount} / {roomInfo.limitedParticipants}명
               </S.ContentDescription>
               <S.ContentTermSub>
                 리뷰어 {roomInfo.reviewerCount}, 참여자 {roomInfo.bothCount}
               </S.ContentTermSub>
             </S.ContentLineBreak>
-            <S.ScreenReader>{`총 인원 : ${roomInfo.limitedParticipants}명 중 ${roomInfo.reviewerCount + roomInfo.bothCount}명, 리뷰어 ${roomInfo.reviewerCount}명, 참여자 ${roomInfo.bothCount}명`}</S.ScreenReader>
+            <S.ScreenReader>{`총 인원 : ${roomInfo.limitedParticipants}명 중 ${roomInfo.bothCount}명, 리뷰어 ${roomInfo.reviewerCount}명, 참여자 ${roomInfo.bothCount}명`}</S.ScreenReader>
           </S.RoomContentSmall>
 
           <S.RoomContentSmall>

frontend/src/components/roomForm/RoomFormLayout.tsx

@@ -368,7 +368,7 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
                     onChange={() => handleInputChange("managerMemberRole", "BOTH")}
                   />
                   <S.RadioLabel htmlFor="both">리뷰어, 리뷰이로 둘 다 참여</S.RadioLabel>
-                  <S.HelpText>{MESSAGES.HELP.MANAGER_MEMBER_ROLE_INPUT}</S.HelpText>
+                  <S.HelpText>{MESSAGES.HELP.MANAGER_MEMBER_ROLE_BOTH_INPUT}</S.HelpText>
                 </div>
                 <div>
                   <S.ContentRadioInput

frontend/src/components/shared/roomCard/RoomCard.style.ts

@@ -129,6 +129,12 @@ export const JoinMember = styled.span`
   color: ${({ theme }) => theme.COLOR.grey4};
 `;
 
+export const ContentTermSub = styled.span`
+  font: ${({ theme }) => theme.TEXT.semiSmall};
+  line-height: normal;
+  color: ${({ theme }) => theme.COLOR.grey2};
+`;
+
 export const DeadLineText = styled.span`
   display: flex;
   gap: 0.6rem;

frontend/src/components/shared/roomCard/RoomCard.tsx

@@ -105,8 +105,11 @@ const RoomCard = React.memo(({ roomInfo }: RoomCardProps) => {
               aria-label={`미션 참여 인원 최대 ${roomInfo.limitedParticipants}명, 현재 ${roomInfo.reviewerCount + roomInfo.bothCount}명`}
             >
               <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-              {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}
+              {roomInfo.bothCount} / {roomInfo.limitedParticipants}
             </S.JoinMember>
+            <S.ContentTermSub>
+              리뷰어 {roomInfo.reviewerCount}, 참여자 {roomInfo.bothCount}
+            </S.ContentTermSub>
           </S.EtcContainer>
         </S.RoomInformation>
       </S.RoomCardContainer>

frontend/src/components/shared/roomCardModal/RoomCardModal.tsx

@@ -84,9 +84,9 @@ const RoomCardModal = ({ isOpen, onClose, roomInfo }: RoomCardModalProps) => {
           </S.InfoRow>
 
           <S.InfoRow>
-            <S.InfoTitle aria-hidden>총 인원</S.InfoTitle>
+            <S.InfoTitle aria-hidden>참여 인원</S.InfoTitle>
             <S.InfoContent aria-hidden>
-              {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}명
+              {roomInfo.bothCount} / {roomInfo.limitedParticipants}명
               <span className="sub">
                 리뷰어 {roomInfo.reviewerCount}, 참여자 {roomInfo.bothCount}
               </span>

frontend/src/constants/feedback.ts

@@ -39,7 +39,7 @@ export const DEVELOP_GOOD_KEYWORD_OPTIONS = [
   "메서드 및 클래스 이름이 명확해요",
   "기능이 명확하게 잘 구현되어 있어요",
   "코드의 구조가 논리적이에요",
-  "코드의 재사용성이 높아요",
+  "코드 재사용성이 높아요",
   "예외 처리가 잘 되어 있어 안정적이에요",
   "문서화가 잘 되어 있어요",
   "테스트가 잘 작성되어 있어요",

frontend/src/constants/message.ts

@@ -6,8 +6,9 @@ const GUIDANCE_MESSAGES: Record<string, string> = {
   SUB_DESCRIPTION: "조금만 기다려주세요🤗",
   DELETE_ROOM: "정말 방을 삭제하시겠습니까?\n모집 마감 후엔 방을 삭제할 수 없습니다.",
   EXIT_ROOM: "정말 방을 나가시겠습니까?\n모집 마감 전까진 언제든지 다시 참여할 수 있습니다.",
-  CREATE_ROOM:
-    "방을 생성합니다.\n모집 마감 전까지는 방 정보를 수정할 수 있습니다.\n단, 나의 정보는 방 생성 후 변경할 수 없습니다",
+  // CREATE_ROOM:
+  //   "방을 생성합니다.\n모집 마감 전까지는 방 정보를 수정할 수 있습니다.\n단, 나의 정보는 방 생성 후 변경할 수 없습니다",
+  CREATE_ROOM: "방을 생성합니다.\n생성된 방은 수정할 수 없습니다.",
   EDIT_ROOM: "방 정보를 수정합니다.\n모집 마감 전까지 방 정보를 수정할 수 있습니다.",
   EMPTY_PARTICIPANTS: "참여자 목록은 매칭이 시작된 이후 공개됩니다.",
   ZERO_PARTICIPANTS: "이 방의 참여자가 없습니다.",
@@ -88,9 +89,8 @@ const SUCCESS_MESSAGES: Record<string, string> = {
 
 const HELP_MESSAGES: Record<string, string> = {
   REPOSITORY_LINK_INPUT: ".git 확장자가 아닌 링크를 넣어주세요.",
-  ISPUBLIC_YES_INPUT: "하나의 공용 레포지토리에 모두가 PR을 제출하는 형식이면 &apos;예&apos;",
-  ISPUBLIC_NO_INPUT:
-    "각자 개인 레포지토리로 PR을 제출하는 형식이면 &apos;아니요&apos;에 체크해주세요.",
+  ISPUBLIC_YES_INPUT: "하나의 공용 레포지토리에 모두가 PR을 제출하는 형식이면 '예'",
+  ISPUBLIC_NO_INPUT: "각자 개인 레포지토리로 PR을 제출하는 형식이면 '아니요'에 체크해주세요.",
   MATCHING_SIZE_INPUT: "최소 1명, 최대 5명 가능해요.",
   MANAGER_MEMBER_ROLE_BOTH_INPUT:
     "상대방의 코드를 리뷰하면서 자신의 코드도 리뷰받고 싶은 경우 선택하세요.",