Fix: review 페이지 버그, mypage 스타일 수정

co-kkiri/src/components/commons/UserProfileCard/UserProfileCardLayout.styled.tsx

@@ -74,4 +74,5 @@ export const ButtonBox = styled.div`
   ${mediaQueries.mobile} {
     width: 28rem;
   }
+  cursor: pointer;
 `;

co-kkiri/src/components/domains/myPage/MyPageUserInfo.styled.ts

@@ -1,7 +1,7 @@
 import DESIGN_TOKEN from "@/styles/tokens";
 import styled from "styled-components";
 
-const { typography, color, mediaQueries } = DESIGN_TOKEN;
+const { typography, color, mediaQueries, boxShadow } = DESIGN_TOKEN;
 
 export const Container = styled.div`
   width: 43rem;
@@ -16,7 +16,22 @@ export const Container = styled.div`
   }
 `;
 
-export const Box = styled.div`
+export const InfoBox = styled.div`
+  width: 100%;
+  min-width: fit-content;
+
+  padding: 3rem;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+
+  border-radius: 2rem;
+  box-shadow: ${boxShadow.content};
+`;
+
+export const ButtonBox = styled.div`
   display: flex;
   justify-content: space-between;
   width: 43rem;

co-kkiri/src/components/domains/myPage/MyPageUserInfo.tsx

@@ -1,6 +1,6 @@
 import * as S from "./MyPageUserInfo.styled";
 import ToggleButton from "@/components/commons/ToggleButton";
-import UserProfileCard from "@/components/commons/UserProfileCard";
+import UserProfileCardLayout from "@/components/commons/UserProfileCard/UserProfileCardLayout";
 import ConfirmModal from "@/components/modals/ConfirmModal";
 import TOAST from "@/constants/toast";
 import useOpenToggle from "@/hooks/useOpenToggle";
@@ -37,8 +37,8 @@ export default function MyPageUserInfo({ visibleProfile }: MyPageUserInfoProps)
     onSuccess: () => {
       queryClient.invalidateQueries();
       navigate("/");
-      // pushToast(TOAST.success.message, TOAST.success.type);
       window.location.reload();
+      pushToast("회원 탈퇴가 정상적으로 처리되었습니다.", "success");
     },
     onError: () => {
       pushToast(TOAST.severError.message, TOAST.severError.type);
@@ -55,18 +55,20 @@ export default function MyPageUserInfo({ visibleProfile }: MyPageUserInfoProps)
 
   return (
     <S.Container>
-      <UserProfileCard
-        profileImageUrl={user.userInfo?.profileImageUrl || ""}
-        nickname={user.userInfo?.nickname || ""}
-        position={user.userInfo?.position}
-        career={user.userInfo?.career}
-        stack={user.userInfo?.stack || []}
-        score={40}
-        introduce={user.userInfo?.introduce}
-        link={user.userInfo?.link}
-        cardType="mypage"
-      />
-      <S.Box>
+      <S.InfoBox>
+        <UserProfileCardLayout
+          profileImageUrl={user.userInfo?.profileImageUrl || ""}
+          nickname={user.userInfo?.nickname || ""}
+          position={user.userInfo?.position}
+          career={user.userInfo?.career}
+          stack={user.userInfo?.stack || []}
+          score={40}
+          introduce={user.userInfo?.introduce}
+          link={user.userInfo?.link}
+          cardType="mypage"
+        />
+      </S.InfoBox>
+      <S.ButtonBox>
         <S.Scout>
           <ToggleButton
             content="스카우트 동의"
@@ -75,7 +77,7 @@ export default function MyPageUserInfo({ visibleProfile }: MyPageUserInfoProps)
           />
         </S.Scout>
         <S.DeleteUser onClick={openToggle}>회원 탈퇴하기</S.DeleteUser>
-      </S.Box>
+      </S.ButtonBox>
       {isDeleteUserConfirmModalOpen && (
         <ConfirmModal type="deleteUser" onClose={openToggle} onClick={handleDeleteUser} />
       )}

co-kkiri/src/components/domains/myPage/TagList.tsx

@@ -10,28 +10,42 @@ interface TagListProps {
 }
 
 export default function TagList({ reviewList }: TagListProps) {
+  const compliments = reviewList.filter((tag) => tag.type === "COMPLIMENT");
+  const improvements = reviewList.filter((tag) => tag.type === "IMPROVEMENT");
+  const noTags = compliments.length === 0 && improvements.length === 0;
+
   return (
     <Container>
       <SectionTitle title="내가 받은 태그" lineLength="mypage" />
       <TagListWrapper>
-        {reviewList.length > 0 ? (
-          reviewList.map((tags) => (
-            <EvaluationChip
-              key={tags.content}
-              label={tags.content || ""}
-              evaluationWay={tags.type}
-              count={tags.count}
-            />
-          ))
+        {noTags ? (
+          <NoResultText text="받은 태그가 없어요" padding={60} color="gray" />
         ) : (
-          <NoResultText text="아직 받은 태그가 없어요" padding={60} color="gray" />
+          <>
+            {compliments.map((tag, index) => (
+              <EvaluationChip
+                key={`compliment-${tag.content}-${index}`}
+                label={tag.content || ""}
+                evaluationWay={tag.type}
+                count={tag.count}
+              />
+            ))}
+            {improvements.map((tag, index) => (
+              <EvaluationChip
+                key={`improvement-${tag.content}-${index}`}
+                label={tag.content || ""}
+                evaluationWay={tag.type}
+                count={tag.count}
+              />
+            ))}
+          </>
         )}
       </TagListWrapper>
     </Container>
   );
 }
 
-const { color, mediaQueries } = DESIGN_TOKEN;
+const { mediaQueries } = DESIGN_TOKEN;
 
 const Container = styled.div`
   display: flex;
@@ -53,5 +67,6 @@ const TagListWrapper = styled.div`
   gap: 0.6rem;
   flex-wrap: wrap;
   overflow-y: auto;
+  align-content: baseline;
   height: 13.9rem;
 `;

co-kkiri/src/pages/MyPage/index.tsx

@@ -27,7 +27,7 @@ export default function MyPage() {
     isLoading: invitedTeamListLoading,
   } = useQuery({
     queryKey: ["invite/list"],
-    queryFn: () => getInvitedTeamList({ page: 1, take: 100 }),
+    queryFn: () => getInvitedTeamList({ page: 1, take: 500 }),
     retry: false,
   });
 

co-kkiri/src/pages/Review/index.tsx

@@ -33,7 +33,7 @@ export default function Review() {
   });
 
   const { data: memberList, error } = useQuery({
-    queryKey: [`review/${postId}/member`, selectedMemberId],
+    queryKey: [`review/${postId}/member`],
     queryFn: () => getMemberList(postId),
     placeholderData: keepPreviousData,
   });
@@ -48,8 +48,8 @@ export default function Review() {
       pushToast("리뷰 작성이 완료되었습니다.", "success");
       queryClient.invalidateQueries();
     },
-    onError: () => {
-      pushToast("요청에 실패하였습니다.", "error");
+    onError: (error) => {
+      pushToast(`${error.message}`, "error");
     },
     onSettled: () => {
       navigate(-1);