diff --git a/co-kkiri/src/components/commons/UserInfo.tsx b/co-kkiri/src/components/commons/UserInfo.tsx
index b791cbc1..b13f1b49 100644
--- a/co-kkiri/src/components/commons/UserInfo.tsx
+++ b/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`
diff --git a/co-kkiri/src/components/commons/UserProfileCard/UserProfileCardLayout.styled.tsx b/co-kkiri/src/components/commons/UserProfileCard/UserProfileCardLayout.styled.tsx
deleted file mode 100644
index 0890283e..00000000
--- a/co-kkiri/src/components/commons/UserProfileCard/UserProfileCardLayout.styled.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import DESIGN_TOKEN from "@/styles/tokens";
-import styled from "styled-components";
-import DefaultUserImage from "@/components/modals/EditUserProfileModal/UserImage";
-import DetailedPositionChip from "../Chips/PositionChip";
-
-const { color, typography, mediaQueries } = DESIGN_TOKEN;
-
-export const Container = styled.article`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2.2rem;
-`;
-
-export const ProgressWrapper = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 1.2rem;
-`;
-
-export const UserImage = styled(DefaultUserImage)`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
-
-export const InfoBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-export const PositionChip = styled(DetailedPositionChip)`
-  margin-bottom: 1.2rem;
-`;
-
-export const Nickname = styled.p`
-  ${typography.font16Bold}
-  margin-bottom: 0.4rem;
-`;
-
-export const Career = styled.p`
-  ${typography.font12Semibold}
-  color: ${color.primary[1]};
-
-  margin-bottom: 2rem;
-`;
-
-export const IntroduceBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.8rem;
-`;
-
-export const Introduce = styled.p`
-  color: ${color.black[1]};
-
-  ${typography.font14Medium}
-  text-align: center;
-`;
-
-export const Link = styled.a`
-  color: ${color.black[3]};
-  ${typography.font12Medium}
-`;
-
-export const ButtonBox = styled.div`
-  padding-top: 2rem;
-  width: 37rem;
-  ${mediaQueries.mobile} {
-    width: 28rem;
-  }
-`;
diff --git a/co-kkiri/src/components/commons/UserProfileCard/UserProfileCardLayout.tsx b/co-kkiri/src/components/commons/UserProfileCard/UserProfileCardLayout.tsx
index 7fd86ab0..f9c71b4b 100644
--- a/co-kkiri/src/components/commons/UserProfileCard/UserProfileCardLayout.tsx
+++ b/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;
+`;
diff --git a/co-kkiri/src/components/commons/UserProfileCard/index.tsx b/co-kkiri/src/components/commons/UserProfileCard/index.tsx
index e393c0f3..a819138b 100644
--- a/co-kkiri/src/components/commons/UserProfileCard/index.tsx
+++ b/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) {
diff --git a/co-kkiri/src/components/domains/manage/AppliedList.tsx b/co-kkiri/src/components/domains/manage/AppliedList.tsx
index 1d30cef7..11cb44d1 100644
--- a/co-kkiri/src/components/domains/manage/AppliedList.tsx
+++ b/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>
diff --git a/co-kkiri/src/components/domains/manage/Detail.tsx b/co-kkiri/src/components/domains/manage/Detail.tsx
index 814b1c53..02ad3770 100644
--- a/co-kkiri/src/components/domains/manage/Detail.tsx
+++ b/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;
diff --git a/co-kkiri/src/components/domains/manage/MemberList.tsx b/co-kkiri/src/components/domains/manage/MemberList.tsx
index 57c91447..f713bb3e 100644
--- a/co-kkiri/src/components/domains/manage/MemberList.tsx
+++ b/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>
         ))}
diff --git a/co-kkiri/src/components/domains/myPage/UserInfo.tsx b/co-kkiri/src/components/domains/myPage/UserInfo.tsx
index c3973c62..b5ca5dff 100644
--- a/co-kkiri/src/components/domains/myPage/UserInfo.tsx
+++ b/co-kkiri/src/components/domains/myPage/UserInfo.tsx
@@ -1,10 +1,83 @@
+import Button from "@/components/commons/Button";
+import PositionChip from "@/components/commons/Chips/PositionChip";
+import Stacks from "@/components/commons/Stacks";
 import ToggleButton from "@/components/commons/ToggleButton";
-import UserProfileCard from "@/components/commons/UserProfileCard";
+import EditUserProfileModal from "@/components/modals/EditUserProfileModal";
+import ModalPortal from "@/components/modals/ModalPortal";
+import * as S from "@/components/modals/UserProfileModal/UserProfileModal.styled";
+import { IMAGES } from "@/constants/images";
 import { UserInfoApiResponseDto } from "@/lib/api/myPage/type";
 import DESIGN_TOKEN from "@/styles/tokens";
 import { useState } from "react";
 import styled from "styled-components";
 
+interface UserProfileProps {
+  user: UserInfoApiResponseDto;
+}
+
+// 컴포넌트로 따로 분리하기
+function UserProfile({ user }: UserProfileProps) {
+  const [isEditUserProfileModal, setIsEditUserProfileModal] = useState(false);
+
+  const handleOpenModal = () => {
+    setIsEditUserProfileModal(!isEditUserProfileModal);
+  };
+  return (
+    <Section>
+      <S.Container>
+        {user.profileImageUrl ? (
+          <S.ProfileImg src={user.profileImageUrl} alt="프로필 이미지" />
+        ) : (
+          <img src={IMAGES.profileImgBig.src} alt={IMAGES.profileImgBig.alt} />
+        )}
+        <PositionChip label={user.position} />
+        <S.ProfileBox>
+          <S.ProfileWrapper>
+            <S.Nickname>{user.nickname}</S.Nickname>
+            <S.Career>{user.career ? `경력 ${user.career}년차` : "경력을 아직 작성하지 않았어요!"}</S.Career>
+          </S.ProfileWrapper>
+          <Stacks stacks={user.stacks} />
+          <S.Introduce>{user.introduce ? user.introduce : "한줄소개를 아직 작성하지 않았어요!"}</S.Introduce>
+        </S.ProfileBox>
+        <S.LinkBox>
+          <S.LinkWrapper>
+            {user.link ? (
+              <a key={user.link} href={user.link} target="_blank" rel="noopner noreferrer">
+                {user.link}
+              </a>
+            ) : (
+              "링크없음"
+            )}
+          </S.LinkWrapper>
+        </S.LinkBox>
+        <Button variant="ghost" onClick={handleOpenModal}>
+          수정하기
+        </Button>
+      </S.Container>
+      {isEditUserProfileModal && (
+        <ModalPortal>
+          <EditUserProfileModal onClose={handleOpenModal} />
+        </ModalPortal>
+      )}
+    </Section>
+  );
+}
+
+const { typography, color, mediaQueries } = DESIGN_TOKEN;
+
+const Section = styled.div`
+  background-color: ${color.white};
+  width: 43rem;
+  height: 50.6rem;
+  border-radius: 1rem;
+  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
+  padding: 4.1rem 3rem 3rem;
+  ${mediaQueries.mobile} {
+    width: 32rem;
+    height: 50.6rem;
+  }
+`;
+
 interface UserInfoProps {
   user: UserInfoApiResponseDto;
 }
@@ -18,16 +91,7 @@ export default function UserInfo({ user }: UserInfoProps) {
 
   return (
     <Container>
-      <UserProfileCard
-        nickname={user.nickname}
-        position={user.position}
-        career={user.career}
-        stacks={user.stacks}
-        score={40}
-        introduce={user.introduce}
-        link={user.link}
-        cardType="mypage"
-      />
+      <UserProfile user={user} />
       <Box>
         <Scout>
           <ToggleButton content="스카우트 동의" onChange={handleIsVisibleProfile} isChecked={isChecked} />
@@ -38,8 +102,6 @@ export default function UserInfo({ user }: UserInfoProps) {
   );
 }
 
-const { typography, color, mediaQueries } = DESIGN_TOKEN;
-
 const Container = styled.div`
   width: 43rem;
   display: flex;
diff --git a/co-kkiri/src/components/domains/scout/ScoutCards.tsx b/co-kkiri/src/components/domains/scout/ScoutCards.tsx
index fe6f9bb7..f6a5a0ff 100644
--- a/co-kkiri/src/components/domains/scout/ScoutCards.tsx
+++ b/co-kkiri/src/components/domains/scout/ScoutCards.tsx
@@ -26,7 +26,6 @@ export default function ScoutCards({ userProfiles }: ScoutCardsProps) {
               career={career}
               stacks={stacks}
               score={score}
-              cardType="scout"
             />
           ))}
         </Wrapper>
diff --git a/co-kkiri/src/components/modals/UserProfileModal.tsx b/co-kkiri/src/components/modals/UserProfileModal.tsx
index b6991b6b..59bdb899 100644
--- a/co-kkiri/src/components/modals/UserProfileModal.tsx
+++ b/co-kkiri/src/components/modals/UserProfileModal.tsx
@@ -35,6 +35,14 @@ export default function UserProfileModal({ userId }: UserProfileModalProps) {
   return (
     <ModalLayout desktopWidth={430} tabletWidth={430} mobileWidth={320} onClose={() => {}}>
       <UserProfileCardLayout {...memberProfile} />
+      <Box>
+        <Introduce>
+          {isEmptyValue(memberProfile.introduce) ? emptyMessages.introduce : memberProfile.introduce}
+        </Introduce>
+        <Link href={memberProfile.link || ""} target="_blank" rel="noopener noreferrer">
+          <p>{isEmptyValue(memberProfile.link) ? emptyMessages.link : memberProfile.link}</p>
+        </Link>
+      </Box>
       <Divider />
       <CollapseSection title="유저가 받은 태그" isCollapsed={isOpen} onClick={() => setIsOpen(!isOpen)}>
         {isEmptyValue(memberProfile.tags) ? (
@@ -54,6 +62,8 @@ export default function UserProfileModal({ userId }: UserProfileModalProps) {
 }
 
 const emptyMessages = {
+  link: "링크 없음",
+  introduce: "한줄소개를 아직 작성하지 않았어요!",
   tags: "아직 받은 태그가 없어요.",
 };
 
diff --git a/co-kkiri/src/components/modals/UserProfileModal_invalid/UserProfileModal.styled.ts b/co-kkiri/src/components/modals/UserProfileModal/UserProfileModal.styled.ts
similarity index 100%
rename from co-kkiri/src/components/modals/UserProfileModal_invalid/UserProfileModal.styled.ts
rename to co-kkiri/src/components/modals/UserProfileModal/UserProfileModal.styled.ts
diff --git a/co-kkiri/src/components/modals/UserProfileModal_invalid/index.tsx b/co-kkiri/src/components/modals/UserProfileModal/index.tsx
similarity index 100%
rename from co-kkiri/src/components/modals/UserProfileModal_invalid/index.tsx
rename to co-kkiri/src/components/modals/UserProfileModal/index.tsx
diff --git a/co-kkiri/src/components/modals/UserProfileModal_invalid/test.tsx b/co-kkiri/src/components/modals/UserProfileModal/test.tsx
similarity index 98%
rename from co-kkiri/src/components/modals/UserProfileModal_invalid/test.tsx
rename to co-kkiri/src/components/modals/UserProfileModal/test.tsx
index 18d15f75..41dfe2cf 100644
--- a/co-kkiri/src/components/modals/UserProfileModal_invalid/test.tsx
+++ b/co-kkiri/src/components/modals/UserProfileModal/test.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import UserProfileModal from "@/components/modals/UserProfileModal_invalid";
+import UserProfileModal from "@/components/modals/UserProfileModal/";
 
 export default function ModalTestPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
diff --git a/co-kkiri/src/lib/api/address.ts b/co-kkiri/src/lib/api/address.ts
index 941f1fa8..e001c61a 100644
--- a/co-kkiri/src/lib/api/address.ts
+++ b/co-kkiri/src/lib/api/address.ts
@@ -44,7 +44,7 @@ export const teamMemberAddress = {
   //patch
   reject: (teamMemberId: number) => `/post/team-member/${teamMemberId}/reject`,
   //delete
-  out: (teamMemberId: number) => `/post/team-member/${teamMemberId}`,
+  out: (teamMemberId: number) => `/post/team-member/${teamMemberId}/out`,
 };
 
 export const commentAddress = {
diff --git a/co-kkiri/src/lib/mock/myPage/myScrap.ts b/co-kkiri/src/lib/mock/myPage/myScrap.ts
index ad7f8396..6c906a15 100644
--- a/co-kkiri/src/lib/mock/myPage/myScrap.ts
+++ b/co-kkiri/src/lib/mock/myPage/myScrap.ts
@@ -8,105 +8,105 @@ export const myScrapList: MyScrapList = {
   result: {
     scrapList: [
       {
-        postId: 34,
+        id: 34,
         type: "PROJECT",
         recruitEndAt: "2025-12-01",
-
+        status: "READY",
         isScraped: false,
         progressWay: "오프라인",
         title: "빅데이터 기반 스마트 시티 구축",
-        positions: ["프론트엔드", "안드로이드", "디자이너", "개발자"],
-        stacks: ["Python", "Django", "Vue.js"],
+        position: ["프론트엔드", "안드로이드", "디자이너", "개발자"],
+        stack: ["Python", "Django", "Vue.js"],
         memberNickname: "빅데이터스마트시티G안녕하세요오긴글테스트",
         memberProfileImg: "",
         viewCount: 1350,
         commentCount: 155,
       },
       {
-        postId: 33,
+        id: 33,
         type: "PROJECT",
         recruitEndAt: "2025-11-15",
-
+        status: "READY",
         isScraped: true,
         progressWay: "온라인",
         title: "스마트 홈 네트워크 시스템",
-        positions: ["개발자", "안드로이드", "프론트엔드", "디자이너", "백엔드", "IOS"],
-        stacks: ["Node.js", "Express", "MongoDB", "HTML", "CSS", "JavaScript", "Python", "R", "SQL"],
+        position: ["개발자", "안드로이드", "프론트엔드", "디자이너", "백엔드", "IOS"],
+        stack: ["Node.js", "Express", "MongoDB", "HTML", "CSS", "JavaScript", "Python", "R", "SQL"],
         memberNickname: "스마트홈네트워크G",
         memberProfileImg: "",
         viewCount: 1300,
         commentCount: 150,
       },
       {
-        postId: 32,
+        id: 32,
         type: "PROJECT",
         recruitEndAt: "2025-10-01",
-
+        status: "READY",
         isScraped: false,
         progressWay: "오프라인",
         title: "데이터 기반 인공지능 트레이딩 시스템",
-        positions: ["백엔드"],
-        stacks: [],
+        position: ["백엔드"],
+        stack: [],
         memberNickname: "AI트레이딩G",
         memberProfileImg: "",
         viewCount: 1250,
         commentCount: 145,
       },
       {
-        postId: 31,
+        id: 31,
         type: "PROJECT",
         recruitEndAt: "2025-09-15",
-
+        status: "READY",
         isScraped: true,
         progressWay: "온라인",
         title: "자연어 처리 기반 챗봇 시스템",
-        positions: ["백엔드"],
-        stacks: ["Python", "TensorFlow", "NLTK"],
+        position: ["백엔드"],
+        stack: ["Python", "TensorFlow", "NLTK"],
         memberNickname: "챗봇G",
         memberProfileImg: "",
         viewCount: 1200,
         commentCount: 140,
       },
       {
-        postId: 30,
+        id: 30,
         type: "PROJECT",
         recruitEndAt: "2025-08-01",
-
+        status: "READY",
         isScraped: false,
         progressWay: "오프라인",
         title: "얼굴 인식 기반 출석 관리 시스템",
-        positions: ["백엔드"],
-        stacks: ["Python", "OpenCV", "Django"],
+        position: ["백엔드"],
+        stack: ["Python", "OpenCV", "Django"],
         memberNickname: "출석G",
         memberProfileImg: "",
         viewCount: 1150,
         commentCount: 135,
       },
       {
-        postId: 29,
+        id: 29,
         type: "PROJECT",
         recruitEndAt: "2025-07-15",
-
+        status: "READY",
         isScraped: true,
         progressWay: "온라인",
         title: "인공지능 기반 스피치 인식 프로젝트",
-        positions: ["백엔드"],
-        stacks: ["Python", "TensorFlow", "SpeechRecognition"],
+        position: ["백엔드"],
+        stack: ["Python", "TensorFlow", "SpeechRecognition"],
         memberNickname: "스피치G",
         memberProfileImg: "",
         viewCount: 1100,
         commentCount: 130,
       },
       {
-        postId: 28,
+        id: 28,
         type: "PROJECT",
         recruitEndAt: "2025-06-01",
-
+        status: "READY",
         isScraped: false,
         progressWay: "오프라인",
         title: "로봇 시각 인식 시스템 개발",
-        positions: ["프론트엔드", "백엔드", "디자이너"],
-        stacks: ["Python", "OpenCV", "ROS"],
+        position: ["프론트엔드", "백엔드", "디자이너"],
+        stack: ["Python", "OpenCV", "ROS"],
         memberNickname: "로봇G",
         memberProfileImg: "",
         viewCount: 1050,
diff --git a/co-kkiri/src/lib/mock/myPage/userProfileInfo.ts b/co-kkiri/src/lib/mock/myPage/userProfileInfo.ts
index 6ca331e3..02111e2f 100644
--- a/co-kkiri/src/lib/mock/myPage/userProfileInfo.ts
+++ b/co-kkiri/src/lib/mock/myPage/userProfileInfo.ts
@@ -14,7 +14,7 @@ export const userProfileInfoData: UserProfileInfoData = {
       position: "프론트엔드",
       career: 1,
       introduce: "안녕하세요. 주니어 개발자 코끼리입니다.",
-      stacks: ["React", "Next.js"],
+      stack: ["React", "Next.js"],
       link: "https://www.youtube.com",
       isVisibleProfile: true,
     },
diff --git a/co-kkiri/src/pages/Manage/index.tsx b/co-kkiri/src/pages/Manage/index.tsx
index a1437174..27d687aa 100644
--- a/co-kkiri/src/pages/Manage/index.tsx
+++ b/co-kkiri/src/pages/Manage/index.tsx
@@ -4,81 +4,106 @@ import AppliedList from "@/components/domains/manage/AppliedList";
 import { getAppliedMemberList, getStudyManagement } from "@/lib/api/post";
 import { useEffect, useState } from "react";
 import { AppliedMemberListApiResponseDto, StudyManagementApiResponseDto } from "@/lib/api/post/type";
-import { getTeamMember } from "@/lib/api/teamMember";
+import { acceptMember, deleteTeamMember, getTeamMember, rejectMember } from "@/lib/api/teamMember";
 import { TeamMemberApiResponseDto } from "@/lib/api/teamMember/type";
-import { useQuery } from "@tanstack/react-query";
 
 interface ManageProps {
   postId: StudyManagementApiResponseDto["postId"];
 }
 
-export default function Manage({ postId }: ManageProps) {
+export default function Manage({ postId = 1 }: ManageProps) {
   const [detailInfo, setDetailInfo] = useState<StudyManagementApiResponseDto>();
   const [appliedMemberList, setAppliedMemberList] = useState<AppliedMemberListApiResponseDto["data"]>([]);
   const [memberList, setMemberList] = useState<TeamMemberApiResponseDto["data"]>([]);
 
-  const {
-    data: detailInfoData,
-    error,
-    isError,
-  } = useQuery({
-    queryKey: ["management", postId],
-    queryFn: () => getStudyManagement(postId),
-  });
-  const {
-    data: appliedMemberListData,
-    error: appliedMemberListError,
-    isError: isAppliedMemberListError,
-  } = useQuery({
-    queryKey: ["appliedMemberList", postId],
-    queryFn: () => getAppliedMemberList(postId, { order: "DESC", page: 1, take: 100 }),
-  });
-  const {
-    data: memberListData,
-    error: memberListError,
-    isError: isMemberListError,
-  } = useQuery({
-    queryKey: ["memberList", postId],
-    queryFn: () => getTeamMember(postId, { order: "DESC", page: 1, take: 5 }),
-  });
-
-  if (isError) {
-    console.error(error);
-  }
+  const handleAcceptMember = async (teamMemberId: number) => {
+    try {
+      await acceptMember(teamMemberId);
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
-  if (isAppliedMemberListError) {
-    console.error(appliedMemberListError);
-  }
+  const handleRejectMember = async (teamMemberId: number) => {
+    try {
+      await rejectMember(teamMemberId);
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
-  if (isMemberListError) {
-    console.error(memberListError);
-  }
+  const handleDeleteMember = async (teamMemberId: number) => {
+    try {
+      await deleteTeamMember(teamMemberId);
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   useEffect(() => {
-    if (detailInfoData) {
-      setDetailInfo(detailInfoData);
-    }
-  }, [detailInfoData]);
+    const getDetailInfo = async () => {
+      const response = await getStudyManagement(postId);
+      try {
+        if (response && response.data) {
+          setDetailInfo(response.data);
+        } else {
+          window.alert(response.errorMessage);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    getDetailInfo();
+  }, [postId]);
 
   useEffect(() => {
-    if (appliedMemberListData) {
-      setAppliedMemberList(appliedMemberListData.data);
-    }
-  }, [appliedMemberListData]);
+    const getAppliedMember = async () => {
+      const response = await getAppliedMemberList(postId, {
+        order: "DESC",
+        page: 1,
+        take: 100,
+      });
+      try {
+        if (response && response.data) {
+          setAppliedMemberList(response.data.data);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    getAppliedMember();
+  }, [postId]);
 
   useEffect(() => {
-    if (memberListData) {
-      setMemberList(memberListData.data);
-    }
-  }, [memberListData]);
+    const getMember = async () => {
+      const response = await getTeamMember(postId, {
+        order: "DESC",
+        page: 1,
+        take: 5,
+      });
+      try {
+        if (response && response.data) {
+          setMemberList(response.data.data);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    getMember();
+  }, [postId]);
 
   return (
     <S.Container>
       <S.Box>
         {detailInfo && <S.DetailSection detailInfo={detailInfo} />}
         <S.ListSection>
-          <AppliedList detailInfo={appliedMemberList} />
-          <MemberList detailInfo={memberList} />
+          <AppliedList
+            detailInfo={appliedMemberList}
+            handleAcceptMember={(teamMemberId) => handleAcceptMember(teamMemberId)}
+            handleRejectMember={(teamMemberId) => handleRejectMember(teamMemberId)}
+          />
+          <MemberList detailInfo={memberList} handleOutMember={(teamMemberId) => handleDeleteMember(teamMemberId)} />
         </S.ListSection>
         {detailInfo && <S.ButtonSection buttonType={detailInfo.status} isLeader={detailInfo.isLeader} />}
       </S.Box>