refactor: next image placeholder blur처리를 제거하라 (#612)

- next image placeholder blur처리 => empty로 변경

src/components/detail/CommentsView.test.tsx

@@ -21,7 +21,7 @@ describe('CommentsView', () => {
     (useInfiniteFetchComments as jest.Mock).mockImplementation(() => ({
       query: {
         data: {
-          pages: [{ items: [COMMENT_FIXTURE] }],
+          pages: [{ items: [COMMENT_FIXTURE, { ...COMMENT_FIXTURE, commentId: '2' }] }],
         },
         isFetchingNextPage: given.isFetchingNextPage,
       },
@@ -56,7 +56,9 @@ describe('CommentsView', () => {
     it('클릭 이벤트가 발생해야만 한다', () => {
       renderCommentsView();
 
-      fireEvent.click(screen.getByText('삭제'));
+      screen.getAllByText('삭제').forEach((removeButton) => {
+        fireEvent.click(removeButton);
+      });
 
       expect(handleRemove).toHaveBeenCalledWith({
         commentId: COMMENT_FIXTURE.commentId, groupId: COMMENT_FIXTURE.groupId,

src/components/home/RecruitPost.test.tsx

@@ -8,6 +8,7 @@ describe('RecruitPost', () => {
   const renderRecruitPost = () => render((
     <RecruitPost
       group={given.group}
+      isPriority={false}
     />
   ));
 

src/components/home/RecruitPost.tsx

@@ -15,16 +15,18 @@ import Divider from '@/styles/Divider';
 import { body2Font, h4Font, subtitle1Font } from '@/styles/fontStyles';
 import { mq2 } from '@/styles/responsive';
 import { removeAllHtml } from '@/utils/filter';
-import { shimmer, toBase64 } from '@/utils/imageBlur';
 import { emptyAThenB } from '@/utils/utils';
 
 import ProfileImage from '../common/ProfileImage';
 
 interface Props {
   group: Group;
+  isPriority: boolean;
 }
 
-function RecruitPost({ group }: Props, ref: ForwardedRef<HTMLDivElement>): ReactElement {
+function RecruitPost({
+  group, isPriority,
+}: Props, ref: ForwardedRef<HTMLDivElement>): ReactElement {
   const {
     title, content, groupId, writer, views, shortDescription, thumbnail,
   } = group;
@@ -40,9 +42,9 @@ function RecruitPost({ group }: Props, ref: ForwardedRef<HTMLDivElement>): React
             <ThumbnailWrapper>
               <Thumbnail
                 fill
-                placeholder="blur"
+                priority={isPriority}
+                placeholder="empty"
                 src={thumbnail}
-                blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(100, 100))}`}
                 alt="thumbnail"
                 sizes="(max-width: 650px) 100vw,
                 (max-width: 850px) 50vw,

src/components/home/RecruitPosts.tsx

@@ -43,6 +43,7 @@ function RecruitPosts({ onClickEmptyButton }: Props): ReactElement {
               <RecruitPost
                 key={group.groupId}
                 group={group}
+                isPriority={index <= 4}
                 ref={targetFalseThenValue(!isLastItem)(refState.lastItemRef)}
               />
             );

src/components/myInfo/MyGroup.tsx

@@ -18,7 +18,6 @@ import {
 } from '@/styles/fontStyles';
 import mq, { mobileMediaQuery } from '@/styles/responsive';
 import { removeAllHtml } from '@/utils/filter';
-import { shimmer, toBase64 } from '@/utils/imageBlur';
 
 interface Props {
   group: Group;
@@ -73,8 +72,7 @@ function MyGroup({ group }: Props, ref: ForwardedRef<HTMLAnchorElement>): ReactE
           fill
           src={thumbnail}
           alt="thumbnail"
-          placeholder="blur"
-          blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(100, 100))}`}
+          placeholder="empty"
           sizes="(max-width: 500px) 100vw, 33vw"
         />
       </ThumbnailWrapper>

src/components/write/ThumbnailUpload.tsx

@@ -19,7 +19,6 @@ import useUploadStorageFile from '@/hooks/api/storage/useUploadStorageFile';
 import { writeFieldsState } from '@/recoil/group/atom';
 import { body2Font, subtitle1Font } from '@/styles/fontStyles';
 import mq from '@/styles/responsive';
-import { shimmer, toBase64 } from '@/utils/imageBlur';
 import { isEmpty, stringToExcludeNull } from '@/utils/utils';
 
 import CloseSvg from '../../assets/icons/close.svg';
@@ -132,8 +131,7 @@ function ThumbnailUpload(): ReactElement {
                     <ThumbnailImage
                       fill
                       src={stringToExcludeNull(image.dataURL)}
-                      placeholder="blur"
-                      blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(100, 100))}`}
+                      placeholder="empty"
                       alt="thumbnail"
                       sizes="(max-width: 500px) 100vw, 50vw"
                     />