FE-76✨ 댓글 작성 시 image를 유저가 등록한 image로 변경

epigram5-9 · Jul 26, 2024 · fba939b · fba939b
1 parent 4f54bf4
commit fba939b
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -2,7 +2,7 @@ import axios from 'axios';
 import qs from 'qs';
 
 const getToken = () =>
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywidGVhbUlkIjoiNS05Iiwic2NvcGUiOiJhY2Nlc3MiLCJpYXQiOjE3MjE5ODMyMTksImV4cCI6MTcyMTk4NTAxOSwiaXNzIjoic3AtZXBpZ3JhbSJ9.57RemB9wCHGmVhLInNKWs6uKulDLDCv4dcJuGrBsG4s';
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywidGVhbUlkIjoiNS05Iiwic2NvcGUiOiJhY2Nlc3MiLCJpYXQiOjE3MjE5ODUyNzUsImV4cCI6MTcyMTk4NzA3NSwiaXNzIjoic3AtZXBpZ3JhbSJ9.E6-Rr2AupbIj0WgdAgTCDuuz6v-AkMxmxn2kYsh2R2M';
 
 const httpClient = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,

diff --git a/src/components/epigram/Comment/CommentTextarea.tsx b/src/components/epigram/Comment/CommentTextarea.tsx
@@ -20,6 +20,7 @@ function CommentTextarea({ epigramId }: CommentTextareaProps) {
 
   const form = useForm<CommentFormValues>({
     resolver: zodResolver(CommentFormSchema),
+    //NOTE: 초기값 설정
     defaultValues: {
       content: '',
       isPrivate: false,
@@ -81,9 +82,11 @@ function CommentTextarea({ epigramId }: CommentTextareaProps) {
                 render={({ field }) => (
                   <FormItem className='flex items-center space-x-2'>
                     <FormControl className='m-0'>
+                      {/* NOTE: Switch를 눌렀을때 onCheckedChange실행되면서 반대의 값을 받음  */}
+                      {/* NOTE: field.onChange는 react hook form에서 setValue와 연결되어있어서 자동으로 값을 담아줌 */}
                       <Switch checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
-                    <Label htmlFor='isPrivate' className='text-sm'>
+                    <Label htmlFor='isPrivate' className='text-sm m-0'>
                       {field.value ? '비공개' : '공개'}
                     </Label>
                   </FormItem>

diff --git a/src/pageLayout/Epigram/EpigramComment.tsx b/src/pageLayout/Epigram/EpigramComment.tsx
@@ -4,15 +4,19 @@ import { paddingStyles } from '@/styles/CommentCardStyles';
 import { EpigramCommentProps } from '@/types/epigram.types';
 import Image from 'next/image';
 
-function EpigramComment({ epigramId, currentUserId }: EpigramCommentProps) {
+function EpigramComment({ epigramId, currentUserId, userImage }: EpigramCommentProps) {
   return (
     <div className='bg-slate-100 flex justify-center '>
       <div className='w-80 md:w-96 lg:w-[640px] pt-6 lg:pt-12'>
         <h3 className='text-base lg:text-xl font-semibold'>댓글 작성</h3>
         <div className={`flex flex-col gap-4 lg:gap-6 ${paddingStyles.sm} ${paddingStyles.md} ${paddingStyles.lg}`}>
           <div className='flex gap-4 lg:gap-6'>
             <div className='w-12 h-12'>
-              <Image src='/profile.svg' alt='프로필 사진' width={48} height={48} />
+              {userImage ? (
+                <Image src={userImage} alt='사용자 프로필 사진' width={48} height={48} className='rounded-full' />
+              ) : (
+                <Image src='/profile.svg' alt='기본 프로필 사진' width={48} height={48} />
+              )}
             </div>
             <CommentTextarea epigramId={epigramId} />
           </div>

diff --git a/src/pages/epigram/[id].tsx b/src/pages/epigram/[id].tsx
@@ -28,7 +28,7 @@ function DetailPage() {
         <Image src='/share.svg' alt='공유 버튼' width={36} height={36} />
       </nav>
       <EpigramFigure epigram={epigram} currentUserId={userData?.id} />
-      <EpigramComment epigramId={epigram.id} currentUserId={userData?.id} />
+      <EpigramComment epigramId={epigram.id} currentUserId={userData?.id} userImage={userData?.image} />
     </div>
   );
 }

diff --git a/src/types/epigram.types.ts b/src/types/epigram.types.ts
@@ -9,6 +9,7 @@ export interface EpigramFigureProps {
 export interface EpigramCommentProps {
   epigramId: number;
   currentUserId: GetUserResponseType['id'] | undefined;
+  userImage?: string | undefined;
 }
 
 export interface PostCommentRequest {