[FE] refactor: 리뷰 폼 웹 접근성 개선 (#12)

* refactor: input 확대 현상 방지

* refactor: 원래 pr에 있던 내용 적용

src/components/Recipe/CommentForm/CommentForm.tsx

@@ -97,7 +97,6 @@ const Form = styled.form`
 const CommentTextarea = styled(Textarea)`
   height: 50px;
   padding: 8px;
-  font-size: 1.4rem;
 `;
 
 const SubmitButton = styled(Button)`

src/components/Review/ReviewTagList/ReviewTagList.tsx

@@ -1,20 +1,17 @@
-import { Button, Heading, Spacing } from '@fun-eat/design-system';
+import { Heading, Spacing } from '@fun-eat/design-system';
 import styled from 'styled-components';
 
 import ReviewTagItem from '../ReviewTagItem/ReviewTagItem';
 
-import { SvgIcon } from '@/components/Common';
-import { MIN_DISPLAYED_TAGS_LENGTH, TAG_TITLE } from '@/constants';
+import { TAG_TITLE } from '@/constants';
 import { useReviewTagsQuery } from '@/hooks/queries/review';
-import { useDisplayTag } from '@/hooks/review';
 
 interface ReviewTagListProps {
   selectedTags: number[];
 }
 
 const ReviewTagList = ({ selectedTags }: ReviewTagListProps) => {
   const { data: tagsData } = useReviewTagsQuery();
-  const { minDisplayedTags, canShowMore, showMoreTags } = useDisplayTag(tagsData, MIN_DISPLAYED_TAGS_LENGTH);
 
   return (
     <ReviewTagListContainer>
@@ -31,7 +28,7 @@ const ReviewTagList = ({ selectedTags }: ReviewTagListProps) => {
             </TagTitle>
             <Spacing size={20} />
             <ul>
-              {tags.slice(0, minDisplayedTags).map(({ id, name }) => (
+              {tags.map(({ id, name }) => (
                 <>
                   <li key={id}>
                     <ReviewTagItem id={id} name={name} variant={tagType} isSelected={selectedTags.includes(id)} />
@@ -44,19 +41,6 @@ const ReviewTagList = ({ selectedTags }: ReviewTagListProps) => {
         ))}
       </TagListWrapper>
       <Spacing size={26} />
-      {canShowMore && (
-        <Button
-          type="button"
-          customHeight="fit-content"
-          variant="transparent"
-          onClick={showMoreTags}
-          aria-label="태그 더보기"
-        >
-          <SvgWrapper>
-            <SvgIcon variant="arrow" width={15} />
-          </SvgWrapper>
-        </Button>
-      )}
     </ReviewTagListContainer>
   );
 };
@@ -80,21 +64,21 @@ const TagListWrapper = styled.div`
   column-gap: 20px;
   overflow-x: auto;
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  & > div {
-    flex-grow: 1;
-  }
-
   @media screen and (min-width: 420px) {
     justify-content: center;
 
     & > div {
       flex-grow: 0;
     }
   }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  & > div {
+    flex-grow: 1;
+  }
 `;
 
 const TagItemWrapper = styled.div`
@@ -107,8 +91,3 @@ const TagItemWrapper = styled.div`
 const TagTitle = styled(Heading)`
   text-align: center;
 `;
-
-const SvgWrapper = styled.span`
-  display: inline-block;
-  transform: rotate(270deg);
-`;

src/contexts/ReviewFormContext.tsx

@@ -1,3 +1,4 @@
+import { useToastActionContext } from '@fun-eat/design-system';
 import type { PropsWithChildren } from 'react';
 import { createContext, useState } from 'react';
 
@@ -27,13 +28,15 @@ export const ReviewFormActionContext = createContext<ReviewFormAction | null>(nu
 
 const ReviewFormProvider = ({ children }: PropsWithChildren) => {
   const [reviewFormValue, setReviewFormValue] = useState(initialReviewFormValue);
+  const { toast } = useToastActionContext();
 
   const handleReviewFormValue = ({ target, value, isSelected }: ReviewFormActionParams) => {
     setReviewFormValue((prev) => {
       const targetValue = prev[target];
 
       if (Array.isArray(targetValue)) {
         if (targetValue.length >= MIN_DISPLAYED_TAGS_LENGTH && !isSelected) {
+          toast.success(`태그는 ${MIN_DISPLAYED_TAGS_LENGTH}개까지 선택할 수 있습니다`);
           return prev;
         }
 

src/hooks/review/index.ts

@@ -1,2 +1 @@
-export { default as useDisplayTag } from './useDisplayTag';
 export { default as useStarRatingHover } from './useStarRatingHover';