fix : 커뮤니티 페이지 img -> Image 태그로 변경

4bujak-4bujak · May 30, 2024 · 4838f2a · 4838f2a
1 parent 0fb0402
commit 4838f2a
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 14 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -6,6 +6,7 @@ const nextConfig = {
     domains: [
       'bzbz-file-bucket.s3.ap-northeast-2.amazonaws.com',
       'userimage.bucket.s3.ap-northeast-2.amazonaws.com',
+      'sabujak-image-bucket.s3.ap-northeast-2.amazonaws.com',
       '*'
     ]
   },

diff --git a/src/components/community/comments/CommentsItem.tsx b/src/components/community/comments/CommentsItem.tsx
@@ -3,6 +3,7 @@ import { formatDate, formatTime } from '@/utils/invertFullTime';
 import { useModalStore } from '@/store/modal.store';
 import { CommentDataType } from '../model/commentType';
 import { useEnumToCategory } from '../hooks/useEnumToCategory';
+import Image from 'next/image';
 
 const CommentsItem = ({
   comment,
@@ -19,9 +20,12 @@ const CommentsItem = ({
       <div className="mt-5 flex  gap-[13px]">
         {/* 유저 사진 */}
         <div className="w-[42px] h-[42px]">
-          <img
-            src={`${comment.writer.profile}`}
-            alt=""
+          <Image
+            src={`${comment?.writer?.profile}`}
+            alt="image"
+            width={42}
+            height={42}
+            quality={75}
             className="rounded-[50%] w-full h-full"
           />
         </div>
@@ -30,8 +34,8 @@ const CommentsItem = ({
         <div className="flex flex-col flex-1">
           {/* 유저 이름 */}
           <div className="flex justify-between">
-            <div className="text-sm font-semibold">{comment.writer.nickname}</div>
-            {comment.isWriter && (
+            <div className="text-sm font-semibold">{comment?.writer?.nickname}</div>
+            {comment?.isWriter && (
               <div
                 onClick={() => {
                   setOpen(true);
@@ -47,22 +51,22 @@ const CommentsItem = ({
 
           {/* 유저직무 */}
           <div className="text-xs text-gray-400">
-            {useEnumToCategory(comment.writer.job)}
+            {useEnumToCategory(comment?.writer?.job)}
           </div>
 
           {/* 댓글 내용 */}
           <div className="mt-[15px] text-sm font-normal leading-normal text-gray-800">
-            {comment.content}
+            {comment?.content}
           </div>
 
           {/* 댓글 작성 시간 */}
           <div className="flex items-center mt-3 text-gray-500 text-xs font-normal">
             {/* 일자 */}
             <div className="border-r border-neutral-300 pr-2">
-              {formatDate(comment.createdDate)}
+              {formatDate(comment?.createdDate)}
             </div>
             {/* 시간 */}
-            <div className="pl-2">{formatTime(comment.createdDate)}</div>
+            <div className="pl-2">{formatTime(comment?.createdDate)}</div>
           </div>
         </div>
       </div>

diff --git a/src/components/community/comments/WriteCommentLayout.tsx b/src/components/community/comments/WriteCommentLayout.tsx
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { postComment } from '../remote/comment';
 import { useMember } from '@/store/user';
+import Image from 'next/image';
 
 const WriteCommentLayout = ({ postId }: { postId: string }) => {
   const queryClient = useQueryClient();
@@ -35,7 +36,14 @@ const WriteCommentLayout = ({ postId }: { postId: string }) => {
     <div className="w-[393px] fixed bottom-0 bg-white flex items-center px-4 py-4 left-1/2 transform -translate-x-1/2">
       <div className="flex gap-[13px] flex-1">
         <div>
-          <img src={imageUrl} alt="" className="w-[42px] h-[42px] rounded-full" />
+          <Image
+            src={imageUrl as string}
+            alt="image"
+            className="w-[42px] h-[42px] rounded-full"
+            width={42}
+            height={42}
+            quality={75}
+          />
         </div>
         <div className="flex-1">
           <textarea

diff --git a/src/components/community/shared/PostDetail.tsx b/src/components/community/shared/PostDetail.tsx
@@ -6,6 +6,7 @@ import { useMutation, useQueryClient } from 'react-query';
 import { cancelLike, registerLike } from '../remote/post';
 import { useEnumToTag } from '../hooks/useEnumToTag';
 import { useEnumToCategory } from '../hooks/useEnumToCategory';
+import Image from 'next/image';
 
 interface PostDetailType {
   postData: PostDetailDataType;
@@ -54,10 +55,13 @@ const PostDetail = ({ postData }: PostDetailType) => {
       <div className="mt-5 flex items-center gap-[13px]">
         {/* 유저 사진 */}
         <div className="w-[42px] h-[42px]">
-          <img
+          <Image
             src={`${postData.writer.profile}`}
-            alt=""
+            alt="image"
             className="rounded-[50%] w-full h-full"
+            width={42}
+            height={42}
+            quality={75}
           />
         </div>
 
@@ -95,7 +99,15 @@ const PostDetail = ({ postData }: PostDetailType) => {
         <div className="flex flex-col gap-2 mt-5">
           {postData.images?.map((image, i) => (
             <div className="w-[360px] h-[280px]" key={i}>
-              <img src={image} className="object-scale-down w-full h-full " />
+              <Image
+                width={360}
+                height={280}
+                alt="image"
+                quality={75}
+                src={image}
+                priority
+                className="object-cover w-full h-full "
+              />
             </div>
           ))}
         </div>

diff --git a/src/components/community/shared/PostItemImageItem.tsx b/src/components/community/shared/PostItemImageItem.tsx
@@ -1,9 +1,18 @@
+import Image from 'next/image';
 import React from 'react';
 
 const PostItemImageItem = ({ image, count }: { image: string; count: number }) => {
   return (
     <div className={`${count > 1 ? 'w-[260px] h-[180px] ' : 'w-[360px] h-[180px] z-1'}`}>
-      <img src={image} alt="" className="rounded-sm object-cover w-full h-full" />
+      <Image
+        src={image}
+        width={`${count > 1 ? 260 : 360}`}
+        height={180}
+        className="rounded-sm object-cover w-full h-full"
+        alt="image"
+        priority
+        quality={75}
+      />
     </div>
   );
 };