home画面のタグ表示

Author: bearl27

client/src/app/user/home/page.tsx

@@ -3,7 +3,7 @@
 import CardTag from "@/components/tags/card-tag";
 import { getTags } from "@/components/tags/hooks/get-tags";
 import { Input } from "@/components/ui/input";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Community } from "@/features/account/types/community";
 import { CommunityCard } from "@/features/home/user/components/CommunityCard";
 import { GetCommunities } from "@/features/home/user/hooks/gets-communities";
@@ -20,6 +20,11 @@ export default function Home() {
   const [tags, setTags] = useState<TagType[]>([]);
   const [selectedTags, setSelectedTags] = useState<TagType[]>([]);
   const isFirstRender = useRef(true);
+  const [searchQueryTag, setSearchQueryTag] = useState("");
+
+  const filteredTags = tags?.filter(tag =>
+    tag.name.toLowerCase().includes(searchQueryTag.toLowerCase())
+  );
 
   useEffect(() => {
     if (isFirstRender.current) {
@@ -82,13 +87,23 @@ export default function Home() {
 
         <div className="bg-[#FFFFFF1A] p-4 rounded-md mb-6">
           <h1 className="text-xl font-bold text-[#FFFFFFD0] mb-2">タグで絞り込む</h1>
-          <div className="flex flex-wrap gap-2">
-            {tags?.map(tag => (
-              <CardTag key={tag.name} variant={tag.color} onClick={() => handleTagClick(tag)}>
-                {tag.name}
-              </CardTag>
-            ))}
-          </div>
+          <Input
+            type="text"
+            placeholder="タグ名で検索..."
+            value={searchQueryTag}
+            onChange={(e) => setSearchQueryTag(e.target.value)}
+            className="mb-4"
+          />
+          <ScrollArea className="w-full whitespace-nowrap rounded-md gap-1">
+            <div className="flex w-max space-x-4 p-4">
+              {filteredTags?.map(tag => (
+                <CardTag key={tag.name} variant={tag.color} onClick={() => handleTagClick(tag)}>
+                  {tag.name}
+                </CardTag>
+              ))}
+            </div>
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
         </div>
 
         <ScrollArea className={styles.communityContainer}>

client/src/features/home/community/components/SearchTags.tsx

@@ -1,5 +1,8 @@
 import CardTag from "@/components/tags/card-tag";
 import { TagType } from "@/features/tags/types/tag";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Input } from "@/components/ui/input";
+import { useState } from "react";
 import style from "../styles/search-tags.module.scss";
 
 type SearchTagsProps = {
@@ -8,16 +11,32 @@ type SearchTagsProps = {
 };
 
 export function SearchTags({ tags, handleTagClick }: SearchTagsProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredTags = tags?.filter(tag =>
+    tag.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
   return (
     <div className={style.container}>
       <h1 className={style.title}>タグで絞り込む</h1>
-      <div className={style.tags}>
-        {tags?.map(tag => (
-          <CardTag key={tag.name} variant={tag.color} onClick={() => handleTagClick(tag)}>
-            {tag.name}
-          </CardTag>
-        ))}
-      </div>
+      <Input
+        type="text"
+        placeholder="タグ名で検索..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        className="mb-4"
+      />
+      <ScrollArea className="w-full whitespace-nowrap rounded-md border gap-1">
+        <div className="flex w-max space-x-4 p-4">
+          {filteredTags?.map(tag => (
+            <CardTag key={tag.name} variant={tag.color} onClick={() => handleTagClick(tag)}>
+              {tag.name}
+            </CardTag>
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
     </div>
   );
-}
+}

client/src/features/home/community/styles/search-tags.module.scss

@@ -1,22 +1,25 @@
 @use "@/styles/theme";
 
-
 .container {
-    background-color: theme.$theme-community-sub;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    margin: 1rem 0;
-  }
+  background-color: theme.$theme-community-sub;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: black;
+  margin-bottom: 0.5rem;
+}
 
-  .title {
-    font-size: 1.25rem;
-    font-weight: bold;
-    color: black;
-    margin-bottom: 0.5rem;
-  }
+.tags {
+  overflow-x: auto;
+  white-space: nowrap;
+}
 
-  .tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
+.tagsContainer {
+  display: inline-flex;
+  gap: 0.5rem;
+}