Merge pull request #279 from boostcampwm2023/FE/feature/#225-select-o…

…ption-custom Fe/feature/#225 select option custom
boostcampwm2023 · Nov 27, 2023 · c0a16c0 · c0a16c0
2 parents 602e974 + 738419d
commit c0a16c0
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 33 deletions.
diff --git a/frontend/src/components/CustomSelect/CustomSelect.tsx b/frontend/src/components/CustomSelect/CustomSelect.tsx
@@ -1,43 +1,71 @@
-export interface OnChangeSelectFunction {
+import { useEffect, useRef, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+
+export interface CustomSelectOptions {
   value: string;
   label: string;
 }
 
-export interface CustomSelectOptions extends OnChangeSelectFunction {
-  selected?: boolean;
-}
-
 interface CustomSelectProps {
+  width?: string;
   options: CustomSelectOptions[];
-  required?: boolean;
   autoFocus?: boolean;
-  onChange?: ({ value, label }: OnChangeSelectFunction) => void;
+  onChange?: ({ value, label }: CustomSelectOptions) => void;
 }
 
-export default function CustomSelect({ options, required, autoFocus, onChange }: CustomSelectProps) {
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const { selectedIndex, options } = e.target;
-    const { value, innerText } = options[selectedIndex];
+export default function CustomSelect({ width, options, autoFocus, onChange }: CustomSelectProps) {
+  const [opened, setOpened] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [selected, setSelected] = useState<CustomSelectOptions>({ value: '', label: '' });
+
+  useEffect(() => {
+    if (options.length) setSelected(options[0]);
+  }, [options]);
 
-    onChange?.({ value, label: innerText });
+  const updateOption = (option: CustomSelectOptions) => {
+    inputRef.current?.click();
+    if (option.value !== selected.value) {
+      setSelected(option);
+      onChange?.(option);
+    }
   };
 
   return (
-    <select
-      className="select select-bordered w-full"
-      required={required}
-      autoFocus={autoFocus}
-      onChange={handleChange}
-    >
-      {options.map(({ value, label, selected }) => (
-        <option
-          key={value}
-          value={value}
-          selected={selected}
+    <div className="relative">
+      <div className={`absolute collapse ${width ?? 'w-300'} min-h-48 bg-white border border-gray-300`}>
+        <input
+          title={selected.label}
+          ref={inputRef}
+          type="checkbox"
+          className="min-h-48"
+          onClick={() => setOpened(!opened)}
+        />
+        <div className="collapse-title w-full leading-48 min-h-48 focus:outline-none flex justify-between py-0 px-15">
+          {selected.label}
+          <Icon
+            icon="teenyicons:down-solid"
+            className="h-48 transition-transform"
+            transform={`${opened ? 'rotate(180)' : 'rotate(0)'}`}
+          />
+        </div>
+        <div
+          className={`collapse-content w-full`}
+          autoFocus={autoFocus}
         >
-          {label}
-        </option>
-      ))}
-    </select>
+          {options.map(({ value, label }) => (
+            <p
+              className={`display-medium14  ${selected.value === value && 'text-point font-bold'}
+                        leading-24 p-0 py-8 hover:bg-gray-100`}
+              key={value}
+              title={selected.label}
+              onClick={() => updateOption({ value, label })}
+            >
+              {label}
+            </p>
+          ))}
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/frontend/src/components/CustomSelect/index.ts b/frontend/src/components/CustomSelect/index.ts
@@ -1,4 +1,4 @@
-import { CustomSelectOptions, OnChangeSelectFunction } from './CustomSelect';
+import { CustomSelectOptions } from './CustomSelect';
 
 export { default } from './CustomSelect';
-export type { CustomSelectOptions, OnChangeSelectFunction };
+export type { CustomSelectOptions };
diff --git a/frontend/src/pages/HomePage/HomePage.tsx b/frontend/src/pages/HomePage/HomePage.tsx
@@ -16,7 +16,8 @@ function HomePage() {
   };
 
   const moveHumanChat = () => {
-    navigate('/chat/human');
+    // TODO: 실제 roomname 넣기
+    navigate('/chat/human/1');
   };
 
   return (

diff --git a/frontend/src/pages/HumanChatPage/HumanChatPage.tsx b/frontend/src/pages/HumanChatPage/HumanChatPage.tsx
@@ -39,7 +39,7 @@ export default function HumanChatPage() {
           defaultImage="bg-sponge"
         />
       </div>
-      <div className="w-full h-10 flex justify-center gap-5">
+      <div className="w-full flex justify-center gap-5">
         <CustomButton onClick={toggleVideo}>video</CustomButton>
         <CustomButton onClick={toggleAudio}>mic</CustomButton>
         <CustomSelect

diff --git a/frontend/src/tailwind.css b/frontend/src/tailwind.css
@@ -31,7 +31,7 @@ img {
 
 *:hover,
 *::-webkit-media-controls-play-button {
-  cursor: none;
+  cursor: none !important;
 }
 
 ::-webkit-scrollbar {

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -73,6 +73,7 @@ export default {
       };
 
       const textTheme = {
+        '.text-point': { color: '#7890E7' },
         '.text-strong': { color: '#14212B' },
         '.text-bold': { color: '#4B5966' },
         '.text-default': { color: '#5E6E76' },
@@ -142,7 +143,7 @@ export default {
           mixBlendMode: 'difference',
           background: '#fff',
         },
-        '.cursor:has(~ div button:hover), .cursor:has(~ div input:hover), .cursor:has(~ div a:hover), .cursor:has(~ div audio:hover)':
+        '.cursor:has(~ div button:hover), .cursor:has(~ div input:hover), .cursor:has(~ div a:hover), .cursor:has(~ div audio:hover), .cursor:has(~ div .collapse-content:hover)':
           {
             transition: 'transform 0.1s ease-in-out',
             transform: 'translate(-50%, -50%) scale(2)',