코레아 1.25v 배포 (#681)

woowacourse-teams · Oct 23, 2024 · 8d77ca8 · 8d77ca8
2 parents 93357d0 + 24dfd59
commit 8d77ca8
Show file tree

Hide file tree

Showing 29 changed files with 306 additions and 178 deletions.
diff --git a/backend/src/main/resources/config b/backend/src/main/resources/config
diff --git a/frontend/src/@types/roomInfo.ts b/frontend/src/@types/roomInfo.ts
@@ -34,7 +34,8 @@ export interface SubmitRoomInfo extends BaseRoomInfo {
 export interface RoomInfo extends BaseRoomInfo {
   id: number;
   manager: string;
-  currentParticipants: number;
+  reviewerCount: number;
+  bothCount: number;
   roomStatus: RoomStatus;
   participationStatus: ParticipationStatus;
   memberRole: Role;

diff --git a/frontend/src/assets/index.ts b/frontend/src/assets/index.ts
@@ -28,7 +28,8 @@ export { default as puzzle_with_people_color } from "@/assets/intro/puzzle_with_
 export { default as step1_pic } from "@/assets/intro/step1_pic.webp";
 export { default as step2_pic } from "@/assets/intro/step2_pic.webp";
 export { default as step3_pic } from "@/assets/intro/step3_pic.webp";
-export { default as step4_pic } from "@/assets/intro/step4_pic.webp";
+export { default as step41_pic } from "@/assets/intro/step41_pic.webp";
+export { default as step42_pic } from "@/assets/intro/step42_pic.webp";
 export { default as step5_pic } from "@/assets/intro/step5_pic.webp";
 
 export { default as mainLogo } from "@/assets/coreaLogo/coreaMainLogo.svg";
diff --git a/frontend/src/assets/intro/step3_pic.webp b/frontend/src/assets/intro/step3_pic.webp
diff --git a/frontend/src/assets/intro/step41_pic.webp b/frontend/src/assets/intro/step41_pic.webp
diff --git a/frontend/src/assets/intro/step42_pic.webp b/frontend/src/assets/intro/step42_pic.webp
diff --git a/frontend/src/assets/intro/step4_pic.webp b/frontend/src/assets/intro/step4_pic.webp
diff --git a/frontend/src/assets/intro/step5_pic.webp b/frontend/src/assets/intro/step5_pic.webp
diff --git a/frontend/src/components/common/carousel/Carousel.tsx b/frontend/src/components/common/carousel/Carousel.tsx
@@ -1,4 +1,4 @@
-import React, { Children, ReactNode, isValidElement, useEffect, useState } from "react";
+import React, { Children, ReactNode, isValidElement, useState } from "react";
 import * as S from "@/components/common/carousel/Carousel.style";
 import Icon from "@/components/common/icon/Icon";
 
@@ -18,6 +18,11 @@ const Carousel = ({ children }: CarouselProps) => {
 
   return (
     <S.CarouselContainer>
+      <S.CarouselWrapper $currentIndex={currentIndex}>
+        {validChildren.map((child, index) => (
+          <S.CarouselItem key={index}>{child}</S.CarouselItem>
+        ))}
+      </S.CarouselWrapper>
       <S.CarouselLeftButton
         onClick={prevSlide}
         disabled={currentIndex === 0}
@@ -34,11 +39,6 @@ const Carousel = ({ children }: CarouselProps) => {
       >
         <Icon kind="arrowRight" size="3rem" />
       </S.CarouselRightButton>
-      <S.CarouselWrapper $currentIndex={currentIndex}>
-        {validChildren.map((child, index) => (
-          <S.CarouselItem key={index}>{child}</S.CarouselItem>
-        ))}
-      </S.CarouselWrapper>
     </S.CarouselContainer>
   );
 };

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
@@ -9,7 +9,7 @@ export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
   gap: 3rem;
 
   width: 40%;
-  height: 600px;
+  height: 700px;
   padding: 1rem;
 
   border: 3px solid
@@ -106,8 +106,6 @@ export const FeedbackDetailContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
-
-  height: 200px;
 `;
 
 export const FeedbackDetail = styled.p`

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -66,8 +66,8 @@ const FeedbackCard = ({
       <S.FeedbackDetailContainer>
         <S.FeedbackTitle>세부 피드백</S.FeedbackTitle>
         <Textarea
-          rows={5}
-          maxLength={512}
+          rows={10}
+          maxLength={2000}
           showCharCount={true}
           value={feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "없음"}
           readOnly

diff --git a/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts b/frontend/src/components/feedback/feedbackForm/FeedbackForm.style.ts
@@ -16,18 +16,24 @@ export const ItemContainer = styled.fieldset`
   gap: 1.6rem;
 `;
 
-export const ModalQuestion = styled.legend<ModalQuestionProps>`
+export const QuestionContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
   align-items: center;
+`;
 
+export const ModalQuestion = styled.legend<ModalQuestionProps>`
   font: ${({ theme }) => theme.TEXT.small_bold};
   color: ${({ theme }) => theme.COLOR.grey4};
 `;
 
 export const Required = styled.span`
   padding-top: 0.5rem;
-  font: ${({ theme }) => theme.TEXT.semiSmall};
+  font: ${({ theme }) => theme.TEXT.xSmall};
   color: ${({ theme }) => theme.COLOR.error};
 `;
+
+export const TextareaWrapper = styled.div`
+  margin-top: 1.2rem;
+`;
diff --git a/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/RevieweeFeedbackForm.tsx
@@ -31,8 +31,10 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
   return (
     <S.FeedbackFormContainer>
       <S.ItemContainer>
-        <S.ModalQuestion>리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요.</S.ModalQuestion>
-        <S.Required>*필수입력</S.Required>
+        <S.QuestionContainer>
+          <S.ModalQuestion>리뷰이의 개발 역량 향상을 위해 코드를 평가 해주세요.</S.ModalQuestion>
+          <S.Required>*필수입력</S.Required>
+        </S.QuestionContainer>
         <EvaluationPointBar
           initialOptionId={formState.evaluationPoint}
           onChange={(value) => onChange("evaluationPoint", value)}
@@ -41,8 +43,10 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
-        <S.Required>*필수입력</S.Required>
+        <S.QuestionContainer>
+          <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
+          <S.Required>*필수입력</S.Required>
+        </S.QuestionContainer>
         <KeywordOptionButton
           selectedOptions={formState.feedbackKeywords}
           onChange={(value) => onChange("feedbackKeywords", value)}
@@ -53,8 +57,10 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>리뷰이의 코드를 추천하시나요? (비공개 항목)</S.ModalQuestion>
-        <S.Required>*필수입력</S.Required>
+        <S.QuestionContainer>
+          <S.ModalQuestion>리뷰이의 코드를 추천하시나요? (비공개 항목)</S.ModalQuestion>
+          <S.Required>*필수입력</S.Required>
+        </S.QuestionContainer>
         <RecommendationPointBar
           initialOptionId={formState.recommendationPoint}
           onChange={(value) => onChange("recommendationPoint", value)}
@@ -64,19 +70,21 @@ const RevieweeFeedbackForm = ({ formState, onChange, modalType }: RevieweeFeedba
 
       <S.ItemContainer>
         <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨 주세요.</S.ModalQuestion>
-        <Textarea
-          rows={8}
-          showCharCount={true}
-          maxLength={512}
-          placeholder={
-            modalType === "view"
-              ? "없음"
-              : "상대 리뷰이의 개발 역량 향상을 위해 피드백을 남겨주세요."
-          }
-          value={formState.feedbackText}
-          onChange={(e) => onChange("feedbackText", e.target.value)}
-          readOnly={modalType === "view"}
-        />
+        <S.TextareaWrapper>
+          <Textarea
+            rows={10}
+            showCharCount={true}
+            maxLength={2000}
+            placeholder={
+              modalType === "view"
+                ? "없음"
+                : "상대 리뷰이의 개발 역량 향상을 위해 피드백을 남겨주세요."
+            }
+            value={formState.feedbackText}
+            onChange={(e) => onChange("feedbackText", e.target.value)}
+            readOnly={modalType === "view"}
+          />
+        </S.TextareaWrapper>
       </S.ItemContainer>
     </S.FeedbackFormContainer>
   );

diff --git a/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx b/frontend/src/components/feedback/feedbackForm/ReviewerFeedbackForm.tsx
@@ -31,8 +31,12 @@ const ReviewerFeedbackForm = ({ formState, onChange, modalType }: ReviewerFeedba
   return (
     <S.FeedbackFormContainer>
       <S.ItemContainer>
-        <S.ModalQuestion>리뷰어의 소프트 스킬 역량 향상을 위해 피드백을 해주세요.</S.ModalQuestion>
-        <S.Required>*필수입력</S.Required>
+        <S.QuestionContainer>
+          <S.ModalQuestion>
+            리뷰어의 소프트 스킬 역량 향상을 위해 피드백을 해주세요.
+          </S.ModalQuestion>
+          <S.Required>*필수입력</S.Required>
+        </S.QuestionContainer>
         <EvaluationPointBar
           initialOptionId={formState.evaluationPoint}
           onChange={(value) => onChange("evaluationPoint", value)}
@@ -42,8 +46,10 @@ const ReviewerFeedbackForm = ({ formState, onChange, modalType }: ReviewerFeedba
       </S.ItemContainer>
 
       <S.ItemContainer>
-        <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
-        <S.Required>*필수입력</S.Required>
+        <S.QuestionContainer>
+          <S.ModalQuestion>위와 같이 선택한 이유를 알려주세요. (1개 이상 선택)</S.ModalQuestion>
+          <S.Required>*필수입력</S.Required>
+        </S.QuestionContainer>
         <KeywordOptionButton
           selectedOptions={formState.feedbackKeywords}
           onChange={(value) => onChange("feedbackKeywords", value)}
@@ -56,19 +62,21 @@ const ReviewerFeedbackForm = ({ formState, onChange, modalType }: ReviewerFeedba
 
       <S.ItemContainer>
         <S.ModalQuestion>추가적으로 하고 싶은 피드백이 있다면 남겨 주세요.</S.ModalQuestion>
-        <Textarea
-          rows={8}
-          showCharCount={true}
-          maxLength={512}
-          placeholder={
-            modalType === "view"
-              ? "없음"
-              : "상대 리뷰어의 소프트 스킬 향상을 위해 피드백을 남겨주세요."
-          }
-          value={formState.feedbackText}
-          onChange={(e) => onChange("feedbackText", e.target.value)}
-          readOnly={modalType === "view"}
-        />
+        <S.TextareaWrapper>
+          <Textarea
+            rows={10}
+            showCharCount={true}
+            maxLength={2000}
+            placeholder={
+              modalType === "view"
+                ? "없음"
+                : "상대 리뷰어의 소프트 스킬 향상을 위해 피드백을 남겨주세요."
+            }
+            value={formState.feedbackText}
+            onChange={(e) => onChange("feedbackText", e.target.value)}
+            readOnly={modalType === "view"}
+          />
+        </S.TextareaWrapper>
       </S.ItemContainer>
     </S.FeedbackFormContainer>
   );

diff --git a/frontend/src/components/intro/IntroNavigationBar.style.ts b/frontend/src/components/intro/IntroNavigationBar.style.ts
@@ -4,16 +4,20 @@ import media from "@/styles/media";
 export const NavContainer = styled.div`
   position: fixed;
   top: 50%;
-  right: 12%;
+  right: calc((100vw - 1000px) / 2 - 10px);
   transform: translateY(-50%);
 
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: center;
 
+  @media (width >= 1300px) {
+    right: calc((100vw - 1200px) / 2 - 10px);
+  }
+
   ${media.medium`
-    right: 5%;
+    right: calc((100vw - 580px) / 2 - 10px);  
   `}
 
   ${media.small`

diff --git a/frontend/src/components/main/banner/Banner.style.ts b/frontend/src/components/main/banner/Banner.style.ts
@@ -52,7 +52,7 @@ export const BannerTextContainer = styled.div`
   margin-top: 65px;
 `;
 
-export const BannerText = styled.p`
+export const BannerText = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
@@ -166,7 +166,7 @@ const MyReviewee = ({ roomInfo }: MyReviewerProps) => {
           </S.MyRevieweeWrapper>
         ))}
       </S.MyRevieweeContainer>
-      <S.ExtraInformation>※선호하는 리뷰이 인원 수보다 적게 매칭될 수 있습니다.</S.ExtraInformation>
+      <S.ExtraInformation>※선호하는 리뷰이 인원수보다 적게 매칭될 수 있습니다.</S.ExtraInformation>
     </>
   );
 };

diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts
@@ -115,3 +115,10 @@ export const GuidanceWrapper = styled.div`
 export const Character = styled.img`
   width: 150px;
 `;
+
+export const ExtraInformation = styled.span`
+  display: flex;
+  justify-content: flex-end;
+  font: ${({ theme }) => theme.TEXT.xSmall};
+  color: ${({ theme }) => theme.COLOR.grey2};
+`;
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -120,7 +120,6 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
           buttonText={feedbackTypeResult.buttonText}
         />
       )}
-
       <S.MyReviewerContainer>
         <S.MyReviewerWrapper>
           <S.MyReviewerTitle>아이디</S.MyReviewerTitle>
@@ -155,6 +154,7 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
           );
         })}
       </S.MyReviewerContainer>
+      <S.ExtraInformation>※최소 상호 리뷰 인원수보다 많게 매칭될 수 있습니다.</S.ExtraInformation>
     </>
   );
 };

diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.test.tsx
@@ -9,7 +9,8 @@ import { theme } from "@/styles/theme";
 const mockBaseRoomInfo: RoomInfo = {
   id: 1,
   manager: "darr",
-  currentParticipants: 5,
+  reviewerCount: 2,
+  bothCount: 3,
   roomStatus: "OPEN",
   participationStatus: "PARTICIPATED",
   memberRole: "BOTH",

diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
@@ -59,8 +59,18 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
           </S.RoomContentSmall>
           <S.RoomContentSmall>
             <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-            <span>현재 참여 인원 : </span>
-            {roomInfo.currentParticipants} / {roomInfo.limitedParticipants}명
+            <span>총 인원 : </span>
+            {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}명
+          </S.RoomContentSmall>
+          <S.RoomContentSmall>
+            <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
+            <span>리뷰어 인원 : </span>
+            {roomInfo.reviewerCount} / {roomInfo.reviewerCount + roomInfo.bothCount}명
+          </S.RoomContentSmall>
+          <S.RoomContentSmall>
+            <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
+            <span>참여자 인원 : </span>
+            {roomInfo.bothCount} / {roomInfo.reviewerCount + roomInfo.bothCount}명
           </S.RoomContentSmall>
           <S.RoomContentSmall>
             <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />

diff --git a/frontend/src/components/shared/roomCard/RoomCard.style.ts b/frontend/src/components/shared/roomCard/RoomCard.style.ts
@@ -114,7 +114,8 @@ export const NoKeywordText = styled.span`
 
 export const EtcContainer = styled.div`
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 0.6rem;
 `;
 
 export const JoinMember = styled.span`
@@ -150,8 +151,3 @@ export const LabelWrapper = styled.div`
   gap: 0.5rem;
   height: 53px;
 `;
-
-export const EtcWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
diff --git a/frontend/src/components/shared/roomCard/RoomCard.test.tsx b/frontend/src/components/shared/roomCard/RoomCard.test.tsx
@@ -8,7 +8,8 @@ import { theme } from "@/styles/theme";
 const mockBaseRoomInfo: RoomInfo = {
   id: 1,
   manager: "darr",
-  currentParticipants: 5,
+  reviewerCount: 2,
+  bothCount: 3,
   roomStatus: "OPEN",
   participationStatus: "PARTICIPATED",
   memberRole: "BOTH",

diff --git a/frontend/src/components/shared/roomCard/RoomCard.tsx b/frontend/src/components/shared/roomCard/RoomCard.tsx
@@ -94,15 +94,12 @@ const RoomCard = React.memo(({ roomInfo }: RoomCardProps) => {
 
           <S.EtcContainer>
             <S.LabelWrapper>{DisplayLabel(roomInfo)}</S.LabelWrapper>
-          </S.EtcContainer>
-
-          <S.EtcWrapper>
             <S.DeadLineText>{DisplayLeftTime(roomInfo)}</S.DeadLineText>
             <S.JoinMember>
               <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-              {roomInfo.currentParticipants}/{roomInfo.limitedParticipants}
+              {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}
             </S.JoinMember>
-          </S.EtcWrapper>
+          </S.EtcContainer>
         </S.RoomInformation>
       </S.RoomCardContainer>
     </>