diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 39ca6ff3f..138ea3ede 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -42,19 +42,19 @@ - - - + + + + + + + + + = { + title: 'common/StarRating', + component: StarRating, + args: { + rating: 4.5, + createdAt: '2021-09-01T00:00:00.000Z', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/components/Common/StarRating/StarRating.tsx b/src/components/Common/StarRating/StarRating.tsx new file mode 100644 index 000000000..c773bf2c0 --- /dev/null +++ b/src/components/Common/StarRating/StarRating.tsx @@ -0,0 +1,37 @@ +import { date, ratingInfo, ratingNumber, ratingWrapper } from './starRating.css'; +import SvgIcon from '../Svg/SvgIcon'; +import Text from '../Text/Text'; + +import { vars } from '@/styles/theme.css'; +import { getRelativeDate } from '@/utils/date'; + +interface StarRatingProps { + rating: number; + createdAt: string; +} + +const StarRating = ({ rating, createdAt }: StarRatingProps) => { + return ( +
+
+ + {rating.toFixed(1)} + + {Array.from({ length: 5 }, (_, index) => ( + + ))} +
+ + {getRelativeDate(createdAt)} + +
+ ); +}; + +export default StarRating; diff --git a/src/components/Common/StarRating/starRating.css.ts b/src/components/Common/StarRating/starRating.css.ts new file mode 100644 index 000000000..17692480c --- /dev/null +++ b/src/components/Common/StarRating/starRating.css.ts @@ -0,0 +1,23 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const ratingWrapper = style({ + display: 'flex', + alignItems: 'center', + gap: 8, +}); + +export const ratingInfo = style({ + display: 'flex', + alignItems: 'center', + gap: 4, +}); + +export const ratingNumber = style({ + paddingTop: 4, + color: vars.colors.gray5, +}); + +export const date = style({ + paddingTop: 2, +}); diff --git a/src/components/Common/Svg/SvgSprite.tsx b/src/components/Common/Svg/SvgSprite.tsx index a7f67c9b7..e98fafb7c 100644 --- a/src/components/Common/Svg/SvgSprite.tsx +++ b/src/components/Common/Svg/SvgSprite.tsx @@ -40,19 +40,19 @@ const SvgSprite = () => { - - - + + + + + + + + + { return ( - + ); }; diff --git a/src/components/Common/TopBar/topBar.css.ts b/src/components/Common/TopBar/topBar.css.ts index c743e3365..22f0a61f4 100644 --- a/src/components/Common/TopBar/topBar.css.ts +++ b/src/components/Common/TopBar/topBar.css.ts @@ -11,7 +11,6 @@ export const container = style({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', - padding: '0 20px', backgroundColor: vars.colors.white, transform: 'translateX(-50%)', zIndex: 1001, diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts index 6c66972c6..942836c46 100644 --- a/src/components/Common/index.ts +++ b/src/components/Common/index.ts @@ -27,4 +27,5 @@ export { default as WriteButton } from './WriteButton/WriteButton'; export { default as Text } from './Text/Text'; export { default as Indicator } from './Indicator/Indicator'; export { default as TopBar } from './TopBar/TopBar'; +export { default as StarRating } from './StarRating/StarRating'; export { default as ShowAllButton } from './ShowAllButton/ShowAllButton'; diff --git a/src/components/Members/MemberImage/MemberImage.tsx b/src/components/Members/MemberImage/MemberImage.tsx index c3dd9f98e..5dc0e5df6 100644 --- a/src/components/Members/MemberImage/MemberImage.tsx +++ b/src/components/Members/MemberImage/MemberImage.tsx @@ -1,18 +1,16 @@ import { useState } from 'react'; -import type { CSSProp } from 'styled-components'; -import styled from 'styled-components'; + +import { container } from './memberImage.css'; import DefaultMemberImage from '@/assets/defaultProfile.png'; interface MemberImageProps { src: string; - alt: string; width?: number; height?: number; - css?: CSSProp; } -const MemberImage = ({ src, alt, width = 45, height = 45, css }: MemberImageProps) => { +const MemberImage = ({ src, width = 48, height = 48 }: MemberImageProps) => { const [isError, setIsError] = useState(false); const handleImageError = () => { @@ -20,23 +18,15 @@ const MemberImage = ({ src, alt, width = 45, height = 45, css }: MemberImageProp }; return ( - ); }; export default MemberImage; - -const StyledMemberImage = styled.img` - border: 2px solid ${({ theme }) => theme.colors.primary}; - border-radius: 50%; - background: ${({ theme }) => theme.backgroundColors.default}; - object-fit: cover; - ${({ css }) => css}; -`; diff --git a/src/components/Members/MemberImage/memberImage.css.ts b/src/components/Members/MemberImage/memberImage.css.ts new file mode 100644 index 000000000..d36c252e9 --- /dev/null +++ b/src/components/Members/MemberImage/memberImage.css.ts @@ -0,0 +1,6 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + borderRadius: '50%', + objectFit: 'cover', +}); diff --git a/src/components/Members/MemberModifyInput/MemberModifyInput.stories.tsx b/src/components/Members/MemberModifyInput/MemberModifyInput.stories.tsx new file mode 100644 index 000000000..620b8e62e --- /dev/null +++ b/src/components/Members/MemberModifyInput/MemberModifyInput.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import MemberModifyInput from './MemberModifyInput'; + +const meta: Meta = { + title: 'members/ MemberModifyInput', + component: MemberModifyInput, + args: { + nickname: '펀잇', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/components/Members/MemberModifyInput/MemberModifyInput.tsx b/src/components/Members/MemberModifyInput/MemberModifyInput.tsx index 6a03e4507..be7cfb1f2 100644 --- a/src/components/Members/MemberModifyInput/MemberModifyInput.tsx +++ b/src/components/Members/MemberModifyInput/MemberModifyInput.tsx @@ -1,6 +1,8 @@ -import { Heading, Spacing, Text, Input, useTheme } from '@fun-eat/design-system'; import type { ChangeEventHandler } from 'react'; -import styled from 'styled-components'; + +import { container, inputWrapper, letterCount } from './memberModifyInput.css'; + +import { Text } from '@/components/Common'; const MIN_LENGTH = 1; const MAX_LENGTH = 10; @@ -11,36 +13,26 @@ interface MemberModifyInputProps { } const MemberModifyInput = ({ nickname, modifyNickname }: MemberModifyInputProps) => { - const theme = useTheme(); - return ( - - + <> + 닉네임 - - - {nickname.length}자 / {MAX_LENGTH}자 - - - - + +
+
+ + {nickname.length} / {MAX_LENGTH} + + +
+ ); }; export default MemberModifyInput; - -const MemberModifyInputContainer = styled.div` - position: relative; -`; - -const NicknameStatusText = styled(Text)` - position: absolute; - top: 0; - right: 0; -`; diff --git a/src/components/Members/MemberModifyInput/memberModifyInput.css.ts b/src/components/Members/MemberModifyInput/memberModifyInput.css.ts new file mode 100644 index 000000000..dbed2e00e --- /dev/null +++ b/src/components/Members/MemberModifyInput/memberModifyInput.css.ts @@ -0,0 +1,34 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const container = style({ + position: 'relative', + width: '100%', + border: `1px solid ${vars.colors.border.default}`, + borderRadius: 6, + boxSizing: 'border-box', + + selectors: { + '&:focus-within': { + outline: `1px solid ${vars.colors.primary}`, + border: `1px solid transparent`, + }, + }, +}); + +export const inputWrapper = style({ + width: '90%', + height: 44, + paddingLeft: 16, + outline: 'none', +}); + +export const letterCount = style({ + position: 'absolute', + width: '10%', + top: 14.5, + right: 16, + display: 'flex', + alignItems: 'center', + background: vars.colors.white, +}); diff --git a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx b/src/components/Members/MemberRecipeList/MemberRecipeList.tsx index 74cf2da96..a2a7205ef 100644 --- a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx +++ b/src/components/Members/MemberRecipeList/MemberRecipeList.tsx @@ -1,90 +1,46 @@ -import { Link, Spacing, Text, theme } from '@fun-eat/design-system'; import { useRef } from 'react'; -import { Link as RouterLink } from 'react-router-dom'; -import styled from 'styled-components'; -import { PATH } from '@/constants/path'; +import { container } from './memberRecipeList.css'; + +import { DefaultRecipeItem } from '@/components/Recipe'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteMemberRecipeQuery } from '@/hooks/queries/members'; -import displaySlice from '@/utils/displaySlice'; - -interface MemberRecipeListProps { - isPreview?: boolean; -} -const MemberRecipeList = ({ isPreview = false }: MemberRecipeListProps) => { +const MemberRecipeList = () => { const scrollRef = useRef(null); const { fetchNextPage, hasNextPage, data } = useInfiniteMemberRecipeQuery(); const memberRecipes = data?.pages.flatMap((page) => page.recipes); - const recipeToDisplay = displaySlice(isPreview, memberRecipes); useIntersectionObserver(fetchNextPage, scrollRef, hasNextPage); - const totalRecipeCount = data?.pages[0].page.totalDataCount; - - if (totalRecipeCount === 0) { - return ( - - - 앗, 작성한 꿀조합이 없네요 🥲 - - - - 꿀조합 작성하러 가기 - - - ); - } + // 추후 디자인 추가에 따라 변경 예정 + // if (totalRecipeCount === 0) { + // return ( + // + // + // 앗, 작성한 꿀조합이 없네요 🥲 + // + // + // + // 꿀조합 작성하러 가기 + // + // + // ); + // } return ( - - {!isPreview && ( - - 총 {totalRecipeCount}개의 꿀조합을 남겼어요! - - )} - - - {recipeToDisplay?.map((recipe) => ( + <> +
    + {memberRecipes.map((recipe) => (
  • - - {/* */} - +
    • ))} - +
- + ); }; export default MemberRecipeList; - -const MemberRecipeListContainer = styled.section` - display: flex; - flex-direction: column; -`; - -const MemberRecipeListWrapper = styled.ul` - display: flex; - flex-direction: column; - gap: 20px; -`; - -const TotalRecipeCount = styled(Text)` - text-align: right; -`; - -const ErrorContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - margin-top: 20px; -`; - -const RecipeLink = styled(Link)` - padding: 12px 12px; - border: 1px solid ${({ theme }) => theme.colors.gray4}; - border-radius: 8px; -`; diff --git a/src/components/Members/MemberRecipeList/memberRecipeList.css.ts b/src/components/Members/MemberRecipeList/memberRecipeList.css.ts new file mode 100644 index 000000000..5de3d0593 --- /dev/null +++ b/src/components/Members/MemberRecipeList/memberRecipeList.css.ts @@ -0,0 +1,9 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + display: 'grid', + gridTemplateColumns: 'repeat(2, 1fr)', + gridAutoRows: 'auto', + columnGap: 10, + rowGap: 20, +}); diff --git a/src/components/Members/MemberReviewItem/MemberReviewItem.stories.tsx b/src/components/Members/MemberReviewItem/MemberReviewItem.stories.tsx index 3856648f5..b86b4c5c8 100644 --- a/src/components/Members/MemberReviewItem/MemberReviewItem.stories.tsx +++ b/src/components/Members/MemberReviewItem/MemberReviewItem.stories.tsx @@ -8,15 +8,27 @@ const meta: Meta = { args: { review: { reviewId: 1, - productId: 5, - productName: '구운감자슬림명란마요', + productId: 1, + productName: '새우깡', + image: + 'https://i.namu.wiki/i/9wnvUaEa1EkDqG-M0Pbwfdf19FJQQXV_-bnlU2SYaNcG05y2wbabiIrfrGES1M4xSgDjY39RwOvLNggDd3Huuw.webp', content: '할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다', rating: 4.0, - favoriteCount: 1256, - categoryType: 'food', + createdAt: '2023-08-09T10:10:10', + tags: [ + { + id: 5, + name: '단짠단짠', + tagType: 'TASTE', + }, + { + id: 1, + name: '망고망고', + tagType: 'TASTE', + }, + ], }, - isPreview: true, }, }; diff --git a/src/components/Members/MemberReviewItem/MemberReviewItem.tsx b/src/components/Members/MemberReviewItem/MemberReviewItem.tsx index 4320f967d..52efee7b1 100644 --- a/src/components/Members/MemberReviewItem/MemberReviewItem.tsx +++ b/src/components/Members/MemberReviewItem/MemberReviewItem.tsx @@ -1,24 +1,26 @@ -import { useTheme, Spacing, Text, Button, useToastActionContext } from '@fun-eat/design-system'; +import { useToastActionContext } from '@fun-eat/design-system'; import type { MouseEventHandler } from 'react'; -import styled from 'styled-components'; +import { Link } from 'react-router-dom'; -import { SvgIcon } from '@/components/Common'; +import { titleWrapper } from './memberReviewItem.css'; + +import { SvgIcon, Text } from '@/components/Common'; +import { ReviewItemInfo } from '@/components/Review'; +import { PATH } from '@/constants/path'; import { useDeleteReview } from '@/hooks/queries/members'; +import { vars } from '@/styles/theme.css'; import type { MemberReview } from '@/types/review'; interface MemberReviewItemProps { review: MemberReview; - isPreview: boolean; } -const MemberReviewItem = ({ review, isPreview }: MemberReviewItemProps) => { - const theme = useTheme(); - +const MemberReviewItem = ({ review }: MemberReviewItemProps) => { const { mutate } = useDeleteReview(); const { toast } = useToastActionContext(); - const { reviewId, productName, content, rating, favoriteCount } = review; + const { reviewId, productId, productName, rating, createdAt, image, content, tags } = review; const handleReviewDelete: MouseEventHandler = (e) => { e.preventDefault(); @@ -44,79 +46,25 @@ const MemberReviewItem = ({ review, isPreview }: MemberReviewItemProps) => { }; return ( - - - - {productName} - - {!isPreview && ( - - )} - - - {content} - - - - - - - {favoriteCount} + <> +
+ + + {productName} + - - - - - {rating.toFixed(1)} + + +
+
+ + + ); }; export default MemberReviewItem; - -const ReviewRankingItemContainer = styled.div` - display: flex; - flex-direction: column; - gap: 4px; - padding: 12px 0; - border-bottom: ${({ theme }) => `1px solid ${theme.borderColors.disabled}`}; -`; - -const ProductNameIconWrapper = styled.div` - display: flex; - justify-content: space-between; -`; - -const ReviewText = styled(Text)` - display: -webkit-inline-box; - text-overflow: ellipsis; - overflow: hidden; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -`; - -const FavoriteStarWrapper = styled.div` - display: flex; - gap: 4px; -`; - -const FavoriteIconWrapper = styled.div` - display: flex; - gap: 4px; - align-items: center; -`; - -const RatingIconWrapper = styled.div` - display: flex; - gap: 2px; - align-items: center; - - & > svg { - padding-bottom: 2px; - } -`; diff --git a/src/components/Members/MemberReviewItem/memberReviewItem.css.ts b/src/components/Members/MemberReviewItem/memberReviewItem.css.ts new file mode 100644 index 000000000..efed1a142 --- /dev/null +++ b/src/components/Members/MemberReviewItem/memberReviewItem.css.ts @@ -0,0 +1,13 @@ +import { style } from '@vanilla-extract/css'; + +export const titleWrapper = style({ + display: 'flex', + justifyContent: 'space-between', +}); + +export const reviewImage = style({ + width: 164, + height: 90, + borderRadius: 6, + objectFit: 'cover', +}); diff --git a/src/components/Members/MemberReviewList/MemberReviewList.tsx b/src/components/Members/MemberReviewList/MemberReviewList.tsx index b150e1000..8f37f3be4 100644 --- a/src/components/Members/MemberReviewList/MemberReviewList.tsx +++ b/src/components/Members/MemberReviewList/MemberReviewList.tsx @@ -1,11 +1,7 @@ -import { Link, Spacing, Text, theme } from '@fun-eat/design-system'; import { useRef } from 'react'; -import { Link as RouterLink } from 'react-router-dom'; -import styled from 'styled-components'; import MemberReviewItem from '../MemberReviewItem/MemberReviewItem'; -import { PATH } from '@/constants/path'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteMemberReviewQuery } from '@/hooks/queries/members'; import displaySlice from '@/utils/displaySlice'; @@ -22,70 +18,36 @@ const MemberReviewList = ({ isPreview = false }: MemberReviewListProps) => { useIntersectionObserver(fetchNextPage, scrollRef, hasNextPage); - const totalReviewCount = data.pages[0].page.totalDataCount; - - if (totalReviewCount === 0) { - return ( - - - 앗, 작성한 리뷰가 없네요 🥲 - - - - 리뷰 작성하러 가기 - - - ); - } + // 추후 디자인 추가에 따라 변경 예정 + // if (totalReviewCount === 0) { + // return ( + // + // + // 앗, 작성한 리뷰가 없네요 🥲 + // + // + // + // 리뷰 작성하러 가기 + // + // + // ); + // } return ( - - {!isPreview && ( - - 총 {totalReviewCount}개의 리뷰를 남겼어요! - - )} - - + <> +
    {reviewsToDisplay.map((review) => ( -
  • - - - -
    • + <> +
  • + +
    • +
    + ))} - +
- + ); }; export default MemberReviewList; - -const MemberReviewListContainer = styled.section` - display: flex; - flex-direction: column; -`; - -const MemberReviewListWrapper = styled.ul` - display: flex; - flex-direction: column; - gap: 20px; -`; - -const TotalReviewCount = styled(Text)` - text-align: right; -`; - -const ErrorContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - margin-top: 20px; -`; - -const ReviewLink = styled(Link)` - padding: 12px 12px; - border: 1px solid ${({ theme }) => theme.colors.gray4}; - border-radius: 8px; -`; diff --git a/src/components/Members/MembersInfo/MyPageInfo.stories.tsx b/src/components/Members/MembersInfo/MemberInfo.stories.tsx similarity index 100% rename from src/components/Members/MembersInfo/MyPageInfo.stories.tsx rename to src/components/Members/MembersInfo/MemberInfo.stories.tsx diff --git a/src/components/Members/MembersInfo/MembersInfo.tsx b/src/components/Members/MembersInfo/MembersInfo.tsx index 3387d60e9..2fc7de304 100644 --- a/src/components/Members/MembersInfo/MembersInfo.tsx +++ b/src/components/Members/MembersInfo/MembersInfo.tsx @@ -1,12 +1,13 @@ -import { Button, Heading, Link, theme } from '@fun-eat/design-system'; -import { Link as RouterLink } from 'react-router-dom'; -import styled from 'styled-components'; +import { Link } from 'react-router-dom'; +import { logoutButton, modifyButton, wrapper } from './memberInfo.css'; import MemberImage from '../MemberImage/MemberImage'; +import PostCounterBox from '../PostCounterBox/PostCounterBox'; -import { SvgIcon } from '@/components/Common'; +import { SvgIcon, Text } from '@/components/Common'; import { PATH } from '@/constants/path'; import { useLogoutMutation, useMemberQuery } from '@/hooks/queries/members'; +import { vars } from '@/styles/theme.css'; const MembersInfo = () => { const { data: member } = useMemberQuery(); @@ -16,53 +17,43 @@ const MembersInfo = () => { return null; } - const { nickname, profileImage } = member; + const { nickname, profileImage, recipeCount, reviewCount } = member; const handleLogout = () => { mutate(); }; return ( - - + <> + + +
- - {nickname} 님 - - - - - - - +
+ + {nickname} + + + + +
+
+ + + ); }; export default MembersInfo; - -const MembersInfoContainer = styled.div` - display: flex; - justify-content: space-between; - align-items: center; -`; - -const MemberInfoWrapper = styled.div` - display: flex; - align-items: center; -`; - -const MemberModifyLink = styled(Link)` - margin-left: 5px; - transform: translateY(1px); -`; diff --git a/src/components/Members/MembersInfo/memberInfo.css.ts b/src/components/Members/MembersInfo/memberInfo.css.ts new file mode 100644 index 000000000..c3d1c2701 --- /dev/null +++ b/src/components/Members/MembersInfo/memberInfo.css.ts @@ -0,0 +1,22 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const logoutButton = style({ + float: 'right', +}); + +export const wrapper = style({ + display: 'flex', + alignItems: 'center', +}); + +export const modifyButton = style({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: 17, + height: 17, + marginLeft: 5, + background: vars.colors.icon.default, + borderRadius: '50%', +}); diff --git a/src/components/Members/PostCounterBox/PostCounterBox.stories.tsx b/src/components/Members/PostCounterBox/PostCounterBox.stories.tsx new file mode 100644 index 000000000..60bc8ccdc --- /dev/null +++ b/src/components/Members/PostCounterBox/PostCounterBox.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import PostCounterBox from './PostCounterBox'; + +const meta: Meta = { + title: 'members/PostCounterBox', + component: PostCounterBox, + args: { + recipeCount: 5, + reviewCount: 10, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/components/Members/PostCounterBox/PostCounterBox.tsx b/src/components/Members/PostCounterBox/PostCounterBox.tsx new file mode 100644 index 000000000..301bb44db --- /dev/null +++ b/src/components/Members/PostCounterBox/PostCounterBox.tsx @@ -0,0 +1,41 @@ +import { Link } from 'react-router-dom'; + +import { border, box, container } from './postCounterBox.css'; + +import { Text } from '@/components/Common'; +import { PATH } from '@/constants/path'; + +interface PostCounterBoxProps { + recipeCount: number; + reviewCount: number; +} + +const PostCounterBox = ({ recipeCount, reviewCount }: PostCounterBoxProps) => { + return ( +
+ +
+ + 작성한 꿀조합 + + + {recipeCount}개 + +
+ +
+ +
+ + 작성한 리뷰 + + + {reviewCount}개 + +
+ +
+ ); +}; + +export default PostCounterBox; diff --git a/src/components/Members/PostCounterBox/postCounterBox.css.ts b/src/components/Members/PostCounterBox/postCounterBox.css.ts new file mode 100644 index 000000000..79015cfa2 --- /dev/null +++ b/src/components/Members/PostCounterBox/postCounterBox.css.ts @@ -0,0 +1,25 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const container = style({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-evenly', + width: '100%', + height: 80, + background: vars.colors.border.light, + borderRadius: 6, +}); + +export const box = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', +}); + +export const border = style({ + width: 1, + height: 53, + background: vars.colors.border.default, +}); diff --git a/src/components/Members/index.ts b/src/components/Members/index.ts index 2080b25c6..7e5608e44 100644 --- a/src/components/Members/index.ts +++ b/src/components/Members/index.ts @@ -4,3 +4,4 @@ export { default as MemberRecipeList } from './MemberRecipeList/MemberRecipeList export { default as MemberModifyInput } from './MemberModifyInput/MemberModifyInput'; export { default as MemberReviewItem } from './MemberReviewItem/MemberReviewItem'; export { default as MemberImage } from './MemberImage/MemberImage'; +export { default as PostCounterBox } from './PostCounterBox/PostCounterBox'; diff --git a/src/components/Recipe/CommentForm/CommentForm.tsx b/src/components/Recipe/CommentForm/CommentForm.tsx index c0dcf52ce..24fc6ffa6 100644 --- a/src/components/Recipe/CommentForm/CommentForm.tsx +++ b/src/components/Recipe/CommentForm/CommentForm.tsx @@ -67,7 +67,7 @@ const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => { return (
- + <>