diff --git a/src/ui/component/popover/schedule/ParticipantPopover.tsx b/src/ui/component/popover/schedule/ParticipantPopover.tsx
index 838b85a..192f44e 100644
--- a/src/ui/component/popover/schedule/ParticipantPopover.tsx
+++ b/src/ui/component/popover/schedule/ParticipantPopover.tsx
@@ -2,11 +2,9 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ScrollArea } from "@/components/ui/scroll-area";
-import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
-import * as Mention from '@diceui/mention';
-import { AtSign, PlusIcon, SearchIcon } from "lucide-react";
-import { useRef, useState } from "react";
+import { CircleSmall, PlusIcon, SearchIcon } from "lucide-react";
+import { useEffect, useState } from "react";
const dummyUser = [
{
@@ -27,9 +25,34 @@ const dummyUser = [
}
]
-export const ParticipantPopover = () => {
+interface ParticipantPopoverProps {
+ participantList: string[];
+ setParticipantList: (list: string[]) => void;
+}
+
+export const ParticipantPopover = ({ participantList, setParticipantList }: ParticipantPopoverProps) => {
const [open, setOpen] = useState(false);
const [filterString, setFilterString] = useState('');
+ const [userList, setUserList] = useState(dummyUser);
+ const [tempList, setTempList] = useState(participantList);
+ const updateTempList = (accountId: string) => {
+ if (tempList.includes(accountId)) {
+ setTempList(tempList.filter((id) => id !== accountId));
+ } else {
+ setTempList([...tempList, accountId]);
+ }
+ }
+ const applyList = () => {
+ setParticipantList(tempList);
+ setOpen(false);
+ }
+
+ const cancelList = () => {
+ setOpen(false);
+ setTimeout(() => {
+ setTempList(participantList);
+ }, 150);
+ }
return (
@@ -55,6 +78,8 @@ export const ParticipantPopover = () => {
{
setFilterString(value.target.value)}
className="shadow-none placeholder-indigo-300! focus-visible:placeholder-indigo-400! flex-1 focus-visible:ring-0 focus-visible:border-0 border-0"
/>
-
+ {
+ userList.filter((user) => user.accountId.includes(filterString)).map((user, idx) => (
+ updateTempList(user.accountId)}
+ >
+
+
+ {user.name}
+
+
+ @{user.accountId}
+
+
+
+
+ { tempList.includes(user.accountId) &&
}
+
+
+
+ ))
+ }
{
"bg-white text-indigo-300",
"hover:bg-indigo-300 hover:text-white"
)}
+ onClick={applyList}
>
확인
@@ -90,6 +153,7 @@ export const ParticipantPopover = () => {
"bg-white text-red-400",
"hover:bg-red-400 hover:text-white"
)}
+ onClick={cancelList}
>
취소
diff --git a/src/ui/component/popover/schedule/SchedulePopover.tsx b/src/ui/component/popover/schedule/SchedulePopover.tsx
index c7ebc3e..700454d 100644
--- a/src/ui/component/popover/schedule/SchedulePopover.tsx
+++ b/src/ui/component/popover/schedule/SchedulePopover.tsx
@@ -1,26 +1,9 @@
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { PopoverContent } from '@/components/ui/popover';
import { ScrollArea } from '@/components/ui/scroll-area';
import { cn } from '@/lib/utils';
-import { useEffect, useState } from 'react';
-import { usePalette } from '@/hooks/use-palette';
-import { type ColorPaletteType } from '@/const/ColorPalette';
-import { ColorPickPopover } from './ColorPickPopover';
-import { Input } from '@/components/ui/input';
-import { Controller, useForm } from 'react-hook-form';
-import * as z from 'zod';
-import { CreateScheduleSchema } from '@/data/form/createSchedule.schema';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Field, FieldError } from '@/components/ui/field';
-import { PenSquare, X } from 'lucide-react';
-import { ScheduleTypeLabel, type ScheduleType } from '@/const/schedule/ScheduleType';
-import { useRecord } from '@/hooks/use-record';
-import { TypePickPopover } from './TypePickPopover';
-import { ScheduleDay } from '@/const/schedule/ScheduleDay';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { DatePickPopover } from './DatePickPopover';
-import { format } from 'date-fns';
-import { TimePickPopover } from './TimePickPopover';
-import { useTime } from '@/hooks/use-time';
+import { useState } from 'react';
+import { PenSquare } from 'lucide-react';
+
import { ScheduleCreateContent } from './content/ScheduleCreateContent';
interface ScheduleSheetProps {
diff --git a/src/ui/component/popover/schedule/content/ScheduleCreateContent.tsx b/src/ui/component/popover/schedule/content/ScheduleCreateContent.tsx
index fc14b0d..4475223 100644
--- a/src/ui/component/popover/schedule/content/ScheduleCreateContent.tsx
+++ b/src/ui/component/popover/schedule/content/ScheduleCreateContent.tsx
@@ -64,7 +64,8 @@ export const ScheduleCreateContent = ({ date, open, setMode, popoverSide, popove
type,
status,
style,
- dayList
+ dayList,
+ participantList
} = createScheduleForm.watch();
const selectColor = (color: ColorPaletteType) => {
@@ -239,7 +240,10 @@ export const ScheduleCreateContent = ({ date, open, setMode, popoverSide, popove
/>
)}
/>
-
+
)