diff --git a/src/components/Recipe/CommentForm/CommentForm.tsx b/src/components/Recipe/CommentForm/CommentForm.tsx
index 5eb0ac1c7..5bddea74b 100644
--- a/src/components/Recipe/CommentForm/CommentForm.tsx
+++ b/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)`
diff --git a/src/components/Review/ReviewTagList/ReviewTagList.tsx b/src/components/Review/ReviewTagList/ReviewTagList.tsx
index 54c717be4..715e61657 100644
--- a/src/components/Review/ReviewTagList/ReviewTagList.tsx
+++ b/src/components/Review/ReviewTagList/ReviewTagList.tsx
@@ -1,12 +1,10 @@
-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[];
@@ -14,7 +12,6 @@ interface ReviewTagListProps {
const ReviewTagList = ({ selectedTags }: ReviewTagListProps) => {
const { data: tagsData } = useReviewTagsQuery();
- const { minDisplayedTags, canShowMore, showMoreTags } = useDisplayTag(tagsData, MIN_DISPLAYED_TAGS_LENGTH);
return (
@@ -31,7 +28,7 @@ const ReviewTagList = ({ selectedTags }: ReviewTagListProps) => {
- {tags.slice(0, minDisplayedTags).map(({ id, name }) => (
+ {tags.map(({ id, name }) => (
<>
-
@@ -44,19 +41,6 @@ const ReviewTagList = ({ selectedTags }: ReviewTagListProps) => {
))}
- {canShowMore && (
-
- )}
);
};
@@ -80,14 +64,6 @@ 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;
@@ -95,6 +71,14 @@ const TagListWrapper = styled.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);
-`;
diff --git a/src/contexts/ReviewFormContext.tsx b/src/contexts/ReviewFormContext.tsx
index 34c15659f..8be4fb1f9 100644
--- a/src/contexts/ReviewFormContext.tsx
+++ b/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,6 +28,7 @@ export const ReviewFormActionContext = createContext(nu
const ReviewFormProvider = ({ children }: PropsWithChildren) => {
const [reviewFormValue, setReviewFormValue] = useState(initialReviewFormValue);
+ const { toast } = useToastActionContext();
const handleReviewFormValue = ({ target, value, isSelected }: ReviewFormActionParams) => {
setReviewFormValue((prev) => {
@@ -34,6 +36,7 @@ const ReviewFormProvider = ({ children }: PropsWithChildren) => {
if (Array.isArray(targetValue)) {
if (targetValue.length >= MIN_DISPLAYED_TAGS_LENGTH && !isSelected) {
+ toast.success(`태그는 ${MIN_DISPLAYED_TAGS_LENGTH}개까지 선택할 수 있습니다`);
return prev;
}
diff --git a/src/hooks/review/index.ts b/src/hooks/review/index.ts
index a91a7a686..afebf1bd5 100644
--- a/src/hooks/review/index.ts
+++ b/src/hooks/review/index.ts
@@ -1,2 +1 @@
-export { default as useDisplayTag } from './useDisplayTag';
export { default as useStarRatingHover } from './useStarRatingHover';
diff --git a/src/hooks/review/useDisplayTag.ts b/src/hooks/review/useDisplayTag.ts
deleted file mode 100644
index 153ab2904..000000000
--- a/src/hooks/review/useDisplayTag.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useState } from 'react';
-
-import type { ReviewTag } from '@/types/review';
-
-const getMaxTagsInGroup = (tagList: ReviewTag[]) => {
- return tagList.reduce((max, { tags }) => Math.max(max, tags.length), 0);
-};
-
-const useDisplayTag = (initialReviewTagList: ReviewTag[], minDisplayedTagsLength: number) => {
- const [minDisplayedTags, setMinDisplayedTags] = useState(minDisplayedTagsLength);
-
- const canShowMore = minDisplayedTags < getMaxTagsInGroup(initialReviewTagList);
-
- const showMoreTags = () => {
- setMinDisplayedTags(getMaxTagsInGroup(initialReviewTagList));
- };
-
- return { minDisplayedTags, canShowMore, showMoreTags };
-};
-
-export default useDisplayTag;