feat: titles page

modules/frontend/src/pages/TitlePage/TitlePage.tsx

@@ -0,0 +1,64 @@
+// import React, { useEffect, useState } from "react";
+// import { useParams } from "react-router-dom";
+// import { DefaultService } from "../../api/services/DefaultService";
+// import type { User } from "../../api/models/User";
+// import styles from "./UserPage.module.css";
+
+// const UserPage: React.FC = () => {
+//   const { id } = useParams<{ id: string }>();
+//   const [user, setUser] = useState<User | null>(null);
+//   const [loading, setLoading] = useState(true);
+//   const [error, setError] = useState<string | null>(null);
+
+//   useEffect(() => {
+//     if (!id) return;
+
+//     const getTitleInfo = async () => {
+//       try {
+//         const userInfo = await DefaultService.getTitle(id, "all");
+//         setUser(userInfo);
+//       } catch (err) {
+//         console.error(err);
+//         setError("Failed to fetch user info.");
+//       } finally {
+//         setLoading(false);
+//       }
+//     };
+//     getTitleInfo();
+//   }, [id]);
+
+//   if (loading) return <div className={styles.loader}>Loading...</div>;
+//   if (error) return <div className={styles.error}>{error}</div>;
+//   if (!user) return <div className={styles.error}>User not found.</div>;
+
+//   return (
+//     <div className={styles.container}>
+//       <div className={styles.card}>
+//         <div className={styles.avatar}>
+//           {user.avatar_id ? (
+//             <img
+//               src={`/images/${user.avatar_id}.png`}
+//               alt="User Avatar"
+//               className={styles.avatarImg}
+//             />
+//           ) : (
+//             <div className={styles.avatarPlaceholder}>
+//               {user.disp_name?.[0] || "U"}
+//             </div>
+//           )}
+//         </div>
+
+//         <div className={styles.info}>
+//           <h1 className={styles.name}>{user.disp_name || user.nickname}</h1>
+//           <p className={styles.nickname}>@{user.nickname}</p>
+//           {user.user_desc && <p className={styles.desc}>{user.user_desc}</p>}
+//           <p className={styles.created}>
+//             Joined: {new Date(user.creation_date).toLocaleDateString()}
+//           </p>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default UserPage;

modules/frontend/src/pages/TitlesPage/TitlesPage.module.css

@@ -0,0 +1,59 @@
+.container {
+  padding: 24px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.searchInput {
+  padding: 8px;
+  width: 240px;
+}
+
+.list {
+  display: grid;
+  gap: 12px;
+}
+
+.card {
+  display: flex;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  gap: 12px;
+}
+
+.poster {
+  width: 80px;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.posterPlaceholder {
+  width: 80px;
+  height: 120px;
+  background: #eee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cardInfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.loadMore {
+  margin-top: 16px;
+  padding: 8px 16px;
+}
+
+.loader,
+.error {
+  padding: 20px;
+  text-align: center;
+}

modules/frontend/src/pages/TitlesPage/TitlesPage.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from "react";
+import { DefaultService } from "../../api/services/DefaultService";
+import type { Title } from "../../api/models/Title";
+import styles from "./TitlesPage.module.css";
+
+const LIMIT = 20;
+
+const TitlesPage: React.FC = () => {
+  const [titles, setTitles] = useState<Title[]>([]);
+  const [search, setSearch] = useState("");
+  const [offset, setOffset] = useState(0);
+
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchTitles = async (reset: boolean) => {
+    try {
+      if (reset) {
+        setLoading(true);
+        setOffset(0);
+      } else {
+        setLoadingMore(true);
+      }
+
+      const result = await DefaultService.getTitles(
+        search || undefined,
+        undefined,  // status
+        undefined,  // rating
+        undefined,  // release_year
+        undefined,  // release_season
+        LIMIT,
+        reset ? 0 : offset,
+        "all"
+      );
+
+      if (reset) {
+        setTitles(result);
+      } else {
+        setTitles(prev => [...prev, ...result]);
+      }
+
+      if (result.length > 0) {
+        setOffset(prev => prev + LIMIT);
+      }
+
+    } catch (err) {
+      console.error(err);
+      setError("Failed to fetch titles.");
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTitles(true);
+  }, [search]);
+
+  if (loading) return <div className={styles.loader}>Loading...</div>;
+  if (error) return <div className={styles.error}>{error}</div>;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>Titles</h1>
+
+        <input
+          className={styles.searchInput}
+          placeholder="Search titles..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+      </div>
+
+      <div className={styles.list}>
+        {titles.map((t) => (
+          <div key={t.id} className={styles.card}>
+            {t.poster_id ? (
+              <img
+                src={`/images/${t.poster_id}.png`}
+                alt="Poster"
+                className={styles.poster}
+              />
+            ) : (
+              <div className={styles.posterPlaceholder}>No Image</div>
+            )}
+
+            <div className={styles.cardInfo}>
+              <h3 className={styles.titleName}>{t.name}</h3>
+              <p className={styles.meta}>
+                {t.release_year} • {t.release_season}
+              </p>
+              <p className={styles.rating}>Rating: {t.rating}</p>
+              <p className={styles.status}>{t.status}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {titles.length > 0 && (
+        <button
+          className={styles.loadMore}
+          onClick={() => fetchTitles(false)}
+          disabled={loadingMore}
+        >
+          {loadingMore ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default TitlesPage;

modules/frontend/src/pages/UserPage/UserPage.module.css

@@ -0,0 +1,103 @@
+body,
+html {
+  width: 100%;
+  margin: 0;
+  background-color: #777;
+  color: #fff;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+.header {
+  width: 100vw;
+  padding: 30px 40px;
+  background: #f7f7f7;
+  display: flex;
+  align-items: center;
+  gap: 25px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid #e5e5e5;
+  color: #000000;
+}
+
+.avatarWrapper {
+  width: 120px;
+  height: 120px;
+  min-width: 120px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ddd;
+}
+
+.avatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatarPlaceholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #ccc;
+  font-size: 42px;
+  font-weight: bold;
+  color: #555;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.userInfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.name {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.nickname {
+  font-size: 18px;
+  color: #666;
+  margin-top: 6px;
+}
+
+.container {
+  max-width: 100vw;
+  width: 100%;
+  position: absolute;
+  top: 0%;
+  /* margin: 25px auto; */
+  /* padding: 0 20px; */
+}
+
+.content {
+  margin-top: 20px;
+}
+
+.desc {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.created {
+  font-size: 16px;
+  color: #888;
+}
+
+.loader,
+.error {
+  text-align: center;
+  margin-top: 40px;
+  font-size: 18px;
+}

modules/frontend/src/pages/UserPage/UserPage.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom"; // <-- import
+import { DefaultService } from "../../api/services/DefaultService";
+import type { User } from "../../api/models/User";
+import styles from "./UserPage.module.css";
+
+const UserPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>(); // <-- get user id from URL
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+
+    const getUserInfo = async () => {
+      try {
+        const userInfo = await DefaultService.getUsers(id, "all"); // <-- use dynamic id
+        setUser(userInfo);
+      } catch (err) {
+        console.error(err);
+        setError("Failed to fetch user info.");
+      } finally {
+        setLoading(false);
+      }
+    };
+    getUserInfo();
+  }, [id]);
+
+  if (loading) return <div className={styles.loader}>Loading...</div>;
+  if (error) return <div className={styles.error}>{error}</div>;
+  if (!user) return <div className={styles.error}>User not found.</div>;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.avatarWrapper}>
+          {user.avatar_id ? (
+            <img
+              src={`/images/${user.avatar_id}.png`}
+              alt="User Avatar"
+              className={styles.avatarImg}
+            />
+          ) : (
+            <div className={styles.avatarPlaceholder}>
+              {user.disp_name?.[0] || "U"}
+            </div>
+          )}
+        </div>
+
+        <div className={styles.userInfo}>
+          <h1 className={styles.name}>{user.disp_name || user.nickname}</h1>
+          <p className={styles.nickname}>@{user.nickname}</p>
+          {/* <p className={styles.created}>
+            Joined: {new Date(user.creation_date).toLocaleDateString()}
+          </p> */}
+        </div>
+
+        <div className={styles.content}>
+          {user.user_desc && <p className={styles.desc}>{user.user_desc}</p>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserPage;