Merge pull request #43 from DeveloperBlog-Devflow/feature/til-management-page

feat: TIL 관리 페이지 구현

Author: DongEun02

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

@@ -7,6 +7,7 @@ import ProfileSection from '@/components/home/ProfileSection';
 import ButtonSection from '@/components/home/ButtonSection';
 
 import { useEffect, useState } from 'react';
+import { useAuthUser } from '@/lib/auth/useAuthUser';
 
 import {
   Todo,
@@ -16,18 +17,14 @@ import {
 } from '@/lib/home/todoService';
 import { getProfile, Profile } from '@/lib/home/profileService';
 
-import { User, onAuthStateChanged } from 'firebase/auth';
-import { auth } from '@/lib/firebase';
-
 const Page = () => {
+  // 현재 사용자 정보
+  const { user: currentUser, authLoading } = useAuthUser();
+
   const [profile, setProfile] = useState<Profile | null>(null);
   const [todos, setTodos] = useState<Todo[]>([]);
-
   const [error, setError] = useState<string | null>(null);
 
-  // 현재 사용자 정보
-  const [currentUser, setCurrentUser] = useState<User | null>(null);
-
   // 1. 할 일 목록 불러오기
   const loadTodos = async (uid: string) => {
     try {
@@ -41,25 +38,9 @@ const Page = () => {
     }
   };
 
-  // 2. 할 일 추가
-  const handleAddTodo = async (text: string) => {
-    if (!currentUser) return;
-
-    try {
-      setError(null);
-
-      await AddTodo(currentUser.uid, text);
-      await loadTodos(currentUser.uid);
-    } catch (err) {
-      console.error(err);
-      setError('할 일을 추가하는 데 실패하였습니다');
-    }
-  };
-
   // 3. 할 일 상태 토글
   const handleToggleTodo = async (id: string, currentStatus: boolean) => {
     if (!currentUser) return;
-
     try {
       setError(null);
 
@@ -71,35 +52,30 @@ const Page = () => {
     }
   };
 
-  // 사용자 로그인 상태 감지
-  useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, (user) => {
-      setCurrentUser(user);
-    });
-
-    return () => unsubscribe();
-  }, []);
-
   // 사용자가 존재하면 데이터 불러옴
   useEffect(() => {
-    if (currentUser) {
-      const loadData = async () => {
-        try {
-          const userProfile = await getProfile(currentUser.uid);
-          setProfile(userProfile);
-          await loadTodos(currentUser.uid);
-        } catch (err) {
-          console.error(err);
-          setError('프로필 정보를 불러오는 데 실패하였습니다');
-        }
-      };
-      loadData();
-    } else {
-      setTodos([]);
-      setProfile(null);
-    }
+    if (!currentUser) return;
+    (async () => {
+      try {
+        const userProfile = await getProfile(currentUser.uid);
+        setProfile(userProfile);
+        await loadTodos(currentUser.uid);
+      } catch (err) {
+        console.error(err);
+        setError('프로필 정보를 불러오는 데 실패하였습니다');
+      }
+    })();
   }, [currentUser]);
 
+  // 유저 정보 로딩 처리
+  if (authLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p>로그인 확인 중...</p>
+      </div>
+    );
+  }
+
   // 유저 정보가 없을 시
   if (!currentUser) {
     return (
@@ -133,7 +109,7 @@ const Page = () => {
       />
 
       {/* 3. ButtonSection */}
-      <ButtonSection onAddTodo={handleAddTodo} />
+      <ButtonSection />
     </div>
   );
 };

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

@@ -0,0 +1,16 @@
+import Editor from '@/components/write/Editor';
+
+type Props = {
+  params: Promise<{ tilId: string }>;
+};
+
+const Page = async ({ params }: Props) => {
+  const { tilId } = await params;
+  return (
+    <div className="bg-background flex min-h-screen flex-col gap-8 p-4">
+      <Editor tilId={tilId} />
+    </div>
+  );
+};
+
+export default Page;

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

@@ -93,7 +93,7 @@ const Page = () => {
       <PageHeader
         title="플랜"
         highlight="관리하기"
-        description="학습 주제를 만들고 세부 과제를 관리하세요"
+        description="학습 주제를 만들고 세부 과제를 관리해보세요"
       />
 
       {/* 상단 통계 카드 (Grid) */}

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

@@ -0,0 +1,124 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import PageHeader from '@/components/common/PageHeader';
+import ToolBar from '@/components/tils/ToolBar';
+import TilList from '@/components/tils/TilList';
+
+import { useAuthUser } from '@/lib/auth/useAuthUser';
+import { fetchTilList } from '@/lib/tils/tilListService';
+import { deleteTil } from '@/services/write/til.service';
+
+import type { TilItem } from '@/types/til';
+
+const Page = () => {
+  const { user, authLoading } = useAuthUser();
+
+  const [items, setItems] = useState<TilItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [sort, setSort] = useState<'latest' | 'oldest'>('latest');
+  const [sortedItems, setSortedItems] = useState<TilItem[]>([]);
+
+  const [searchTerm, setSearchTerm] = useState('');
+
+  // 데이터 가져오기
+  useEffect(() => {
+    if (!user) {
+      setItems([]);
+      setLoading(false);
+      return;
+    }
+
+    const loadData = async () => {
+      try {
+        setError(null);
+        setLoading(true);
+        const list = await fetchTilList(user.uid);
+        setItems(list);
+      } catch (e) {
+        console.error(e);
+        setError('일지 목록을 불러오지 못했습니다.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, [user]);
+
+  // 정렬 처리
+  useEffect(() => {
+    const filtered = items.filter((item) =>
+      // 제목에서 검색어 포함 여부 확인
+      item.title.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    // 필터링된 결과를 정렬
+    const sorted = filtered.sort((a, b) => {
+      return sort === 'latest'
+        ? b.createdAt - a.createdAt
+        : a.createdAt - b.createdAt;
+    });
+    setSortedItems(sorted);
+  }, [items, sort, searchTerm]);
+
+  const handleDelete = async (id: string) => {
+    if (!user) return;
+
+    await deleteTil(user.uid, id);
+
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const handleSortChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSort(e.target.value as 'latest' | 'oldest');
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  };
+
+  if (authLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p>로그인 확인 중...</p>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p>로그인이 필요합니다.</p>
+      </div>
+    );
+  }
+  return (
+    <div className="bg-background flex min-h-screen flex-col gap-5 px-30 py-11">
+      <PageHeader
+        title="일지"
+        highlight="관리하기"
+        description="작성한 일지를 관리해보세요"
+      />
+
+      <ToolBar
+        items={sortedItems}
+        onChangeSort={handleSortChange}
+        searchTerm={searchTerm}
+        onSearch={handleSearch}
+      />
+
+      {error && <p className="text-sm text-red-500">{error}</p>}
+
+      {loading ? (
+        <p className="text-sm text-slate-400">불러오는 중...</p>
+      ) : (
+        <TilList items={sortedItems} onDelete={handleDelete} />
+      )}
+    </div>
+  );
+};
+
+export default Page;

components/common/Sidebar.tsx

@@ -14,7 +14,7 @@ import { auth } from '@/lib/firebase';
 
 const navItems = [
   { label: '홈', href: '/', icon: Home },
-  { label: '개발 일지', href: '/logs', icon: ClipboardList },
+  { label: '개발 일지', href: '/tils', icon: ClipboardList },
   { label: '계획 관리', href: '/plans', icon: CalendarPlus },
   { label: '새 페이지 만들기', href: '/write', icon: CopyPlus },
 ];
@@ -37,7 +37,7 @@ const Sidebar = () => {
   };
 
   return (
-    <div className="fixed flex h-screen w-48 flex-col bg-white">
+    <div className="fixed z-100 flex h-screen w-48 flex-col bg-white">
       <div className="flex items-center gap-2 px-6 py-5">
         <span className="text-primary text-lg font-bold">&lt;/&gt;</span>
         <span>DevFlow</span>

components/tils/TilCard.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { MoreVertical } from 'lucide-react';
+import type { TilItem } from '@/types/til';
+import { useRouter } from 'next/navigation';
+import { Menu } from '@headlessui/react';
+import { useAuthUser } from '@/lib/auth/useAuthUser';
+
+type Props = {
+  item: TilItem;
+  onDelete: (id: string) => Promise<void>;
+};
+
+const TilCard = ({ item, onDelete }: Props) => {
+  const router = useRouter();
+  const { user } = useAuthUser();
+
+  if (!user) return;
+
+  const onClickCard = async () => {
+    router.push(`/write/${item.id}`);
+  };
+  const onClickEdit = async () => {
+    router.push(`/edit/${item.id}`);
+  };
+  const onClickDelete = async () => {
+    if (!confirm('정말 삭제할까요?')) return;
+    await onDelete?.(item.id);
+    alert('성공적으로 삭제되었습니다.');
+  };
+  return (
+    <article className="relative rounded-3xl border border-black/10 bg-white px-10 py-8">
+      <h3
+        className="cursor-pointer text-xl font-extrabold text-black/70"
+        onClick={onClickCard}
+      >
+        {item.title}
+      </h3>
+
+      <div className="mt-6 space-y-1 text-sm font-semibold text-black/45">
+        <p className="truncate">{item.preview}</p>
+      </div>
+      {/* ⋮ 메뉴 */}
+      <Menu as="div" className="absolute top-10 right-8">
+        <Menu.Button
+          type="button"
+          className="rounded-full p-2 text-black/35 hover:bg-black/5 hover:text-black/60"
+          aria-label="더보기"
+          onClick={(e) => e.stopPropagation()} // 카드 클릭 이벤트랑 분리
+        >
+          <MoreVertical className="h-5 w-5" />
+        </Menu.Button>
+
+        <Menu.Items className="absolute right-0 mt-2 w-36 origin-top-right rounded-xl bg-white p-1 shadow-lg ring-1 ring-black/10 focus:outline-none">
+          <Menu.Item>
+            {({ active }) => (
+              <button
+                type="button"
+                className={`w-full rounded-lg px-3 py-2 text-left text-sm ${
+                  active ? 'bg-black/5' : ''
+                }`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClickEdit();
+                }}
+              >
+                수정
+              </button>
+            )}
+          </Menu.Item>
+
+          <Menu.Item>
+            {({ active }) => (
+              <button
+                type="button"
+                className={`w-full rounded-lg px-3 py-2 text-left text-sm text-red-600 ${
+                  active ? 'bg-black/5' : ''
+                }`}
+                onClick={async (e) => {
+                  e.stopPropagation();
+                  await onClickDelete();
+                }}
+              >
+                삭제
+              </button>
+            )}
+          </Menu.Item>
+        </Menu.Items>
+      </Menu>
+      {/* <button
+        type="button"
+        className="absolute top-10 right-8 rounded-full p-2 text-black/35 hover:bg-black/5 hover:text-black/60"
+        aria-label="더보기"
+      >
+        <MoreVertical className="h-5 w-5" onClick={onClickEdit} />
+      </button> */}
+    </article>
+  );
+};
+
+export default TilCard;