Revert "Chore: manage 리액트쿼리 적용, UserInfo 모달 연결, myPage 리팩토링 (#163)"

co-kkiri/src/components/commons/UserInfo.tsx

@@ -1,26 +1,19 @@
 import { IMAGES } from "@/constants/images";
 import DESIGN_TOKEN from "@/styles/tokens";
-import { useState } from "react";
 import { styled } from "styled-components";
-import UserProfileModal from "../modals/UserProfileModal";
+
 interface UserInfoProps {
   user: {
-    id: number;
     nickname: string;
     profileImageUrl: string;
   };
   nicknameBold?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-export default function UserInfo({ user, nicknameBold }: UserInfoProps) {
-  const [isUserProfileModalOpen, setIsUserProfileModalOpen] = useState<boolean>(false);
-
-  const handleUserProfileModalOpen = () => {
-    setIsUserProfileModalOpen(!isUserProfileModalOpen);
-  };
+export default function UserInfo({ user, onClick, nicknameBold }: UserInfoProps) {
   return (
-    <UserInfoWrapper onClick={handleUserProfileModalOpen}>
-      {isUserProfileModalOpen && <UserProfileModal userId={user.id} />}
+    <UserInfoWrapper onClick={onClick}>
       {user.profileImageUrl ? (
         <ProfileImg src={user.profileImageUrl} alt="프로필 사진" />
       ) : (
@@ -40,10 +33,6 @@ const UserInfoWrapper = styled.div`
   align-items: center;
   gap: 0.8rem;
   cursor: pointer;
-
-  img {
-    border-radius: 50%;
-  }
 `;
 
 const ProfileImg = styled.img`

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

@@ -1,10 +1,10 @@
-import * as S from "./UserProfileCardLayout.styled";
+import styled from "styled-components";
 import CircularProgressBar from "../CircularProgressBar";
+import DefaultUserImage from "@/components/modals/EditUserProfileModal/UserImage";
+import DetailedPositionChip from "../Chips/PositionChip";
+import DESIGN_TOKEN from "@/styles/tokens";
 import Stacks from "../Stacks";
 import { isEmptyValue } from "@/utils/validationUtils";
-import Button from "../Button";
-import { useState } from "react";
-import EditUserProfileModal from "@/components/modals/EditUserProfileModal";
 
 interface UserProfileCardProps {
   profileImgUrl?: string;
@@ -13,9 +13,6 @@ interface UserProfileCardProps {
   career: number | null;
   stacks: string[];
   score: number;
-  introduce?: string | null;
-  link?: string | null;
-  cardType?: "mypage" | "scout";
 }
 
 export default function UserProfileCardLayout({
@@ -25,51 +22,62 @@ export default function UserProfileCardLayout({
   career,
   stacks,
   score,
-  introduce,
-  link,
-  cardType,
 }: UserProfileCardProps) {
-  const [isEditModalOpen, setIsModalOpen] = useState<boolean>(false);
-
-  const handleEditModalOpen = () => {
-    setIsModalOpen(!isEditModalOpen);
-  };
   return (
-    <S.Container>
-      <S.InfoBox>
-        <S.ProgressWrapper>
-          <CircularProgressBar size={130} strokeWidth={8} percentage={score} animationDuration={1} />
-          <S.UserImage profileImgUrl={profileImgUrl} onSelect={() => {}} />
-        </S.ProgressWrapper>
-        <S.PositionChip label={isEmptyValue(position) ? emptyMessages.position : position!} />
-        <S.Nickname>{nickname}</S.Nickname>
-        <S.Career>{isEmptyValue(position) ? emptyMessages.career : `경력 ${career}년차`}</S.Career>
-        <Stacks stacks={stacks} />
-      </S.InfoBox>
-      {!(cardType === "scout") && (
-        <S.IntroduceBox>
-          <S.Introduce>{isEmptyValue(introduce) ? emptyMessages.introduce : introduce}</S.Introduce>
-          <S.Link href={link || ""} target="_blank" rel="noopener noreferrer">
-            <p>{isEmptyValue(link) ? emptyMessages.link : link}</p>
-          </S.Link>
-        </S.IntroduceBox>
-      )}
-      {cardType === "mypage" && (
-        <S.ButtonBox>
-          <Button variant="ghost" onClick={handleEditModalOpen}>
-            수정 하기
-          </Button>
-        </S.ButtonBox>
-      )}
-      {isEditModalOpen && <EditUserProfileModal onClose={handleEditModalOpen} />}
-    </S.Container>
+    <Container>
+      <ProgressBox>
+        <CircularProgressBar size={130} strokeWidth={8} percentage={score} animationDuration={1} />
+        <UserImage profileImgUrl={profileImgUrl} onSelect={() => {}} />
+      </ProgressBox>
+      <PositionChip label={isEmptyValue(position) ? EmptyMessage.position : position!} />
+      <Nickname>{nickname}</Nickname>
+      <Career>{isEmptyValue(position) ? EmptyMessage.career : `경력 ${career}년차`}</Career>
+      <Stacks stacks={stacks} />
+    </Container>
   );
 }
 
-const emptyMessages = {
+const EmptyMessage = {
   career: "경력을 아직 작성하지 않았어요!",
   position: "포지션",
-  link: "링크 없음",
-  introduce: "한줄소개를 아직 작성하지 않았어요!",
-  tags: "아직 받은 태그가 없어요.",
 };
+
+const { color, typography } = DESIGN_TOKEN;
+
+const Container = styled.article`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const ProgressBox = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  margin-bottom: 1.2rem;
+`;
+
+const UserImage = styled(DefaultUserImage)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+const PositionChip = styled(DetailedPositionChip)`
+  margin-bottom: 1.2rem;
+`;
+
+const Nickname = styled.p`
+  ${typography.font16Bold}
+  margin-bottom: 0.4rem;
+`;
+
+const Career = styled.p`
+  ${typography.font12Semibold}
+  color: ${color.primary[1]};
+
+  margin-bottom: 2rem;
+`;

co-kkiri/src/components/commons/UserProfileCard/index.tsx

@@ -9,9 +9,6 @@ interface UserProfileCardProps {
   career: number;
   stacks: string[];
   score: number;
-  introduce?: string;
-  link?: string;
-  cardType?: "mypage" | "scout";
 }
 
 export default function UserProfileCard(props: UserProfileCardProps) {

co-kkiri/src/components/domains/manage/AppliedList.tsx

@@ -5,42 +5,20 @@ import PositionChip from "@/components/commons/Chips/PositionChip";
 import DESIGN_TOKEN from "@/styles/tokens";
 import { ICONS } from "@/constants/icons";
 import { AppliedMemberListApiResponseDto } from "@/lib/api/post/type";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { acceptMember, rejectMember } from "@/lib/api/teamMember";
 
 interface AppliedListProps {
   detailInfo: AppliedMemberListApiResponseDto["data"];
+  handleAcceptMember: (teamMemberId: number) => void;
+  handleRejectMember: (teamMemberId: number) => void;
 }
 
-export default function AppliedList({ detailInfo }: AppliedListProps) {
-  const queryClient = useQueryClient();
-  const handleAccept = useMutation({
-    mutationFn: (teamMemberId: number) => acceptMember(teamMemberId),
-    onSuccess: () => {
-      console.log("요청 성공");
-      queryClient.invalidateQueries();
-    },
-    onError: (error) => {
-      console.error(error);
-    },
-  });
-
-  const handleAcceptMember = (teamMemberId: number) => {
-    handleAccept.mutate(teamMemberId);
+export default function AppliedList({ detailInfo, handleAcceptMember, handleRejectMember }: AppliedListProps) {
+  const handleAccept = (teamMemberId: number) => {
+    handleAcceptMember(teamMemberId);
   };
 
-  const handleReject = useMutation({
-    mutationFn: (teamMemberId: number) => rejectMember(teamMemberId),
-    onSuccess: () => {
-      console.log("요청 성공");
-    },
-    onError: (error) => {
-      console.error(error);
-    },
-  });
-
-  const handleRejectMember = (teamMemberId: number) => {
-    handleReject.mutate(teamMemberId);
+  const handleReject = (teamMemberId: number) => {
+    handleRejectMember(teamMemberId);
   };
 
   return (
@@ -54,10 +32,10 @@ export default function AppliedList({ detailInfo }: AppliedListProps) {
               <PositionChip label={info.position} />
             </MemberWrapper>
             <AcceptWrapper>
-              <button onClick={() => handleAcceptMember(info.teamMemberId)}>
+              <button onClick={() => handleAccept(info.teamMemberId)}>
                 <img src={ICONS.accept.src} alt={ICONS.accept.alt} />
               </button>
-              <button onClick={() => handleRejectMember(info.teamMemberId)}>
+              <button onClick={() => handleReject(info.teamMemberId)}>
                 <img src={ICONS.reject.src} alt={ICONS.reject.alt} />
               </button>
             </AcceptWrapper>

co-kkiri/src/components/domains/manage/Detail.tsx

@@ -3,7 +3,6 @@ import { ICONS } from "@/constants/icons";
 import DESIGN_TOKEN from "@/styles/tokens";
 import ProjectDetailCard from "@/components/commons/ProjectDetailCard";
 import { StudyManagementApiResponseDto } from "@/lib/api/post/type";
-import { useEffect } from "react";
 
 interface DetailProps {
   detailInfo: StudyManagementApiResponseDto;

co-kkiri/src/components/domains/manage/MemberList.tsx

@@ -5,30 +5,13 @@ import PositionChip from "@/components/commons/Chips/PositionChip";
 import DESIGN_TOKEN from "@/styles/tokens";
 import LeaderIcon from "./LeaderIcon";
 import { TeamMemberApiResponseDto } from "@/lib/api/teamMember/type";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { deleteTeamMember } from "@/lib/api/teamMember";
 
 interface MemberListProps {
   detailInfo: TeamMemberApiResponseDto["data"];
+  handleOutMember: (teamMemberId: number) => void;
 }
 
-export default function MemberList({ detailInfo }: MemberListProps) {
-  const queryClient = useQueryClient();
-  const handleOut = useMutation({
-    mutationFn: (teamMemberId: number) => deleteTeamMember(teamMemberId),
-    onSuccess: () => {
-      console.log("요청 성공");
-      queryClient.invalidateQueries();
-    },
-    onError: (error) => {
-      console.error(error);
-    },
-  });
-
-  const handleOutMember = (teamMemberId: number) => {
-    handleOut.mutate(teamMemberId);
-  };
-
+export default function MemberList({ detailInfo, handleOutMember }: MemberListProps) {
   return (
     <Container>
       <SectionTitle title="현재 팀원" count={detailInfo?.length || 0} />
@@ -45,7 +28,7 @@ export default function MemberList({ detailInfo }: MemberListProps) {
               <PositionChip label={info.position} />
             </MemberWrapper>
             <DeleteWrapper onClick={() => handleOutMember(info.teamMemberId)}>
-              {!info.isLeader && <button>삭제</button>}
+              {info.isLeader || <button>삭제</button>}
             </DeleteWrapper>
           </Box>
         ))}