Add user profile image support across backend and frontend

packages/backend/prisma/schema.prisma

@@ -15,6 +15,7 @@ model User {
   socialProvider      String            @map("social_provider")
   socialUid           String            @unique @map("social_uid")
   nickname            String?
+  profileIcon         String?           @map("profile_icon")
   createdAt           DateTime          @default(now()) @map("created_at")
   updatedAt           DateTime          @updatedAt @map("updated_at")
   userWorkspaceList   UserWorkspace[]

packages/backend/src/auth/auth.service.ts

@@ -17,7 +17,8 @@ export class AuthService {
 	async loginWithSocialProvider(req: LoginRequest): Promise<LoginResponse> {
 		const user = await this.usersService.findOrCreate(
 			req.user.socialProvider,
-			req.user.socialUid
+			req.user.socialUid,
+			req.user.profileIcon
 		);
 
 		const accessToken = this.jwtAccessService.sign({ sub: user.id, nickname: user.nickname });

packages/backend/src/auth/github.strategy.ts

@@ -27,6 +27,7 @@ export class GithubStrategy extends PassportStrategy(Strategy, "github") {
 			socialProvider: "github",
 			socialUid: profile.id,
 			nickname: profile.username,
+			profileIcon: profile.photos?.[0]?.value || null,
 		};
 	}
 }

packages/backend/src/auth/types/login-request.type.ts

@@ -4,6 +4,7 @@ export interface LoginUserInfo {
 	socialProvider: SocialProvider;
 	socialUid: string;
 	nickname: string;
+	profileIcon: string | null;
 }
 
 export type LoginRequest = Request & { user: LoginUserInfo };

packages/backend/src/users/types/user-domain.type.ts

@@ -5,6 +5,10 @@ export class UserDomain {
 	id: string;
 	@ApiProperty({ type: String, description: "Nickname of user", required: false })
 	nickname?: string;
+	@ApiProperty({ type: String, description: "Profile icon of user", required: false })
+	profileIcon?: string;
+	@ApiProperty({ type: String, description: "Last workspace slug of user", required: false })
+	lastWorkspaceSlug?: string;
 	@ApiProperty({ type: Date, description: "Created date of user" })
 	createdAt: Date;
 	@ApiProperty({ type: Date, description: "Updated date of user" })

packages/backend/src/users/users.service.ts

@@ -17,6 +17,7 @@ export class UsersService {
 			select: {
 				id: true,
 				nickname: true,
+				profileIcon: true,
 				createdAt: true,
 				updatedAt: true,
 			},
@@ -28,7 +29,11 @@ export class UsersService {
 		return foundUser;
 	}
 
-	async findOrCreate(socialProvider: string, socialUid: string): Promise<User | null> {
+	async findOrCreate(
+		socialProvider: string,
+		socialUid: string,
+		profileIcon: string | null
+	): Promise<User | null> {
 		const foundUser = await this.prismaService.user.findFirst({
 			where: {
 				socialProvider,
@@ -37,13 +42,22 @@ export class UsersService {
 		});
 
 		if (foundUser) {
+			// TODO: When user profile image change feature is added,
+			// this should be revisited to avoid overwriting user-uploaded images on re-login.
+			if (profileIcon && foundUser.profileIcon !== profileIcon) {
+				return await this.prismaService.user.update({
+					where: { id: foundUser.id },
+					data: { profileIcon },
+				});
+			}
 			return foundUser;
 		}
 
 		const user = await this.prismaService.user.create({
 			data: {
 				socialProvider,
 				socialUid,
+				profileIcon: profileIcon || null,
 			},
 		});
 

packages/backend/src/workspace-users/types/workspace-user.domain.ts

@@ -5,6 +5,8 @@ export class WorkspaceUserDomain {
 	id: string;
 	@ApiProperty({ type: String, description: "Nickname of the user" })
 	nickname: string;
+	@ApiProperty({ type: String, description: "Profile icon of the user", required: false })
+	profileIcon?: string;
 	@ApiProperty({ type: Date, description: "Created date of the user" })
 	createdAt: Date;
 	@ApiProperty({ type: Date, description: "Updated date of the user" })

packages/backend/src/workspace-users/workspace-users.service.ts

@@ -37,6 +37,7 @@ export class WorkspaceUsersService {
 			select: {
 				id: true,
 				nickname: true,
+				profileIcon: true,
 				updatedAt: true,
 				createdAt: true,
 			},

packages/codemirror/src/plugins/yorkie/yorkieSync.ts

@@ -10,6 +10,7 @@ export type YorkiePresenceType = {
 	color: string;
 	name: string;
 	selection: yorkie.TextPosStructRange | null;
+	profileIcon: string | null;
 	cursor: [number, number] | null;
 };
 

packages/frontend/src/components/cards/DocumentCard.tsx

@@ -26,12 +26,14 @@ function DocumentCard(props: DocumentCardProps) {
 		color: string;
 		name: string;
 		cursor: string | null;
+		profileIcon?: string | null;
 		selection: string | null;
 	}) => {
 		return {
 			color: data.color.replace(/^"|"$/g, ""),
 			name: data.name.replace(/^"|"$/g, ""),
 			cursor: data.cursor,
+			profileIcon: data.profileIcon ? data.profileIcon.replace(/^"|"$/g, "") : null,
 			selection: data.selection,
 		};
 	};
@@ -106,7 +108,12 @@ function DocumentCard(props: DocumentCardProps) {
 					}}
 				>
 					{presenceList.map((presence, index) => (
-						<Avatar key={index} sx={{ bgcolor: presence.color }} alt={presence.name}>
+						<Avatar
+							key={index}
+							src={presence.profileIcon || ""}
+							sx={{ bgcolor: presence.color }}
+							alt={presence.name}
+						>
 							{presence.name[0]}
 						</Avatar>
 					))}

packages/frontend/src/components/headers/SettingHeader.tsx

@@ -33,7 +33,9 @@ function SettingHeader() {
 					alignItems="center"
 				>
 					<IconButton onClick={handleOpenProfilePopover}>
-						<Avatar>{userStore.data?.nickname?.charAt(0)}</Avatar>
+						<Avatar src={userStore.data?.profileIcon || ""}>
+							{userStore.data?.nickname?.charAt(0)}
+						</Avatar>
 					</IconButton>
 					<IconButton onClick={handleToWorkspace}>
 						<CodePairIcon />

packages/frontend/src/components/headers/UserPresenceList.tsx

@@ -42,6 +42,7 @@ function UserPresenceList(props: UserPresenceListProps) {
 			<Avatar
 				onClick={() => handleScrollToUserLocation(presence)}
 				alt={presence.presence.name}
+				src={presence.presence.profileIcon || ""}
 				sx={{ bgcolor: presence.presence.color }}
 			>
 				{presence.presence.name[0]}
@@ -80,6 +81,7 @@ function UserPresenceList(props: UserPresenceListProps) {
 						>
 							<ListItemAvatar>
 								<Avatar
+									src={presence.presence.profileIcon || ""}
 									sx={{
 										bgcolor: presence.presence.color,
 										width: 24,

packages/frontend/src/components/headers/WorkspaceHeader.tsx

@@ -71,7 +71,9 @@ function WorkspaceHeader() {
 						width={DRAWER_WIDTH}
 					/>
 					<IconButton onClick={handleOpenProfilePopover}>
-						<Avatar>{userStore.data?.nickname?.charAt(0)}</Avatar>
+						<Avatar src={userStore.data?.profileIcon || ""}>
+							{userStore.data?.nickname?.charAt(0)}
+						</Avatar>
 					</IconButton>
 				</Stack>
 			</Toolbar>

packages/frontend/src/components/workspace/TableTab.tsx

@@ -24,12 +24,14 @@ export default function TableContent({ documents }: { documents: Document[] }) {
 		color: string;
 		name: string;
 		cursor: string | null;
+		profileIcon?: string | null;
 		selection: string | null;
 	}) => {
 		return {
 			color: data.color.replace(/^"|"$/g, ""),
 			name: data.name.replace(/^"|"$/g, ""),
 			cursor: data.cursor,
+			profileIcon: data.profileIcon ? data.profileIcon.replace(/^"|"$/g, "") : null,
 			selection: data.selection,
 		};
 	};
@@ -84,6 +86,7 @@ export default function TableContent({ documents }: { documents: Document[] }) {
 										{presenceList.map((presence, index) => (
 											<Avatar
 												key={index}
+												src={presence.profileIcon || ""}
 												sx={{ bgcolor: presence.color }}
 												alt={presence.name}
 											>

packages/frontend/src/features/editor/hooks/useYorkieDocument.ts

@@ -76,12 +76,13 @@ export const useYorkieDocument = (
 				initialPresence: {
 					name: presenceName,
 					color: Color(randomColor()).fade(0.15).toString(),
+					profileIcon: userStore.data?.profileIcon || null,
 					selection: null,
 					cursor: null,
 				},
 			});
 		},
-		[]
+		[userStore.data?.profileIcon]
 	);
 
 	const cleanUpYorkieDocument = useCallback(async () => {

packages/frontend/src/features/user/store/userSlice.ts

@@ -5,6 +5,8 @@ import { RootState } from "../../../store/store";
 export interface User {
 	id: string;
 	nickname: string | null;
+	profileIcon: string | null;
+	lastWorkspaceSlug: string;
 	updatedAt: Date;
 	createdAt: Date;
 }
@@ -38,6 +40,8 @@ export const selectUser = (state: RootState) => state.user;
  * - Storing user data, including:
  *   - `id`: Unique identifier for the user.
  *   - `nickname`: User's nickname, or `null` if not set.
+ *   - `profileIcon`: User's profile icon URL, or `null` if not set.
+ *   - `lastWorkspaceSlug`: The last accessed workspace's slug.
  *   - `updatedAt`: Timestamp of the last user update.
  *   - `createdAt`: Timestamp of when the user was created.
  */

packages/frontend/src/hooks/api/types/document.d.ts

@@ -14,6 +14,7 @@ export class Document {
 				color: string;
 				cursor: string | null;
 				name: string;
+				profileIcon?: string | null;
 				selection: string | null;
 			};
 		}

packages/frontend/src/hooks/api/types/user.d.ts

@@ -1,6 +1,8 @@
 export class User {
 	id: string;
 	nickname?: string | null;
+	profileIcon?: string | null;
+	lastWorkspaceSlug?: string | null;
 	createdAt: Date;
 	updatedAt: Date;
 }

packages/frontend/src/pages/settings/profile/Index.tsx

@@ -54,6 +54,7 @@ function ProfileIndex() {
 		<Container sx={{ height: "calc(100vh - 88px)", width: "100%" }}>
 			<Stack alignItems="center" justifyContent="center" gap={6} sx={{ height: 1 }}>
 				<Avatar
+					src={userStore.data?.profileIcon || ""}
 					sx={{
 						width: avatarSize,
 						height: avatarSize,