[fix] 칵테일 드롭다운 수정사항 반영

Author: mtm-git1018

src/domains/recipe/details/DetailItem.tsx

@@ -35,16 +35,16 @@ function DetailItem({ name, nameKo, story, src, abv, glassType }: Props) {
         <div className="flex flex-col gap-1 items-center md:items-end md:w-1/2">
           <span>{alcoholTitle && <Label title={alcoholTitle} />}</span>
           <h2 className="flex flex-col gap-2">
-            <span className="w-fit font-serif font-bold  text-right text-3xl lg:text-4xl text-secondary ">
+            <span className="w-fit font-serif font-bold  text-center md:text-right text-3xl lg:text-4xl text-secondary ">
               {name}
             </span>
-            <span className="font-serif font-bold text-right text-xl lg:whitespace-nowrap lg:text-4xl text-secondary">
+            <span className="font-serif font-bold text-center md:text-right text-xl lg:whitespace-nowrap lg:text-4xl text-secondary">
               {nameKo}
             </span>
           </h2>
         </div>
 
-        <p className=" text-base self-center w-3/4 md:text-sm md:self-end text-secondary md:w-70 lg:text-base lg:w-100">
+        <p className=" text-base self-center md:w-1/2 md:text-sm md:self-end text-secondary  lg:text-base lg:w-100">
           {story}
         </p>
 

src/domains/shared/components/keep/Keep.tsx

@@ -4,6 +4,7 @@ import KeepIcon from '@/shared/assets/icons/keep_36.svg';
 import KeepIconActive from '@/shared/assets/icons/keep_active_36.svg';
 import { useState } from 'react';
 import { deleteKeep, postKeep } from '../../api/keep/keep';
+import { useToast } from '@/shared/hook/useToast';
 
 interface Props {
   className?: string;
@@ -13,6 +14,7 @@ interface Props {
 // 만약 타입 안맞는다면 그냥 두셔도 됩니다.
 
 function Keep({ className, cocktailId }: Props) {
+  const { toastSuccess } = useToast();
   const [isClick, setIsClick] = useState(false);
 
   const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -25,8 +27,10 @@ function Keep({ className, cocktailId }: Props) {
       if (!cocktailId) return;
       if (!isClick) {
         await postKeep(cocktailId);
+        toastSuccess('저장에 성공하셨습니다.');
       } else {
         await deleteKeep(cocktailId);
+        toastSuccess('저장을 취소하셨습니다.');
       }
     } catch (err) {
       console.error(err);

src/shared/components/select-box/SelectBox.tsx

@@ -88,7 +88,7 @@ function SelectBox({ id, groupKey, ref, option, title, value, onChange, use }: P
       </button>
 
       <ul
-        className={`w-30 text-gray-dark p-2 rounded-xl z-99 duration-200  absolute transition-all 
+        className={`w-fit min-w-30 text-gray-dark p-2 rounded-xl z-99 duration-200  absolute transition-all 
          ${
            groupKey
              ? localOpen
@@ -104,7 +104,7 @@ function SelectBox({ id, groupKey, ref, option, title, value, onChange, use }: P
           <li
             key={v + i}
             role="option"
-            className="cursor-pointer p-1 hover:bg-secondary aria-selected:bg-secondary"
+            className="cursor-pointer whitespace-nowrap p-1 hover:bg-secondary aria-selected:bg-secondary"
             onClick={() => handleChoose(v)}
             aria-selected={v === select}
           >