🚑 프론트 핫픽스

src/app/_components/answer.tsx

@@ -41,12 +41,11 @@ export default function Answer({ value, idState, ref }: askProps) {
 
   useEffect(() => {
     fetchProfile(value).then((r) => setUserInfo(r));
-    setShowNsfw(!value.nsfwedAnswer);
   }, [value]);
 
   return (
     <div className="w-full glass rounded-box px-2 desktop:px-8 py-4 mb-2 shadow">
-      {!showNsfw && (
+      {!showNsfw && value.nsfwedAnswer && (
         <div className="fixed top-0 left-0 z-10 gap-2 w-full h-full flex flex-col justify-center items-center">
           <span>답변자가 NSFW로 체크한 질문이에요!</span>
           <button className="btn" onClick={() => setShowNsfw(!showNsfw)}>
@@ -55,7 +54,7 @@ export default function Answer({ value, idState, ref }: askProps) {
         </div>
       )}
 
-      <div className={`${!showNsfw && 'blur'} w-full h-full`}>
+      <div className={`${!showNsfw && value.nsfwedAnswer && 'blur'} w-full h-full`}>
         <div className="chat chat-start flex ml-2 desktop:ml-0 justify-between">
           <div className="w-full">
             <div className="chat-header dark:text-white">

src/app/main/user/[handle]/[answer]/answer.tsx

@@ -2,12 +2,13 @@
 
 import Answer from '@/app/_components/answer';
 import { useParams } from 'next/navigation';
-import { useRef } from 'react';
-import { AnswerDto } from '@/app/_dto/answers/Answers.dto';
+import { useEffect, useRef, useState } from 'react';
+import { AnswerWithProfileDto } from '@/app/_dto/answers/Answers.dto';
 import DialogModalTwoButton from '@/app/_components/modalTwoButton';
 import { onApiError } from '@/utils/api-error/onApiError';
 
-export default function SingleAnswer({ answerBody }: { answerBody: AnswerDto }) {
+export default function SingleAnswer({ answerBody }: { answerBody: AnswerWithProfileDto }) {
+  const [answerBodyState, setAnswerBodyState] = useState<AnswerWithProfileDto | undefined>();
   const singleQuestionDeleteModalRef = useRef<HTMLDialogElement>(null);
   const { userHandle } = useParams() as { userHandle: string };
 
@@ -22,9 +23,13 @@ export default function SingleAnswer({ answerBody }: { answerBody: AnswerDto })
     }
   };
 
+  useEffect(() => {
+    setAnswerBodyState(answerBody);
+  }, [answerBody]);
+
   return (
     <div className="flex w-[90%] window:w-[80%] desktop:w-[70%]">
-      {answerBody !== undefined ? (
+      {answerBodyState ? (
         <>
           <Answer value={answerBody} id={answerBody.id} ref={singleQuestionDeleteModalRef} />
           <DialogModalTwoButton

src/app/main/user/[handle]/[answer]/page.tsx

@@ -21,20 +21,20 @@ export async function generateMetadata({
   return {
     title: answerBody.question,
     openGraph: {
-      title: answerBody.question,
-      description: answerBody.answer,
+      title: `Q. ${answerBody.question}`,
+      description: `A. ${answerBody.answer}`,
       images: answerBody.answeredPerson?.avatarUrl,
     },
   };
 }
 
-async function fetchAnswer(userHandle: string, id: string) {
+async function fetchAnswer(userHandle: string, id: string): Promise<AnswerWithProfileDto | undefined> {
   const url = process.env.WEB_URL;
   const res = await fetch(`${url}/api/db/answers/${userHandle}/${id}`, {
     method: 'GET',
   });
   if (res.status === 404) {
-    return null;
+    return undefined;
   } else if (!res.ok) {
     throw new Error(`Fail to fetch answer! ${await res.text()}`);
   }