Feature/1071 スクロール追加

.github/workflows/tbls.yml

@@ -0,0 +1,65 @@
+name: tbls-gen
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - closed
+
+jobs:
+  gen:
+    name: tbls-gen
+    permissions:
+      contents: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    services:
+      mysql:
+        image: mysql:8.0
+        ports:
+          - 3306:3306
+        env:
+          MYSQL_ALLOW_EMPTY_PASSWORD: yes
+          MYSQL_DATABASE: db
+        options: >-
+          --health-cmd="mysqladmin ping"
+          --health-interval=10s
+          --health-timeout=5s
+          --health-retries=3
+    steps:
+      - name: checkout
+        uses: actions/[email protected]
+      - name: Set up Go
+        uses: actions/[email protected]
+        with:
+          go-version-file: './server/go.mod'
+          cache: false
+          check-latest: true
+        id: go
+      - name: Ensure go.mod is tidied
+        working-directory: server
+        run: go mod tidy
+      - name: install golang-migrate
+        run: go install -tags 'mysql' github.com/golang-migrate/migrate/v4/cmd/migrate@latest
+      - name: mysql wakeup
+        run: |
+          until (echo 'SELECT 1' | mysql -h 127.0.0.1 -P 3306 -uroot --silent &> /dev/null); do echo "waiting for mysql to be connectable" && sleep 2; done
+      - name: mysql migrate for tbls
+        working-directory: server
+        run: |
+          mysql -h 127.0.0.1 -P 3306 -u root -e "CREATE DATABASE IF NOT EXISTS db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin"
+          migrate -path db/migrations -database "mysql://root:@tcp(127.0.0.1:3306)/db?parseTime=true" up
+      - name: install tbls
+        uses: k1low/setup-tbls@v1
+      - name: run tbls
+        run: |
+          TBLS_DSN=mysql://root:@localhost:3306/db tbls doc --rm-dist --config server/config/.tbls.yml
+      - name: fix tbls
+        uses: dev-hato/actions-diff-pr-management@v1
+        with:
+            github-token: ${{ secrets.GITHUB_TOKEN }}
+            branch-name-prefix: fix-tbls
+

client/src/app/community/event/page.tsx

@@ -59,8 +59,7 @@ const EventPage = () => {
     };
   }, [invitedEvents]);
 
-  const handleEventClose = () => {
-  };
+  const handleEventClose = () => {};
 
   return (
     <>

client/src/app/community/signup/tags/page.tsx

@@ -2,7 +2,7 @@ import { TagCard } from "@/features/tags/components/TagCard";
 import style from "./style.module.scss";
 
 const RegisterTags = () => {
-  const mockData = {
+  const _mockData = {
     message: "sign in successful",
     tags: [
       {

client/src/app/community/user-detail/page.tsx

@@ -30,4 +30,4 @@ const ProfileDetailContent = () => {
   return <ProfileDetailCard uuid={uuid || ""} />;
 };
 
-export default ProfileDetailPage;
+export default ProfileDetailPage;

client/src/app/user/community-detail/page.tsx

@@ -30,4 +30,4 @@ const ProfileDetailContent = () => {
   return <ProfileDetailCard uuid={uuid || ""} />;
 };
 
-export default ProfileDetailPage;
+export default ProfileDetailPage;

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) {
@@ -46,7 +51,7 @@ export default function Home() {
     const matchesName = community.name.toLowerCase().includes(searchQuery.toLowerCase());
     const matchesTags =
       selectedTags.length === 0 ||
-      selectedTags.every(selectedTag => community.tags?.includes(selectedTag.name));
+      selectedTags.every(selectedTag => community.tag_name?.includes(selectedTag.name));
     return matchesName && matchesTags;
   });
 
@@ -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}>
@@ -99,7 +114,7 @@ export default function Home() {
                 uuid={community.uuid}
                 communityname={community.name}
                 icon={community.img}
-                tags={community.tags}
+                tags={community.tag_name}
                 tag_colors={community.tag_colors}
                 detail={community.self}
                 university={community.mem1}

client/src/app/user/signup/tags/page.tsx

@@ -2,7 +2,7 @@ import { TagCard } from "@/features/tags/components/TagCard";
 import style from "./style.module.scss";
 
 const RegisterTags = () => {
-  const mockData = {
+  const _mockData = {
     message: "sign in successful",
     tags: [
       {

client/src/components/tags/card-tag.tsx

@@ -20,7 +20,7 @@ function getContentLength(content: React.ReactNode): number {
 
 function getSizeClass(length: number): string {
   if (length <= 3) return styles.cardSmall;
-  if (length <= 5) return styles.cardMedium;
+  if (length <= 6) return styles.cardMedium;
   return styles.cardLarge;
 }
 

client/src/components/tags/style.module.scss

@@ -33,7 +33,6 @@
 .card_tag {
   height: 4rem;
   overflow: hidden;
-  font-size: 30px;
   font-weight: 500;
   line-height: 1rem;
   text-overflow: ellipsis;
@@ -48,16 +47,19 @@
 .cardSmall {
   min-width: 5rem;
   padding: 0 2rem;
+  font-size: 28px;
 }
 
 .cardMedium {
   min-width: 7rem;
   padding: 0 2rem;
+  font-size: 25px;
 }
 
 .cardLarge {
   min-width: 9rem;
   padding: 0 2rem;
+  font-size: 20px;
 }
 
 .red {

client/src/features/account/types/community.ts

@@ -10,7 +10,7 @@ export const CommunitySchema = z.object({
   mem1: z.string(),
   mem2: z.string().optional(),
   mem3: z.string().optional(),
-  tags: z.string().array().optional(),
+  tag_name: z.string().array().optional(),
   tag_colors: z.string().array().optional(),
 });
 

client/src/features/account/types/user.ts

@@ -10,7 +10,7 @@ export const UserSchema = z.object({
   mem1: z.string().optional(),
   mem2: z.string().optional(),
   mem3: z.string().optional(),
-  tags: z.string().array().optional(),
+  tag_name: z.string().array().optional(),
   tag_colors: z.string().array().optional(),
 });
 

client/src/features/chat/components/ChatRooms.tsx

@@ -16,7 +16,7 @@ interface ChatRoomsProps {
 
 const ChatRooms: React.FC<ChatRoomsProps> = ({ onSelectRoom }) => {
   const [rooms, setRooms] = useState<Room[]>([]);
-  const [accountType, ] = useAtom(accountTypeAtom);
+  const [accountType] = useAtom(accountTypeAtom);
   const [currentUser] = useAtom(userAtom);
   const [currentCommunity] = useAtom(communityAtom);
 

client/src/features/chat/components/ChatWindow.tsx

@@ -1,7 +1,7 @@
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import React, { useState, useEffect, useRef } from "react";
 import { Message, Room, SendMessage } from "../types/types";
-import "./ChatWindow.scss";
+import "./chat-wind.module.scss";
 import { userAtom } from "@/features/account/stores";
 import { communityAtom } from "@/features/account/stores";
 import { accountTypeAtom } from "@/features/account/stores"; // axiosをインポート
@@ -37,7 +37,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ room }) => {
       return;
     }
 
-    let account;
+    let account = "";
     if (accountType === "community") {
       account = currentCommunity?.uuid || "gg";
     } else if (accountType === "user") {
@@ -48,7 +48,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({ room }) => {
     // メッセージ履歴を取得
     fetchMessageHistory(room.id);
 
-    ws.current = new WebSocket(`ws://localhost:8080/api/ws/chat/` + room.id);
+    ws.current = new WebSocket(`${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/ws/chat/${room.id}`);
 
     ws.current.onopen = () => {
       console.log("WebSocket connection established");

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

@@ -1,5 +1,8 @@
 import CardTag from "@/components/tags/card-tag";
+import { Input } from "@/components/ui/input";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { TagType } from "@/features/tags/types/tag";
+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/components/UserList.tsx

@@ -20,7 +20,7 @@ export function UserList({ users, handleCardClick, selectedUser }: UserListProps
             uuid={user.uuid}
             username={user.name}
             icon={user.img}
-            tags={user.tags}
+            tags={user.tag_name}
             tag_colors={user.tag_colors}
             detail={user.self}
             university={user.mem1}

client/src/features/home/community/index.tsx

@@ -11,11 +11,11 @@ import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
-import { UserList } from "./components/UserList";
 import { MessageForm } from "./components/MessageForm";
 import { SearchBar } from "./components/SearchBar";
 import { SearchTags } from "./components/SearchTags";
 import { SelectedUserBadges } from "./components/SelectedUserBadges";
+import { UserList } from "./components/UserList";
 
 export function CommunityHome() {
   const [users, setUsers] = useState<User[]>([]);
@@ -46,7 +46,7 @@ export function CommunityHome() {
     const matchesName = user.name.toLowerCase().includes(searchQuery.toLowerCase());
     const matchesTags =
       selectedTags.length === 0 ||
-      selectedTags.every(selectedTag => user.tags?.includes(selectedTag.name));
+      selectedTags.every(selectedTag => user.tag_name?.includes(selectedTag.name));
     return matchesName && matchesTags;
   });
 

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;
+}