Merge pull request #27 from MARU-EGG/fix/preset-button-component

[User] Fix: preset button component
MARU-EGG · Aug 12, 2024 · 4abf697 · 4abf697
2 parents 45e1e9f + 5e1cff5
commit 4abf697
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/src/ui/components/admin/Uploader.tsx b/src/ui/components/admin/Uploader.tsx
@@ -33,7 +33,7 @@ const Uploader: React.FC<UploaderProps> = ({ fileList, setFileList }) => {
   return (
     <div className="w-full">
       <Dragger className="w-full" maxCount={1} {...props}>
-        <p className="text-6xl text-blue-600">
+        <p className="6xl·text-blue-600">
           <InboxOutlined />
         </p>
         <p className="text-xl">파일을 드래그해주세요</p>

diff --git a/src/ui/components/atom/preset/preset-button.tsx b/src/ui/components/atom/preset/preset-button.tsx
@@ -1,31 +1,22 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { cn } from '../../../../utils/style';
 
 interface PresetButtonProps {
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  isSelected?: boolean;
   disabled?: boolean;
   children: string;
 }
 
-const PresetButton = ({ onClick, disabled, children }: PresetButtonProps) => {
-  const [isClicked, setIsClicked] = useState(false);
-
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-    if (onClick) {
-      onClick(e);
-    }
-    setIsClicked(true);
-    setTimeout(() => setIsClicked(false), 300); // 클릭 후 200ms 후에 초기화
-  };
-
+const PresetButton = ({ onClick, isSelected, disabled, children }: PresetButtonProps) => {
   const buttonClasses = cn(
     'cursor-pointer rounded-full border border-gray text-black bg-white px-4 py-2 ',
-    isClicked ? 'bg-primary-blue text-white  border-primary-blue' : 'bg-white text-black',
+    isSelected ? 'bg-primary-blue text-white border-primary-blue' : 'bg-white text-black',
     disabled ? 'bg-border-gray cursor-not-allowed text-border-gray bg-text-white' : '',
   );
 
   return (
-    <button className={buttonClasses} onClick={handleClick} disabled={disabled}>
+    <button className={buttonClasses} onClick={onClick} disabled={disabled}>
       {children}
     </button>
   );

diff --git a/src/ui/pages/maru-egg.tsx b/src/ui/pages/maru-egg.tsx
@@ -4,16 +4,20 @@ import useTypeStore from '../../store/type-store';
 import ChatCard from '../components/atom/chat-card/chat-card';
 import ChatForm from '../components/molecule/user/chat-form/chat-form';
 import useChatStore from '../../store/chat-store';
+import PresetButton from '../components/atom/preset/preset-button';
 
 const MaruEgg: React.FC = () => {
   const { setSelectedType, type } = useTypeStore();
   const { messages } = useChatStore();
+  const [selectedButton, setSelectedButton] = React.useState<'SUSI' | 'PYEONIP' | 'JEONGSI' | null>(null);
+
   const handleButtonClick = (selectedType: 'SUSI' | 'PYEONIP' | 'JEONGSI') => {
     setSelectedType(selectedType);
+    setSelectedButton(selectedType);
   };
 
   return (
-    <div className="h-full min-w-[360px] bg-background-default">
+    <div className="h-screen min-w-[360px] bg-background-default">
       <Header type={type} />
 
       <div className="w-full px-4 pb-24 pt-16">
@@ -23,9 +27,17 @@ const MaruEgg: React.FC = () => {
             알아보고 싶은 전형을 선택해주세요!`}
           role="system"
         />
-        <button onClick={() => handleButtonClick('SUSI')}>Select SUSI</button>
-        <button onClick={() => handleButtonClick('PYEONIP')}>Select PYEONIP</button>
-        <button onClick={() => handleButtonClick('JEONGSI')}>Select JEONGSI</button>
+        <div className="flex space-x-2">
+          <PresetButton onClick={() => handleButtonClick('SUSI')} isSelected={selectedButton === 'SUSI'}>
+            수시
+          </PresetButton>
+          <PresetButton onClick={() => handleButtonClick('PYEONIP')} isSelected={selectedButton === 'PYEONIP'}>
+            편입
+          </PresetButton>
+          <PresetButton onClick={() => handleButtonClick('JEONGSI')} isSelected={selectedButton === 'JEONGSI'}>
+            정시
+          </PresetButton>
+        </div>
         {type !== null && (
           <ChatCard role="user" content={type === 'SUSI' ? '수시' : type === 'JEONGSI' ? '정시' : '편입'} />
         )}