feat: add react-select

client/package.json

@@ -21,6 +21,7 @@
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.5.2",
     "react-router-dom": "^6.6.2",
+    "react-select": "^5.7.4",
     "react-textarea-autosize": "^8.5.2",
     "socket.io-client": "^4.5.4",
     "zustand": "^4.3.2"

client/src/assets/index.ts

@@ -1,4 +1,5 @@
 export { ReactComponent as CloseIcon } from "./close.svg";
+export { ReactComponent as CloseSmallIcon } from "./closeSmall.svg";
 export { ReactComponent as EmoticonIcon } from "./emoticon.svg";
 export { ReactComponent as LogoIcon } from "./logo.svg";
 export { ReactComponent as LogoLargeIcon } from "./logoLarge.svg";

client/src/components/atoms/Label.tsx

@@ -78,39 +78,3 @@ export const TemplateSelect = styled.select<{ w: number; h: number }>`
   -ms-appearance: none;
   appearance: none;
 `;
-
-export const TagSelect = styled.select`
-  width: 300px;
-  /* height: 38px; */
-  padding: 5px;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 5px;
-  border: 0px solid ${props => props.theme.colors.gray200};
-  background-color: ${props => props.theme.colors.white};
-
-  color: ${props => props.theme.colors.gray600};
-
-  font-family: "Noto Sansf KR";
-  font-size: 11px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -o-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-`;
-TagSelect.defaultProps = {
-  multiple: true,
-};

client/src/components/atoms/PresetOption.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { css } from "@emotion/react";
+import {
+  bg,
+  round,
+  row,
+  justify,
+  padding,
+  text,
+  w,
+  h,
+  align,
+  border,
+} from "@/styles";
+
+interface Tag {
+  id: number;
+  title: string;
+  description: string;
+}
+
+interface Props {
+  tag: Tag;
+  selected: boolean;
+}
+
+const cursorPointer = css`
+  cursor: pointer;
+`;
+
+export const PresetOption: React.FC<Props> = ({ tag, selected }) => (
+  <div
+    css={[
+      row,
+      justify.between,
+      align.center,
+      selected ? bg.blue100 : bg.white,
+      w("fill"),
+      h(30),
+      round.md,
+      padding.horizontal(10),
+      cursorPointer,
+    ]}
+  >
+    <div
+      css={[
+        align.center,
+        border.gray200,
+        round.md,
+        padding.horizontal(6),
+        padding.vertical(3),
+      ]}
+    >
+      <p css={[text.option2, text.gray500]}>{tag.title}</p>
+    </div>
+    <p css={[text.option1, selected ? text.gray600 : text.gray500]}>
+      {tag.description}
+    </p>
+  </div>
+);

client/src/components/atoms/SelectTagBox.tsx

@@ -1,35 +1,15 @@
 import React from "react";
 import { useUserTag } from "@/services/user-tag";
-import { PositionedDownArrowIcon, SelectWrapper, TagSelect } from "./Label";
+import { TagSelect } from "./TagSelect";
 
 interface Props {
-  selected: string[];
-  onChange: React.ChangeEventHandler<HTMLSelectElement>;
+  onChange: (selection: string[]) => void;
 }
 
-export const SelectTagBox: React.FC<Props> = ({ selected, onChange }) => {
+export const SelectTagBox: React.FC<Props> = ({ onChange }) => {
   const { tags } = useUserTag(state => ({
     tags: state.userTags,
   }));
 
-  return (
-    <>
-      <SelectWrapper>
-        <TagSelect defaultValue={[]} onChange={onChange}>
-          <option value="" disabled>
-            태그를 선택하세요
-          </option>
-          {tags.map(tag => (
-            <option key={tag.id} value={tag.title}>
-              {tag.title}
-            </option>
-          ))}
-        </TagSelect>
-        <PositionedDownArrowIcon />
-      </SelectWrapper>
-      {selected.map(tag => (
-        <>{tag}</>
-      ))}
-    </>
-  );
+  return <TagSelect tags={tags} onChange={onChange} />;
 };

client/src/components/atoms/TagSelect.tsx

@@ -0,0 +1,153 @@
+import React from "react";
+import { css } from "@emotion/react";
+import { CloseSmallIcon } from "@/assets";
+
+import Select, { components } from "react-select";
+import type {
+  OptionProps,
+  DropdownIndicatorProps,
+  MultiValueGenericProps,
+  MultiValueRemoveProps,
+} from "react-select";
+
+import {
+  bg,
+  border,
+  round,
+  center,
+  column,
+  row,
+  justify,
+  margin,
+  padding,
+  gap,
+  text,
+  w,
+  h,
+  align,
+} from "@/styles";
+
+import { PositionedDownArrowIcon } from "./Label";
+import { PresetOption } from "./PresetOption";
+
+interface Props {
+  tags: Tag[];
+  onChange: (selection: string[]) => void;
+}
+
+interface Tag {
+  id: number;
+  title: string;
+  description: string;
+}
+
+const cursorInitial = css`
+  cursor: initial;
+`;
+const cursorPointer = css`
+  cursor: pointer;
+`;
+const boxShadow = css`
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
+`;
+
+const controlStyles = css([
+  center,
+  w(300),
+  h(38),
+  padding.horizontal(10),
+  justify.between,
+  border.gray200,
+  round.md,
+  bg.gray100,
+  text.subtitle,
+]);
+const placeholderStyles = css([text.subtitle, text.gray300, padding.left(5)]);
+const valueContainerStyles = css([row, gap(5)]);
+const menuListStyles = css([
+  column,
+  gap(5),
+  margin.top(5),
+  padding(5),
+  round.md,
+  bg.white,
+  boxShadow,
+]);
+const multiValueRemoveStyles = css(center);
+
+const selectStyles = {
+  control: () => ({ ...controlStyles }),
+  placeholder: () => ({ ...placeholderStyles }),
+  valueContainer: () => ({ ...valueContainerStyles }),
+  menuList: () => ({ ...menuListStyles }),
+  multiValueRemove: () => ({ ...multiValueRemoveStyles }),
+};
+
+const Option = (props: OptionProps<Tag>) => {
+  const { data, isSelected } = props;
+  return (
+    <components.Option {...props}>
+      <PresetOption tag={data} selected={isSelected} />
+    </components.Option>
+  );
+};
+const DropdownIndicator = (props: DropdownIndicatorProps<Tag>) => (
+  <components.DropdownIndicator {...props}>
+    <PositionedDownArrowIcon />
+  </components.DropdownIndicator>
+);
+const MultiValueContainer = (props: MultiValueGenericProps<Tag>) => {
+  const { data } = props;
+  return (
+    <components.MultiValueContainer {...props}>
+      <div
+        css={[
+          row,
+          align.center,
+          border.gray200,
+          round.md,
+          bg.white,
+          padding.horizontal(8),
+          padding.vertical(5),
+          gap(6),
+          cursorInitial,
+        ]}
+      >
+        <p css={[text.option1, text.gray500]}>{data.title}</p>
+        <components.MultiValueRemove {...props} />
+      </div>
+    </components.MultiValueContainer>
+  );
+};
+const MultiValueRemove = (props: MultiValueRemoveProps<Tag>) => (
+  <components.MultiValueRemove {...props}>
+    <CloseSmallIcon css={cursorPointer} />
+  </components.MultiValueRemove>
+);
+
+export const TagSelect: React.FC<Props> = ({ tags, onChange }) => (
+  <Select
+    css={cursorPointer}
+    styles={selectStyles}
+    components={{
+      Option,
+      DropdownIndicator,
+      IndicatorSeparator: () => null,
+      MultiValueRemove,
+      MultiValueLabel: () => null,
+      MultiValueContainer,
+    }}
+    hideSelectedOptions={false}
+    closeMenuOnSelect={false}
+    isSearchable={false}
+    isClearable={false}
+    menuPortalTarget={document.body}
+    unstyled
+    // menuIsOpen
+    options={tags}
+    placeholder="태그를 선택하세요"
+    onChange={selection => onChange(selection.map(t => t.title))}
+    getOptionValue={tag => tag.id.toString()}
+    isMulti
+  />
+);

client/src/components/atoms/index.ts

@@ -19,3 +19,5 @@ export * from "./TextInput";
 export * from "./UserTag";
 export * from "./TaggersBox";
 export * from "./HyperText";
+export * from "./PresetOption";
+export * from "./TagSelect";

client/src/components/organisms/CreateAgendaModal.tsx

@@ -84,15 +84,8 @@ export const CreateAgendaModal: React.FC = () => {
     const selected = users.filter(user => user.tags.some(tagIsSelected));
     setVoters(selected.map(user => user.id));
   };
-  const onChangeSelectedTags = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const { options } = e.target;
-    const optionNum = options.length;
-
-    const selected = [];
-    for (let i = 0; i < optionNum; i += 1) {
-      if (options[i].selected) selected.push(options[i].value);
-    }
-    setSelectedTags(selected);
+  const onChangeSelectedTags = (selection: string[]) => {
+    setSelectedTags(selection);
   };
 
   const validated = useMemo(
@@ -178,10 +171,7 @@ export const CreateAgendaModal: React.FC = () => {
             buttonText="선택된 태그 적용하기"
             buttonOnClick={applySelectedTags}
           >
-            <SelectTagBox
-              selected={selectedTags}
-              onChange={onChangeSelectedTags}
-            />
+            <SelectTagBox onChange={onChangeSelectedTags} />
           </ModalInner>
           <ModalInner title="투표 대상" count={voters.length}>
             <UserTable

client/src/components/organisms/EditAgendaModal.tsx

@@ -80,15 +80,8 @@ export const EditAgendaModal: React.FC = () => {
     const selected = users.filter(user => user.tags.some(tagIsSelected));
     setVoters(selected.map(user => user.id));
   };
-  const onChangeSelectedTags = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const { options } = e.target;
-    const optionNum = options.length;
-
-    const selected = [];
-    for (let i = 0; i < optionNum; i += 1) {
-      if (options[i].selected) selected.push(options[i].value);
-    }
-    setSelectedTags(selected);
+  const onChangeSelectedTags = (selection: string[]) => {
+    setSelectedTags(selection);
   };
   const { findTemplate } = useAgendaTemplate(state => ({
     findTemplate: state.findTemplate,
@@ -190,10 +183,7 @@ export const EditAgendaModal: React.FC = () => {
             buttonText="선택된 태그 적용하기"
             buttonOnClick={applySelectedTags}
           >
-            <SelectTagBox
-              selected={selectedTags}
-              onChange={onChangeSelectedTags}
-            />
+            <SelectTagBox onChange={onChangeSelectedTags} />
           </ModalInner>
           <ModalInner title="투표 대상" count={voters.length}>
             <UserTable