- {nickNamesnackBar && (
+ {nickNameSnackBar && (
}
message="닉네임 변경 완료"
type="success"
/>
)}
- {imagenackBar && (
+ {imageSnackBar && (
}
message="프로필 변경 완료"
type="success"
/>
)}
+ {nickNameErrorSnackBar && (
+
}
+ message="동일한 이름입니다."
+ type="error"
+ />
+ )}
);
}
diff --git a/src/components/mysetting/usermockdata.ts b/src/components/mysetting/usermockdata.ts
deleted file mode 100644
index 30b0fc40..00000000
--- a/src/components/mysetting/usermockdata.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-const userMockData = {
- teamId: 1,
- image:
- 'https://i.pinimg.com/736x/0c/c7/16/0cc7169aec1d81898f1daf4b46d41857.jpg',
- nickname: '장용한',
- updatedAt: '2024-10-12T03:49:32.544Z',
- createdAt: '2024-10-12T03:49:33.544Z',
- email: 'wkddydgks1@naver.com',
- id: 1,
-};
-
-export default userMockData;
diff --git a/src/components/tasks/AddTaskForm.tsx b/src/components/tasks/AddTaskForm.tsx
index 1fe9e5cc..8c23672e 100644
--- a/src/components/tasks/AddTaskForm.tsx
+++ b/src/components/tasks/AddTaskForm.tsx
@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
import { Dayjs } from 'dayjs';
import { useDate } from '@/src/contexts/DateContext';
import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import { postTask, TaskUrlParams } from '@/src/api/tasks/taskAPI';
import { toKSTISOString } from '@utils/toKSTISOString';
diff --git a/src/components/tasks/TaskCard.tsx b/src/components/tasks/TaskCard.tsx
index c0abdbd1..a437365c 100644
--- a/src/components/tasks/TaskCard.tsx
+++ b/src/components/tasks/TaskCard.tsx
@@ -6,7 +6,7 @@ import type { TaskDto } from '@/src/types/tasks/taskDto';
import { formatTaskCardDate } from '@utils/getFormattedDate';
import { useRouter } from 'next/router';
import { useModal } from '@hooks/useModal';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import useDropdownModals from '@hooks/useDropdownModals';
import Image from 'next/image';
diff --git a/src/components/tasks/TaskComments.tsx b/src/components/tasks/TaskComments.tsx
index a0647633..2dfa62eb 100644
--- a/src/components/tasks/TaskComments.tsx
+++ b/src/components/tasks/TaskComments.tsx
@@ -11,7 +11,7 @@ import {
patchComment,
CommentUrlParams,
} from '@/src/api/tasks/commentAPI';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import getSortedDate from '@utils/getSortedDate';
import getTimeAgo from '@utils/getTimeAgo';
import ClickMotion from '@components/@shared/animation/ClickMotion';
@@ -222,7 +222,7 @@ export function TaskComments() {
@@ -230,7 +230,7 @@ export function TaskComments() {
type="submit"
disabled={!isValid}
className={`my-auto h-9 w-14 rounded-md border-[1px] px-2 py-1 text-xs-medium text-white
- ${!isValid ? 'border-background-tertiary bg-text-default ' : 'border-brand-primary bg-brand-primary hover:bg-brand-secondary'}`}
+ ${!isValid ? 'border-background-tertiary bg-text-disabled ' : 'border-brand-primary bg-brand-primary hover:bg-interaction-hover'}`}
>
수정
diff --git a/src/components/tasks/TaskDate.tsx b/src/components/tasks/TaskDate.tsx
index 293349cb..4aa95b75 100644
--- a/src/components/tasks/TaskDate.tsx
+++ b/src/components/tasks/TaskDate.tsx
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { formatTaskListDate } from '@utils/getFormattedDate';
import { useDate } from '@/src/contexts/DateContext';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import BounceTextMotion from '@components/@shared/animation/BounceTextMotion';
import SlideInMotion from '@components/@shared/animation/SlideInMotion';
import DatePagination from './UI/DatePagination';
diff --git a/src/components/tasks/TaskDetails.tsx b/src/components/tasks/TaskDetails.tsx
index ea07f58b..b1731da5 100644
--- a/src/components/tasks/TaskDetails.tsx
+++ b/src/components/tasks/TaskDetails.tsx
@@ -6,7 +6,7 @@ import RepeatIcon from '@icons/repeat.svg';
import { useRouter } from 'next/router';
import { useQuery } from '@tanstack/react-query';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import { useDate } from '@/src/contexts/DateContext';
import { toKSTISOString } from '@utils/toKSTISOString';
import { getTask, patchTask, TaskUrlParams } from '@/src/api/tasks/taskAPI';
diff --git a/src/components/tasks/TaskList.tsx b/src/components/tasks/TaskList.tsx
index 875ed41c..89e29315 100644
--- a/src/components/tasks/TaskList.tsx
+++ b/src/components/tasks/TaskList.tsx
@@ -1,9 +1,9 @@
import Link from 'next/link';
import { useEffect, useCallback, useState, useRef } from 'react';
import { useRouter } from 'next/router';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import getResponsiveValue from '@utils/getResponsiveValue';
-import TextButtonMotion from '@components/@shared/animation/TextButtonMotion';
+import ButtonMotion from '@components/@shared/animation/ButtonMotion';
import TaskCard from './TaskCard';
import NoTaskCard from './UI/NoTaskCard';
import ListPagination from './UI/ListPagination';
@@ -135,14 +135,14 @@ export default function TaskList() {
query: { taskListId: taskList.id },
}}
>
-
+
-
+
))}
diff --git a/src/components/tasks/UI/CheckBox.tsx b/src/components/tasks/UI/CheckBox.tsx
index 49fe65f3..da345f94 100644
--- a/src/components/tasks/UI/CheckBox.tsx
+++ b/src/components/tasks/UI/CheckBox.tsx
@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import { patchTask, TaskUrlParams } from '@/src/api/tasks/taskAPI';
import ActiveCheckBoxIcon from '@icons/checkbox_active.svg';
import InActiveCheckBoxIcon from '@icons/checkbox_inactive.svg';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import type { TaskRequestBody } from '@/src/types/tasks/taskDto';
import ClickMotion from '@components/@shared/animation/ClickMotion';
diff --git a/src/components/tasks/UI/ListPagination.tsx b/src/components/tasks/UI/ListPagination.tsx
index 39c3f7f6..9649a167 100644
--- a/src/components/tasks/UI/ListPagination.tsx
+++ b/src/components/tasks/UI/ListPagination.tsx
@@ -1,6 +1,6 @@
import ICON_PATHS from '@constants/iconPaths';
import Image from 'next/image';
-import TextButtonMotion from '@components/@shared/animation/TextButtonMotion';
+import ButtonMotion from '@components/@shared/animation/ButtonMotion';
interface PaginationProps {
currentPage: number;
@@ -17,7 +17,7 @@ export default function ListPagination({
}: PaginationProps) {
return (
-
+
이전 목록
-
-
+
@@ -63,7 +63,7 @@ export default function ListPagination({
className="m-auto"
/>
-
+
);
}
diff --git a/src/components/tasks/UI/button/AddTaskButton.tsx b/src/components/tasks/UI/button/AddTaskButton.tsx
index bca33983..45b67242 100644
--- a/src/components/tasks/UI/button/AddTaskButton.tsx
+++ b/src/components/tasks/UI/button/AddTaskButton.tsx
@@ -1,5 +1,5 @@
import { useModal } from '@hooks/useModal';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import { useDate } from '@/src/contexts/DateContext';
import ClickMotion from '@components/@shared/animation/ClickMotion';
import Button from '@components/@shared/Button';
diff --git a/src/components/tasks/UI/button/AddTaskListButton.tsx b/src/components/tasks/UI/button/AddTaskListButton.tsx
index 9dd3fffe..529db7ca 100644
--- a/src/components/tasks/UI/button/AddTaskListButton.tsx
+++ b/src/components/tasks/UI/button/AddTaskListButton.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
import { useModal } from '@hooks/useModal';
import useViewportSize from '@hooks/useViewportSize';
import ICON_PATHS from '@constants/iconPaths';
-import TextButtonMotion from '@components/@shared/animation/TextButtonMotion';
+import ButtonMotion from '@components/@shared/animation/ButtonMotion';
import AddTaskListModal from '../modal/AddTaskListModal';
export default function AddTaskListButton() {
@@ -16,7 +16,7 @@ export default function AddTaskListButton() {
onClick={onOpen}
className=" flex items-center gap-2"
>
-
+
{isMobile ? '목록 추가' : '새로운 목록 추가하기'}
-
+
{isOpen &&
}
diff --git a/src/components/tasks/UI/modal/AddTaskListModal.tsx b/src/components/tasks/UI/modal/AddTaskListModal.tsx
index 660e5014..fc2612ab 100644
--- a/src/components/tasks/UI/modal/AddTaskListModal.tsx
+++ b/src/components/tasks/UI/modal/AddTaskListModal.tsx
@@ -5,7 +5,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { TASKLIST_REQUEST_INIT } from '@constants/initValues';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import { postTaskList, TaskListUrlParams } from '@/src/api/tasks/taskListAPI';
import type { TaskListRequestBody } from '@/src/types/tasks/taskListDto';
import NameInput from '../input/NameInput';
diff --git a/src/components/tasks/UI/modal/DeleteRecurringModal.tsx b/src/components/tasks/UI/modal/DeleteRecurringModal.tsx
index b8338a1f..4bf5e141 100644
--- a/src/components/tasks/UI/modal/DeleteRecurringModal.tsx
+++ b/src/components/tasks/UI/modal/DeleteRecurringModal.tsx
@@ -3,7 +3,7 @@ import Button from '@components/@shared/Button';
import { Modal } from '@components/@shared/Modal';
import { deleteRecurringTask, TaskUrlParams } from '@/src/api/tasks/taskAPI';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import { useMutation, useQueryClient } from '@tanstack/react-query';
interface DeleteRecurringModalProps {
diff --git a/src/components/tasks/UI/modal/DeleteTaskModal.tsx b/src/components/tasks/UI/modal/DeleteTaskModal.tsx
index bf7ad85a..2b6f6498 100644
--- a/src/components/tasks/UI/modal/DeleteTaskModal.tsx
+++ b/src/components/tasks/UI/modal/DeleteTaskModal.tsx
@@ -3,7 +3,7 @@ import Button from '@components/@shared/Button';
import { Modal } from '@components/@shared/Modal';
import { deleteTask, TaskUrlParams } from '@/src/api/tasks/taskAPI';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import { useMutation, useQueryClient } from '@tanstack/react-query';
interface DeleteTaskModalProps {
diff --git a/src/components/tasks/UI/modal/EditTaskModal.tsx b/src/components/tasks/UI/modal/EditTaskModal.tsx
index 776504c5..8dd67b38 100644
--- a/src/components/tasks/UI/modal/EditTaskModal.tsx
+++ b/src/components/tasks/UI/modal/EditTaskModal.tsx
@@ -2,7 +2,7 @@ import Button from '@components/@shared/Button';
import { Modal } from '@components/@shared/Modal';
import { patchTask, TaskUrlParams } from '@/src/api/tasks/taskAPI';
-import { useTaskListStore } from '@/src/stores/taskListStore';
+import { useTaskListStore } from '@/src/stores/useTaskListStore';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { TASK_REQUEST_INIT } from '@constants/initValues';
diff --git a/src/components/team/CircleGraph.tsx b/src/components/team/CircleGraph.tsx
index 69e6a97e..bbe4faff 100644
--- a/src/components/team/CircleGraph.tsx
+++ b/src/components/team/CircleGraph.tsx
@@ -2,6 +2,7 @@ import {
calculateCircleProgress,
calculateCircleViewBox,
} from '@utils/calculateCircleProgress';
+import { useEffect, useRef } from 'react';
type GraphProps = {
backgroundColor: string; // 배경 원의 색상
@@ -26,6 +27,8 @@ export default function CircleGraph({
additionalTextColor,
isTextShown = false,
}: GraphProps) {
+ const circleRef = useRef
(null);
+
const { viewBox, centerX, centerY } = calculateCircleViewBox({
radius,
strokeWidth,
@@ -41,6 +44,22 @@ export default function CircleGraph({
const boxSize = 2 * (radius + strokeWidth);
+ useEffect(() => {
+ if (!circleRef.current) return;
+ if (circleRef.current) {
+ // 초기 애니메이션 효과 설정
+ circleRef.current.style.transition = 'stroke-dashoffset 1s ease-out';
+
+ // 초기에는 가득 채워진 상태에서 시작
+ circleRef.current.style.strokeDashoffset = '100%';
+
+ // 이후 목표 퍼센트에 맞춰 채워지도록 설정
+ requestAnimationFrame(() => {
+ circleRef.current!.style.strokeDashoffset = `${strokeDashoffset}px`;
+ });
+ }
+ }, [strokeDashoffset]);
+
return (
},
+ { label: 'email', component: 이메일로 추가
},
+];
+
+interface OptionDropdownProps {
+ triggerIcon: ReactNode;
+ onSelect: (option: Option) => void;
+}
+
+export default function OptionDropdown({
+ triggerIcon,
+ onSelect,
+}: OptionDropdownProps) {
+ return (
+
+ );
+}
diff --git a/src/components/team/Report.tsx b/src/components/team/Report.tsx
index 0bef75f8..8a798914 100644
--- a/src/components/team/Report.tsx
+++ b/src/components/team/Report.tsx
@@ -1,5 +1,6 @@
import { useEffect, useState } from 'react';
-import { useTeamStore } from '@/src/stores/teamStore';
+import { useTeamStore } from '@/src/stores/useTeamStore';
+import SlideInMotion from '@components/@shared/animation/SlideInMotion';
import Image from 'next/image';
import CircleGraph from './CircleGraph';
@@ -28,8 +29,8 @@ export default function Report() {
return (
);
}
diff --git a/src/components/team/banner/DeleteTeamModal.tsx b/src/components/team/banner/DeleteTeamModal.tsx
index 75faf695..bd3f2159 100644
--- a/src/components/team/banner/DeleteTeamModal.tsx
+++ b/src/components/team/banner/DeleteTeamModal.tsx
@@ -1,5 +1,5 @@
import { deleteGroupById } from '@/src/api/team/teamAPI';
-import { useTeamStore } from '@/src/stores/teamStore';
+import { useTeamStore } from '@/src/stores/useTeamStore';
import Button from '@components/@shared/Button';
import { Modal } from '@components/@shared/Modal';
import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -76,11 +76,7 @@ export default function DeleteTeamModal({
width={24}
height={24}
/>
- {isAdmin ? (
- 목록을 삭제하시겠어요?
- ) : (
- 권한 없음
- )}
+ {isAdmin ? 팀을 삭제하시겠어요? : 권한 없음}
{isAdmin && (
diff --git a/src/components/team/banner/EditTeamModal.tsx b/src/components/team/banner/EditTeamModal.tsx
index 725e2d71..fc7a8218 100644
--- a/src/components/team/banner/EditTeamModal.tsx
+++ b/src/components/team/banner/EditTeamModal.tsx
@@ -1,6 +1,6 @@
import { postImage } from '@/src/api/imageAPI';
import { patchGroupById } from '@/src/api/team/teamAPI';
-import { useTeamStore } from '@/src/stores/teamStore';
+import { useTeamStore } from '@/src/stores/useTeamStore';
import Image from 'next/image';
import Button from '@components/@shared/Button';
import { Input } from '@components/@shared/Input';
@@ -90,6 +90,7 @@ export default function EditTeamModal({ isOpen, onClose }: EditTeamModalProps) {
validateValueOnSubmit('teamName', TeamNames, localTeamName, teamName)
) {
editGroup({ groupId: id, image: imgUrl, name: localTeamName });
+ setTeamName(localTeamName); // 최종적으로 store에 반영
}
},
onSettled: () => {
@@ -106,13 +107,16 @@ export default function EditTeamModal({ isOpen, onClose }: EditTeamModalProps) {
if (!isAdmin) {
return;
}
- setTeamName(localTeamName); // 최종적으로 store에 반영
- if (imageFile) {
- // 새로 선택된 파일이 있으면 업로드
- uploadImageMutate.mutate(imageFile);
- } else {
- // 파일이 없으면 기존 URL로 그룹 수정
- editGroup({ groupId: id, image: imageUrl, name: localTeamName });
+
+ if (validateValueOnSubmit('teamName', TeamNames, localTeamName, teamName)) {
+ if (imageFile) {
+ // 새로 선택된 파일이 있으면 업로드
+ uploadImageMutate.mutate(imageFile);
+ } else {
+ // 파일이 없으면 기존 URL로 그룹 수정
+ editGroup({ groupId: id, image: imageUrl, name: localTeamName });
+ setTeamName(localTeamName); // 최종적으로 store에 반영
+ }
}
};
diff --git a/src/components/team/banner/TeamBanner.tsx b/src/components/team/banner/TeamBanner.tsx
index fc369a21..166f3f81 100644
--- a/src/components/team/banner/TeamBanner.tsx
+++ b/src/components/team/banner/TeamBanner.tsx
@@ -1,7 +1,8 @@
import { useModal } from '@hooks/useModal';
import { Option } from '@components/@shared/Dropdown';
-import { useTeamStore } from '@/src/stores/teamStore';
+import { useTeamStore } from '@/src/stores/useTeamStore';
import Image from 'next/image';
+import SlideInMotion from '@components/@shared/animation/SlideInMotion';
import EditDropdown from '../EditDropdown';
import EditTeamModal from './EditTeamModal';
import DeleteTeamModal from './DeleteTeamModal';
@@ -40,7 +41,7 @@ export default function TeamBanner() {
} // '삭제하기'를 선택했을 때
};
return (
-
+
+
);
}
diff --git a/src/components/team/member/EmailInvitationModal.tsx b/src/components/team/member/EmailInvitationModal.tsx
new file mode 100644
index 00000000..64b3667f
--- /dev/null
+++ b/src/components/team/member/EmailInvitationModal.tsx
@@ -0,0 +1,134 @@
+import Button from '@components/@shared/Button';
+import { Modal } from '@components/@shared/Modal';
+import { inviteMember } from '@/src/api/team/memberAPI';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTeamStore } from '@/src/stores/useTeamStore';
+import Snackbar from '@components/article/Snackbar';
+import SuccessIcon from 'public/icons/successicon.svg';
+import FailIcon from 'public/icons/failIcon.svg';
+import { useState } from 'react';
+import { Input } from '@components/@shared/Input';
+import useClipboardCopy from '@hooks/useClipBoardCopy';
+import { postAcceptInvitation } from '@/src/api/addteam/participateTeamAPI';
+
+interface EmailInvitationModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export default function EmailInvitationModal({
+ isOpen,
+ onClose,
+}: EmailInvitationModalProps) {
+ const { showSnackbar, isSnackBarOpen, snackBarMessage, snackBarType } =
+ useClipboardCopy();
+ const [emailValue, setEmailValue] = useState('');
+ const [isError, setIsError] = useState(false);
+ const [icon, SetIcon] = useState(
);
+ const [errorMessage, setErrorMessage] = useState('');
+ const queryClient = useQueryClient();
+
+ const { id, members } = useTeamStore();
+
+ const { data: teamToken } = useQuery({
+ queryKey: ['inviteMember', id],
+ queryFn: () => inviteMember(Number(id)),
+ });
+
+ // 그룹 내에 존재하는 팀원인지 판별
+ const isAlreadyMember =
+ members && members.find((member) => member.userEmail === emailValue);
+
+ // 그룹 수정 Mutation
+ const inviteMemberByEmail = useMutation({
+ mutationFn: ({ userEmail, token }: { userEmail: string; token: string }) =>
+ postAcceptInvitation(userEmail, token),
+ onSuccess: () => {
+ onClose();
+ setEmailValue('');
+ SetIcon(
);
+ showSnackbar('멤버 초대 성공!', 'success');
+ },
+ onSettled: () => {
+ // 쿼리 무효화 및 리패치
+ queryClient.invalidateQueries({ queryKey: ['group', id] });
+ },
+ onError: (error: any) => {
+ if (error.response?.data?.message === '유저가 존재하지 않습니다.') {
+ setIsError(true);
+ setErrorMessage('존재하지 않는 유저입니다.');
+ SetIcon(
);
+ showSnackbar('멤버 초대 실패', 'error');
+ } else {
+ SetIcon(
);
+ showSnackbar('멤버 초대 실패', 'error');
+ setEmailValue('');
+ }
+ },
+ });
+
+ const handleChange = (e: React.ChangeEvent
) => {
+ const { value } = e.target;
+ setIsError(false);
+ setEmailValue(value);
+ };
+
+ const handleInviteClick = () => {
+ if (isAlreadyMember) {
+ setIsError(true);
+ setErrorMessage('이미 그룹에 소속된 유저입니다.');
+ SetIcon();
+ showSnackbar('멤버 초대 실패', 'error');
+ }
+ if (teamToken && emailValue !== '') {
+ inviteMemberByEmail.mutate({ userEmail: emailValue, token: teamToken });
+ }
+ };
+
+ const handleClose = () => {
+ onClose();
+ setEmailValue('');
+ setIsError(false);
+ };
+
+ return (
+ <>
+
+
+ 멤버 초대
+
+ 이메일을 입력해 멤버를 초대합니다.
+
+
+
+
+
+ {isSnackBarOpen && (
+
+ )}
+
+ );
+}
diff --git a/src/components/team/member/ExileDropdown.tsx b/src/components/team/member/ExileDropdown.tsx
index 37ae749e..a8438a4d 100644
--- a/src/components/team/member/ExileDropdown.tsx
+++ b/src/components/team/member/ExileDropdown.tsx
@@ -3,11 +3,21 @@ import Image from 'next/image';
interface ExileDropdownProps {
onSelect: () => void;
+ isSelf?: boolean;
}
-export default function ExileDropdown({ onSelect }: ExileDropdownProps) {
+export default function ExileDropdown({
+ onSelect,
+ isSelf = false,
+}: ExileDropdownProps) {
const Option = [
- { component: 추방하기
},
+ {
+ component: (
+
+ {isSelf ? '탈퇴하기' : '추방하기'}
+
+ ),
+ },
];
const moreIcon = (
diff --git a/src/components/team/member/ExileUserModal.tsx b/src/components/team/member/ExileUserModal.tsx
index e2ac7d63..fbc8a33e 100644
--- a/src/components/team/member/ExileUserModal.tsx
+++ b/src/components/team/member/ExileUserModal.tsx
@@ -1,15 +1,18 @@
import { deleteMemberById } from '@/src/api/team/memberAPI';
-import { useTeamStore } from '@/src/stores/teamStore';
+import { useTeamStore } from '@/src/stores/useTeamStore';
import Button from '@components/@shared/Button';
import { Modal } from '@components/@shared/Modal';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import Image from 'next/image';
+import { useRouter } from 'next/router';
interface ExileUserModalProps {
isOpen: boolean;
onClose: () => void;
memberName: string;
userId: number;
+ role: string;
+ isSelf?: boolean;
}
interface Group {
@@ -47,13 +50,12 @@ export default function ExileUserModal({
onClose,
memberName,
userId,
+ role,
+ isSelf = false,
}: ExileUserModalProps) {
const { id } = useTeamStore();
+ const router = useRouter();
const queryClient = useQueryClient();
-
- // 'user' 키로 캐싱된 유저 데이터 가져오기
- const userData = queryClient.getQueryData(['user']);
-
// 멤버 삭제 Mutation
const { mutate: deleteMember } = useMutation({
mutationFn: ({ groupid, userid }: { groupid: string; userid: number }) =>
@@ -61,6 +63,9 @@ export default function ExileUserModal({
onSuccess: () => {
console.log('멤버 정보 삭제 완료!');
onClose();
+ if (role !== 'ADMIN' && isSelf) {
+ router.push('/myteam');
+ }
},
onSettled: () => {
// 쿼리 무효화 및 리패치
@@ -71,22 +76,14 @@ export default function ExileUserModal({
},
});
- // 팀 관리자만 삭제 가능
- const isAdmin =
- userData &&
- userData.memberships.find((m) => m.groupId === Number(id))?.role ===
- 'ADMIN';
- // 본인 삭제 불가 체크
- const isSelf = userData && userData.id === userId;
-
const handleDeleteClick = () => {
// 팀 관리자만 삭제 가능
- if (!isAdmin) {
+ if (role !== 'ADMIN' && !isSelf) {
return;
}
- // 본인 삭제 불가 체크
- if (isSelf) {
+ // 관리자 본인 삭제 불가 체크
+ if (role === 'ADMIN' && isSelf) {
return;
}
@@ -116,22 +113,30 @@ export default function ExileUserModal({
width={24}
height={24}
/>
- {isAdmin && !isSelf && (
+ {role === 'ADMIN' && !isSelf && (
{memberName} 유저를 삭제하시겠어요?
)}
- {!isAdmin && 권한 없음}
+ {role !== 'ADMIN' && isSelf && 팀에서 탈퇴하시겠어요?}
+ {role !== 'ADMIN' && !isSelf && 권한 없음}
- {isAdmin && !isSelf && (
+ {role === 'ADMIN' && !isSelf && (
팀 내에서 멤버를 삭제합니다. 정말로 진행하시겠습니까?
)}
- {!isAdmin && (
+ {role !== 'ADMIN' && isSelf && (
+
+ 팀에서 탈퇴합니다. 정말로 진행하시겠습니까?
+
+ )}
+ {role !== 'ADMIN' && !isSelf && (
관리자만 삭제할 수 있습니다.
)}
- {isAdmin && isSelf && (
- 본인은 삭제할 수 없습니다.
+ {role === 'ADMIN' && isSelf && (
+
+ 관리자는 탈퇴할 수 없습니다. 팀을 삭제해주세요.
+
)}
@@ -145,11 +150,16 @@ export default function ExileUserModal({
>
취소
- {isAdmin && !isSelf && (
+ {role === 'ADMIN' && !isSelf && (
)}
+ {role !== 'ADMIN' && isSelf && (
+
+ )}
-
-
-
-
-
- {role === 'ADMIN' && (
-
- )}
- {name}
-
-
{email}
+ <>
+
+
+
+
+
+
+
+
+
+ {role === 'ADMIN' && (
+
+ )}
+ {name}
+
+
{email}
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ {isSnackBarOpen && (
+
}
+ message={snackBarMessage}
+ type={snackBarType}
+ />
+ )}
+
);
}
diff --git a/src/components/team/member/HowToModal.tsx b/src/components/team/member/HowToModal.tsx
new file mode 100644
index 00000000..c8158928
--- /dev/null
+++ b/src/components/team/member/HowToModal.tsx
@@ -0,0 +1,39 @@
+import { Modal } from '@components/@shared/Modal';
+import Image from 'next/image';
+
+interface HowToModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export default function HowToModal({ isOpen, onClose }: HowToModalProps) {
+ return (
+
+
+
+
+
+
+ 관리자의 링크를 받아서 팀 참여하기 페이지에 입력!
+
+
+ );
+}
diff --git a/src/components/team/member/InvitationModal.tsx b/src/components/team/member/InvitationModal.tsx
index 0ef2bb27..1565af89 100644
--- a/src/components/team/member/InvitationModal.tsx
+++ b/src/components/team/member/InvitationModal.tsx
@@ -2,7 +2,13 @@ import Button from '@components/@shared/Button';
import { Modal } from '@components/@shared/Modal';
import { inviteMember } from '@/src/api/team/memberAPI';
import { useQuery } from '@tanstack/react-query';
-import { useTeamStore } from '@/src/stores/teamStore';
+import { useTeamStore } from '@/src/stores/useTeamStore';
+import Snackbar from '@components/article/Snackbar';
+import SuccessIcon from 'public/icons/successicon.svg';
+import useClipboardCopy from '@hooks/useClipBoardCopy';
+import { useModal } from '@hooks/useModal';
+import Image from 'next/image';
+import HowToModal from './HowToModal';
interface InvitationModalProps {
isOpen: boolean;
@@ -13,48 +19,76 @@ export default function InvitationModal({
isOpen,
onClose,
}: InvitationModalProps) {
+ const {
+ isOpen: IsHowToModalOpen,
+ onClose: HowToModalClose,
+ onOpen: HowToModalOpen,
+ } = useModal();
+
+ const { isSnackBarOpen, snackBarMessage, snackBarType, handleCopyClick } =
+ useClipboardCopy();
+
const { id } = useTeamStore();
- const { data } = useQuery({
+ const { data: token } = useQuery({
queryKey: ['inviteMember', id],
queryFn: () => inviteMember(Number(id)),
});
- const handleCopyClick = (text: string) => {
- navigator.clipboard
- .writeText(text)
- .then(() => {
- console.log('복사한 토큰: ', data);
- })
- .catch((err) => {
- console.error('복사에 실패했습니다!: ', err);
- });
- onClose();
- };
-
return (
-
-
- 멤버 초대
-
- 그룹에 참여할 수 있는 링크를 복사합니다.
-
-
-
-
-
+
+ {isSnackBarOpen && (
+
}
+ message={snackBarMessage}
+ type={snackBarType}
+ />
+ )}
+
);
}
diff --git a/src/components/team/member/MemberBox.tsx b/src/components/team/member/MemberBox.tsx
index f2049974..fef543ef 100644
--- a/src/components/team/member/MemberBox.tsx
+++ b/src/components/team/member/MemberBox.tsx
@@ -1,8 +1,10 @@
import { useModal } from '@hooks/useModal';
import Image from 'next/image';
+import { useQueryClient } from '@tanstack/react-query';
+import SlideItemsMotion from '@components/@shared/animation/SlideItemsMotion';
import GetUserDetailModal from './GetUserDetailModal';
import ExileDropdown from './ExileDropdown';
-import ExileUserModal from './ExileUserModal';
+import ExileUserModal, { UserData } from './ExileUserModal';
export interface MemberProps {
role: string;
@@ -10,6 +12,7 @@ export interface MemberProps {
userEmail: string;
userName: string;
userId: number;
+ index: number;
}
export default function MemberBox({
@@ -18,6 +21,7 @@ export default function MemberBox({
userImage,
role,
userId,
+ index,
}: MemberProps) {
const { isOpen, onOpen, onClose } = useModal();
const {
@@ -26,6 +30,14 @@ export default function MemberBox({
onClose: deleteCloseModal,
} = useModal();
+ const queryClient = useQueryClient();
+
+ // 'user' 키로 캐싱된 유저 데이터 가져오기
+ const userData = queryClient.getQueryData
(['user']);
+
+ // 본인인가?
+ const isSelf = userData && userData.id === userId;
+
const handleDropdownClick = (e: React.MouseEvent) => {
e.stopPropagation(); // 클릭 이벤트 전파 방지
};
@@ -35,12 +47,13 @@ export default function MemberBox({
};
return (
<>
-
-
-
+
+
-
+
{role === 'ADMIN' && (
-
+
-
+
);
diff --git a/src/components/team/member/MemberList.tsx b/src/components/team/member/MemberList.tsx
index 18fdfe62..58704aa3 100644
--- a/src/components/team/member/MemberList.tsx
+++ b/src/components/team/member/MemberList.tsx
@@ -1,38 +1,69 @@
import { useModal } from '@hooks/useModal';
-import { useTeamStore } from '@/src/stores/teamStore';
+import { useTeamStore } from '@/src/stores/useTeamStore';
+import { Option } from '@components/@shared/Dropdown';
import MemberBox from './MemberBox';
import InvitationModal from './InvitationModal';
import styles from '../../../styles/scroll.module.css';
+import OptionDropdown from '../OptionDropdown';
+import EmailInvitationModal from './EmailInvitationModal';
export default function MemberList() {
- const { isOpen, onOpen, onClose } = useModal();
+ const {
+ isOpen: tokenIsOpen,
+ onOpen: tokenOpenModal,
+ onClose: tokenCloseModal,
+ } = useModal();
+
+ const {
+ isOpen: emailIsOpen,
+ onOpen: emailOpenModal,
+ onClose: emailCloseModal,
+ } = useModal();
const { members } = useTeamStore();
const memberCount = members.length;
+
+ // 드롭다운에서 선택된 옵션을 처리하는 함수
+ const handleSelect = (option: Option) => {
+ if (option.label === 'token') {
+ tokenOpenModal(); // '수정하기'를 선택했을 때
+ } else {
+ emailOpenModal();
+ } // '삭제하기'를 선택했을 때
+ };
+
+ const InviteButton = (
+
+ );
+
return (
-
+
-
-
+
+
+
-
- {members.map((member) => (
+
+ {members.map((member, index) => (
))}
-
+
);
diff --git a/src/components/team/myteam/EmptyTeamPage.tsx b/src/components/team/myteam/EmptyTeamPage.tsx
index 60142a39..cc52441b 100644
--- a/src/components/team/myteam/EmptyTeamPage.tsx
+++ b/src/components/team/myteam/EmptyTeamPage.tsx
@@ -1,17 +1,20 @@
import Button from '@components/@shared/Button';
+import Image from 'next/image';
import Link from 'next/link';
export default function EmptyTeamPage() {
return (
-
아직 소속된 팀이 없습니다.
+ 아직 소속된 팀이 없습니다.
팀을 생성하거나 팀에 참여해보세요.