feat: add shortcut tags in UI

web/src/components/CreateShortcutDialog.tsx

@@ -23,8 +23,10 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
       link: "",
       description: "",
       visibility: "PRIVATE",
+      tags: [],
     },
   });
+  const [tag, setTag] = useState<string>("");
   const requestState = useLoading(false);
 
   useEffect(() => {
@@ -40,6 +42,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
             visibility: shortcutTemp.visibility,
           }),
         });
+        setTag(shortcutTemp.tags.join(" "));
       }
     }
   }, [shortcutId]);
@@ -67,6 +70,11 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
     handleInputChange(e, "description");
   };
 
+  const handleTagsInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setTag(text);
+  };
+
   const handleVisibilityInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     handleInputChange(e, "visibility");
   };
@@ -85,9 +93,13 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
           link: state.shortcutCreate.link,
           description: state.shortcutCreate.description,
           visibility: state.shortcutCreate.visibility,
+          tags: tag.split(" "),
         });
       } else {
-        await shortcutService.createShortcut(state.shortcutCreate);
+        await shortcutService.createShortcut({
+          ...state.shortcutCreate,
+          tags: tag.split(" "),
+        });
       }
 
       if (onConfirm) {
@@ -145,6 +157,10 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
               onChange={handleDescriptionInputChange}
             />
           </div>
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">Tags</span>
+            <Input className="w-full" type="text" placeholder="Tags" value={tag} onChange={handleTagsInputChange} />
+          </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Visibility <span className="text-red-600">*</span>

web/src/components/ShortcutListView.tsx

@@ -58,10 +58,21 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
       <div className="w-full flex flex-col justify-start items-start">
         {shortcutList.map((shortcut) => {
           return (
-            <div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-6 py-4 mb-3 rounded-lg">
-              <div className="flex flex-row justify-start items-center mr-4">
-                <span>{shortcut.name}</span>
-                <span className="text-gray-400 text-sm ml-2">({shortcut.description})</span>
+            <div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-4 py-3 mb-2 rounded-lg">
+              <div className="flex flex-col justify-start items-start mr-4">
+                <p>
+                  <span>{shortcut.name}</span>
+                  {shortcut.description && <span className="text-gray-500 ml-1">({shortcut.description})</span>}
+                </p>
+                <div className="space-x-2">
+                  {shortcut.tags.map((tag) => {
+                    return (
+                      <span key={tag} className="text-gray-400 text-sm font-mono">
+                        #{tag}
+                      </span>
+                    );
+                  })}
+                </div>
               </div>
               <div className="flex flex-row justify-end items-center">
                 <span className="w-16 truncate mr-2 text-gray-600">{shortcut.creator.nickname}</span>