Merge branch 'dev'

Author: gs0428

apps/extension/src/constants/tag.ts

@@ -0,0 +1,3 @@
+export const TAG = {
+  GET_TAGS: "get-tags",
+};

apps/extension/src/lib/tanstack/query/tag.ts

@@ -0,0 +1,11 @@
+import { TAG } from "@/constants/tag";
+import { getTags } from "@/services/tag";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetTags = () => {
+  return useQuery({
+    queryKey: [TAG.GET_TAGS],
+    queryFn: getTags,
+    select: (data) => data.result,
+  });
+};

apps/extension/src/pages/create-content.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/lib/tanstack/mutation/content";
 import { useGetCategories } from "@/lib/tanstack/query/category";
 import { useGetContentById } from "@/lib/tanstack/query/content";
+import { useGetTags } from "@/lib/tanstack/query/tag";
 import { contentSchema, type ContentSchemaType } from "@/schemas/content";
 import { infoToast, successToast } from "@/utils/toast";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -46,6 +47,8 @@ const DEFAULT_STATE: CreateContentState = {
 
 export default function CreateContent() {
   const [isCategoryOpen, setIsCategoryOpen] = useState<boolean>(false);
+  const [isTagDropdownOpen, setIsTagDropdownOpen] = useState<boolean>(false);
+  const [newTag, setNewTag] = useState<string>("");
 
   const { state } = useLocation() as { state: CreateContentState };
   const [searchParams] = useSearchParams();
@@ -60,6 +63,10 @@ export default function CreateContent() {
     setIsCategoryOpen(false);
   });
 
+  const [tagFormRef] = useOutsideClick<HTMLFormElement>(() => {
+    setIsTagDropdownOpen(false);
+  });
+
   const {
     mutateAsync: mutateFinishDetailSaveContent,
     isPending: isPendingFinishDetailSaveContent,
@@ -72,6 +79,7 @@ export default function CreateContent() {
     useUpdateContent();
 
   const { data: userCategories } = useGetCategories();
+  const { data: allTags } = useGetTags();
 
   const isBadRequest = !id && !state;
 
@@ -118,6 +126,12 @@ export default function CreateContent() {
   const watchedCategory = watch("category");
   const watchedThumbnail = watch("thumbnail");
 
+  // 필터링된 태그 계산
+  const filteredTags = allTags?.filter(
+    (tag) =>
+      !watchedTags.includes(tag.name) && tag.name.toLowerCase().includes(newTag.toLowerCase())
+  );
+
   const isYoutubeUrl = watch("url").includes("youtube.com");
   const isPending =
     isPendingFinishDetailSaveContent ||
@@ -189,21 +203,19 @@ export default function CreateContent() {
   const onAddTag = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const newTag = e.currentTarget.querySelector("input")?.value;
-
-    const trimmedTag = newTag?.trim();
-
-    if (!trimmedTag) {
-      return infoToast("태그를 입력해주세요.");
-    }
+    const trimmedTag = newTag.trim();
 
     if (watchedTags.includes(trimmedTag)) {
       return infoToast("이미 존재하는 태그입니다.");
     }
 
-    const newTags = [...watchedTags, trimmedTag];
+    onUpdateTag(trimmedTag);
+  };
+
+  const onUpdateTag = (tag: string) => {
+    const newTags = [...watchedTags, tag];
     setValue("tags", newTags);
-    e.currentTarget.reset();
+    setNewTag("");
   };
 
   const onRemoveTag = (index: number) => {
@@ -323,54 +335,43 @@ export default function CreateContent() {
             )}
           </div>
 
-          {/* 요약 */}
-          <div>
-            <h2 className="text-muted-foreground mb-2 text-sm font-medium">요약</h2>
-            <textarea
-              {...register("summary")}
-              placeholder="요약을 입력하세요"
-              className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring min-h-[100px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-            />
-            {errors.summary && (
-              <p className="text-destructive mt-1 text-xs">{errors.summary.message}</p>
-            )}
-          </div>
-
-          {/* 메모 */}
-          <div>
-            <h2 className="text-muted-foreground mb-2 text-sm font-medium">메모</h2>
-            <textarea
-              {...register("memo")}
-              placeholder="메모를 입력하세요"
-              className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-            />
-            {errors.memo && <p className="text-destructive mt-1 text-xs">{errors.memo.message}</p>}
-          </div>
-
           {/* 태그 */}
           <div>
             <h2 className="text-muted-foreground mb-2 text-sm font-medium">태그</h2>
             <div className="space-y-3">
               {/* 기존 태그들 */}
-              <div className="flex flex-wrap gap-2">
-                {watchedTags.map((tag, index) => (
-                  <button
-                    key={index}
-                    type="button"
-                    className="bg-primary/10 text-primary hover:bg-primary/20 flex items-center space-x-1 rounded-full px-3 py-1 text-sm transition-all duration-200 hover:scale-105"
-                    onClick={() => onRemoveTag(index)}
-                    aria-label={`${tag} 태그 제거`}
-                  >
-                    <span>{tag}</span>
-                    <X className="h-3 w-3" />
-                  </button>
-                ))}
-              </div>
+              {watchedTags.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                  {watchedTags.map((tag, index) => (
+                    <button
+                      key={index}
+                      type="button"
+                      className="bg-primary/10 text-primary hover:bg-primary/20 flex items-center space-x-1 rounded-full px-3 py-1 text-sm transition-all duration-200 hover:scale-105"
+                      onClick={() => onRemoveTag(index)}
+                      aria-label={`${tag} 태그 제거`}
+                    >
+                      <span>{tag}</span>
+                      <X className="h-3 w-3" />
+                    </button>
+                  ))}
+                </div>
+              )}
 
               {/* 새 태그 추가 */}
               <div className="space-y-2">
-                <form className="flex space-x-2" onSubmit={onAddTag}>
-                  <Input ref={tagInputRef} placeholder="새 태그 입력" className="flex-1" />
+                <form
+                  ref={tagFormRef}
+                  className="relative flex items-center gap-2"
+                  onSubmit={onAddTag}
+                >
+                  <Input
+                    ref={tagInputRef}
+                    value={newTag}
+                    onChange={(e) => setNewTag(e.target.value)}
+                    placeholder="새 태그 입력"
+                    className="flex-1"
+                    onFocus={() => setIsTagDropdownOpen(true)}
+                  />
                   <Button
                     type="submit"
                     size="sm"
@@ -380,6 +381,26 @@ export default function CreateContent() {
                   >
                     <Plus />
                   </Button>
+                  {isTagDropdownOpen && (
+                    <div className="absolute -bottom-2 max-h-40 w-full translate-y-full overflow-auto rounded-md border bg-white shadow-lg">
+                      {!filteredTags || filteredTags.length === 0 ? (
+                        <p className="text-muted-foreground block w-full px-3 py-2 text-left">
+                          태그가 없어요.
+                        </p>
+                      ) : (
+                        filteredTags.map((tag) => (
+                          <button
+                            key={`${tag.id}-${tag.name}`}
+                            type="button"
+                            className="hover:bg-accent text-foreground line-clamp-1 block w-full px-3 py-2 text-left"
+                            onClick={() => onUpdateTag(tag.name)}
+                          >
+                            <span>{tag.name}</span>
+                          </button>
+                        ))
+                      )}
+                    </div>
+                  )}
                 </form>
                 <p className="text-muted-foreground text-xs">
                   Enter 혹은 + 버튼을 통해 태그를 추가할 수 있어요.
@@ -388,6 +409,30 @@ export default function CreateContent() {
             </div>
             {errors.tags && <p className="text-destructive mt-1 text-xs">{errors.tags.message}</p>}
           </div>
+
+          {/* 요약 */}
+          <div>
+            <h2 className="text-muted-foreground mb-2 text-sm font-medium">요약</h2>
+            <textarea
+              {...register("summary")}
+              placeholder="요약을 입력하세요"
+              className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring min-h-[100px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            />
+            {errors.summary && (
+              <p className="text-destructive mt-1 text-xs">{errors.summary.message}</p>
+            )}
+          </div>
+
+          {/* 메모 */}
+          <div>
+            <h2 className="text-muted-foreground mb-2 text-sm font-medium">메모</h2>
+            <textarea
+              {...register("memo")}
+              placeholder="메모를 입력하세요"
+              className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            />
+            {errors.memo && <p className="text-destructive mt-1 text-xs">{errors.memo.message}</p>}
+          </div>
         </div>
       </div>
     </>

apps/extension/src/services/tag.ts

@@ -0,0 +1,7 @@
+import { BaseResponseDTO, TagDTO } from "@repo/types";
+
+import { api } from ".";
+
+export const getTags = async (): Promise<BaseResponseDTO<TagDTO[]>> => {
+  return api.get("tags").json();
+};