[FE] refactor: 리뷰 폼 웹 접근성 개선

frontend/src/components/Recipe/CommentForm/CommentForm.tsx

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

frontend/src/components/Review/ReviewTagList/ReviewTagList.tsx

@@ -3,18 +3,15 @@ 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 { 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)} />
@@ -43,20 +40,6 @@ const ReviewTagList = ({ selectedTags }: ReviewTagListProps) => {
           </TagItemWrapper>
         ))}
       </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>
   );
 };
@@ -107,8 +90,3 @@ const TagItemWrapper = styled.div`
 const TagTitle = styled(Heading)`
   text-align: center;
 `;
-
-const SvgWrapper = styled.span`
-  display: inline-block;
-  transform: rotate(270deg);
-`;

frontend/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;
         }
 

frontend/src/hooks/review/index.ts

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