Merge pull request #32 from DeveloperBlog-Devflow/feature/docs-page

feat : 개발 일지 페이지 구현

Author: DongEun02

app/(with-sidebar)/layout.tsx

@@ -1,5 +1,8 @@
 import Sidebar from '@/components/common/Sidebar';
 
+import '@uiw/react-md-editor/markdown-editor.css';
+import '@uiw/react-markdown-preview/markdown.css';
+
 export default function SidebarLayout({
   children,
 }: {

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

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

app/(with-sidebar)/write/page.tsx

@@ -0,0 +1,11 @@
+import Editor from '@/components/write/Editor';
+
+const Page = () => {
+  return (
+    <div className="bg-background flex min-h-screen flex-col gap-8 p-4">
+      <Editor />
+    </div>
+  );
+};
+
+export default Page;

components/common/Sidebar.tsx

@@ -16,7 +16,7 @@ const navItems = [
   { label: '홈', href: '/', icon: Home },
   { label: '개발 일지', href: '/logs', icon: ClipboardList },
   { label: '새 계획 만들기', href: '/plans/new', icon: CalendarPlus },
-  { label: '새 페이지 만들기', href: '/pages/new', icon: CopyPlus },
+  { label: '새 페이지 만들기', href: '/write', icon: CopyPlus },
 ];
 
 const Sidebar = () => {

components/write/Editor.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useState } from 'react';
+import type { MDEditorProps } from '@uiw/react-md-editor';
+import SaveButton from '@/components/write/SaveButton';
+import { createTil } from '@/services/write/til.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 [title, setTitle] = useState<string>('');
+  const router = useRouter();
+
+  const onClickCancel = () => {
+    setValue('');
+  };
+
+  const onClickSave = async () => {
+    const user = auth.currentUser;
+    if (!user) {
+      alert('로그인이 필요합니다');
+      return;
+    }
+    if (!title.trim()) {
+      alert('제목을 입력하세요');
+      return;
+    }
+    if (!value.trim()) {
+      alert('내용을 입력하세요');
+      return;
+    }
+
+    try {
+      const id = await createTil(user.uid, value, title);
+      alert('저장 완료!');
+      console.log('postId:', id);
+
+      router.push(`/write/${id}`);
+    } catch (e) {
+      console.error(e);
+      alert('저장 실패');
+    }
+  };
+
+  const onChangeTitle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  return (
+    <div
+      data-color-mode="light"
+      className="mx-auto mt-8 flex w-full max-w-5xl flex-col gap-8 rounded-2xl px-4 [&_.w-md-editor]:border-0! [&_.w-md-editor]:bg-transparent! [&_.w-md-editor]:shadow-none [&_.w-md-editor-text]:bg-transparent! [&_.w-md-editor-toolbar]:bg-transparent! [&_.wmde-markdown]:bg-transparent!"
+    >
+      <input
+        type="text"
+        placeholder="제목을 입력하세요"
+        onChange={onChangeTitle}
+        className="py-3 text-3xl focus:ring-0 focus:outline-none"
+      />
+      <MDEditor
+        value={value}
+        onChange={(v) => setValue(v ?? '')}
+        height={700}
+        preview="live"
+        textareaProps={{
+          placeholder: '내용을 입력하세요',
+          maxLength: 2000,
+        }}
+        commandsFilter={(cmd) => {
+          if (cmd?.name === 'fullscreen') return false;
+          return cmd;
+        }}
+      />
+      <SaveButton onClickCancel={onClickCancel} onClickSave={onClickSave} />
+    </div>
+  );
+};
+
+export default Editor;

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 { fetchMyTil } from '@/services/write/til.service';
+import type { Til } from '@/services/write/til.service'; // 같은 파일에 타입 넣었다면 거기서 export한 Post 쓰세요
+
+const Markdown = dynamic(
+  () => import('@uiw/react-md-editor').then((mod) => mod.default.Markdown),
+  { ssr: false }
+);
+
+const PostDetail = ({ tilId }: { tilId: string }) => {
+  const router = useRouter();
+  const [data, setData] = useState<Til | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const unsub = auth.onAuthStateChanged(async (user) => {
+      if (!user) {
+        router.replace('/landing');
+        return;
+      }
+
+      const post = await fetchMyTil(user.uid, tilId);
+      setData(post);
+      setLoading(false);
+    });
+
+    return () => unsub();
+  }, [tilId, 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;

components/write/SaveButton.tsx

@@ -0,0 +1,28 @@
+type ButtonsProps = {
+  onClickCancel: () => void;
+  onClickSave: () => void;
+};
+
+const SaveButton = ({ onClickCancel, onClickSave }: ButtonsProps) => {
+  return (
+    <div className="mx-auto flex h-10 w-3xs gap-6">
+      <button
+        onClick={onClickSave}
+        type="button"
+        className="bg-primary flex-1 rounded-xl py-4 text-center text-base leading-0 font-semibold text-white shadow-sm transition hover:bg-violet-500 active:bg-violet-700 disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        저장
+      </button>
+
+      <button
+        onClick={onClickCancel}
+        type="button"
+        className="flex-1 rounded-xl border border-slate-300 bg-none py-4 text-center text-base leading-0 font-semibold text-slate-700 transition hover:bg-slate-200 active:bg-slate-300 disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        취소하기
+      </button>
+    </div>
+  );
+};
+
+export default SaveButton;