Mainページの作成

next.config.mjs

@@ -1,4 +1,15 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'storage.googleapis.com',
+        port: '',
+        pathname: '/dev-open-hacku-bucket/**'
+      }
+    ]
+  }
+};
 
 export default nextConfig;

src/app/globals.css

@@ -2,32 +2,66 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+/* scrollbarを隠すやつ */
+@layer utilities {
+  .hidden-scrollbar {
+    -ms-overflow-style: none; /* IE, Edge 対応 */
+    scrollbar-width: none; /* Firefox 対応 */
+  }
+  .hidden-scrollbar::-webkit-scrollbar {
+    /* Chrome, Safari 対応 */
+    display: none;
+  }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+.material-icons.text-xs {
+  font-size: 12px;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+.material-icons.text-sm {
+  font-size: 14px;
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
+.material-icons.text-base {
+  font-size: 16px;
+}
+
+.material-icons.text-lg {
+  font-size: 18px;
+}
+
+.material-icons.text-xl {
+  font-size: 20px;
+}
+
+.material-icons.text-2xl {
+  font-size: 24px;
+}
+
+.material-icons.text-3xl {
+  font-size: 30px;
+}
+
+.material-icons.text-4xl {
+  font-size: 36px;
+}
+
+.material-icons.text-5xl {
+  font-size: 48px;
+}
+
+.material-icons.text-6xl {
+  font-size: 60px;
+}
+
+.material-icons.text-7xl {
+  font-size: 72px;
+}
+
+.material-icons.text-8xl {
+  font-size: 96px;
+}
+
+.material-icons.text-9xl {
+  font-size: 128px;
 }

src/app/main/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import CareerPreview from "@/components/CareerPreview";
+import Sidebar from "@/components/Sidebar";
+import UserList from "@/components/UserList";
+import UserSearchForm from "@/components/UserSearchForm";
+import { useState } from "react";
+import { UserData } from "../../../proto/typescript/pb_out/main";
+
+const Main = () => {
+  const [hoveredUser, setHoveredUser] = useState<UserData | null>(null);
+
+  return (
+    <div className="h-screen w-screen grid grid-cols-10">
+      <div className="col-span-1">
+        <Sidebar />
+      </div>
+      <div className="col-span-9">
+        <div className="grid grid-cols-5">
+          <div className="col-span-3 p-4 h-screen overflow-scroll hidden-scrollbar">
+            <UserSearchForm />
+            <UserList
+              setHoveredUser={setHoveredUser}
+              hoveredUser={hoveredUser}
+            />
+          </div>
+          <div className="col-span-2">
+            <CareerPreview user={hoveredUser} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Main;

src/components/CareerPreview.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { UserData } from "../../proto/typescript/pb_out/main";
+import UserIcon from "./UserIcon";
+
+interface Props {
+  user: UserData | null;
+}
+
+const CareerPreview = (props: Props) => {
+  const { user } = props;
+
+  return (
+    <div className="pt-4 pr-4 pb-4 h-screen">
+      <div
+        className={`h-full outline rounded flex justify-center items-center ${
+          user ? "outline-4 outline-blue-200" : "outline-2 outline-gray-200"
+        }`}
+      >
+        {
+          // NOTE: ナジャさんの作成したコンポーネント置く。
+          // 仮にHoverしたユーザーの情報を表示させている。
+        }
+        {user ? (
+          <div className="flex-row items-center">
+            <UserIcon iconImageHash={user.iconImageHash} size={128} />
+            <div className="text-center">
+              <span>{user.firstname + " " + user.lastname}</span>
+            </div>
+          </div>
+        ) : (
+          <p>any user not hovered</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CareerPreview;

src/components/Sidebar.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Sidebar = () => {
+  return (
+    <div className="h-screen outline outline-2 outline-gray-200 ">Sidebar</div>
+  );
+};
+
+export default Sidebar;

src/components/Tag.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+interface Props {
+  name: string;
+}
+
+const Tag = (props: Props) => {
+  const { name } = props;
+  return (
+    <div className="mr-2">
+      <span className="text-[12px] bg-orange-400 py-1 px-3 text-white rounded-2xl">
+        {name}
+      </span>
+    </div>
+  );
+};
+
+export default Tag;

src/components/User.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { UserData } from "../../proto/typescript/pb_out/main";
+import UserIcon from "./UserIcon";
+import Tag from "./Tag";
+
+interface Props {
+  user: UserData;
+  hovered: boolean;
+}
+
+/**
+ * User Component
+ * 一覧に表示するユーザー
+ */
+const User = (props: Props) => {
+  const { user, hovered } = props;
+  const iconSize = 96;
+
+  return (
+    <div
+      className={`p-4 my-4 outline outline-2  rounded ${
+        hovered ? "outline-4 outline-blue-200" : "outline-gray-200"
+      }`}
+    >
+      <div className="flex flex-row items-center">
+        <div className="mb-2 mr-4">
+          <UserIcon iconImageHash={user.iconImageHash} size={iconSize} />
+        </div>
+        <div>
+          <div className="text-2xl font-semibold">{user.username}</div>
+          <div className="flex flex-row items-center">
+            {user.tag.map((tag) => {
+              return <Tag name={tag.tagName} key={tag.tagId} />;
+            })}
+          </div>
+        </div>
+      </div>
+      <div className="mt-2 relative px-4 py-4 flex items-center rounded bg-gray-100 before:content-[''] before:absolute before:top-[-40%] before:left-10 before:border-[12px] before:border-transparent before:border-b-gray-100">
+        <div className="mr-2 material-symbols-outlined">chat</div>
+        <div>{user.statusMessage}</div>
+      </div>
+    </div>
+  );
+};
+
+export default User;

src/components/UserIcon.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image";
+import React from "react";
+
+interface Props {
+  iconImageHash: string;
+  size: number;
+}
+
+/**
+ * UserIcon
+ * ユーザーのアイコン
+ */
+const UserIcon = (props: Props) => {
+  const { iconImageHash, size } = props;
+
+  return (
+    <div>
+      <Image
+        src={iconImageHash}
+        alt=""
+        width={size}
+        height={size}
+        className="rounded-full object-cover"
+      />
+    </div>
+  );
+};
+
+export default UserIcon;

src/components/UserList.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import React, { Dispatch, SetStateAction } from "react";
+import User from "./User";
+import { UserData } from "../../proto/typescript/pb_out/main";
+import users from "@/constants/json/user-data.json"; // テストデータ読み込み
+
+interface Props {
+  setHoveredUser: Dispatch<SetStateAction<null | UserData>>;
+  hoveredUser: null | UserData;
+}
+
+/**
+ * UserList Component
+ * ユーザー一覧
+ */
+const UserList = (props: Props) => {
+  const { setHoveredUser, hoveredUser } = props;
+
+  return (
+    <div className="w-full py-4 items-center">
+      {users.map((user) => {
+        return (
+          <div key={user.userId} className="flex flex-row items-center">
+            <div className="w-11/12" onMouseEnter={() => setHoveredUser(user)}>
+              <User
+                user={user}
+                hovered={
+                  hoveredUser ? hoveredUser.userId === user.userId : false
+                }
+              />
+            </div>
+            {hoveredUser && hoveredUser.userId === user.userId ? (
+              <div className="w-1/12">
+                <span className="material-symbols-outlined material-icons text-8xl text-blue-200 ">
+                  arrow_right
+                </span>
+              </div>
+            ) : (
+              <div></div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default UserList;

src/components/UserSearchForm.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+// UserSeachForm
+// ユーザーを検索するところ
+const UserSearchForm = () => {
+  return (
+    <div className="pb-4 h-max">
+      <p className="text-lg font-bold my-4">ユーザーを検索する</p>
+      <input
+        type="text"
+        placeholder="キーワードで検索"
+        className="p-2 mr-3 text-sm rounded-lg bg-gray-100"
+      />
+      <button className="py-2 px-4 text-sm rounded-lg bg-blue-400 text-white ">
+        検索
+      </button>
+    </div>
+  );
+};
+
+export default UserSearchForm;