[#327] Implement CommentBoardHeader

ui/src/components/comment/client/comment-board-header.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { CommentCardHeader } from '@/components/comment/client/comment-card-header';
+import { CommentEditable } from '@/components/comment/client/comment-editable';
+import { CreateCommentButton } from '@/components/comment/client/create-comment-button';
+import SearchForm from '@/components/common/client/search-form';
+import { BoardHeader } from '@/components/common/server/board-header';
+import Text from '@/components/common/server/text';
+
+import { useAuth } from '@/context/auth/auth-context';
+import { CommentProvider } from '@/context/comment/comment-context';
+
+import { COMMENT_FILTERS } from '@/lib/constants/comment';
+
+export function CommentBoardHeader({ SEARCH_OPEN_KEY }: { SEARCH_OPEN_KEY: string }) {
+  const [open, setOpen] = useState<null | 'search' | 'write'>(null);
+
+  useEffect(() => {
+    if (SEARCH_OPEN_KEY) {
+      setOpen('search');
+    }
+  }, [SEARCH_OPEN_KEY]);
+
+  const { user, signIn } = useAuth();
+
+  const handleClickNewComment = () => {
+    if (!user) {
+      signIn();
+      return;
+    }
+
+    setOpen((prev) => (prev === 'write' ? null : 'write'));
+  };
+
+  return (
+    <BoardHeader>
+      <div className="flex w-full flex-col">
+        <div className="flex justify-between">
+          <button
+            className="h-fit w-fit rounded-full border bg-white px-2 py-1"
+            onClick={() => setOpen((prev) => (prev === 'search' ? null : 'search'))}
+          >
+            <Text nowrap>{open === 'search' ? '검색닫기' : '검색열기'}</Text>
+          </button>
+
+          <button
+            className="h-fit w-fit rounded-full border bg-white px-2 py-1"
+            onClick={handleClickNewComment}
+          >
+            <Text nowrap>{open === 'write' ? '취소' : '새코멘트'}</Text>
+          </button>
+        </div>
+
+        {open !== null && (
+          <div className="pt-4">
+            {open === 'search' && <SearchForm filters={COMMENT_FILTERS} />}
+
+            {open === 'write' && (
+              <CommentProvider>
+                <CommentCardHeader />
+                <CommentEditable actions={<CreateCommentButton />} />
+              </CommentProvider>
+            )}
+          </div>
+        )}
+      </div>
+    </BoardHeader>
+  );
+}

ui/src/lib/constants/comment.ts

@@ -1 +1,5 @@
+import type { CommentFilter } from '@/lib/definitions/comment';
+
 export const MAX_COMMENT_LENGTH = 500;
+
+export const COMMENT_FILTERS: (keyof CommentFilter)[] = ['movieName', 'nickname'];