fix: 이슈 수정

src/assets/styles/global.scss

@@ -1,5 +1,4 @@
 html {
-  height: fill-available;
   /* stylelint-disable-next-line value-no-vendor-prefix */
   height: -webkit-fill-available;
 }

src/features/record/components/DetailFlavorInput/DetailFlavorInput.module.scss

@@ -21,6 +21,11 @@
   }
 }
 
+.flavor-options {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .flavor-option {
   margin: 6px 8px 0 0;
 }

src/features/record/components/DetailFlavorInput/DetailFlavorInput.stories.tsx

@@ -1,9 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
+
+import { FlavorTag } from '@/shared/types/record/flavorTag';
 
 import DetailFlavorInput from './DetailFlavorInput';
 
 export default {
   component: DetailFlavorInput,
 } as Meta<typeof DetailFlavorInput>;
 
-export const Default: StoryObj<typeof DetailFlavorInput> = {};
+export const Default: StoryFn<typeof DetailFlavorInput> = () => {
+  const [value, setValue] = useState<FlavorTag[]>([]);
+
+  return <DetailFlavorInput value={value} onChange={setValue} />;
+};

src/features/record/components/DetailFlavorInput/DetailFlavorInput.tsx

@@ -13,22 +13,30 @@ const cx = classNames.bind(styles);
 type DetailFlavorInputProps = {
   className?: string;
   label?: string;
-  value?: FlavorTag;
-  onChange?: (value?: FlavorTag) => void;
+  value?: FlavorTag[];
+  onChange?: (value: FlavorTag[]) => void;
 };
 
 const DetailFlavorInput = forwardRef(
   (
-    { className, label, value, onChange }: DetailFlavorInputProps,
+    { className, label, value = [], onChange }: DetailFlavorInputProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
-    const handleButtonClick = (tag: FlavorTag) => {
+    const checkIsSameTag = (tag1: FlavorTag, tag2: FlavorTag) => {
+      return (
+        tag1.majorTag === tag2.majorTag && tag1.detailTag === tag2.detailTag
+      );
+    };
+
+    const checkIsSelected = (selectedTag: FlavorTag) => {
+      return !!value.find((tag) => checkIsSameTag(tag, selectedTag));
+    };
+
+    const handleButtonClick = (selectedTag: FlavorTag) => {
       onChange?.(
-        value &&
-          tag.majorTag === value.majorTag &&
-          tag.detailTag === value.detailTag
-          ? undefined
-          : tag
+        checkIsSelected(selectedTag)
+          ? value.filter((tag) => !checkIsSameTag(tag, selectedTag))
+          : [...value, selectedTag]
       );
     };
 
@@ -38,31 +46,40 @@ const DetailFlavorInput = forwardRef(
         <div className={cx('accordion-group')}>
           {flavorTagOptions.map(({ majorTag, detailTags }) => (
             <Accordion key={majorTag.label} header={majorTag.label}>
-              <div>
-                {detailTags.map((detailTag) => (
-                  <button
-                    key={detailTag.label}
-                    className={cx('flavor-option')}
-                    type="button"
-                    onClick={() =>
-                      handleButtonClick({
-                        majorTag: majorTag.value,
-                        detailTag: detailTag.value,
-                      } as FlavorTag)
-                    }
-                  >
-                    <Chip
-                      label={detailTag.label}
-                      type={
-                        detailTag.value === value?.detailTag
-                          ? 'Primary'
-                          : 'Secondary'
-                      }
-                      appearance="squircle"
-                      size="medium"
-                    />
-                  </button>
-                ))}
+              <div className={cx('flavor-options')}>
+                {detailTags.map((detailTag) => {
+                  const isSelected = checkIsSelected({
+                    majorTag: majorTag.value,
+                    detailTag: detailTag.value,
+                  } as FlavorTag);
+
+                  return (
+                    <label
+                      className={cx('flavor-option')}
+                      key={detailTag.value}
+                      htmlFor={detailTag.value}
+                    >
+                      <input
+                        id={detailTag.value}
+                        type="checkbox"
+                        onClick={() =>
+                          handleButtonClick({
+                            majorTag: majorTag.value,
+                            detailTag: detailTag.value,
+                          } as FlavorTag)
+                        }
+                        checked={isSelected}
+                        hidden
+                      />
+                      <Chip
+                        label={detailTag.label}
+                        type={isSelected ? 'Primary' : 'Secondary'}
+                        appearance="squircle"
+                        size="medium"
+                      />
+                    </label>
+                  );
+                })}
               </div>
             </Accordion>
           ))}

src/features/record/hooks/useCreateRecordForm.ts

@@ -5,7 +5,6 @@ import { useForm, SubmitHandler, SubmitErrorHandler } from 'react-hook-form';
 import { useCreateRecord } from '@/shared/apis/records/createRecord';
 import { Alcohol } from '@/shared/types/alcohol';
 import { Record } from '@/shared/types/record';
-import { FlavorTag } from '@/shared/types/record/flavorTag';
 
 import { FLAVOR_SLIDER_GROUP_DEFAULT_VALUE } from '../components/FlavorSliderGroup/FlavorSliderGroup';
 
@@ -14,10 +13,13 @@ type useCreateRecordFormProps = Pick<Alcohol, 'alcoholId'>;
 type CreateRecordForm = {
   photoList: { url?: string; file?: File | null }[];
   flavorScore: Pick<Record, 'scentScore' | 'tasteScore' | 'textureScore'>;
-  flavorTag: FlavorTag;
 } & Pick<
   Record,
-  'experienceDate' | 'alcoholPercentFeeling' | 'starScore' | 'description'
+  | 'experienceDate'
+  | 'alcoholPercentFeeling'
+  | 'starScore'
+  | 'description'
+  | 'flavorTagList'
 >;
 
 export const useCreateRecordForm = ({
@@ -29,6 +31,7 @@ export const useCreateRecordForm = ({
       photoList: [],
       experienceDate: dayjs().format('YYYY-MM-DD'),
       flavorScore: FLAVOR_SLIDER_GROUP_DEFAULT_VALUE,
+      flavorTagList: [],
     },
   });
 
@@ -47,7 +50,7 @@ export const useCreateRecordForm = ({
         recordInfo: {
           alcoholId,
           alcoholPercentFeeling: data.alcoholPercentFeeling,
-          flavorTagList: [data.flavorTag],
+          flavorTagList: data.flavorTagList,
           starScore: data.starScore,
           scentScore: data.flavorScore.scentScore,
           tasteScore: data.flavorScore.tasteScore,

src/pages/records/create/index.tsx

@@ -172,7 +172,7 @@ const RecordCreate = ({ alcoholId }: RecordCreateProps) => {
             )}
           />
           <Controller
-            name="flavorTag"
+            name="flavorTagList"
             control={control}
             render={({ field }) => (
               <DetailFlavorInput label="상세 플레이버 (선택)" {...field} />