feat: 작성한 글 조회

Author: DongEun02

app/(with-sidebar)/write/[postId]/page.tsx

@@ -0,0 +1,12 @@
+import PostDetail from '@/components/write/PostDetail';
+
+type Props = {
+  params: Promise<{ postId: string }>;
+};
+
+const Page = async ({ params }: Props) => {
+  const { postId } = await params;
+  return <PostDetail postId={postId} />;
+};
+
+export default Page;

components/write/Editor.tsx

@@ -6,13 +6,15 @@ import type { MDEditorProps } from '@uiw/react-md-editor';
 import SaveButton from '@/components/write/SaveButton';
 import { createPost } from '@/services/write/post.service';
 import { auth } from '@/lib/firebase';
+import { useRouter } from 'next/navigation';
 
 const MDEditor = dynamic<MDEditorProps>(() => import('@uiw/react-md-editor'), {
   ssr: false,
 });
 
 const Editor = () => {
   const [value, setValue] = useState<string>('');
+  const router = useRouter();
 
   const onClickCancel = () => {
     setValue('');
@@ -33,6 +35,8 @@ const Editor = () => {
       const id = await createPost(user.uid, value);
       alert('저장 완료!');
       console.log('postId:', id);
+
+      router.push(`/write/${id}`);
     } catch (e) {
       console.error(e);
       alert('저장 실패');

components/write/PostDetail.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { auth } from '@/lib/firebase';
+import { fetchMyPost } from '@/services/write/post.service';
+import type { Post } from '@/services/write/post.service'; // 같은 파일에 타입 넣었다면 거기서 export한 Post 쓰세요
+
+const Markdown = dynamic(
+  () => import('@uiw/react-md-editor').then((mod) => mod.default.Markdown),
+  { ssr: false }
+);
+
+const PostDetail = ({ postId }: { postId: string }) => {
+  const router = useRouter();
+  const [data, setData] = useState<Post | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const unsub = auth.onAuthStateChanged(async (user) => {
+      if (!user) {
+        router.replace('/landing');
+        return;
+      }
+
+      const post = await fetchMyPost(user.uid, postId);
+      setData(post);
+      setLoading(false);
+    });
+
+    return () => unsub();
+  }, [postId, router]);
+
+  if (loading) return <div className="min-h-screen p-6">로딩중...</div>;
+  if (!data) return <div className="min-h-screen p-6">글이 없습니다.</div>;
+
+  return (
+    <div className="mx-auto min-h-screen max-w-3xl p-6" data-color-mode="light">
+      <h1 className="mb-4 text-xl font-semibold">
+        {data.title || '제목 없음'}
+      </h1>
+      <Markdown source={data.content} />
+    </div>
+  );
+};
+
+export default PostDetail;

services/write/post.service.ts

@@ -1,6 +1,22 @@
-import { collection, addDoc, serverTimestamp } from 'firebase/firestore';
+import {
+  doc,
+  getDoc,
+  collection,
+  addDoc,
+  serverTimestamp,
+  Timestamp,
+} from 'firebase/firestore';
 import { db } from '@/lib/firebase';
 
+export type PostData = {
+  title: string;
+  content: string;
+  createdAt: Timestamp | null;
+  updatedAt: Timestamp | null;
+};
+
+export type Post = PostData & { id: string };
+
 export async function createPost(uid: string, content: string, title?: string) {
   const postsCol = collection(db, 'users', uid, 'posts');
   const docRef = await addDoc(postsCol, {
@@ -11,3 +27,42 @@ export async function createPost(uid: string, content: string, title?: string) {
   });
   return docRef.id;
 }
+
+/** 런타임 최소 검증(안전하게 any 제거) */
+function isRecord(v: unknown): v is Record<string, unknown> {
+  return typeof v === 'object' && v !== null;
+}
+
+function parsePostData(raw: unknown): PostData | null {
+  if (!isRecord(raw)) return null;
+
+  const content = raw.content;
+  if (typeof content !== 'string') return null; // content는 필수
+
+  const title = typeof raw.title === 'string' ? raw.title : '';
+
+  const createdAt = raw.createdAt instanceof Timestamp ? raw.createdAt : null;
+
+  const updatedAt = raw.updatedAt instanceof Timestamp ? raw.updatedAt : null;
+
+  return { title, content, createdAt, updatedAt };
+}
+
+export async function fetchMyPost(
+  uid: string | null | undefined,
+  postId: string | null | undefined
+): Promise<Post | null> {
+  // ✅ 여기서 uid/postId 실물 확인
+  console.log('[fetchMyPost] path =', { uid, postId });
+
+  if (!uid || !postId) return null;
+
+  const ref = doc(db, 'users', uid, 'posts', postId);
+  const snap = await getDoc(ref);
+  if (!snap.exists()) return null;
+
+  const parsed = parsePostData(snap.data());
+  if (!parsed) return null;
+
+  return { id: snap.id, ...parsed };
+}