[FE] 콜리네 서비스 제공 전 QA - 모달, 마이페이지(#563) (#577)

* design: 모달에서 사용자 아이디가 길 때 wrap 처리 * design: 모달 버튼 제일 아래에 위치하도록 조정 * design: 모달 내 방장의 이름이 길 때 ... 처리 * feat: 코드리뷰 완료시 토스트 띄우기 --------- Co-authored-by: 00kang <[email protected]>
woowacourse-teams · Oct 12, 2024 · e728d39 · e728d39
1 parent 58b7bc0
commit e728d39
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 32 deletions.
diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModal.style.ts b/frontend/src/components/shared/roomCardModal/RoomCardModal.style.ts
@@ -2,6 +2,12 @@ import styled from "styled-components";
 import media from "@/styles/media";
 
 export const RoomCardModalContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+`;
+
+export const HeaderContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
@@ -51,8 +57,10 @@ export const MainContainer = styled.div`
 
 export const ManagerContainer = styled.div`
   display: flex;
-  gap: 0.5rem;
+  flex-wrap: wrap;
+  gap: 0.8rem;
   align-items: center;
+
   font: ${({ theme }) => theme.TEXT.small};
 `;
 
@@ -67,7 +75,10 @@ export const ProfileContainer = styled.div`
   }
 
   span {
+    width: 168px;
     font: ${({ theme }) => theme.TEXT.small};
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 `;
 
@@ -155,7 +166,8 @@ export const InfoContent = styled.span`
 export const DescriptionContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 1rem;
+  width: 100%;
 `;
 
 export const KeywordsContainer = styled.div`
@@ -234,3 +246,9 @@ export const MatchingSizeContainer = styled.div`
     padding: 0.2rem 0.6rem;
   }
 `;
+
+export const ButtonWRapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx b/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx
@@ -17,32 +17,32 @@ const RoomCardModal = ({ isOpen, onClose, roomInfo }: RoomCardModalProps) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <S.RoomCardModalContainer>
-        <S.RoomInfoThumbnail
-          as={ImageWithFallback}
-          src={roomInfo.thumbnailLink}
-          alt={roomInfo.title}
-        />
-
-        <S.MainContainer>
-          <S.ManagerContainer>
-            <S.ProfileContainer>
-              <S.IconWrapper>
-                <Icon kind="person" />
-              </S.IconWrapper>
-              <span> {roomInfo.manager}</span>
-            </S.ProfileContainer>
-            <Label type={roomInfo.roomStatus} />
-          </S.ManagerContainer>
-
-          <S.TitleContainer>
-            <S.RoomTitle>{roomInfo.title}</S.RoomTitle>
-            <S.RepositoryLink href={roomInfo.repositoryLink} target="_blank">
-              <Icon kind="link" size="1.8rem" />
-              저장소 바로가기
-            </S.RepositoryLink>
-          </S.TitleContainer>
-        </S.MainContainer>
+        <S.HeaderContainer>
+          <S.RoomInfoThumbnail
+            as={ImageWithFallback}
+            src={roomInfo.thumbnailLink}
+            alt={roomInfo.title}
+          />
+          <S.MainContainer>
+            <S.ManagerContainer>
+              <S.ProfileContainer>
+                <S.IconWrapper>
+                  <Icon kind="person" />
+                </S.IconWrapper>
+                <span> {roomInfo.manager}</span>
+              </S.ProfileContainer>
+              <Label type={roomInfo.roomStatus} />
+            </S.ManagerContainer>
 
+            <S.TitleContainer>
+              <S.RoomTitle>{roomInfo.title}</S.RoomTitle>
+              <S.RepositoryLink href={roomInfo.repositoryLink} target="_blank">
+                <Icon kind="link" size="1.8rem" />
+                저장소 바로가기
+              </S.RepositoryLink>
+            </S.TitleContainer>
+          </S.MainContainer>
+        </S.HeaderContainer>
         <S.EtcContainer>
           <S.InfoRow>
             <S.InfoTitle>모집 마감일</S.InfoTitle>
@@ -63,7 +63,6 @@ const RoomCardModal = ({ isOpen, onClose, roomInfo }: RoomCardModalProps) => {
             </S.InfoContent>
           </S.InfoRow>
         </S.EtcContainer>
-
         <S.DescriptionContainer>
           <S.KeywordsContainer>
             <S.KeywordWrapper>
@@ -74,8 +73,9 @@ const RoomCardModal = ({ isOpen, onClose, roomInfo }: RoomCardModalProps) => {
           </S.KeywordsContainer>
           <S.ContentContainer>{roomInfo.content}</S.ContentContainer>
         </S.DescriptionContainer>
-
-        <RoomCardModalButton roomInfo={roomInfo} />
+        <S.ButtonWRapper>
+          <RoomCardModalButton roomInfo={roomInfo} />
+        </S.ButtonWRapper>
       </S.RoomCardModalContainer>
     </Modal>
   );

diff --git a/frontend/src/constants/message.ts b/frontend/src/constants/message.ts
@@ -59,12 +59,13 @@ const ERROR_MESSAGES = {
 };
 
 const SUCCESS_MESSAGES = {
-  POST_REVIEW_FEEDBACK: "피드백을 작성하였습니다.",
+  POST_REVIEW_COMPLETE: "정상적으로 코드리뷰를 완료했습니다.",
+  POST_REVIEW_FEEDBACK: "정상적으로 피드백을 작성하였습니다.",
   POST_CREATE_ROOM: "정상적으로 방을 생성하였습니다.",
   POST_PARTICIPATE_IN: "정상적으로 방에 참여하였습니다.",
   DELETE_PARTICIPATE_IN: "정상적으로 방 참여를 취소하였습니다.",
   DELETE_PARTICIPATED_ROOM: "정상적으로 방을 삭제하였습니다.",
-  PUT_REVIEW_FEEDBACK: "피드백을 수정하였습니다.",
+  PUT_REVIEW_FEEDBACK: "정상적으로 피드백을 수정하였습니다.",
 };
 
 const MESSAGES = {

diff --git a/frontend/src/hooks/mutations/useMutateReview.ts b/frontend/src/hooks/mutations/useMutateReview.ts
@@ -1,17 +1,22 @@
 import useMutateHandlers from "./useMutateHandlers";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
+import useToast from "@/hooks/common/useToast";
 import QUERY_KEYS from "@/apis/queryKeys";
 import { postReviewComplete } from "@/apis/reviews.api";
+import MESSAGES from "@/constants/message";
 
 const useMutateReviewComplete = (roomId: number) => {
   const { handleMutateError } = useMutateHandlers();
+  const { openToast } = useToast("success");
+
   const queryClient = useQueryClient();
 
   const postReviewCompleteMutation = useMutation({
     mutationFn: ({ roomId, revieweeId }: { roomId: number; revieweeId: number }) =>
       postReviewComplete(roomId, revieweeId),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.REVIEWEES, roomId] });
+      openToast(MESSAGES.SUCCESS.POST_REVIEW_COMPLETE);
     },
     onError: (error) => handleMutateError(error),
   });