feat :: selectbar cancle

team-xquare · May 5, 2024 · fe52f25 · fe52f25
1 parent 83367e3
commit fe52f25
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/src/components/common/DropMenu.tsx b/src/components/common/DropMenu.tsx
@@ -5,11 +5,12 @@ import { css } from '@emotion/react';
 type DropMenuType = {
   values: string[];
   selectedIndex?: number;
-  onSelect: (index: number) => void;
+  onSelect: (index: number | undefined) => void;
   onClose: (bool: boolean) => void;
+  canCancle?: boolean;
 };
 
-export const DropMenu = ({ values, onSelect, onClose, selectedIndex = -1 }: DropMenuType) => {
+export const DropMenu = ({ values, onSelect, onClose, selectedIndex = -1, canCancle = false }: DropMenuType) => {
   return (
     <Wrapper>
       {values &&
@@ -20,6 +21,10 @@ export const DropMenu = ({ values, onSelect, onClose, selectedIndex = -1 }: Drop
               key={index}
               isLast={(values.length - 1 === index).toString()}
               onClick={() => {
+                if (canCancle === true && index == selectedIndex) {
+                  onSelect(undefined);
+                  return;
+                }
                 onSelect(index);
                 onClose(false);
               }}

diff --git a/src/components/common/SelectBar.tsx b/src/components/common/SelectBar.tsx
@@ -6,13 +6,22 @@ import { useOutsideClick } from '@/hooks/useOutsideClick';
 import ArrowImg from '@/assets/Arrow.svg';
 
 type SelectBarType = {
-  selectedIndex?: number;
-  onSelect: (index: number) => void;
+  selectedIndex?: number | undefined;
+  onSelect: (index: number | undefined) => void;
   values: string[];
   label?: string;
+  placehold?: string;
+  canCancle?: boolean;
 };
 
-export const SelectBar = ({ selectedIndex, onSelect, values, label }: SelectBarType) => {
+export const SelectBar = ({
+  selectedIndex,
+  onSelect,
+  values,
+  label,
+  placehold = '항목 보기',
+  canCancle = false,
+}: SelectBarType) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const ref = useOutsideClick(() => {
     setIsOpen(false);
@@ -32,12 +41,20 @@ export const SelectBar = ({ selectedIndex, onSelect, values, label }: SelectBarT
       {label && <Label>{label}</Label>}
       <SelectBarWrapper ref={ref}>
         <_SelectBar onClick={onOpen} selectedIndex={selectedIndex}>
-          <span>{selectedIndex === undefined ? '항목 보기' : values[selectedIndex]}</span>
+          <span>{selectedIndex === undefined ? placehold : values[selectedIndex]}</span>
           <ImgContainer isOpen={isOpen}>
             <img src={ArrowImg} />
           </ImgContainer>
         </_SelectBar>
-        {isOpen && <DropMenu values={values} onSelect={onSelect} onClose={setIsOpen} selectedIndex={selectedIndex} />}
+        {isOpen && (
+          <DropMenu
+            values={values}
+            onSelect={onSelect}
+            onClose={setIsOpen}
+            selectedIndex={selectedIndex}
+            canCancle={canCancle}
+          />
+        )}
       </SelectBarWrapper>
     </Wrapper>
   );

diff --git a/src/pages/Team/Create.tsx b/src/pages/Team/Create.tsx
@@ -31,7 +31,7 @@ const dummyStudent: string[] = [
 export const TeamCreate = () => {
   const [array, setArray] = useState<string[]>(dummyStudent);
   const [selectedIndex, setSelectIndex] = useState<number>();
-  const [studentIndex, setStudentIndex] = useState<number>(-1);
+  const [studentIndex, setStudentIndex] = useState<number | undefined>(undefined);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [studentAddition, setStudentAddition] = useState<string>('');
   const [selectedStudent, setSelectedStudent] = useState<string[]>();
@@ -156,7 +156,7 @@ export const TeamCreate = () => {
   }, [studentAddition]);
 
   useEffect(() => {
-    if (studentIndex === -1) return;
+    if (studentIndex === -1 || studentIndex === undefined) return;
 
     if (selectedStudent) {
       setSelectedStudent([...selectedStudent, array[studentIndex]]);