fix: UserTitle cards

api/schemas/UserTitle.yaml

@@ -20,4 +20,3 @@ properties:
   ctime:
     type: string
     format: date-time
-additionalProperties: true

modules/frontend/src/api/models/Image.ts

@@ -4,7 +4,10 @@
 /* eslint-disable */
 export type Image = {
     id?: number;
-    storage_type?: string;
+    /**
+     * Image storage type
+     */
+    storage_type?: 's3' | 'local';
     image_path?: string;
 };
 

modules/frontend/src/api/models/User.ts

@@ -2,15 +2,13 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { Image } from './Image';
 export type User = {
     /**
      * Unique user ID (primary key)
      */
     id?: number;
-    /**
+    image?: Image;
-     * ID of the user avatar (references images table)
-     */
-    avatar_id?: number;
     /**
      * User email
      */

modules/frontend/src/api/models/UserTitle.ts

@@ -2,4 +2,14 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-export type UserTitle = Record<string, any>;
+import type { Title } from './Title';
+import type { UserTitleStatus } from './UserTitleStatus';
+export type UserTitle = {
+    user_id: number;
+    title?: Title;
+    status: UserTitleStatus;
+    rate?: number;
+    review_id?: number;
+    ctime?: string;
+};
+

modules/frontend/src/api/services/DefaultService.ts

@@ -238,6 +238,7 @@ export class DefaultService {
             },
             errors: {
                 400: `Request params are not correct`,
+                404: `User not found`,
                 500: `Unknown server error`,
             },
         });

modules/frontend/src/components/Header/Header.tsx

@@ -12,7 +12,7 @@ export const Header: React.FC<HeaderProps> = ({ username }) => {
   const toggleMenu = () => setMenuOpen(!menuOpen);
 
   return (
-    <header className="w-full bg-white shadow-md fixed top-0 left-0 z-50">
+    <header className="w-full bg-white shadow-md sticky top-0 left-0 z-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between h-16 items-center">
 

modules/frontend/src/components/cards/UserTitleCardHorizontal.tsx

@@ -0,0 +1,22 @@
+import type { UserTitle } from "../../api";
+
+export function UserTitleCardHorizontal({ title }: { title: UserTitle }) {
+  return (
+    <div style={{
+      display: "flex",
+      gap: 12,
+      padding: 12,
+      border: "1px solid #ddd",
+      borderRadius: 8
+    }}>
+      {title.title?.poster?.image_path && (
+        <img src={title.title?.poster.image_path} width={80} />
+      )}
+      <div>
+        <h3>{title.title?.title_names["en"]}</h3>
+        <p>{title.title?.release_year} · {title.title?.release_season} · Rating: {title.title?.rating}</p>
+        <p>Status: {title.title?.title_status}</p>
+      </div>
+    </div>
+  );
+}

modules/frontend/src/components/cards/UserTitleCardSquare.tsx

@@ -0,0 +1,22 @@
+import type { UserTitle } from "../../api";
+
+export function UserTitleCardSquare({ title }: { title: UserTitle }) {
+  return (
+    <div style={{
+      width: 160,
+      border: "1px solid #ddd",
+      padding: 8,
+      borderRadius: 8,
+      textAlign: "center"
+    }}>
+      {title.title?.poster?.image_path && (
+        <img src={title.title?.poster.image_path} width={140} />
+      )}
+      <div>
+        <h4>{title.title?.title_names["en"]}</h4>
+        <h5>{title.status}</h5>
+        <small>{title.title?.release_year} • {title.title?.rating}</small>
+      </div>
+    </div>
+  );
+}

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

@@ -35,9 +35,9 @@ const UserPage: React.FC = () => {
     <div className={styles.container}>
       <div className={styles.header}>
         <div className={styles.avatarWrapper}>
-          {user.avatar_id ? (
+          {user.image?.image_path ? (
             <img
-              src={`/images/${user.avatar_id}.png`}
+              src={`/images/${user.image.image_path}.png`}
               alt="User Avatar"
               className={styles.avatarImg}
             />

modules/frontend/src/pages/UsersIdPage/UsersIdPage.tsx

@@ -6,8 +6,8 @@ import { SearchBar } from "../../components/SearchBar/SearchBar";
 import { TitlesSortBox } from "../../components/TitlesSortBox/TitlesSortBox";
 import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
 import { ListView } from "../../components/ListView/ListView";
-import { TitleCardSquare } from "../../components/cards/TitleCardSquare";
+import { UserTitleCardSquare } from "../../components/cards/UserTitleCardSquare";
-import { TitleCardHorizontal } from "../../components/cards/TitleCardHorizontal";
+import { UserTitleCardHorizontal } from "../../components/cards/UserTitleCardHorizontal";
 import type { User, UserTitle, CursorObj, TitleSort } from "../../api";
 
 const PAGE_SIZE = 10;
@@ -129,7 +129,7 @@ export default function UsersIdPage({ userId }: UsersIdPageProps) {
     setLoadingMore(false);
   };
 
-  const getAvatarUrl = (avatarId?: number) => (avatarId ? `/api/images/${avatarId}` : "/default-avatar.png");
+  // const getAvatarUrl = (avatarId?: number) => (avatarId ? `/api/images/${avatarId}` : "/default-avatar.png");
 
   return (
     <div className="w-full min-h-screen bg-gray-50 p-6 flex flex-col items-center">
@@ -139,7 +139,7 @@ export default function UsersIdPage({ userId }: UsersIdPageProps) {
       {errorUser && <div className="mt-10 text-red-600 font-medium">{errorUser}</div>}
       {user && (
         <div className="bg-white shadow-lg rounded-xl p-6 w-full max-w-sm flex flex-col items-center mb-8">
-          <img src={getAvatarUrl(user.avatar_id)} alt={user.nickname} className="w-32 h-32 rounded-full object-cover mb-4" />
+          <img src={user.image?.image_path} alt={user.nickname} className="w-32 h-32 rounded-full object-cover mb-4" />
           <h2 className="text-2xl font-bold mb-2">{user.disp_name || user.nickname}</h2>
           {user.mail && <p className="text-gray-600 mb-2">{user.mail}</p>}
           {user.user_desc && <p className="text-gray-700 text-center">{user.user_desc}</p>}
@@ -167,7 +167,7 @@ export default function UsersIdPage({ userId }: UsersIdPageProps) {
             loadingMore={loadingMore}
             onLoadMore={handleLoadMore}
             renderItem={(title, layout) =>
-              layout === "square" ? <TitleCardSquare title={title} /> : <TitleCardHorizontal title={title} />
+              layout === "square" ? <UserTitleCardSquare title={title} /> : <UserTitleCardHorizontal title={title} />
             }
           />