From d199a7cf94c7318524115f8e143d936dcb85b8bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=8A=B9=EC=84=9D?= <kss53043@naver.com>
Date: Tue, 8 Apr 2025 17:05:19 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=94=A8=20Refactor:=20=EC=97=90?=
 =?UTF-8?q?=ED=94=BC=EA=B7=B8=EB=9E=A8=20'=EB=B3=B8=EC=9D=B8'=20=EB=8C=80?=
 =?UTF-8?q?=EC=8B=A0=20=EB=8B=89=EB=84=A4=EC=9E=84=20=EB=85=B8=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/user/user.queries.ts                        | 12 ++++++++++--
 src/app/(after-login)/epigrams/[id]/page.tsx         |  2 +-
 .../epigrams/_components/detail/DetailContent.tsx    | 10 +++++++---
 .../(after-login)/mypage/_components/MyWritings.tsx  |  2 --
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/apis/user/user.queries.ts b/src/apis/user/user.queries.ts
index 192a270..2fc42df 100644
--- a/src/apis/user/user.queries.ts
+++ b/src/apis/user/user.queries.ts
@@ -1,5 +1,5 @@
-import { useInfiniteQuery } from '@tanstack/react-query';
-import { getUserCommentsById } from '@/apis/user/user.service';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { getUserById, getUserCommentsById } from '@/apis/user/user.service';
 import { PaginationQueryParams } from '@/types/common';
 
 export const useUserCommentsByIdInFiniteQuery = (
@@ -13,3 +13,11 @@ export const useUserCommentsByIdInFiniteQuery = (
     getNextPageParam: (lastPage) => lastPage.nextCursor || undefined,
   });
 };
+
+export const useUserByNicknameQuery = (params: { userId: number }) => {
+  return useQuery({
+    queryKey: ['user', params.userId],
+    queryFn: () => getUserById(params.userId),
+    enabled: !!params.userId,
+  });
+};
diff --git a/src/app/(after-login)/epigrams/[id]/page.tsx b/src/app/(after-login)/epigrams/[id]/page.tsx
index aa329a1..b529fee 100644
--- a/src/app/(after-login)/epigrams/[id]/page.tsx
+++ b/src/app/(after-login)/epigrams/[id]/page.tsx
@@ -70,7 +70,7 @@ export default function Page() {
           onEdit={handleEdit}
           onRemove={handleRemoveConfirm}
         />
-        <DetailContent content={content} author={author} />
+        <DetailContent content={content} author={author} writerId={writerId} />
         <DeatailFooter
           referenceTitle={referenceTitle}
           referenceUrl={referenceUrl}
diff --git a/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx b/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx
index 0b18235..21c5ef5 100644
--- a/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx
+++ b/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx
@@ -1,15 +1,19 @@
 import { EpigramDetail } from '@/apis/epigram/epigram.type';
+import { useUserByNicknameQuery } from '@/apis/user/user.queries';
 
-type DetailContent = Pick<EpigramDetail, 'content' | 'author'>;
+type DetailContent = Pick<EpigramDetail, 'content' | 'author' | 'writerId'>;
+
+export function DetailContent({ content, author, writerId }: DetailContent) {
+  const userNickname = useUserByNicknameQuery({ userId: writerId })?.data?.nickname;
+  const authorName = author === '본인' ? userNickname : author;
 
-export function DetailContent({ content, author }: DetailContent) {
   return (
     <>
       <h2 className='font-iropke mb-4 text-2xl leading-relaxed break-keep md:mb-6 lg:mb-8 lg:text-3xl'>
         {content}
       </h2>
       <div className='mb-8 flex justify-end lg:mb-9'>
-        <span className='text-blue-400 md:text-xl lg:text-2xl'>- {author} -</span>
+        <span className='text-blue-400 md:text-xl lg:text-2xl'>- {authorName} -</span>
       </div>
     </>
   );
diff --git a/src/app/(after-login)/mypage/_components/MyWritings.tsx b/src/app/(after-login)/mypage/_components/MyWritings.tsx
index 3f2cbf9..fb06e4c 100644
--- a/src/app/(after-login)/mypage/_components/MyWritings.tsx
+++ b/src/app/(after-login)/mypage/_components/MyWritings.tsx
@@ -35,8 +35,6 @@ export default function MyWritings() {
   const comments = commentData?.pages.flatMap((page) => page.list) ?? [];
   const CommentListCount = commentData?.pages?.[0]?.totalCount ?? 0;
 
-  console.log('comments', comments);
-  console.log('epigrams', epigrams);
   return (
     <Tabs>
       <TabList>

From 2f1e14a8714627e7279f6d5c428d56fe23291bd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=8A=B9=EC=84=9D?= <kss53043@naver.com>
Date: Tue, 8 Apr 2025 17:06:27 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=92=84=20Design:=20(=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=EB=A6=AC=EB=B7=B0)=20=EC=97=90=ED=94=BC=EA=B7=B8?=
 =?UTF-8?q?=EB=9E=A8=20=EC=A4=84=EB=B0=94=EA=BF=88=20=EC=9E=91=EC=84=B1=20?=
 =?UTF-8?q?=EA=B7=B8=EB=8C=80=EB=A1=9C=20=EB=85=B8=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(after-login)/epigrams/_components/detail/DetailContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx b/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx
index 21c5ef5..fd953f0 100644
--- a/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx
+++ b/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx
@@ -9,7 +9,7 @@ export function DetailContent({ content, author, writerId }: DetailContent) {
 
   return (
     <>
-      <h2 className='font-iropke mb-4 text-2xl leading-relaxed break-keep md:mb-6 lg:mb-8 lg:text-3xl'>
+      <h2 className='font-iropke mb-4 text-2xl leading-relaxed break-keep whitespace-pre-wrap md:mb-6 lg:mb-8 lg:text-3xl'>
         {content}
       </h2>
       <div className='mb-8 flex justify-end lg:mb-9'>

From a126656dcb7c29510fa596cf096a4ce2d7a92acc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=8A=B9=EC=84=9D?= <kss53043@naver.com>
Date: Tue, 8 Apr 2025 18:39:53 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=94=A8=20Refactor:=20=EC=97=90?=
 =?UTF-8?q?=ED=94=BC=EA=B7=B8=EB=9E=A8=20=EC=9E=91=EC=84=B1=EB=8B=A8?=
 =?UTF-8?q?=EA=B3=84=EC=97=90=EC=84=9C=20=EB=B3=B8=EC=9D=B8=EC=9D=84=20?=
 =?UTF-8?q?=EB=8B=89=EB=84=A4=EC=9E=84=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/user/user.queries.ts                 | 12 ++---------
 .../(after-login)/epigrams/[id]/edit/page.tsx |  1 +
 src/app/(after-login)/epigrams/[id]/page.tsx  |  2 +-
 .../epigrams/_components/EpigramForm.tsx      | 21 ++++++++++++++-----
 .../_components/detail/DetailContent.tsx      | 10 +++------
 5 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/apis/user/user.queries.ts b/src/apis/user/user.queries.ts
index 2fc42df..192a270 100644
--- a/src/apis/user/user.queries.ts
+++ b/src/apis/user/user.queries.ts
@@ -1,5 +1,5 @@
-import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
-import { getUserById, getUserCommentsById } from '@/apis/user/user.service';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { getUserCommentsById } from '@/apis/user/user.service';
 import { PaginationQueryParams } from '@/types/common';
 
 export const useUserCommentsByIdInFiniteQuery = (
@@ -13,11 +13,3 @@ export const useUserCommentsByIdInFiniteQuery = (
     getNextPageParam: (lastPage) => lastPage.nextCursor || undefined,
   });
 };
-
-export const useUserByNicknameQuery = (params: { userId: number }) => {
-  return useQuery({
-    queryKey: ['user', params.userId],
-    queryFn: () => getUserById(params.userId),
-    enabled: !!params.userId,
-  });
-};
diff --git a/src/app/(after-login)/epigrams/[id]/edit/page.tsx b/src/app/(after-login)/epigrams/[id]/edit/page.tsx
index 418ef6a..70438c8 100644
--- a/src/app/(after-login)/epigrams/[id]/edit/page.tsx
+++ b/src/app/(after-login)/epigrams/[id]/edit/page.tsx
@@ -62,6 +62,7 @@ export default function EditEpigramPage({ params }: EditEpigramPageProps) {
         }}
         isSubmitting={isPending}
         onSubmit={handleUpdate}
+        myNickname={session?.user?.nickname || ''}
       />
     </Inner>
   );
diff --git a/src/app/(after-login)/epigrams/[id]/page.tsx b/src/app/(after-login)/epigrams/[id]/page.tsx
index b529fee..aa329a1 100644
--- a/src/app/(after-login)/epigrams/[id]/page.tsx
+++ b/src/app/(after-login)/epigrams/[id]/page.tsx
@@ -70,7 +70,7 @@ export default function Page() {
           onEdit={handleEdit}
           onRemove={handleRemoveConfirm}
         />
-        <DetailContent content={content} author={author} writerId={writerId} />
+        <DetailContent content={content} author={author} />
         <DeatailFooter
           referenceTitle={referenceTitle}
           referenceUrl={referenceUrl}
diff --git a/src/app/(after-login)/epigrams/_components/EpigramForm.tsx b/src/app/(after-login)/epigrams/_components/EpigramForm.tsx
index 4b4b889..b203924 100644
--- a/src/app/(after-login)/epigrams/_components/EpigramForm.tsx
+++ b/src/app/(after-login)/epigrams/_components/EpigramForm.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import {
@@ -23,6 +24,7 @@ interface EpigramFormProps {
   initValues?: Partial<CreateEpigramFormType>;
   onSubmit: (data: CreateEpigramFormType) => void;
   isSubmitting?: boolean;
+  myNickname?: string;
 }
 
 const singleTagSchema = z
@@ -39,6 +41,9 @@ export default function EpigramForm({
   onSubmit,
   isSubmitting = false,
 }: EpigramFormProps) {
+  const { data: session } = useSession();
+  const myNickname = session?.user?.nickname || '';
+
   const {
     reset,
     register,
@@ -51,14 +56,16 @@ export default function EpigramForm({
     resolver: zodResolver(createEpigramFormSchema),
     defaultValues: {
       content: initValues?.content || '',
-      selectedAuthor: (initValues?.author && ['본인', '알 수 없음'].includes(initValues.author)
-        ? initValues.author
-        : '직접 입력') as '직접 입력' | '본인' | '알 수 없음',
+      selectedAuthor:
+        initValues?.author === myNickname
+          ? '본인'
+          : initValues?.author && ['본인', '알 수 없음'].includes(initValues.author)
+            ? (initValues.author as '본인' | '알 수 없음')
+            : '직접 입력',
       author:
         initValues?.author && !['본인', '알 수 없음'].includes(initValues.author)
           ? initValues.author
           : null,
-
       referenceUrl: initValues?.referenceUrl ?? null,
       referenceTitle: initValues?.referenceTitle ?? null,
       tags: initValues?.tags || [],
@@ -77,7 +84,11 @@ export default function EpigramForm({
 
   const handleFormSubmit = (data: CreateEpigramFormType) => {
     const finalAuthor =
-      data.selectedAuthor === '직접 입력' ? data.author?.trim() || '' : data.selectedAuthor;
+      data.selectedAuthor === '본인'
+        ? myNickname
+        : data.selectedAuthor === '직접 입력'
+          ? data.author?.trim() || ''
+          : data.selectedAuthor;
 
     const payload: CreateEpigramFormType = {
       ...data,
diff --git a/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx b/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx
index fd953f0..ad3a115 100644
--- a/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx
+++ b/src/app/(after-login)/epigrams/_components/detail/DetailContent.tsx
@@ -1,19 +1,15 @@
 import { EpigramDetail } from '@/apis/epigram/epigram.type';
-import { useUserByNicknameQuery } from '@/apis/user/user.queries';
 
-type DetailContent = Pick<EpigramDetail, 'content' | 'author' | 'writerId'>;
-
-export function DetailContent({ content, author, writerId }: DetailContent) {
-  const userNickname = useUserByNicknameQuery({ userId: writerId })?.data?.nickname;
-  const authorName = author === '본인' ? userNickname : author;
+type DetailContent = Pick<EpigramDetail, 'content' | 'author'>;
 
+export function DetailContent({ content, author }: DetailContent) {
   return (
     <>
       <h2 className='font-iropke mb-4 text-2xl leading-relaxed break-keep whitespace-pre-wrap md:mb-6 lg:mb-8 lg:text-3xl'>
         {content}
       </h2>
       <div className='mb-8 flex justify-end lg:mb-9'>
-        <span className='text-blue-400 md:text-xl lg:text-2xl'>- {authorName} -</span>
+        <span className='text-blue-400 md:text-xl lg:text-2xl'>- {author} -</span>
       </div>
     </>
   );