[Feat] 프로필 정보 UI 구현

apps/api/src/auth/auth.controller.ts

@@ -41,7 +41,7 @@ export class AuthController {
     this.cookieInsertJWT(response, userId);
   }
 
-  @Post('guest/login')
+  @Get('guest/login')
   @ApiOperation({ summary: '게스트 로그인' })
   @ApiResponse({ status: 302, description: '홈으로 리다이렉션' })
   @UseGuards(ThrottlerGuard)

apps/api/src/auth/auth.service.ts

@@ -1,6 +1,7 @@
 import { Injectable, UnauthorizedException } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
 import * as bcrypt from 'bcrypt';
+import { Provider } from '@repo/types';
 
 import { CreateSocialUserDto } from '@/user/dto/createSocialUser.dto';
 import { UserService } from '@/user/user.service';
@@ -15,7 +16,7 @@ export class AuthService {
   ) {}
 
   async signupLocal(signupRequestDto: LocalSignupRequestDto) {
-    return this.userService.createLocalUser({ provider: 'local', ...signupRequestDto });
+    return this.userService.createLocalUser({ provider: Provider.local, ...signupRequestDto });
   }
 
   async validateLocalLogin(username: string, inputPassword: string) {
@@ -32,17 +33,20 @@ export class AuthService {
 
   async createGuestUser() {
     const randomNum = Math.floor(Math.random() * 10000);
+    const response = await fetch('https://api.thecatapi.com/v1/images/search');
+    const catImageUrl = (await response.json())[0].url;
+
     const guestUser = {
       username: `guest_${randomNum}`,
       password: `guest_password_${randomNum}`,
       email: `[email protected]`,
       nickname: `guest_${randomNum}`,
       introduce: `게스트 사용자입니다. `,
-      profileImageUrl: `https://cataas.com/cat?${Date.now()}`,
+      profileImageUrl: catImageUrl,
     };
     const user = await this.userService.findUserByUsername(guestUser.username);
     if (!user) {
-      return this.userService.createLocalUser({ provider: 'guest', ...guestUser });
+      return this.userService.createLocalUser({ provider: Provider.guest, ...guestUser });
     }
     return user;
   }

apps/api/src/auth/github/github.strategy.ts

@@ -2,11 +2,12 @@ import { Injectable } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { PassportStrategy } from '@nestjs/passport';
 import { Profile, Strategy } from 'passport-github2';
+import { Provider } from '@repo/types';
 
 import { AuthService } from '../auth.service';
 
 @Injectable()
-export class GitHubStrategy extends PassportStrategy(Strategy, 'github') {
+export class GitHubStrategy extends PassportStrategy(Strategy, Provider.github) {
   constructor(
     private configService: ConfigService,
     private authService: AuthService
@@ -23,7 +24,7 @@ export class GitHubStrategy extends PassportStrategy(Strategy, 'github') {
     const { id, username, emails, photos } = profile;
 
     const user = {
-      provider: 'github',
+      provider: Provider.github,
       socialId: id,
       nickname: username,
       email: emails[0].value,

apps/api/src/auth/google/google.strategy.ts

@@ -2,11 +2,12 @@ import { Injectable } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { PassportStrategy } from '@nestjs/passport';
 import { Profile, Strategy } from 'passport-google-oauth20';
+import { Provider } from '@repo/types';
 
 import { AuthService } from '../auth.service';
 
 @Injectable()
-export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
+export class GoogleStrategy extends PassportStrategy(Strategy, Provider.google) {
   constructor(
     private configService: ConfigService,
     private authService: AuthService
@@ -23,7 +24,7 @@ export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
     const { id, displayName, emails, photos } = profile;
 
     const user = {
-      provider: 'google',
+      provider: Provider.google,
       socialId: id,
       nickname: displayName,
       email: emails[0].value,

apps/api/src/entity/ticle.entity.ts

@@ -74,4 +74,7 @@ export class Ticle {
     },
   })
   tags: Tag[];
+
+  @Column({ type: 'varchar', name: 'profile_image_url', nullable: true })
+  profileImageUrl: string;
 }

apps/api/src/entity/user.entity.ts

@@ -6,6 +6,7 @@ import {
   PrimaryGeneratedColumn,
   UpdateDateColumn,
 } from 'typeorm';
+import { Provider } from '@repo/types';
 
 import { Applicant } from './applicant.entity';
 import { Ticle } from './ticle.entity';
@@ -34,7 +35,7 @@ export class User {
   profileImageUrl: string;
 
   @Column({ type: 'varchar', default: 'local' })
-  provider: string;
+  provider: Provider;
 
   @Column({ type: 'varchar', name: 'social_id', nullable: true })
   socialId: string;

apps/api/src/ticle/dto/ticleDetailDto.ts

@@ -7,6 +7,12 @@ export class TickleDetailResponseDto {
   })
   speakerName: string;
 
+  @ApiProperty({
+    example: 1,
+    description: '발표자 유저 아이디',
+  })
+  speakerId: number;
+
   @ApiProperty({
     example: '[email protected]',
     description: '발표자 이메일',

apps/api/src/ticle/ticle.service.ts

@@ -147,6 +147,7 @@ export class TicleService {
 
     return {
       ...ticleData,
+      speakerId: ticle.speaker.id,
       tags: tags.map((tag) => tag.name),
       speakerImgUrl: speaker.profileImageUrl,
       isOwner: speaker.id === userId,
@@ -166,6 +167,7 @@ export class TicleService {
         'ticle.endTime',
         'ticle.speakerName',
         'ticle.createdAt',
+        'ticle.profileImageUrl',
       ])
       .addSelect('GROUP_CONCAT(DISTINCT tags.name)', 'tagNames')
       .addSelect('COUNT(DISTINCT applicant.id)', 'applicantCount')

apps/api/src/user/dto/createLocalUser.dto.ts

@@ -1,8 +1,10 @@
+import { Provider } from '@repo/types';
+
 export class CreateLocalUserDto {
   username: string;
   password: string;
   email: string;
-  provider: string;
+  provider: Provider;
   nickname?: string;
   introduce?: string;
   profileImageUrl?: string;

apps/api/src/user/dto/createSocialUser.dto.ts

@@ -1,6 +1,8 @@
+import { Provider } from '@repo/types';
+
 export class CreateSocialUserDto {
   email: string;
-  provider: string;
+  provider: Provider;
   socialId: string;
   nickname?: string;
   introduce?: string;

apps/api/src/user/dto/userProfileDto.ts

@@ -0,0 +1,43 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { Provider } from '@repo/types';
+
+interface TicleInfo {
+  title: string;
+  ticleId: number;
+}
+export class UserProfileDto {
+  @ApiProperty({
+    example: '1',
+    description: '유저 아이디',
+  })
+  id: number;
+
+  @ApiProperty({
+    example: 'simeunseo',
+    description: '유저 닉네임',
+  })
+  nickname: string;
+
+  @ApiProperty({
+    example: 'https://avatars.githubusercontent.com/u/55528304?v=4',
+    description: '유저 프로필 사진',
+  })
+  profileImageUrl: string;
+
+  @ApiProperty({
+    example: 'github',
+    description: '유저 소셜 로그인 프로바이더',
+  })
+  provider: Provider;
+
+  @ApiProperty({
+    example: [
+      {
+        title: '야, 너두 부캠할 수 있어',
+        ticleId: 1,
+      },
+    ],
+    description: '유저가 개설한 티클 목록',
+  })
+  ticleInfo: TicleInfo[];
+}

apps/api/src/user/dto/userProfileOfMeDto.ts

@@ -0,0 +1,28 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { Provider } from '@repo/types';
+
+export class UserProfileOfMeDto {
+  @ApiProperty({
+    example: '1',
+    description: '유저 아이디',
+  })
+  id: number;
+
+  @ApiProperty({
+    example: 'simeunseo',
+    description: '유저 닉네임',
+  })
+  nickname: string;
+
+  @ApiProperty({
+    example: 'https://avatars.githubusercontent.com/u/55528304?v=4',
+    description: '유저 프로필 사진',
+  })
+  profileImageUrl: string;
+
+  @ApiProperty({
+    example: 'github',
+    description: '유저 소셜 로그인 프로바이더',
+  })
+  provider: Provider;
+}

apps/api/src/user/user.controller.ts

@@ -1,12 +1,22 @@
-import { Controller, Get, Patch } from '@nestjs/common';
+import { Controller, Get, Param, UseGuards } from '@nestjs/common';
+
+import { JwtAuthGuard } from '@/auth/jwt/jwt-auth.guard';
+import { GetUserId } from '@/common/decorator/get-userId.decorator';
+
+import { UserService } from './user.service';
 
 @Controller('user')
 export class UserController {
-  constructor() {}
+  constructor(private readonly userService: UserService) {}
 
-  @Get('profile')
-  getUserProfile() {}
+  @Get('me')
+  @UseGuards(JwtAuthGuard)
+  async getUserProfile(@GetUserId() userId: number) {
+    return await this.userService.findUserProfileOfMeByUserId(userId);
+  }
 
-  @Patch('profile')
-  patchUserProfile() {}
+  @Get(':userId')
+  async patchUserProfile(@Param('userId') userId: number) {
+    return await this.userService.findUserProfileByUserId(userId);
+  }
 }

apps/api/src/user/user.service.ts

@@ -1,13 +1,15 @@
-import { ConflictException, Injectable } from '@nestjs/common';
+import { ConflictException, Injectable, NotFoundException } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import * as bcrypt from 'bcrypt';
 import { Repository } from 'typeorm';
-import { ErrorMessage } from '@repo/types';
+import { ErrorMessage, Provider } from '@repo/types';
 
 import { User } from '@/entity/user.entity';
 
 import { CreateLocalUserDto } from './dto/createLocalUser.dto';
 import { CreateSocialUserDto } from './dto/createSocialUser.dto';
+import { UserProfileDto } from './dto/userProfileDto';
+import { UserProfileOfMeDto } from './dto/userProfileOfMeDto';
 
 @Injectable()
 export class UserService {
@@ -24,7 +26,7 @@
       password: hashedPassword,
     });
     await this.userRepository.save(user);
     const { password, ...result } = user;
     return result;
   }
 
@@ -55,7 +57,7 @@
     return user;
   }
 
-  async findUserBySocialIdAndProvider(socialId: string, provider: string): Promise<User | null> {
+  async findUserBySocialIdAndProvider(socialId: string, provider: Provider): Promise<User | null> {
     const user = await this.userRepository.findOne({
       where: { socialId, provider },
     });
@@ -64,4 +66,43 @@
     }
     return user;
   }
+
+  async findUserProfileOfMeByUserId(userId: number): Promise<UserProfileOfMeDto> {
+    const user = await this.userRepository.findOne({
+      where: { id: userId },
+      select: ['id', 'nickname', 'profileImageUrl', 'provider'],
+    });
+
+    if (!user) {
+      throw new NotFoundException(ErrorMessage.USER_NOT_FOUND);
+    }
+
+    return user;
+  }
+
+  async findUserProfileByUserId(userId: number): Promise<UserProfileDto> {
+    const user = await this.userRepository
+      .createQueryBuilder('user')
+      .leftJoin('user.ticles', 'ticles')
+      .addSelect(['ticles.title', 'ticles.id'])
+      .where('user.id = :userId', { userId: userId })
+      .getOne();
+
+    if (!user) {
+      throw new NotFoundException(ErrorMessage.USER_NOT_FOUND);
+    }
+
+    const ticleInfo = user.ticles.map((ticle) => ({
+      title: ticle.title,
+      ticleId: ticle.id,
+    }));
+
+    return {
+      id: user.id,
+      nickname: user.nickname,
+      profileImageUrl: user.profileImageUrl,
+      provider: user.provider,
+      ticleInfo: ticleInfo,
+    };
+  }
 }

apps/web/.eslintrc.cjs

@@ -11,7 +11,7 @@ module.exports = {
     require.resolve('@repo/lint'),
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
-    'plugin:jsx-a11y/recommended',
+    // 'plugin:jsx-a11y/recommended',
     'plugin:react/jsx-runtime',
   ],
   plugins: ['react-refresh'],

apps/web/index.html

@@ -2,15 +2,19 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <link
       rel="stylesheet"
       as="style"
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ticle</title>
+    <meta
+      name="Description"
+      content="작은 지식이 모여 큰 성장이 되는 곳 - 실시간 지식 공유 플랫폼 TICLE"
+    />
+    <title>TICLE</title>
   </head>
   <body>
     <div id="root"></div>

apps/web/src/api/auth.ts

@@ -1,4 +1,5 @@
 import axiosInstance from '@/api/axios';
+import { ENV } from '@/constants/env';
 
 type SignUpDto = {
   username: string;
@@ -23,8 +24,12 @@ const signOut = async () => {
   await axiosInstance.post('/auth/logout');
 };
 
-const oauthLogin = async (provider: 'google' | 'github') => {
-  await axiosInstance.get(`/auth/${provider}/login`);
+const guestLogin = () => {
+  window.location.href = `${ENV.API_URL}/auth/guest/login`;
 };
 
-export { logIn, signUp, oauthLogin, signOut };
+const oauthLogin = (provider: 'google' | 'github') => {
+  window.location.href = `${ENV.API_URL}/auth/${provider}/login`;
+};
+
+export { logIn, signUp, oauthLogin, guestLogin, signOut };