diff --git a/.gitignore b/.gitignore
index 29c67c1a..76a2b59f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,9 @@ node_modules
 
 # husky 관련
 .husky/_
-.husky/.gitignore
\ No newline at end of file
+.husky/.gitignore
+
+# docker-compose 관련 파일
+
+mysql-data
+redis-data
\ No newline at end of file
diff --git a/backend/package.json b/backend/package.json
index a3918ab8..aef7d802 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -22,22 +22,37 @@
   "dependencies": {
     "@nestjs/common": "^10.0.0",
     "@nestjs/core": "^10.0.0",
+    "@nestjs/jwt": "^10.2.0",
+    "@nestjs/passport": "^10.0.3",
     "@nestjs/platform-express": "^10.0.0",
     "@nestjs/platform-socket.io": "^10.4.6",
+    "@nestjs/typeorm": "^10.0.2",
     "@nestjs/websockets": "^10.4.6",
+    "@types/passport-jwt": "^4.0.1",
+    "axios": "^1.7.7",
+    "cookie-parser": "^1.4.7",
     "dotenv": "^16.4.5",
     "ioredis": "^5.4.1",
+    "mysql2": "^3.11.4",
+    "passport": "^0.7.0",
+    "passport-custom": "^1.1.1",
+    "passport-jwt": "^4.0.1",
     "reflect-metadata": "^0.2.0",
     "rxjs": "^7.8.1",
-    "socket.io": "^4.8.1"
+    "socket.io": "^4.8.1",
+    "typeorm": "^0.3.20",
+    "typeorm-naming-strategies": "^4.1.0",
+    "typeorm-transactional": "^0.5.0"
   },
   "devDependencies": {
     "@nestjs/cli": "^10.0.0",
     "@nestjs/schematics": "^10.0.0",
     "@nestjs/testing": "^10.0.0",
+    "@types/cookie-parser": "^1.4.7",
     "@types/express": "^5.0.0",
     "@types/jest": "^29.5.2",
     "@types/node": "^20.3.1",
+    "@types/passport-github": "^1.1.12",
     "@types/supertest": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
diff --git a/backend/src/app.module.ts b/backend/src/app.module.ts
index 2e4f16bc..f50c98af 100644
--- a/backend/src/app.module.ts
+++ b/backend/src/app.module.ts
@@ -1,14 +1,33 @@
 import { Module } from "@nestjs/common";
+
 import { AppController } from "./app.controller";
 import { AppService } from "./app.service";
+
 import { SocketModule } from "./signaling-server/socket.module";
 import { RoomModule } from "./room/room.module";
 import { RedisModule } from "./redis/redis.module";
+import { AuthModule } from "./auth/auth.module";
+import { UserModule } from "./user/user.module";
+import { TypeOrmModule } from "@nestjs/typeorm";
 
 import "dotenv/config";
 
+import { createDataSource, typeOrmConfig } from "./config/typeorm.config";
+import { QuestionListModule } from "./question-list/question-list.module";
+
 @Module({
-    imports: [SocketModule, RoomModule, RedisModule],
+    imports: [
+        TypeOrmModule.forRootAsync({
+            useFactory: async () => typeOrmConfig, // 설정 객체를 직접 반환
+            dataSourceFactory: async () => await createDataSource(), // 분리된 데이터소스 생성 함수 사용
+        }),
+        SocketModule,
+        RoomModule,
+        RedisModule,
+        AuthModule,
+        UserModule,
+        QuestionListModule,
+    ],
     controllers: [AppController],
     providers: [AppService],
 })
diff --git a/backend/src/auth/auth.controller.spec.ts b/backend/src/auth/auth.controller.spec.ts
new file mode 100644
index 00000000..901d3e88
--- /dev/null
+++ b/backend/src/auth/auth.controller.spec.ts
@@ -0,0 +1,18 @@
+import { Test, TestingModule } from "@nestjs/testing";
+import { AuthController } from "./auth.controller";
+
+describe("AuthController", () => {
+    let controller: AuthController;
+
+    beforeEach(async () => {
+        const module: TestingModule = await Test.createTestingModule({
+            controllers: [AuthController],
+        }).compile();
+
+        controller = module.get<AuthController>(AuthController);
+    });
+
+    it("should be defined", () => {
+        expect(controller).toBeDefined();
+    });
+});
diff --git a/backend/src/auth/auth.controller.ts b/backend/src/auth/auth.controller.ts
new file mode 100644
index 00000000..fe56476c
--- /dev/null
+++ b/backend/src/auth/auth.controller.ts
@@ -0,0 +1,65 @@
+import { Controller, Get, Post, Res, Req, UseGuards } from "@nestjs/common";
+import { AuthGuard } from "@nestjs/passport";
+import { Request, Response } from "express";
+import { AuthService } from "./auth.service";
+import { GithubProfile } from "./github/gitub-profile.decorator";
+import { Profile } from "passport-github";
+import { setCookieConfig } from "../config/cookie.config";
+import { JwtPayload, JwtTokenPair } from "./jwt/jwt.decorator";
+import { IJwtPayload, IJwtTokenPair } from "./jwt/jwt.model";
+
+@Controller("auth")
+export class AuthController {
+    private static ACCESS_TOKEN = "accessToken";
+    private static REFRESH_TOKEN = "refreshToken";
+
+    constructor(private readonly authService: AuthService) {}
+
+    @Post("github")
+    @UseGuards(AuthGuard("github"))
+    async githubCallback(
+        @Req() req: Request,
+        @Res({ passthrough: true }) res: Response,
+        @GithubProfile() profile: Profile
+    ) {
+        const id = parseInt(profile.id);
+
+        const result = await this.authService.getTokenByGithubId(id);
+
+        res.cookie("accessToken", result.accessToken.token, {
+            maxAge: result.accessToken.expireTime,
+            ...setCookieConfig,
+        });
+
+        res.cookie("refreshToken", result.refreshToken.token, {
+            maxAge: result.refreshToken.expireTime,
+            ...setCookieConfig,
+        });
+
+        return {
+            success: true,
+        };
+    }
+
+    @Get("whoami")
+    @UseGuards(AuthGuard("jwt"))
+    async handleWhoami(@Req() req: Request, @JwtPayload() token: IJwtPayload) {
+        return token;
+    }
+
+    @Get("refresh")
+    @UseGuards(AuthGuard("jwt-refresh"))
+    async handleRefresh(
+        @Res({ passthrough: true }) res: Response,
+        @JwtTokenPair() token: IJwtTokenPair
+    ) {
+        res.cookie("accessToken", token.accessToken.token, {
+            maxAge: token.accessToken.expireTime,
+            ...setCookieConfig,
+        });
+
+        return {
+            success: true,
+        };
+    }
+}
diff --git a/backend/src/auth/auth.module.ts b/backend/src/auth/auth.module.ts
new file mode 100644
index 00000000..83ac1574
--- /dev/null
+++ b/backend/src/auth/auth.module.ts
@@ -0,0 +1,13 @@
+import { Module } from "@nestjs/common";
+import { AuthController } from "./auth.controller";
+import { AuthService } from "./auth.service";
+import { GithubStrategy } from "./github/github.strategy";
+import { UserRepository } from "../user/user.repository";
+import { JwtModule } from "./jwt/jwt.module";
+
+@Module({
+    imports: [JwtModule],
+    controllers: [AuthController],
+    providers: [AuthService, GithubStrategy, UserRepository],
+})
+export class AuthModule {}
diff --git a/backend/src/auth/auth.service.spec.ts b/backend/src/auth/auth.service.spec.ts
new file mode 100644
index 00000000..042f61ea
--- /dev/null
+++ b/backend/src/auth/auth.service.spec.ts
@@ -0,0 +1,129 @@
+import { Test, TestingModule } from "@nestjs/testing";
+import { AuthService } from "./auth.service";
+import { UserRepository } from "../user/user.repository";
+import { Profile } from "passport-github";
+
+// typeorm-transactional 모킹
+jest.mock("typeorm-transactional", () => ({
+    Transactional: () => () => ({}),
+    runOnTransactionCommit: () => () => ({}),
+    runOnTransactionRollback: () => () => ({}),
+    runOnTransactionComplete: () => () => ({}),
+    initializeTransactionalContext: () => ({}),
+}));
+
+describe("AuthService", () => {
+    let authService: AuthService;
+    let userRepository: UserRepository;
+
+    // Mock GitHub 프로필 데이터
+    const mockGithubProfile: Profile = {
+        id: "12345",
+        displayName: "Test User",
+        username: "testuser",
+        profileUrl: "https://abcd/",
+        photos: [],
+        provider: "github",
+        _raw: "",
+        _json: {},
+    };
+
+    // Mock 유저 데이터
+    const mockUser = {
+        id: 1,
+        loginId: null,
+        passwordHash: null,
+        githubId: 12345,
+        username: "camper_12345",
+    };
+
+    beforeEach(async () => {
+        // Mock Repository 생성
+        const mockUserRepository = {
+            getUserByGithubId: jest.fn(),
+            createUser: jest.fn(),
+        };
+
+        const module: TestingModule = await Test.createTestingModule({
+            providers: [
+                AuthService,
+                {
+                    provide: UserRepository,
+                    useValue: mockUserRepository,
+                },
+            ],
+        }).compile();
+
+        authService = module.get<AuthService>(AuthService);
+        userRepository = module.get<UserRepository>(UserRepository);
+    });
+
+    describe("githubLogin", () => {
+        it("기존 사용자가 있을 경우 해당 사용자를 반환해야 한다", async () => {
+            // Given
+            jest.spyOn(userRepository, "getUserByGithubId").mockResolvedValue(
+                mockUser
+            );
+
+            // When
+            const result = await authService.githubLogin(mockGithubProfile);
+
+            // Then
+            expect(userRepository.getUserByGithubId).toHaveBeenCalledWith(
+                parseInt(mockGithubProfile.id)
+            );
+            expect(result).toEqual(mockUser);
+            expect(userRepository.createUser).not.toHaveBeenCalled();
+        });
+
+        it("새로운 사용자의 경우 새 계정을 생성해야 한다", async () => {
+            // Given
+            jest.spyOn(userRepository, "getUserByGithubId").mockResolvedValue(
+                null
+            );
+            jest.spyOn(userRepository, "createUser").mockResolvedValue(
+                mockUser
+            );
+
+            // When
+            const result = await authService.githubLogin(mockGithubProfile);
+
+            // Then
+            expect(userRepository.getUserByGithubId).toHaveBeenCalledWith(
+                parseInt(mockGithubProfile.id)
+            );
+            expect(userRepository.createUser).toHaveBeenCalledWith({
+                githubId: parseInt(mockGithubProfile.id),
+                username: `camper_${mockGithubProfile.id}`,
+            });
+            expect(result).toEqual(mockUser);
+        });
+
+        it("getUserByGithubId 에러 발생 시 예외를 던져야 한다", async () => {
+            // Given
+            const error = new Error("Database error");
+            jest.spyOn(userRepository, "getUserByGithubId").mockRejectedValue(
+                error
+            );
+
+            // When & Then
+            await expect(
+                authService.githubLogin(mockGithubProfile)
+            ).rejects.toThrow(error);
+        });
+
+        it("createUser 에러 발생 시 예외를 던져야 한다", async () => {
+            // Given
+            const error = new Error("Database error");
+            jest.spyOn(userRepository, "getUserByGithubId").mockResolvedValue(
+                null
+            );
+            jest.spyOn(userRepository, "createUser").mockRejectedValue(error);
+
+            // When & Then
+            await expect(
+                authService.githubLogin(mockGithubProfile)
+            ).rejects.toThrow(error);
+        });
+    });
+});
diff --git a/backend/src/auth/auth.service.ts b/backend/src/auth/auth.service.ts
new file mode 100644
index 00000000..1620988a
--- /dev/null
+++ b/backend/src/auth/auth.service.ts
@@ -0,0 +1,31 @@
+import { Injectable, UnauthorizedException } from "@nestjs/common";
+import { UserRepository } from "../user/user.repository";
+import { Transactional } from "typeorm-transactional";
+import "dotenv/config";
+import { DAY, HOUR } from "../utils/time";
+import { JwtService } from "./jwt/jwt.service";
+
+@Injectable()
+export class AuthService {
+    private static ACCESS_TOKEN_EXPIRATION_TIME = 3 * HOUR;
+    private static ACCESS_TOKEN_EXPIRATION = 30 * DAY;
+
+    constructor(
+        private readonly userRepository: UserRepository,
+        private readonly jwtService: JwtService
+    ) {}
+
+    @Transactional()
+    public async getTokenByGithubId(id: number) {
+        let user = await this.userRepository.getUserByGithubId(id);
+
+        if (!user) {
+            user = await this.userRepository.createUser({
+                githubId: id,
+                username: `camper_${id}`,
+            });
+        }
+
+        return await this.jwtService.createJwtToken(user.id);
+    }
+}
diff --git a/backend/src/auth/github/github.strategy.ts b/backend/src/auth/github/github.strategy.ts
new file mode 100644
index 00000000..87791b24
--- /dev/null
+++ b/backend/src/auth/github/github.strategy.ts
@@ -0,0 +1,51 @@
+// github-auth.strategy.ts
+import { Injectable, UnauthorizedException } from "@nestjs/common";
+import { PassportStrategy } from "@nestjs/passport";
+import { Strategy } from "passport-custom";
+import { Request } from "express";
+import axios from "axios";
+import "dotenv/config";
+
+@Injectable()
+export class GithubStrategy extends PassportStrategy(Strategy, "github") {
+    private static REQUEST_ACCESS_TOKEN_URL =
+        "https://github.com/login/oauth/access_token";
+    private static REQUEST_USER_URL = "https://api.github.com/user";
+
+    constructor() {
+        super();
+    }
+
+    async validate(req: Request, done: any) {
+        const { code } = req.body;
+
+        if (!code) {
+            throw new UnauthorizedException("Authorization code not found");
+        }
+
+        const tokenResponse = await axios.post(
+            GithubStrategy.REQUEST_ACCESS_TOKEN_URL,
+            {
+                client_id: process.env.OAUTH_GITHUB_ID,
+                client_secret: process.env.OAUTH_GITHUB_SECRET,
+                code: code,
+            },
+            {
+                headers: { Accept: "application/json" },
+            }
+        );
+
+        const { access_token } = tokenResponse.data;
+
+        // GitHub 사용자 정보 조회
+        const userResponse = await axios.get(GithubStrategy.REQUEST_USER_URL, {
+            headers: {
+                Authorization: `Bearer ${access_token}`,
+            },
+        });
+
+        return done(null, {
+            profile: userResponse.data,
+        });
+    }
+}
diff --git a/backend/src/auth/github/gitub-profile.decorator.ts b/backend/src/auth/github/gitub-profile.decorator.ts
new file mode 100644
index 00000000..f25fa13a
--- /dev/null
+++ b/backend/src/auth/github/gitub-profile.decorator.ts
@@ -0,0 +1,24 @@
+import {
+    createParamDecorator,
+    ExecutionContext,
+    BadRequestException,
+} from "@nestjs/common";
+import { Profile } from "passport-github";
+
+export const GithubProfile = createParamDecorator(
+    (data: unknown, ctx: ExecutionContext) => {
+        const request = ctx.switchToHttp().getRequest();
+        const user = request.user.profile;
+
+        // GitHub Profile 타입 검증
+        if (!isGithubProfile(user)) {
+            throw new BadRequestException("Invalid GitHub profile");
+        }
+
+        return user;
+    }
+);
+
+function isGithubProfile(user: any): user is Profile {
+    return user && typeof user.id === "number";
+}
diff --git a/backend/src/auth/jwt/jwt.decorator.ts b/backend/src/auth/jwt/jwt.decorator.ts
new file mode 100644
index 00000000..f96f461b
--- /dev/null
+++ b/backend/src/auth/jwt/jwt.decorator.ts
@@ -0,0 +1,60 @@
+import {
+    createParamDecorator,
+    ExecutionContext,
+    InternalServerErrorException,
+    UnauthorizedException,
+} from "@nestjs/common";
+import {
+    IJwtPayload as IJwtPayload,
+    IJwtTokenPair as IJwtTokenPair,
+    IJwtToken as IJwtToken,
+} from "./jwt.model";
+
+export const JwtPayload = createParamDecorator(
+    (data: unknown, ctx: ExecutionContext) => {
+        const request = ctx.switchToHttp().getRequest();
+        const payload = request.user.jwtToken;
+
+        if (!isJwtTokenPayload(payload)) {
+            throw new UnauthorizedException("Invalid jwt token payload");
+        }
+
+        return payload;
+    }
+);
+
+export const JwtTokenPair = createParamDecorator(
+    (data: unknown, ctx: ExecutionContext) => {
+        const request = ctx.switchToHttp().getRequest();
+        const payload = request.user.jwtToken;
+
+        if (!isJwtTokenPair(payload)) {
+            throw new InternalServerErrorException("Invalid jwt token");
+        }
+
+        return payload;
+    }
+);
+
+function isJwtTokenPayload(payload: any): payload is IJwtPayload {
+    return (
+        payload &&
+        typeof payload.userId === "number" &&
+        typeof payload.username === "string"
+    );
+}
+
+function isJwtTokenPair(payload: any): payload is IJwtTokenPair {
+    if (!payload.accessToken || !payload.refreshToken) return false;
+    if (!isJwtToken(payload.accessToken)) return false;
+    if (!isJwtToken(payload.refreshToken)) return false;
+    return true;
+}
+
+function isJwtToken(token: any): token is IJwtToken {
+    return (
+        token &&
+        typeof token.token === "string" &&
+        typeof token.expireTime === "number"
+    );
+}
diff --git a/backend/src/auth/jwt/jwt.model.ts b/backend/src/auth/jwt/jwt.model.ts
new file mode 100644
index 00000000..6f010ba5
--- /dev/null
+++ b/backend/src/auth/jwt/jwt.model.ts
@@ -0,0 +1,14 @@
+export interface IJwtPayload {
+    userId: number;
+    username: string;
+}
+
+export interface IJwtToken {
+    token: string;
+    expireTime: number;
+}
+
+export interface IJwtTokenPair {
+    accessToken: IJwtToken;
+    refreshToken: IJwtToken;
+}
diff --git a/backend/src/auth/jwt/jwt.module.ts b/backend/src/auth/jwt/jwt.module.ts
new file mode 100644
index 00000000..232ef011
--- /dev/null
+++ b/backend/src/auth/jwt/jwt.module.ts
@@ -0,0 +1,18 @@
+import { Module } from "@nestjs/common";
+import { JwtModule as ParentJwtModule } from "@nestjs/jwt";
+import { JwtService } from "./jwt.service";
+import { UserRepository } from "../../user/user.repository";
+import { AccessTokenStrategy } from "./strategy/access-token.strategy";
+import { RefreshTokenStrategy } from "./strategy/refresh-token.strategy";
+
+@Module({
+    imports: [ParentJwtModule.register({})],
+    providers: [
+        JwtService,
+        UserRepository,
+        AccessTokenStrategy,
+        RefreshTokenStrategy,
+    ],
+    exports: [JwtService, AccessTokenStrategy, RefreshTokenStrategy],
+})
+export class JwtModule {}
diff --git a/backend/src/auth/jwt/jwt.service.ts b/backend/src/auth/jwt/jwt.service.ts
new file mode 100644
index 00000000..29784fba
--- /dev/null
+++ b/backend/src/auth/jwt/jwt.service.ts
@@ -0,0 +1,79 @@
+import { JwtService as ParentService } from "@nestjs/jwt";
+import { Injectable, UnauthorizedException } from "@nestjs/common";
+import { Transactional } from "typeorm-transactional";
+import { UserRepository } from "../../user/user.repository";
+import { DAY, HOUR } from "../../utils/time";
+import { User } from "../../user/user.entity";
+import { IJwtToken } from "./jwt.model";
+
+@Injectable()
+export class JwtService {
+    private static ACCESS_TOKEN_TIME = 3 * HOUR;
+    private static REFRESH_TOKEN_TIME = 10 * DAY;
+
+    constructor(
+        private readonly parent: ParentService,
+        private readonly userRepository: UserRepository
+    ) {}
+
+    @Transactional()
+    public async createJwtToken(id: number) {
+        const user = await this.userRepository.getUserByUserId(id);
+
+        const accessToken = await this.createAccessToken(user);
+        const refreshToken = await this.createRefreshToken(id);
+
+        user.refreshToken = refreshToken.token;
+
+        await this.userRepository.updateUser(user);
+
+        return {
+            accessToken,
+            refreshToken,
+        };
+    }
+
+    public async createAccessToken(user: User): Promise<IJwtToken> {
+        const accessToken = this.parent.sign(
+            {
+                userId: user.id,
+                username: user.username,
+            },
+            {
+                secret: process.env.JWT_ACCESS_TOKEN_SECRET_KEY,
+                expiresIn: process.env.JWT_ACCESS_TOKEN_EXPIRATION_TIME,
+            }
+        );
+
+        return {
+            token: accessToken,
+            expireTime: Date.now() + JwtService.ACCESS_TOKEN_TIME,
+        };
+    }
+
+    public async createRefreshToken(id: number): Promise<IJwtToken> {
+        const refreshToken = this.parent.sign(
+            {},
+            {
+                secret: process.env.JWT_REFRESH_TOKEN_SECRET_KEY,
+                expiresIn: process.env.JWT_REFRESH_TOKEN_EXPIRATION_TIME,
+                audience: String(id),
+            }
+        );
+
+        return {
+            token: refreshToken,
+            expireTime: Date.now() + JwtService.REFRESH_TOKEN_TIME,
+        };
+    }
+
+    public async getNewAccessToken(id: number, refreshToken: string) {
+        const user = await this.userRepository.getUserByUserId(id);
+
+        if (!user) throw new UnauthorizedException("Invalid refresh token");
+        if (user.refreshToken !== refreshToken)
+            throw new UnauthorizedException("Refresh token expired!");
+
+        return this.createAccessToken(user);
+    }
+}
diff --git a/backend/src/auth/jwt/strategy/access-token.strategy.ts b/backend/src/auth/jwt/strategy/access-token.strategy.ts
new file mode 100644
index 00000000..a2aab9d8
--- /dev/null
+++ b/backend/src/auth/jwt/strategy/access-token.strategy.ts
@@ -0,0 +1,30 @@
+import { Injectable } from "@nestjs/common";
+import { PassportStrategy } from "@nestjs/passport";
+import { Strategy } from "passport-jwt";
+import { Request } from "express";
+import "dotenv/config";
+
+@Injectable()
+export class AccessTokenStrategy extends PassportStrategy(Strategy, "jwt") {
+    constructor() {
+        super({
+            jwtFromRequest: (req: Request) => {
+                if (!req || !req.cookies) return null;
+                return req.cookies["accessToken"];
+            },
+            secretOrKey: process.env.JWT_ACCESS_TOKEN_SECRET_KEY,
+            passReqToCallback: true,
+        });
+    }
+
+    async validate(req: Request, payload: any) {
+        const { userId, username } = payload;
+
+        return {
+            jwtToken: {
+                userId,
+                username,
+            },
+        };
+    }
+}
diff --git a/backend/src/auth/jwt/strategy/refresh-token.strategy.ts b/backend/src/auth/jwt/strategy/refresh-token.strategy.ts
new file mode 100644
index 00000000..04dafdf6
--- /dev/null
+++ b/backend/src/auth/jwt/strategy/refresh-token.strategy.ts
@@ -0,0 +1,44 @@
+import { Injectable } from "@nestjs/common";
+import { PassportStrategy } from "@nestjs/passport";
+import { Strategy } from "passport-jwt";
+import { Request } from "express";
+import "dotenv/config";
+import { JwtService } from "../jwt.service";
+
+@Injectable()
+export class RefreshTokenStrategy extends PassportStrategy(
+    Strategy,
+    "jwt-refresh"
+) {
+    constructor(private readonly jwtService: JwtService) {
+        super({
+            jwtFromRequest: (req: Request) => {
+                if (!req || !req.cookies) return null;
+                return req.cookies["refreshToken"];
+            },
+            ignoreExpiration: true,
+            secretOrKey: process.env.JWT_REFRESH_TOKEN_SECRET_KEY,
+            passReqToCallback: true,
+        });
+    }
+
+    async validate(req: Request, payload: any) {
+        const { aud, exp } = payload;
+        const refreshToken = req.cookies["refreshToken"];
+
+        const accessToken = await this.jwtService.getNewAccessToken(
+            parseInt(aud),
+            refreshToken
+        );
+
+        return {
+            jwtToken: {
+                accessToken,
+                refreshToken: {
+                    token: refreshToken,
+                    expireTime: exp,
+                },
+            },
+        };
+    }
+}
diff --git a/backend/src/config/cookie.config.ts b/backend/src/config/cookie.config.ts
new file mode 100644
index 00000000..b6fab013
--- /dev/null
+++ b/backend/src/config/cookie.config.ts
@@ -0,0 +1,4 @@
+export const setCookieConfig = {
+    httpOnly: true,
+    secure: true,
+};
diff --git a/backend/src/config/typeorm.config.ts b/backend/src/config/typeorm.config.ts
new file mode 100644
index 00000000..ea1d12a3
--- /dev/null
+++ b/backend/src/config/typeorm.config.ts
@@ -0,0 +1,65 @@
+import { DataSource, DataSourceOptions } from "typeorm";
+import { SnakeNamingStrategy } from "typeorm-naming-strategies";
+import { User } from "../user/user.entity"; // 엔티티 경로를 수정하세요.
+import "dotenv/config";
+import { addTransactionalDataSource } from "typeorm-transactional";
+import { QuestionList } from "../question-list/question-list.entity";
+import { Question } from "../question-list/question.entity";
+import { Category } from "../question-list/category.entity";
+
+export const typeOrmConfig: DataSourceOptions = {
+    type: "mysql",
+    host: process.env.MYSQL_HOST,
+    port: parseInt(process.env.MYSQL_PORT) ?? 3306,
+    username: process.env.MYSQL_USERNAME,
+    password: process.env.MYSQL_PASSWORD,
+    database: process.env.MYSQL_DATABASE,
+    entities: [User, QuestionList, Question, Category],
+    namingStrategy: new SnakeNamingStrategy(),
+    synchronize: true,
+};
+
+let transactionalDataSource: DataSource | null = null;
+
+export const createDataSource = async (): Promise<DataSource> => {
+    if (!transactionalDataSource) {
+        transactionalDataSource = addTransactionalDataSource(
+            new DataSource(typeOrmConfig)
+        );
+
+        await transactionalDataSource.initialize();
+        await seedDatabase(transactionalDataSource);
+    }
+    return transactionalDataSource;
+};
+
+const seedDatabase = async (dataSource: DataSource) => {
+    const categoryRepository = dataSource.getRepository(Category);
+
+    const categories = [
+        "자료구조",
+        "운영체제",
+        "데이터베이스",
+        "컴퓨터구조",
+        "네트워크",
+        "백엔드",
+        "프론트엔드",
+        "알고리즘",
+        "보안",
+    ];
+
+    // 이미 데이터가 있을 경우 시딩하지 않음
+    const existingCount = await categoryRepository.count();
+    if (existingCount > 0) {
+        return;
+    }
+
+    // 카테고리 데이터 삽입
+    const categoryEntities = categories.map((name) => {
+        const category = new Category();
+        category.name = name;
+        return category;
+    });
+
+    await categoryRepository.save(categoryEntities);
+};
\ No newline at end of file
diff --git a/backend/src/main.ts b/backend/src/main.ts
index b5c531a1..7fe63a87 100644
--- a/backend/src/main.ts
+++ b/backend/src/main.ts
@@ -1,8 +1,25 @@
 import { NestFactory } from "@nestjs/core";
 import { AppModule } from "./app.module";
+import {
+    initializeTransactionalContext,
+    StorageDriver,
+} from "typeorm-transactional";
+import * as cookieParser from "cookie-parser";
 
 async function bootstrap() {
+    initializeTransactionalContext({
+        storageDriver: StorageDriver.AUTO, // 명시적으로 storage driver 설정
+    });
+
     const app = await NestFactory.create(AppModule);
+
+    app.enableCors({
+        credentials: true,
+    });
+
+    app.use(cookieParser());
+
     await app.listen(process.env.PORT ?? 3000);
 }
+
 bootstrap();
diff --git a/backend/src/question-list/category.entity.ts b/backend/src/question-list/category.entity.ts
new file mode 100644
index 00000000..a56882da
--- /dev/null
+++ b/backend/src/question-list/category.entity.ts
@@ -0,0 +1,16 @@
+import { Entity, PrimaryGeneratedColumn, Column, ManyToMany } from "typeorm";
+import { QuestionList } from "./question-list.entity";
+
+@Entity()
+export class Category {
+    private static NAME_MAX_LEN = 20;
+
+    @PrimaryGeneratedColumn()
+    id: number;
+
+    @Column({ length: Category.NAME_MAX_LEN })
+    name: string;
+
+    @ManyToMany(() => QuestionList, (questionList) => questionList.categories)
+    questionLists: QuestionList[];
+}
diff --git a/backend/src/question-list/dto/create-question-list.dto.ts b/backend/src/question-list/dto/create-question-list.dto.ts
new file mode 100644
index 00000000..4c4f075a
--- /dev/null
+++ b/backend/src/question-list/dto/create-question-list.dto.ts
@@ -0,0 +1,7 @@
+export interface CreateQuestionListDto {
+    title: string;
+    contents: string[];
+    categoryNames: string[];
+    isPublic: boolean;
+    userId: number;
+}
diff --git a/backend/src/question-list/dto/create-question.dto.ts b/backend/src/question-list/dto/create-question.dto.ts
new file mode 100644
index 00000000..3916d486
--- /dev/null
+++ b/backend/src/question-list/dto/create-question.dto.ts
@@ -0,0 +1,4 @@
+export interface CreateQuestionDto {
+    contents: string[];
+    questionListId: number;
+}
diff --git a/backend/src/question-list/dto/get-all-question-list.dto.ts b/backend/src/question-list/dto/get-all-question-list.dto.ts
new file mode 100644
index 00000000..9d87dfad
--- /dev/null
+++ b/backend/src/question-list/dto/get-all-question-list.dto.ts
@@ -0,0 +1,7 @@
+export interface GetAllQuestionListDto {
+    id: number;
+    title: string;
+    categoryNames: string[];
+    usage: number;
+    questionCount: number;
+}
diff --git a/backend/src/question-list/dto/my-question-list.dto.ts b/backend/src/question-list/dto/my-question-list.dto.ts
new file mode 100644
index 00000000..bc8ff9eb
--- /dev/null
+++ b/backend/src/question-list/dto/my-question-list.dto.ts
@@ -0,0 +1,10 @@
+import { Question } from "../question.entity";
+
+export interface MyQuestionListDto {
+    id: number;
+    title: string;
+    contents: Question[];
+    categoryNames: string[];
+    isPublic: boolean;
+    usage: number;
+}
\ No newline at end of file
diff --git a/backend/src/question-list/dto/question-list-contents.dto.ts b/backend/src/question-list/dto/question-list-contents.dto.ts
new file mode 100644
index 00000000..58494169
--- /dev/null
+++ b/backend/src/question-list/dto/question-list-contents.dto.ts
@@ -0,0 +1,10 @@
+import { Question } from "../question.entity";
+
+export interface QuestionListContentsDto {
+    id: number;
+    title: string;
+    categoryNames: string[];
+    contents: Question[];
+    usage: number;
+    username: string;
+}
diff --git a/backend/src/question-list/question-list.controller.spec.ts b/backend/src/question-list/question-list.controller.spec.ts
new file mode 100644
index 00000000..b460c0fa
--- /dev/null
+++ b/backend/src/question-list/question-list.controller.spec.ts
@@ -0,0 +1,18 @@
+import { Test, TestingModule } from "@nestjs/testing";
+import { QuestionListController } from "./question-list.controller";
+
+describe("QuestionController", () => {
+    let controller: QuestionListController;
+
+    beforeEach(async () => {
+        const module: TestingModule = await Test.createTestingModule({
+            controllers: [QuestionListController],
+        }).compile();
+
+        controller = module.get<QuestionListController>(QuestionListController);
+    });
+
+    it("should be defined", () => {
+        expect(controller).toBeDefined();
+    });
+});
diff --git a/backend/src/question-list/question-list.controller.ts b/backend/src/question-list/question-list.controller.ts
new file mode 100644
index 00000000..64dbb3b7
--- /dev/null
+++ b/backend/src/question-list/question-list.controller.ts
@@ -0,0 +1,176 @@
+import {
+    Body,
+    Controller,
+    Get,
+    Post,
+    Req,
+    Res,
+    UseGuards,
+} from "@nestjs/common";
+import { QuestionListService } from "./question-list.service";
+import { CreateQuestionListDto } from "./dto/create-question-list.dto";
+import { CreateQuestionDto } from "./dto/create-question.dto";
+import { GetAllQuestionListDto } from "./dto/get-all-question-list.dto";
+import { QuestionListContentsDto } from "./dto/question-list-contents.dto";
+import { AuthGuard } from "@nestjs/passport";
+import { JwtPayload } from "../auth/jwt/jwt.decorator";
+import { IJwtPayload } from "../auth/jwt/jwt.model";
+import { MyQuestionListDto } from "./dto/my-question-list.dto";
+
+@Controller("question-list")
+export class QuestionListController {
+    constructor(private readonly questionListService: QuestionListService) {}
+
+    @Get()
+    async getAllQuestionLists(@Res() res) {
+        try {
+            const allQuestionLists: GetAllQuestionListDto[] =
+                await this.questionListService.getAllQuestionLists();
+            return res.send({
+                success: true,
+                message: "All question lists received successfully.",
+                data: {
+                    allQuestionLists,
+                },
+            });
+        } catch (error) {
+            return res.send({
+                success: false,
+                message: "Failed to get all question lists.",
+                error: error.message,
+            });
+        }
+    }
+
+    @Post()
+    @UseGuards(AuthGuard("jwt"))
+    async createQuestionList(
+        @JwtPayload() token: IJwtPayload,
+        @Req() req,
+        @Res() res,
+        @Body()
+        body: {
+            title: string;
+            contents: string[];
+            categoryNames: string[];
+            isPublic: boolean;
+        }
+    ) {
+        try {
+            const { title, contents, categoryNames, isPublic } = body;
+
+            // 질문지 DTO 준비
+            const createQuestionListDto: CreateQuestionListDto = {
+                title,
+                contents,
+                categoryNames,
+                isPublic,
+                userId: token.userId,
+            };
+
+            // 질문지 생성
+            const { createdQuestionList, createdQuestions } =
+                await this.questionListService.createQuestionList(
+                    createQuestionListDto
+                );
+
+            return res.send({
+                success: true,
+                message: "Question list created successfully.",
+                data: {
+                    createdQuestionList,
+                    createdQuestions,
+                },
+            });
+        } catch (error) {
+            return res.send({
+                success: false,
+                message: "Failed to create question list.",
+                error: error.message,
+            });
+        }
+    }
+
+    @Post("category")
+    async getAllQuestionListsByCategoryName(
+        @Res() res,
+        @Body()
+        body: {
+            categoryName: string;
+        }
+    ) {
+        try {
+            const { categoryName } = body;
+            const allQuestionLists: GetAllQuestionListDto[] =
+                await this.questionListService.getAllQuestionListsByCategoryName(
+                    categoryName
+                );
+            return res.send({
+                success: true,
+                message: "All question lists received successfully.",
+                data: {
+                    allQuestionLists,
+                },
+            });
+        } catch (error) {
+            return res.send({
+                success: false,
+                message: "Failed to get all question lists.",
+                error: error.message,
+            });
+        }
+    }
+
+    @Post("contents")
+    async getQuestionListContents(
+        @Res() res,
+        @Body()
+        body: {
+            questionListId: number;
+        }
+    ) {
+        try {
+            const { questionListId } = body;
+            const questionListContents: QuestionListContentsDto =
+                await this.questionListService.getQuestionListContents(
+                    questionListId
+                );
+            return res.send({
+                success: true,
+                message: "Question list contents received successfully.",
+                data: {
+                    questionListContents,
+                },
+            });
+        } catch (error) {
+            return res.send({
+                success: false,
+                message: "Failed to get question list contents.",
+                error: error.message,
+            });
+        }
+    }
+
+    @Get("my")
+    @UseGuards(AuthGuard("jwt"))
+    async getMyQuestionLists(@Res() res, @JwtPayload() token: IJwtPayload) {
+        try {
+            const userId = token.userId;
+            const myQuestionLists: MyQuestionListDto[] =
+                await this.questionListService.getMyQuestionLists(userId);
+            return res.send({
+                success: true,
+                message: "My question lists received successfully.",
+                data: {
+                    myQuestionLists,
+                },
+            });
+        } catch (error) {
+            return res.send({
+                success: false,
+                message: "Failed to get my question lists.",
+                error: error.message,
+            });
+        }
+    }
+}
diff --git a/backend/src/question-list/question-list.entity.ts b/backend/src/question-list/question-list.entity.ts
new file mode 100644
index 00000000..829469a7
--- /dev/null
+++ b/backend/src/question-list/question-list.entity.ts
@@ -0,0 +1,50 @@
+import {
+    Entity,
+    PrimaryGeneratedColumn,
+    Column,
+    ManyToOne,
+    OneToMany,
+    ManyToMany,
+    JoinTable,
+} from "typeorm";
+import { User } from "../user/user.entity";
+import { Question } from "./question.entity";
+import { Category } from "./category.entity";
+
+@Entity()
+export class QuestionList {
+    private static QUESTION_LIST_TITLE_MAX_LEN = 100;
+
+    @PrimaryGeneratedColumn()
+    id: number;
+
+    @Column({ length: QuestionList.QUESTION_LIST_TITLE_MAX_LEN })
+    title: string;
+
+    @Column()
+    isPublic: boolean;
+
+    @Column({ default: 0 })
+    usage: number;
+
+    @Column()
+    userId: number;
+
+    @ManyToOne(() => User, (user) => user.questionLists)
+    user: User;
+
+    @OneToMany(() => Question, (question) => question.questionList)
+    questions: Question[];
+
+    @ManyToMany(() => Category, (category) => category.questionLists, {
+        cascade: true,
+    })
+    @JoinTable({
+        name: "question_list_category",
+        joinColumn: {
+            name: "questionListId",
+            referencedColumnName: "id",
+        },
+    })
+    categories: Category[];
+}
diff --git a/backend/src/question-list/question-list.module.ts b/backend/src/question-list/question-list.module.ts
new file mode 100644
index 00000000..14b7a61b
--- /dev/null
+++ b/backend/src/question-list/question-list.module.ts
@@ -0,0 +1,11 @@
+import { Module } from "@nestjs/common";
+import { QuestionListController } from "./question-list.controller";
+import { QuestionListService } from "./question-list.service";
+import { QuestionListRepository } from "./question-list.repository";
+
+@Module({
+    controllers: [QuestionListController],
+    providers: [QuestionListService, QuestionListRepository],
+    exports: [QuestionListRepository],
+})
+export class QuestionListModule {}
diff --git a/backend/src/question-list/question-list.repository.ts b/backend/src/question-list/question-list.repository.ts
new file mode 100644
index 00000000..f3e4470a
--- /dev/null
+++ b/backend/src/question-list/question-list.repository.ts
@@ -0,0 +1,93 @@
+import { Injectable } from "@nestjs/common";
+import { DataSource, In } from "typeorm";
+import { QuestionList } from "./question-list.entity";
+import { Question } from "./question.entity";
+import { Category } from "./category.entity";
+import { User } from "../user/user.entity";
+
+@Injectable()
+export class QuestionListRepository {
+    constructor(private dataSource: DataSource) {}
+
+    findPublicQuestionLists() {
+        return this.dataSource.getRepository(QuestionList).find({
+            where: { isPublic: true },
+        });
+    }
+
+    async getCategoryIdByName(categoryName: string) {
+        const category = await this.dataSource.getRepository(Category).findOne({
+            where: { name: categoryName },
+            select: ["id"],
+        });
+
+        return category?.id || null;
+    }
+
+    findPublicQuestionListsByCategoryId(categoryId: number) {
+        return this.dataSource.getRepository(QuestionList).find({
+            where: {
+                isPublic: true,
+                categories: { id: categoryId },
+            },
+            relations: ["categories"],
+        });
+    }
+
+    async findCategoryNamesByQuestionListId(questionListId: number) {
+        const questionList = await this.dataSource
+            .getRepository(QuestionList)
+            .findOne({
+                where: { id: questionListId },
+                relations: ["categories"], // 질문지와 관련된 카테고리도 함께 조회
+            });
+        console.log(questionList);
+        return questionList
+            ? questionList.categories.map((category) => category.name)
+            : [];
+    }
+
+    async findCategoriesByNames(categoryNames: string[]) {
+        return this.dataSource.getRepository(Category).find({
+            where: {
+                name: In(categoryNames),
+            },
+        });
+    }
+
+    getQuestionListById(questionListId: number) {
+        return this.dataSource.getRepository(QuestionList).findOne({
+            where: { id: questionListId },
+        });
+    }
+
+    getContentsByQuestionListId(questionListId: number) {
+        return this.dataSource.getRepository(Question).find({
+            where: { questionListId },
+        });
+    }
+
+    async getUsernameById(userId: number) {
+        const user = await this.dataSource.getRepository(User).findOne({
+            where: { id: userId },
+        });
+
+        return user?.username || null;
+    }
+
+    getQuestionListsByUserId(userId: number) {
+        return this.dataSource.getRepository(QuestionList).find({
+            where: { userId },
+        });
+    }
+
+    getQuestionCountByQuestionListId(questionListId: number) {
+        return this.dataSource
+            .getRepository(Question)
+            .createQueryBuilder("question")
+            .where("question.questionListId = :questionListId", {
+                questionListId,
+            })
+            .getCount();
+    }
+}
diff --git a/backend/src/question-list/question-list.service.spec.ts b/backend/src/question-list/question-list.service.spec.ts
new file mode 100644
index 00000000..4928726d
--- /dev/null
+++ b/backend/src/question-list/question-list.service.spec.ts
@@ -0,0 +1,18 @@
+import { Test, TestingModule } from "@nestjs/testing";
+import { QuestionListService } from "./question-list.service";
+
+describe("QuestionService", () => {
+    let service: QuestionListService;
+
+    beforeEach(async () => {
+        const module: TestingModule = await Test.createTestingModule({
+            providers: [QuestionListService],
+        }).compile();
+
+        service = module.get<QuestionListService>(QuestionListService);
+    });
+
+    it("should be defined", () => {
+        expect(service).toBeDefined();
+    });
+});
diff --git a/backend/src/question-list/question-list.service.ts b/backend/src/question-list/question-list.service.ts
new file mode 100644
index 00000000..6d185067
--- /dev/null
+++ b/backend/src/question-list/question-list.service.ts
@@ -0,0 +1,204 @@
+import { Injectable } from "@nestjs/common";
+import { QuestionListRepository } from "./question-list.repository";
+import { CreateQuestionListDto } from "./dto/create-question-list.dto";
+import { GetAllQuestionListDto } from "./dto/get-all-question-list.dto";
+import { QuestionListContentsDto } from "./dto/question-list-contents.dto";
+import { MyQuestionListDto } from "./dto/my-question-list.dto";
+import { DataSource } from "typeorm";
+import { QuestionList } from "./question-list.entity";
+import { Question } from "./question.entity";
+
+@Injectable()
+export class QuestionListService {
+    constructor(
+        private readonly dataSource: DataSource,
+        private readonly questionListRepository: QuestionListRepository
+    ) {}
+
+    async getAllQuestionLists() {
+        const allQuestionLists: GetAllQuestionListDto[] = [];
+
+        const publicQuestionLists =
+            await this.questionListRepository.findPublicQuestionLists();
+
+        for (const publicQuestionList of publicQuestionLists) {
+            const { id, title, usage } = publicQuestionList;
+            const categoryNames: string[] =
+                await this.questionListRepository.findCategoryNamesByQuestionListId(
+                    id
+                );
+
+            const questionCount =
+                await this.questionListRepository.getQuestionCountByQuestionListId(
+                    id
+                );
+
+            const questionList: GetAllQuestionListDto = {
+                id,
+                title,
+                categoryNames,
+                usage,
+                questionCount,
+            };
+            allQuestionLists.push(questionList);
+        }
+        return allQuestionLists;
+    }
+
+    async getAllQuestionListsByCategoryName(categoryName: string) {
+        const allQuestionLists: GetAllQuestionListDto[] = [];
+
+        const categoryId =
+            await this.questionListRepository.getCategoryIdByName(categoryName);
+
+        if (!categoryId) {
+            return [];
+        }
+
+        const publicQuestionLists =
+            await this.questionListRepository.findPublicQuestionListsByCategoryId(
+                categoryId
+            );
+
+        for (const publicQuestionList of publicQuestionLists) {
+            const { id, title, usage } = publicQuestionList;
+            const categoryNames: string[] =
+                await this.questionListRepository.findCategoryNamesByQuestionListId(
+                    id
+                );
+
+            const questionCount =
+                await this.questionListRepository.getQuestionCountByQuestionListId(
+                    id
+                );
+
+            const questionList: GetAllQuestionListDto = {
+                id,
+                title,
+                categoryNames,
+                usage,
+                questionCount,
+            };
+            allQuestionLists.push(questionList);
+        }
+        return allQuestionLists;
+    }
+
+    // 질문 생성 메서드
+    async createQuestionList(createQuestionListDto: CreateQuestionListDto) {
+        const { title, contents, categoryNames, isPublic, userId } =
+            createQuestionListDto;
+
+        const categories = await this.findCategoriesByNames(categoryNames);
+
+        const queryRunner = this.dataSource.createQueryRunner();
+        await queryRunner.startTransaction();
+
+        try {
+            const questionListDto = new QuestionList();
+            questionListDto.title = title;
+            questionListDto.categories = categories;
+            questionListDto.isPublic = isPublic;
+            questionListDto.userId = userId;
+
+            const createdQuestionList =
+                await queryRunner.manager.save(questionListDto);
+
+            const questions = contents.map((content, index) => {
+                const question = new Question();
+                question.content = content;
+                question.index = index;
+                question.questionList = createdQuestionList;
+
+                return question;
+            });
+
+            const createdQuestions =
+                await queryRunner.manager.save(questions);
+
+            await queryRunner.commitTransaction();
+
+            return { createdQuestionList, createdQuestions };
+        } catch (error) {
+            await queryRunner.rollbackTransaction();
+            throw new Error(error.message);
+        } finally {
+            await queryRunner.release();
+        }
+    }
+
+    async getQuestionListContents(questionListId: number) {
+        const questionList =
+            await this.questionListRepository.getQuestionListById(
+                questionListId
+            );
+        const { id, title, usage, userId } = questionList;
+
+        const contents =
+            await this.questionListRepository.getContentsByQuestionListId(
+                questionListId
+            );
+
+        const categoryNames =
+            await this.questionListRepository.findCategoryNamesByQuestionListId(
+                questionListId
+            );
+
+        const username =
+            await this.questionListRepository.getUsernameById(userId);
+
+        const questionListContents: QuestionListContentsDto = {
+            id,
+            title,
+            contents,
+            categoryNames,
+            usage,
+            username,
+        };
+
+        return questionListContents;
+    }
+
+    async getMyQuestionLists(userId: number) {
+        const questionLists =
+            await this.questionListRepository.getQuestionListsByUserId(userId);
+
+        const myQuestionLists: MyQuestionListDto[] = [];
+        for (const myQuestionList of questionLists) {
+            const { id, title, isPublic, usage } = myQuestionList;
+            const categoryNames: string[] =
+                await this.questionListRepository.findCategoryNamesByQuestionListId(
+                    id
+                );
+
+            const contents =
+                await this.questionListRepository.getContentsByQuestionListId(
+                    id
+                );
+
+            const questionList: MyQuestionListDto = {
+                id,
+                title,
+                contents,
+                categoryNames,
+                isPublic,
+                usage,
+            };
+            myQuestionLists.push(questionList);
+        }
+        return myQuestionLists;
+    }
+
+    async findCategoriesByNames(categoryNames: string[]) {
+        const categories =
+            await this.questionListRepository.findCategoriesByNames(
+                categoryNames
+            );
+
+        if (categories.length !== categoryNames.length) {
+            throw new Error("Some category names were not found.");
+        }
+
+        return categories;
+    }
+}
diff --git a/backend/src/question-list/question.entity.ts b/backend/src/question-list/question.entity.ts
new file mode 100644
index 00000000..b92b98d4
--- /dev/null
+++ b/backend/src/question-list/question.entity.ts
@@ -0,0 +1,22 @@
+import { Entity, PrimaryGeneratedColumn, Column, ManyToOne } from "typeorm";
+import { QuestionList } from "./question-list.entity";
+
+@Entity()
+export class Question {
+    private static CONTENT_MAX_LEN = 200;
+
+    @PrimaryGeneratedColumn()
+    id: number;
+
+    @Column({ length: Question.CONTENT_MAX_LEN })
+    content: string;
+
+    @Column()
+    index: number;
+
+    @Column()
+    questionListId: number;
+
+    @ManyToOne(() => QuestionList, (questionList) => questionList.questions)
+    questionList: QuestionList;
+}
diff --git a/backend/src/redis/redis.service.spec.ts b/backend/src/redis/redis.service.spec.ts
index 19faa0c1..66a5e277 100644
--- a/backend/src/redis/redis.service.spec.ts
+++ b/backend/src/redis/redis.service.spec.ts
@@ -1,18 +1,251 @@
 import { Test, TestingModule } from "@nestjs/testing";
 import { RedisService } from "./redis.service";
 
+// Mock 함수들 생성
+const mockSet = jest.fn().mockResolvedValue("OK");
+const mockGet = jest.fn();
+const mockTtl = jest.fn();
+const mockExpire = jest.fn();
+const mockHget = jest.fn();
+const mockHset = jest.fn();
+const mockDel = jest.fn();
+
+const mockScan = jest.fn().mockImplementation(() => {
+    return Promise.resolve(["0", ["key1", "key2"]]); // 배열 형태로 반환
+});
+
+const mockMget = jest.fn().mockImplementation(() => {
+    return Promise.resolve(["value1", "value2"]); // 배열 형태로 반환
+});
+
+// Redis 모듈 모킹
+jest.mock("ioredis", () => {
+    return {
+        default: jest.fn().mockImplementation(() => ({
+            set: mockSet,
+            get: mockGet,
+            ttl: mockTtl,
+            expire: mockExpire,
+            scan: mockScan,
+            hget: mockHget,
+            hset: mockHset,
+            del: mockDel,
+            mget: mockMget,
+        })),
+    };
+});
+
 describe("RedisService", () => {
-    let service: RedisService;
+    let redisService: RedisService;
 
     beforeEach(async () => {
         const module: TestingModule = await Test.createTestingModule({
             providers: [RedisService],
         }).compile();
 
-        service = module.get<RedisService>(RedisService);
+        redisService = module.get<RedisService>(RedisService);
+
+        // 각 테스트 전에 모든 mock 함수 초기화
+        jest.clearAllMocks();
+    });
+
+    describe("set", () => {
+        it("문자열 값을 저장해야 한다", async () => {
+            const key = "test-key";
+            const value = "test-value";
+            const ttl = 3600;
+
+            await redisService.set(key, value, ttl);
+
+            expect(mockSet).toHaveBeenCalledWith(key, value, "KEEPTTL");
+            expect(mockExpire).toHaveBeenCalledWith(key, ttl);
+        });
+
+        it("객체를 JSON 문자열로 변환하여 저장해야 한다", async () => {
+            const key = "test-key";
+            const value = { name: "test" };
+            const ttl = 3600;
+
+            await redisService.set(key, value, ttl);
+
+            expect(mockSet).toHaveBeenCalledWith(
+                key,
+                JSON.stringify(value),
+                "KEEPTTL"
+            );
+            expect(mockExpire).toHaveBeenCalledWith(key, ttl);
+        });
+    });
+
+    describe("get", () => {
+        it("저장된 값을 조회해야 한다", async () => {
+            const key = "test-key";
+            const value = "test-value";
+            mockGet.mockResolvedValue(value);
+
+            const result = await redisService.get(key);
+
+            expect(mockGet).toHaveBeenCalledWith(key);
+            expect(result).toBe(value);
+        });
+    });
+
+    describe("getTTL", () => {
+        it("키의 TTL을 반환해야 한다", async () => {
+            const key = "test-key";
+            const ttlValue = 3600;
+            mockTtl.mockResolvedValue(ttlValue);
+
+            const result = await redisService.getTTL(key);
+
+            expect(mockTtl).toHaveBeenCalledWith(key);
+            expect(result).toBe(ttlValue);
+        });
+    });
+
+    describe("getKeys", () => {
+        it("패턴에 맞는 모든 키를 반환해야 한다", async () => {
+            const query = "test*";
+            mockScan
+                .mockResolvedValueOnce(["1", ["key1", "key2"]])
+                .mockResolvedValueOnce(["0", ["key3"]]);
+
+            const result = await redisService.getKeys(query);
+
+            expect(result).toEqual(["key1", "key2", "key3"]);
+            expect(mockScan).toHaveBeenCalledWith(
+                "0",
+                "MATCH",
+                query,
+                "COUNT",
+                "100"
+            );
+        });
+    });
+
+    describe("getHashValueByField", () => {
+        it("해시 필드의 값을 반환해야 한다", async () => {
+            const key = "hash-key";
+            const field = "field1";
+            const value = "value1";
+            mockHget.mockResolvedValue(value);
+
+            const result = await redisService.getHashValueByField(key, field);
+
+            expect(mockHget).toHaveBeenCalledWith(key, field);
+            expect(result).toBe(value);
+        });
     });
 
-    it("should be defined", () => {
-        expect(service).toBeDefined();
+    describe("setHashValueByField", () => {
+        it("해시 필드에 문자열 값을 저장해야 한다", async () => {
+            const key = "hash-key";
+            const field = "field1";
+            const value = "test-value";
+
+            await redisService.setHashValueByField(key, field, value);
+
+            expect(mockHset).toHaveBeenCalledWith(key, field, value);
+        });
+
+        it("해시 필드에 객체를 JSON 문자열로 변환하여 저장해야 한다", async () => {
+            const key = "hash-key";
+            const field = "field1";
+            const value = { test: "value" };
+
+            await redisService.setHashValueByField(key, field, value);
+
+            expect(mockHset).toHaveBeenCalledWith(
+                key,
+                field,
+                JSON.stringify(value)
+            );
+        });
+    });
+
+    describe("delete", () => {
+        it("키들을 삭제해야 한다", async () => {
+            const keys = ["key1", "key2"];
+
+            await redisService.delete(...keys);
+
+            expect(mockDel).toHaveBeenCalledWith(...keys);
+        });
+    });
+
+    describe("getValues", () => {
+        it("키 패턴에 해당하는 모든 값을 반환해야 한다", async () => {
+            const query = "test*";
+            const keys = ["key1", "key2"];
+            const values = ["value1", "value2"];
+
+            mockScan.mockResolvedValueOnce(["0", keys]);
+            mockMget.mockResolvedValue(values);
+
+            const result = await redisService.getValues(query);
+
+            expect(result).toEqual(values);
+        });
+
+        it("키가 없을 경우 null을 반환해야 한다", async () => {
+            const query = "test*";
+            mockScan.mockResolvedValueOnce(["0", []]);
+
+            const result = await redisService.getValues(query);
+
+            expect(result).toBeNull();
+        });
+    });
+
+    describe("getMap", () => {
+        it("객체 타입으로 맵을 반환해야 한다", async () => {
+            const query = "test*";
+            const keys = ["key1", "key2"];
+            const values = ['{"value":1}', '{"value":2}'];
+
+            // getKeys 모킹
+            mockScan.mockResolvedValueOnce(["0", keys]);
+            // getValues를 위한 mget 모킹
+            mockMget.mockResolvedValueOnce(values);
+
+            const result = await redisService.getMap(query);
+
+            expect(result).toEqual({
+                key1: { value: 1 },
+                key2: { value: 2 },
+            });
+        });
+
+        it("primitive 타입으로 맵을 반환해야 한다", async () => {
+            const query = "test*";
+            const keys = ["key1", "key2"];
+            const values = ["value1", "value2"];
+
+            // getKeys 모킹
+            mockScan.mockResolvedValueOnce(["0", keys]);
+            // getValues를 위한 mget 모킹
+            mockMget.mockResolvedValueOnce(values);
+
+            const result = await redisService.getMap(query, "primitive");
+
+            expect(result).toEqual({
+                key1: "value1",
+                key2: "value2",
+            });
+        });
+
+        it("값이 없을 경우 null을 반환해야 한다", async () => {
+            const query = "test*";
+
+            // getKeys가 빈 배열을 반환하도록 모킹
+            mockScan.mockResolvedValueOnce(["0", []]);
+
+            // getValues가 null을 반환하도록 모킹
+            mockMget.mockResolvedValueOnce(null);
+            
+            const result = await redisService.getMap(query);
+
+            expect(result).toBeNull();
+        });
     });
 });
diff --git a/backend/src/room/dto/create-room.dto.ts b/backend/src/room/dto/create-room.dto.ts
index 50f0dc0b..af5d2e9f 100644
--- a/backend/src/room/dto/create-room.dto.ts
+++ b/backend/src/room/dto/create-room.dto.ts
@@ -4,4 +4,5 @@ export interface CreateRoomDto {
     nickname: string;
     socketId: string;
     maxParticipants?: number;
+    questionListId: number;
 }
diff --git a/backend/src/room/room.controller.spec.ts b/backend/src/room/room.controller.spec.ts
index 7536f2ec..51f10620 100644
--- a/backend/src/room/room.controller.spec.ts
+++ b/backend/src/room/room.controller.spec.ts
@@ -1,18 +1,76 @@
 import { Test, TestingModule } from "@nestjs/testing";
 import { RoomController } from "./room.controller";
+import { RoomService } from "./room.service";
 
 describe("RoomController", () => {
     let controller: RoomController;
+    let roomService: RoomService;
+
+    // RoomService Mock 생성
+    const mockRoomService = {
+        getPublicRoom: jest.fn(),
+    };
 
     beforeEach(async () => {
         const module: TestingModule = await Test.createTestingModule({
             controllers: [RoomController],
+            providers: [
+                {
+                    provide: RoomService,
+                    useValue: mockRoomService,
+                },
+            ],
         }).compile();
 
         controller = module.get<RoomController>(RoomController);
+        roomService = module.get<RoomService>(RoomService);
     });
 
-    it("should be defined", () => {
-        expect(controller).toBeDefined();
+    describe("getPublicRooms", () => {
+        it("공개방 목록을 반환해야 한다", async () => {
+            // Given
+            const mockRooms = {
+                room1: {
+                    title: "Room 1",
+                    status: "PUBLIC",
+                    maxParticipants: 5,
+                },
+                room2: {
+                    title: "Room 2",
+                    status: "PUBLIC",
+                    maxParticipants: 3,
+                },
+            };
+            mockRoomService.getPublicRoom.mockResolvedValue(mockRooms);
+
+            // When
+            const result = await controller.getPublicRooms();
+
+            // Then
+            expect(roomService.getPublicRoom).toHaveBeenCalled();
+            expect(result).toEqual(mockRooms);
+        });
+
+        it("빈 방 목록을 반환해야 한다", async () => {
+            // Given
+            const mockEmptyRooms = {};
+            mockRoomService.getPublicRoom.mockResolvedValue(mockEmptyRooms);
+
+            // When
+            const result = await controller.getPublicRooms();
+
+            // Then
+            expect(roomService.getPublicRoom).toHaveBeenCalled();
+            expect(result).toEqual({});
+        });
+
+        it("서비스 에러 발생 시 예외를 던져야 한다", async () => {
+            // Given
+            const error = new Error("Service error");
+            mockRoomService.getPublicRoom.mockRejectedValue(error);
+
+            // When & Then
+            await expect(controller.getPublicRooms()).rejects.toThrow(error);
+        });
     });
 });
diff --git a/backend/src/room/room.gateway.spec.ts b/backend/src/room/room.gateway.spec.ts
index 446b302b..52ab83da 100644
--- a/backend/src/room/room.gateway.spec.ts
+++ b/backend/src/room/room.gateway.spec.ts
@@ -1,18 +1,176 @@
 import { Test, TestingModule } from "@nestjs/testing";
 import { RoomGateway } from "./room.gateway";
+import { RoomService } from "./room.service";
 
 describe("RoomGateway", () => {
     let gateway: RoomGateway;
+    let roomService: RoomService;
+
+    // Mock Socket.io 서버와 클라이언트
+    let mockServer: any;
+    let mockClient: any;
 
     beforeEach(async () => {
+        // Mock Service 생성
+        const mockRoomService = {
+            createRoom: jest.fn(),
+            joinRoom: jest.fn(),
+            getRoomId: jest.fn(),
+            checkHost: jest.fn(),
+            leaveRoom: jest.fn(),
+            deleteRoom: jest.fn(),
+            delegateHost: jest.fn(),
+            finishRoom: jest.fn(),
+            checkAvailable: jest.fn(),
+            getRoomMemberConnection: jest.fn(),
+        };
+
         const module: TestingModule = await Test.createTestingModule({
-            providers: [RoomGateway],
+            providers: [
+                RoomGateway,
+                {
+                    provide: RoomService,
+                    useValue: mockRoomService,
+                },
+            ],
         }).compile();
 
         gateway = module.get<RoomGateway>(RoomGateway);
+        roomService = module.get<RoomService>(RoomService);
+
+        // Mock Socket.io 서버 설정
+        mockServer = {
+            to: jest.fn().mockReturnThis(),
+            emit: jest.fn(),
+        };
+        gateway.server = mockServer as any;
+
+        // Mock 클라이언트 설정
+        mockClient = {
+            id: "test-client-id",
+            join: jest.fn(),
+            emit: jest.fn(),
+        };
+    });
+
+    describe("handleCreateRoom", () => {
+        it("방 생성 성공시 이벤트를 발생시켜야 한다", async () => {
+            const createRoomData = {
+                title: "Test Room",
+                nickname: "Test User",
+                status: "PUBLIC",
+                maxParticipants: 5,
+            };
+
+            const mockRoomData = {
+                roomId: "test-room-id",
+                roomMetadata: {
+                    title: createRoomData.title,
+                    status: createRoomData.status,
+                    maxParticipants: createRoomData.maxParticipants,
+                },
+            };
+
+            roomService.createRoom = jest.fn().mockResolvedValue(mockRoomData);
+
+            await gateway.handleCreateRoom(mockClient, createRoomData);
+
+            expect(mockClient.join).toHaveBeenCalledWith(mockRoomData.roomId);
+            expect(mockServer.to).toHaveBeenCalledWith(mockRoomData.roomId);
+            expect(mockServer.emit).toHaveBeenCalledWith(
+                "room_created",
+                mockRoomData
+            );
+        });
     });
 
-    it("should be defined", () => {
-        expect(gateway).toBeDefined();
+    describe("handleJoinRoom", () => {
+        it("방이 가득 찼을 경우 ROOM_FULL 이벤트를 발생시켜야 한다", async () => {
+            const joinRoomData = {
+                roomId: "test-room-id",
+                nickname: "Test User",
+            };
+
+            roomService.checkAvailable = jest.fn().mockResolvedValue(false);
+
+            await gateway.handleJoinRoom(mockClient, joinRoomData);
+
+            expect(mockClient.emit).toHaveBeenCalledWith("room_full");
+        });
+
+        it("방 참가 성공시 ALL_USERS 이벤트를 발생시켜야 한다", async () => {
+            const joinRoomData = {
+                roomId: "test-room-id",
+                nickname: "Test User",
+            };
+
+            const mockRoom = {
+                id: "test-room-id",
+                title: "Test Room",
+            };
+
+            const mockUsers = {
+                "user-1": { nickname: "User 1" },
+            };
+
+            roomService.checkAvailable = jest.fn().mockResolvedValue(true);
+            roomService.joinRoom = jest.fn().mockResolvedValue(mockRoom);
+            roomService.getRoomMemberConnection = jest
+                .fn()
+                .mockResolvedValue(mockUsers);
+
+            await gateway.handleJoinRoom(mockClient, joinRoomData);
+
+            expect(mockClient.join).toHaveBeenCalledWith(joinRoomData.roomId);
+            expect(mockClient.emit).toHaveBeenCalledWith("all_users", {
+                roomMetadata: mockRoom,
+                users: mockUsers,
+            });
+        });
+    });
+
+    describe("handleLeaveRoom", () => {
+        it("마지막 사용자가 나갈 경우 방을 삭제해야 한다", async () => {
+            roomService.getRoomId = jest.fn().mockResolvedValue("test-room-id");
+            roomService.checkHost = jest.fn().mockResolvedValue(false);
+            roomService.leaveRoom = jest.fn().mockResolvedValue(0);
+
+            await gateway.handleLeaveRoom(mockClient);
+
+            expect(roomService.deleteRoom).toHaveBeenCalled();
+        });
+
+        it("호스트가 나갈 경우 새로운 호스트를 지정해야 한다", async () => {
+            const mockRoomId = "test-room-id";
+            const mockNewHost = {
+                socketId: "new-host-id",
+                nickname: "New Host",
+            };
+
+            roomService.getRoomId = jest.fn().mockResolvedValue(mockRoomId);
+            roomService.checkHost = jest.fn().mockResolvedValue(true);
+            roomService.leaveRoom = jest.fn().mockResolvedValue(1);
+            roomService.delegateHost = jest.fn().mockResolvedValue(mockNewHost);
+
+            await gateway.handleLeaveRoom(mockClient);
+
+            expect(mockServer.to).toHaveBeenCalledWith(mockRoomId);
+            expect(mockServer.emit).toHaveBeenCalledWith("master_changed", {
+                masterSocketId: mockNewHost.socketId,
+                masterNickname: mockNewHost.nickname,
+            });
+        });
+    });
+
+    describe("handleFinishRoom", () => {
+        it("방 종료시 ROOM_FINISHED 이벤트를 발생시켜야 한다", async () => {
+            const mockRoomId = "test-room-id";
+            roomService.finishRoom = jest.fn().mockResolvedValue(mockRoomId);
+
+            await gateway.handleFinishRoom(mockClient);
+
+            expect(mockServer.to).toHaveBeenCalledWith(mockRoomId);
+            expect(mockServer.emit).toHaveBeenCalledWith("room_finished");
+        });
     });
 });
diff --git a/backend/src/room/room.gateway.ts b/backend/src/room/room.gateway.ts
index acdbda46..093d2857 100644
--- a/backend/src/room/room.gateway.ts
+++ b/backend/src/room/room.gateway.ts
@@ -51,7 +51,8 @@ export class RoomGateway implements OnGatewayConnection, OnGatewayDisconnect {
 
     @SubscribeMessage(EVENT_NAME.CREATE_ROOM)
     async handleCreateRoom(client: Socket, data: any) {
-        const { title, nickname, status, maxParticipants } = data; // unknown 으로 받고, Dto와 Pipe로 검증받기
+        const { title, nickname, status, maxParticipants, questionListId } =
+            data; // unknown 으로 받고, Dto와 Pipe로 검증받기
         try {
             const roomData = await this.roomService.createRoom({
                 title,
@@ -59,6 +60,7 @@ export class RoomGateway implements OnGatewayConnection, OnGatewayDisconnect {
                 socketId: client.id,
                 nickname,
                 maxParticipants,
+                questionListId,
             });
 
             client.join(roomData.roomId);
diff --git a/backend/src/room/room.model.ts b/backend/src/room/room.model.ts
index 1db80a32..fd834d3a 100644
--- a/backend/src/room/room.model.ts
+++ b/backend/src/room/room.model.ts
@@ -6,6 +6,7 @@ export interface Room {
     maxParticipants: number;
     createdAt: number;
     host: string;
+    questionListId;
 }
 
 export interface MemberConnection {
diff --git a/backend/src/room/room.module.ts b/backend/src/room/room.module.ts
index 4bf3e9c1..d775a309 100644
--- a/backend/src/room/room.module.ts
+++ b/backend/src/room/room.module.ts
@@ -4,8 +4,10 @@ import { RoomGateway } from "./room.gateway";
 import { RedisService } from "../redis/redis.service";
 import { RoomRepository } from "./room.repository";
 import { RoomController } from "./room.controller";
+import { QuestionListModule } from "../question-list/question-list.module";
 
 @Module({
+    imports: [QuestionListModule],
     providers: [RoomService, RoomGateway, RedisService, RoomRepository],
     controllers: [RoomController],
 })
diff --git a/backend/src/room/room.repository.ts b/backend/src/room/room.repository.ts
index 52c0ecfb..e7747ac5 100644
--- a/backend/src/room/room.repository.ts
+++ b/backend/src/room/room.repository.ts
@@ -15,9 +15,8 @@ export class RoomRepository {
 
     async getAllRoom(): Promise<Record<string, Room>> {
         const redisMap = await this.redisService.getMap("room:*");
-        console.log(redisMap);
 
-        return Object.entries(redisMap).reduce(
+        return Object.entries(redisMap ?? {}).reduce(
             (acc, [roomId, room]) => {
                 acc[roomId.split(":")[1]] = room as Room;
                 return acc;
@@ -115,7 +114,8 @@ export class RoomRepository {
     }
 
     async createRoom(dto: CreateRoomDto) {
-        const { title, socketId, maxParticipants, status } = dto;
+        const { title, socketId, maxParticipants, status, questionListId } =
+            dto;
         const roomId = generateRoomId();
 
         await this.redisService.set(
@@ -126,6 +126,7 @@ export class RoomRepository {
                 host: socketId,
                 maxParticipants,
                 status,
+                questionListId,
             } as Room,
             6 * HOUR
         );
diff --git a/backend/src/room/room.service.spec.ts b/backend/src/room/room.service.spec.ts
index 0ab7dff4..fe752666 100644
--- a/backend/src/room/room.service.spec.ts
+++ b/backend/src/room/room.service.spec.ts
@@ -1,18 +1,135 @@
 import { Test, TestingModule } from "@nestjs/testing";
 import { RoomService } from "./room.service";
+import { RoomRepository } from "./room.repository";
+import { CreateRoomDto } from "./dto/create-room.dto";
 
 describe("RoomService", () => {
-    let service: RoomService;
+    let roomService: RoomService;
+
+    // Mock Repository 생성
+    const mockRoomRepository = {
+        getAllRoom: jest.fn(),
+        findMyRoomId: jest.fn(),
+        createRoom: jest.fn(),
+        addUser: jest.fn(),
+        getRoomById: jest.fn(),
+        getRoomMemberConnection: jest.fn(),
+        checkHost: jest.fn(),
+        deleteUser: jest.fn(),
+        getRoomMemberCount: jest.fn(),
+        getNewHost: jest.fn(),
+        setNewHost: jest.fn(),
+        deleteRoom: jest.fn(),
+    };
 
     beforeEach(async () => {
         const module: TestingModule = await Test.createTestingModule({
-            providers: [RoomService],
+            providers: [
+                RoomService,
+                {
+                    provide: RoomRepository,
+                    useValue: mockRoomRepository,
+                },
+            ],
         }).compile();
 
-        service = module.get<RoomService>(RoomService);
+        roomService = module.get<RoomService>(RoomService);
+    });
+
+    describe("getPublicRoom", () => {
+        it("공개방만 반환해야 한다", async () => {
+            const mockRooms = {
+                room1: { status: "PUBLIC", title: "Room 1" },
+                room2: { status: "PRIVATE", title: "Room 2" },
+            };
+            mockRoomRepository.getAllRoom.mockResolvedValue(mockRooms);
+
+            const result = await roomService.getPublicRoom();
+
+            expect(result.room1).toBeDefined();
+            expect(result.room2).toBeUndefined();
+        });
+    });
+
+    describe("createRoom", () => {
+        it("새로운 방을 생성해야 한다", async () => {
+            const createRoomDto: CreateRoomDto = {
+                status: "PUBLIC",
+                title: "Test Room",
+                socketId: "socket-123",
+                nickname: "User1",
+                questionListId: 1,
+            };
+            const mockRoomId = "room-123";
+
+            mockRoomRepository.createRoom.mockResolvedValue(mockRoomId);
+
+            const result = await roomService.createRoom(createRoomDto);
+
+            expect(result.roomId).toBe(mockRoomId);
+            expect(result.roomMetadata.title).toBe(createRoomDto.title);
+            expect(mockRoomRepository.addUser).toHaveBeenCalled();
+        });
     });
 
-    it("should be defined", () => {
-        expect(service).toBeDefined();
+    describe("joinRoom", () => {
+        it("존재하는 방에 참가할 수 있어야 한다", async () => {
+            const mockRoom = { id: "room-123", title: "Test Room" };
+            mockRoomRepository.getRoomById.mockResolvedValue(mockRoom);
+
+            const result = await roomService.joinRoom(
+                "socket-123",
+                "room-123",
+                "User1"
+            );
+
+            expect(result).toBe(mockRoom);
+            expect(mockRoomRepository.addUser).toHaveBeenCalled();
+        });
+
+        it("존재하지 않는 방에 참가할 수 없어야 한다", async () => {
+            mockRoomRepository.getRoomById.mockResolvedValue(null);
+
+            const result = await roomService.joinRoom(
+                "socket-123",
+                "invalid-room",
+                "User1"
+            );
+
+            expect(result).toBeNull();
+        });
+    });
+
+    describe("leaveRoom", () => {
+        it("방을 떠날 수 있어야 한다", async () => {
+            const mockRoomId = "room-123";
+            mockRoomRepository.findMyRoomId.mockResolvedValue(mockRoomId);
+            mockRoomRepository.getRoomMemberCount.mockResolvedValue(2);
+
+            const result = await roomService.leaveRoom("socket-123");
+
+            expect(mockRoomRepository.deleteUser).toHaveBeenCalled();
+            expect(result).toBe(2);
+        });
+    });
+
+    describe("getRoomMemberConnection", () => {
+        it("자신을 제외한 멤버 연결 정보를 반환해야 한다", async () => {
+            const mockConnections = {
+                "socket-123": { nickname: "User1" },
+                "socket-456": { nickname: "User2" },
+            };
+            mockRoomRepository.getRoomMemberConnection.mockResolvedValue(
+                mockConnections
+            );
+
+            const result = await roomService.getRoomMemberConnection(
+                "socket-123",
+                "room-123"
+            );
+
+            expect(result["socket-123"]).toBeUndefined();
+            expect(result["socket-456"]).toBeDefined();
+        });
     });
 });
diff --git a/backend/src/room/room.service.ts b/backend/src/room/room.service.ts
index dc7a413e..20b001c4 100644
--- a/backend/src/room/room.service.ts
+++ b/backend/src/room/room.service.ts
@@ -2,6 +2,9 @@ import { Injectable } from "@nestjs/common";
 import { RoomRepository } from "./room.repository";
 import { CreateRoomDto } from "./dto/create-room.dto";
 import { MemberConnection } from "./room.model";
+import { QuestionListRepository } from "../question-list/question-list.repository";
+import { InjectRepository } from "@nestjs/typeorm";
+import { QuestionList } from "../question-list/question-list.entity";
 
 /**
  * 비즈니스 로직 처리를 좀 더 하게 하기 위한 클래스로 설정
@@ -12,15 +15,32 @@ import { MemberConnection } from "./room.model";
 export class RoomService {
     private static MAX_MEMBERS = 5;
 
-    constructor(private readonly roomRepository: RoomRepository) {}
+    constructor(
+        private readonly roomRepository: RoomRepository,
+        private readonly questionListRepository: QuestionListRepository
+    ) {}
 
     async getPublicRoom() {
         const rooms = await this.roomRepository.getAllRoom();
-
-        Object.keys(rooms).forEach((roomId) => {
-            if (rooms[roomId].status === "PRIVATE") rooms[roomId] = undefined;
+        const roomList = [];
+        Object.entries(rooms).forEach(([roomId, roomData]) => {
+            if (roomData.status === "PRIVATE") return;
+            roomList.push({
+                id: roomId,
+                title: roomData.title,
+                category: "프론트엔드",
+                inProgress: false,
+                host: {
+                    nickname: "방장",
+                    socketId: roomData.host,
+                },
+                participant: 1,
+                maxParticipant: roomData.maxParticipants,
+                createAt: roomData.createdAt,
+            });
         });
-        return rooms;
+
+        return roomList.sort((a, b) => b.createAt - a.createAt);
     }
 
     async getRoomId(socketId: string) {
@@ -28,15 +48,29 @@ export class RoomService {
     }
 
     async createRoom(dto: CreateRoomDto) {
-        const { title, status, maxParticipants, socketId, nickname } = dto;
+        const {
+            title,
+            status,
+            maxParticipants,
+            socketId,
+            nickname,
+            questionListId,
+        } = dto;
         const roomId = await this.roomRepository.createRoom({
             title,
             status: status ?? "PUBLIC",
             maxParticipants: maxParticipants ?? RoomService.MAX_MEMBERS,
             socketId,
             nickname: nickname ?? "Master",
+            questionListId,
         });
+
         await this.roomRepository.addUser(roomId, dto.socketId, dto.nickname);
+        const questionListContents =
+            await this.questionListRepository.getContentsByQuestionListId(
+                questionListId
+            );
+
         return {
             roomId,
             roomMetadata: {
@@ -45,6 +79,7 @@ export class RoomService {
                 maxParticipants: maxParticipants ?? RoomService.MAX_MEMBERS,
                 host: socketId,
                 nickname: nickname ?? "Master",
+                questionListContents,
             },
         };
     }
diff --git a/backend/src/user/dto/create-user.dto.ts b/backend/src/user/dto/create-user.dto.ts
new file mode 100644
index 00000000..61c14de2
--- /dev/null
+++ b/backend/src/user/dto/create-user.dto.ts
@@ -0,0 +1,6 @@
+export interface CreateUserDto {
+    loginId?: string;
+    passwordHash?: string;
+    githubId?: number;
+    username: string;
+}
diff --git a/backend/src/user/dto/user.dto.ts b/backend/src/user/dto/user.dto.ts
new file mode 100644
index 00000000..002ce6f9
--- /dev/null
+++ b/backend/src/user/dto/user.dto.ts
@@ -0,0 +1,7 @@
+export interface UserDto {
+    loginId?: string;
+    passwordHash?: string;
+    githubId?: number;
+    username: string;
+    refreshToken: string;
+}
diff --git a/backend/src/user/user.entity.ts b/backend/src/user/user.entity.ts
new file mode 100644
index 00000000..6fbcc9e1
--- /dev/null
+++ b/backend/src/user/user.entity.ts
@@ -0,0 +1,31 @@
+import { Entity, PrimaryGeneratedColumn, Column, OneToMany } from "typeorm";
+import { QuestionList } from "../question-list/question-list.entity";
+
+@Entity()
+export class User {
+    private static LOGIN_ID_MAX_LEN = 20;
+    private static PASSWORD_HASH_MAX_LEN = 256;
+    private static USERNAME_MAX_LEN = 20;
+    private static REFRESH_TOKEN_MAX_LEN = 200;
+
+    @PrimaryGeneratedColumn()
+    id: number;
+
+    @Column({ length: User.LOGIN_ID_MAX_LEN, nullable: true, unique: true })
+    loginId: string;
+
+    @Column({ length: User.PASSWORD_HASH_MAX_LEN, nullable: true })
+    passwordHash: string;
+
+    @Column({ length: User.USERNAME_MAX_LEN, unique: true })
+    username: string;
+
+    @Column({ length: User.REFRESH_TOKEN_MAX_LEN, nullable: true })
+    refreshToken: string;
+
+    @Column({ nullable: true, unique: true })
+    githubId: number;
+
+    @OneToMany(() => QuestionList, (questionList) => questionList.user)
+    questionLists: QuestionList[];
+}
diff --git a/backend/src/user/user.module.ts b/backend/src/user/user.module.ts
new file mode 100644
index 00000000..196852ba
--- /dev/null
+++ b/backend/src/user/user.module.ts
@@ -0,0 +1,7 @@
+import { Module } from "@nestjs/common";
+import { UserRepository } from "./user.repository";
+
+@Module({
+    providers: [UserRepository],
+})
+export class UserModule {}
diff --git a/backend/src/user/user.repository.ts b/backend/src/user/user.repository.ts
new file mode 100644
index 00000000..88a56c6b
--- /dev/null
+++ b/backend/src/user/user.repository.ts
@@ -0,0 +1,34 @@
+import { Injectable } from "@nestjs/common";
+import { User } from "./user.entity";
+import { DataSource } from "typeorm";
+import { CreateUserDto } from "./dto/create-user.dto";
+import { UserDto } from "./dto/user.dto";
+
+@Injectable()
+export class UserRepository {
+    constructor(private dataSource: DataSource) {}
+
+    getUserByGithubId(githubId: number) {
+        return this.dataSource
+            .getRepository(User)
+            .createQueryBuilder("user")
+            .where("user.github_id = :id", { id: githubId })
+            .getOne();
+    }
+
+    getUserByUserId(userId: number) {
+        return this.dataSource
+            .getRepository(User)
+            .createQueryBuilder("user")
+            .where("user.id = :id", { id: userId })
+            .getOne();
+    }
+
+    createUser(createUserDto: CreateUserDto) {
+        return this.dataSource.getRepository(User).save(createUserDto);
+    }
+
+    updateUser(userDto: UserDto) {
+        return this.dataSource.getRepository(User).save(userDto);
+    }
+}
diff --git a/backend/src/utils/time.ts b/backend/src/utils/time.ts
index 655f5325..27ed6fd1 100644
--- a/backend/src/utils/time.ts
+++ b/backend/src/utils/time.ts
@@ -1,3 +1,4 @@
 export const SEC = 1;
 export const MIN = 60 * SEC;
 export const HOUR = 60 * MIN;
+export const DAY = 24 * HOUR;
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 00000000..9370a4b2
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,26 @@
+version: '3'
+
+services:
+  mysql:
+    image: mysql:latest
+    container_name: mysql
+    ports:
+      - '3306:3306'
+    environment:
+      MYSQL_ROOT_PASSWORD: dbcadmium
+      MYSQL_DATABASE: preview
+      TZ: Asia/Seoul
+    command:
+      - --character-set-server=utf8mb4
+      - --collation-server=utf8mb4_unicode_ci
+    volumes:
+      - ./mysql-data:/var/lib/mysql
+
+  redis:
+    image: redis:latest
+    container_name: redis
+    ports:
+      - '6379:6379'
+    command: redis-server --port 6379
+    volumes:
+      - ./redis-data:/data
\ No newline at end of file
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 50c8dda2..1a30e0e9 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 .env
+test
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index e4b78eae..234dd5e9 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>면접 스터디 Preview</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/jest.config.ts b/frontend/jest.config.ts
new file mode 100644
index 00000000..02175d0e
--- /dev/null
+++ b/frontend/jest.config.ts
@@ -0,0 +1,23 @@
+import type { Config } from "jest";
+
+const config: Config = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "^@components/(.*)$": "<rootDir>/src/components/$1",
+    "^@hooks/(.*)$": "<rootDir>/src/hooks/$1",
+    "^@stores/(.*)$": "<rootDir>/src/stores/$1",
+  },
+  transform: {
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        tsconfig: "tsconfig.test.json",
+      },
+    ],
+  },
+};
+
+export default config;
diff --git a/frontend/package.json b/frontend/package.json
index 943e72f1..8861278a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,19 +9,31 @@
     "lint": "eslint .",
     "format": "prettier --write \"**/*.{ts,tsx}\"",
     "preview": "vite preview",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@dotlottie/react-player": "^1.6.19",
+    "@tanstack/react-query": "^5.60.6",
+    "@tanstack/react-query-devtools": "^5.60.6",
+    "@types/react-lottie": "^1.2.10",
     "@types/socket.io-client": "^3.0.0",
+    "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-lottie": "^1.2.7",
     "react-router-dom": "^6.27.0",
     "socket.io-client": "^4.8.1",
     "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^15.0.6",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.14",
     "@types/node": "^20.3.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -31,8 +43,11 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.14",
+    "ts-jest": "^29.1.0",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10",
diff --git a/frontend/public/assets/loadingIndicator.lottie b/frontend/public/assets/loadingIndicator.lottie
new file mode 100644
index 00000000..4c8f1a12
Binary files /dev/null and b/frontend/public/assets/loadingIndicator.lottie differ
diff --git a/frontend/public/assets/noondeumyum.lottie b/frontend/public/assets/noondeumyum.lottie
new file mode 100644
index 00000000..d83a4ffc
Binary files /dev/null and b/frontend/public/assets/noondeumyum.lottie differ
diff --git a/frontend/public/assets/snowman.lottie b/frontend/public/assets/snowman.lottie
new file mode 100644
index 00000000..733ebc21
Binary files /dev/null and b/frontend/public/assets/snowman.lottie differ
diff --git a/frontend/src/api/questions/create.ts b/frontend/src/api/questions/create.ts
new file mode 100644
index 00000000..65fe0487
--- /dev/null
+++ b/frontend/src/api/questions/create.ts
@@ -0,0 +1,14 @@
+import axios from "axios";
+
+interface QuestionListRequest {
+  title: string;
+  contents: string[];
+  categoryNames: string[];
+  isPublic: boolean;
+}
+
+export const createQuestionList = async (data: QuestionListRequest) => {
+  const response = await axios.post("/api/question-list", data);
+
+  return response.data;
+};
diff --git a/frontend/src/api/questions/getQuestion.ts b/frontend/src/api/questions/getQuestion.ts
new file mode 100644
index 00000000..e112e50e
--- /dev/null
+++ b/frontend/src/api/questions/getQuestion.ts
@@ -0,0 +1,15 @@
+import axios from "axios";
+
+const fetchQuestion = async (questionListId: number) => {
+  const { data } = await axios.post("/api/question-list/contents", {
+    questionListId
+  });
+
+  if (!data.success) {
+    throw new Error(data.message);
+  }
+
+  return data.data.questionListContents;
+};
+
+export default fetchQuestion;
diff --git a/frontend/src/components/common/AccessButton/index.tsx b/frontend/src/components/common/AccessButton/index.tsx
new file mode 100644
index 00000000..ee1eb337
--- /dev/null
+++ b/frontend/src/components/common/AccessButton/index.tsx
@@ -0,0 +1,35 @@
+interface AccessProps {
+  access: string;
+  onClick: (access: "PUBLIC" | "PRIVATE") => void;
+}
+
+const AccessButton = ({ access, onClick }: AccessProps) => {
+  return (
+    <div className="flex w-full h-11">
+      <button
+        className={`flex-grow rounded-l-custom-m border 
+          ${
+            access === "PUBLIC"
+              ? "text-semibold-r text-green-700 border-2 border-green-200 bg-green-50"
+              : "text-medium-m text-gray-400 border-r-0"
+          }`}
+        onClick={() => onClick("PUBLIC")}
+      >
+        공개
+      </button>
+      <button
+        className={`flex-grow rounded-r-custom-m border
+          ${
+            access === "PRIVATE"
+              ? "text-semibold-r text-green-700 border-2 border-green-200 bg-green-50"
+              : "text-medium-m text-gray-400 border-l-0"
+          }`}
+        onClick={() => onClick("PRIVATE")}
+      >
+        비공개
+      </button>
+    </div>
+  );
+};
+
+export default AccessButton;
diff --git a/frontend/src/components/common/CategorySelector/index.tsx b/frontend/src/components/common/CategorySelector/index.tsx
new file mode 100644
index 00000000..84b524a7
--- /dev/null
+++ b/frontend/src/components/common/CategorySelector/index.tsx
@@ -0,0 +1,48 @@
+import { IoChevronDownSharp } from "react-icons/io5";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface CategoryProps {
+  title: string;
+  options: Option[];
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const CategorySelector = ({
+  title,
+  options,
+  value,
+  onChange,
+}: CategoryProps) => {
+  const changeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(event.target.value);
+  };
+
+  return (
+    <div className="relative">
+      <select
+        className="text-medium-m w-full h-11 pl-4 border-custom-s border-gray-100 rounded-custom-m appearance-none"
+        value={value}
+        onChange={changeHandler}
+      >
+        <option value="" disabled>
+          {title}
+        </option>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <span className="absolute top-1/2 -translate-y-1/2 right-3 pointer-events-none">
+        <IoChevronDownSharp className="w-5 h-5 text-gray-400" />
+      </span>
+    </div>
+  );
+};
+
+export default CategorySelector;
diff --git a/frontend/src/components/common/LoadingIndicator.tsx b/frontend/src/components/common/LoadingIndicator.tsx
new file mode 100644
index 00000000..306da5d1
--- /dev/null
+++ b/frontend/src/components/common/LoadingIndicator.tsx
@@ -0,0 +1,26 @@
+import { DotLottiePlayer } from "@dotlottie/react-player";
+
+interface LoadingIndicator {
+  loadingState: boolean;
+  text?: string;
+}
+
+const LoadingIndicator = ({ loadingState, text }: LoadingIndicator) => {
+  return (
+    loadingState && (
+      <div className={"w-full flex flex-col items-center "}>
+        <DotLottiePlayer
+          src={"/assets/loadingIndicator.lottie"}
+          autoplay={true}
+          loop={true}
+          style={{ width: 200, height: 200 }}
+        />
+        {text && (
+          <p className={"animate-pulse text-xl text-gray-400"}>{text}</p>
+        )}
+      </div>
+    )
+  );
+};
+
+export default LoadingIndicator;
diff --git a/frontend/src/components/common/SearchBar.tsx b/frontend/src/components/common/SearchBar.tsx
index ad104517..3b14ceac 100644
--- a/frontend/src/components/common/SearchBar.tsx
+++ b/frontend/src/components/common/SearchBar.tsx
@@ -5,11 +5,11 @@ interface Props {
 
 const SearchBar = ({ text }: Props) => {
   return (
-    <div className="relative w-full mb-6 h-11 flex items-center text-gray-400">
+    <div className="relative w-full  h-11 flex items-center text-gray-400">
       <IoIosSearch className="absolute left-4 w-5 h-5" />
       <input
         className={
-          "rounded-custom-m pl-10 px-4 w-full h-full border border-gray-200 text-medium-r"
+          "rounded-custom-m pl-10 px-4 w-full h-full border border-gray-200 text-medium-m"
         }
         type="text"
         placeholder={text}
diff --git a/frontend/src/components/common/Select.tsx b/frontend/src/components/common/Select.tsx
new file mode 100644
index 00000000..b09afaba
--- /dev/null
+++ b/frontend/src/components/common/Select.tsx
@@ -0,0 +1,30 @@
+import { IoChevronDownSharp } from "react-icons/io5";
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+interface SelectProps {
+  options: Option[];
+  backgroundColor?: string;
+}
+
+const Select = ({ options, backgroundColor = "bg-green-200" }: SelectProps) => {
+  return (
+    <div className="relative inline-block items-center">
+      <select
+        className={`rounded-custom-m ${backgroundColor} text-semibold-r text-gray-white appearance-none pl-5 pr-11 h-full`}
+      >
+        {options.map((option) => (
+          <option key={option.value}>{option.label}</option>
+        ))}
+      </select>
+      <span className="absolute top-1/2 -translate-y-1/2 right-3 pointer-events-none">
+        <IoChevronDownSharp className="w-5 h-5 text-gray-white" />
+      </span>
+    </div>
+  );
+};
+
+export default Select;
diff --git a/frontend/src/components/sessions/create/SelectTitle.tsx b/frontend/src/components/common/SelectTitle.tsx
similarity index 66%
rename from frontend/src/components/sessions/create/SelectTitle.tsx
rename to frontend/src/components/common/SelectTitle.tsx
index 026e61d0..0eb48e9f 100644
--- a/frontend/src/components/sessions/create/SelectTitle.tsx
+++ b/frontend/src/components/common/SelectTitle.tsx
@@ -3,7 +3,7 @@ interface Props {
 }
 
 const SelectTitle = ({ title }: Props) => {
-  return <p className="text-semibold-l mb-3">{title}</p>;
+  return <p className="text-semibold-m mb-3">{title}</p>;
 };
 
 export default SelectTitle;
diff --git a/frontend/src/components/common/Sidebar.tsx b/frontend/src/components/common/Sidebar.tsx
new file mode 100644
index 00000000..66b00b0c
--- /dev/null
+++ b/frontend/src/components/common/Sidebar.tsx
@@ -0,0 +1,134 @@
+import { Link } from "react-router-dom";
+import { ReactElement, useEffect, useState } from "react";
+import { FaClipboardList, FaLayerGroup } from "react-icons/fa";
+import { MdDarkMode, MdLightMode, MdLogout } from "react-icons/md";
+import { IoPersonSharp, IoHomeSharp } from "react-icons/io5";
+import { FaGithub } from "react-icons/fa6";
+import useTheme from "@hooks/useTheme.ts";
+
+const Sidebar = () => {
+  const routes = [
+    {
+      path: "/",
+      label: "홈",
+      icon: <IoHomeSharp />,
+    },
+    {
+      path: "/questions",
+      label: "질문지 리스트",
+      icon: <FaClipboardList />,
+    },
+    {
+      path: "/sessions",
+      label: "스터디 세션 목록",
+      icon: <FaLayerGroup />,
+    },
+    {
+      path: "/mypage",
+      label: "마이페이지",
+      icon: <IoPersonSharp />,
+    },
+    {
+      path: "/logout",
+      label: "로그아웃",
+      icon: <MdLogout />,
+    },
+  ];
+
+  const [selected, setSelected] = useState<string>("");
+  const { theme, toggleTheme } = useTheme();
+
+  useEffect(() => {
+    setSelected(window.location.pathname);
+  }, []);
+  return (
+    <nav
+      className={
+        "min-w-17.5 w-17.5 h-screen flex flex-col border-r-custom-s gap-1.5 justify-between overflow-y-hidden bg-white transition-colors dark:bg-gray-black dark:border-r-gray-400"
+      }
+    >
+      <div>
+        <header
+          className={
+            "text-green-400 text-5xl text-center py-7 font-bold hover:tracking-widest transition-all duration-700 font-raleway dark:text-green-100"
+          }
+        >
+          Preview
+        </header>
+        <hr className={"mx-4 dark:border-gray-400"} />
+        <ul
+          className={"flex flex-col gap-2 items-center mx-2 my-2 p-2"}
+          aria-label={"사이드바 링크 리스트"}
+        >
+          {routes.map((route) => {
+            return (
+              <SidebarMenu
+                key={route.path}
+                path={route.path}
+                label={route.label}
+                icon={route.icon}
+                isSelected={selected === route.path}
+              />
+            );
+          })}
+        </ul>
+      </div>
+      <div className={"pb-4 px-6 inline-flex items-center justify-between"}>
+        <a
+          className={
+            "text-medium-m dark:text-white text-black hover:text-gray-500"
+          }
+          href={"https://github.com/boostcampwm-2024/web27-Preview"}
+          aria-label={"리포지토리 링크"}
+          target={"_blank"}
+        >
+          <span className={"inline-flex items-center gap-1"}>
+            <FaGithub /> BOOSKIT
+          </span>
+        </a>
+        <button
+          onClick={toggleTheme}
+          className={
+            "text-xl dark:bg-gray-100 dark:text-gray-black border border-gray-200 rounded-full p-2 dark:border-gray-200 hover:bg-gray-200/80 dark:hover:bg-gray-200/80  transition-colors"
+          }
+          aria-roledescription={"라이트모드와 다크모드 간 전환 버튼"}
+          aria-label={"테마 변경버튼"}
+        >
+          {theme === "light" ? <MdLightMode /> : <MdDarkMode />}
+        </button>
+      </div>
+    </nav>
+  );
+};
+
+interface SidebarMenuProps {
+  path: string;
+  label: string;
+  icon?: ReactElement;
+  isSelected?: boolean;
+}
+
+const SidebarMenu = ({
+  path,
+  label,
+  icon,
+  isSelected = false,
+}: SidebarMenuProps) => {
+  const activeClass = isSelected
+    ? "bg-green-100 dark:text-gray-black text-white text-semibold-m"
+    : "bg-transparent dark:text-white text-gray-black text-medium-l transition-color duration-300 hover:bg-gray-200/30";
+
+  return (
+    <li
+      className={`${activeClass} flex items-center flex-nowrap text-nowrap px-4 p-2 w-full rounded-lg cursor-pointer`}
+      aria-label={label + "(으)로 이동하는 버튼"}
+    >
+      <Link className={"inline-flex gap-3 items-center w-full"} to={path}>
+        {icon}
+        <span>{label}</span>
+      </Link>
+    </li>
+  );
+};
+
+export default Sidebar;
diff --git a/frontend/src/components/common/TitleInput/index.tsx b/frontend/src/components/common/TitleInput/index.tsx
new file mode 100644
index 00000000..7355fe32
--- /dev/null
+++ b/frontend/src/components/common/TitleInput/index.tsx
@@ -0,0 +1,60 @@
+import { useState } from "react";
+
+interface TitleProps {
+  placeholder: string;
+  onChange: (title: string) => void;
+  minLength?: number;
+  maxLength?: number;
+}
+
+const TitleInput = ({
+  placeholder,
+  onChange,
+  minLength = 5,
+  maxLength = 20,
+}: TitleProps) => {
+  const [charCount, setCharCount] = useState<number>(0);
+  const [value, setValue] = useState<string>("");
+
+  const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    if (newValue.length <= maxLength) {
+      setValue(newValue);
+      setCharCount(newValue.length);
+      onChange(newValue);
+    }
+  };
+
+  const getCounterColor = () => {
+    if (charCount === 0) return "text-gray-500";
+    if (charCount < minLength) return "text-point-1";
+    if (charCount === maxLength) return "text-point-1";
+    return "text-gray-500";
+  };
+
+  const getMessage = () => {
+    return `${charCount}/${maxLength}`;
+  };
+
+  return (
+    <div className="relative w-full">
+      <input
+        value={value}
+        className={
+          "text-medium-m w-full h-11 p-4 pr-20 border-custom-s rounded-custom-m"
+        }
+        placeholder={placeholder}
+        onChange={changeHandler}
+        minLength={minLength}
+        maxLength={maxLength}
+      />
+      <div
+        className={`absolute right-4 bottom-3 text-medium-s ${getCounterColor()} transition-colors`}
+      >
+        {getMessage()}
+      </div>
+    </div>
+  );
+};
+
+export default TitleInput;
diff --git a/frontend/src/components/common/Toast.tsx b/frontend/src/components/common/Toast.tsx
index ef98581f..00a301e6 100644
--- a/frontend/src/components/common/Toast.tsx
+++ b/frontend/src/components/common/Toast.tsx
@@ -11,14 +11,19 @@ const Toast = ({ message, type, removeToast }: ToastProps) => {
   return (
     <div
       className={`relative flex items-center text-medium-s ${type === "error" ? "bg-red-400" : "bg-green-100"} overflow-hidden text-white w-80 h-16 shadow-xl  p-2 z-50 revealExpand`}
+      aria-label={`${type}타입의 토스트 메시지, 5초 후에 사라집니다.`}
     >
       <div className={"flex"}>
-        <p className={"flex-grow break-keep whitespace-pre-wrap hyphens-none"}>
+        <p
+          className={"flex-grow break-keep whitespace-pre-wrap hyphens-none"}
+          aria-label={"토스트 메시지 내용"}
+        >
           {message}
         </p>
         <button
           onClick={removeToast}
           className={"text-2xl absolute right-1 top-1"}
+          aria-label={"토스트 메시지 닫기 버튼"}
         >
           <IoIosClose />
         </button>
diff --git a/frontend/src/components/common/ToastProvider.tsx b/frontend/src/components/common/ToastProvider.tsx
index 6486404e..3c36cce7 100644
--- a/frontend/src/components/common/ToastProvider.tsx
+++ b/frontend/src/components/common/ToastProvider.tsx
@@ -11,7 +11,7 @@ const ToastProvider = () => {
   const { toasts, removeToast } = useToastStore();
 
   return (
-    <div className={"absolute z-50 flex flex-col gap-2 top-10 right-10"}>
+    <div className={"fixed z-50 flex flex-col gap-2 top-10 right-10"}>
       {toasts.map((toast: Toast) => {
         return (
           <Toast
diff --git a/frontend/src/components/questions/QuestionsPreviewCard.tsx b/frontend/src/components/questions/QuestionsPreviewCard.tsx
new file mode 100644
index 00000000..72d41dbe
--- /dev/null
+++ b/frontend/src/components/questions/QuestionsPreviewCard.tsx
@@ -0,0 +1,57 @@
+import { FaStar, FaUsers } from "react-icons/fa6";
+
+interface QuestionCardProps {
+  id: number;
+  title: string;
+  questionCount: number;
+  usage: number;
+  isStarred?: boolean;
+  category: string;
+  onClick: () => void;
+}
+
+const QuestionCard = ({
+  title,
+  questionCount,
+  usage,
+  isStarred = false,
+  category,
+  onClick,
+}: QuestionCardProps) => {
+  return (
+    <div
+      className="bg-white backdrop-blur-sm border border-gray-200 rounded-xl p-4 hover:bg-gray-200/70 transition-all cursor-pointer group dark:bg-gray-900/80 dark:border-gray-700 dark:hover:bg-gray-600/70"
+      onClick={onClick}
+    >
+      <div className="flex justify-between items-start mb-3 pt-1">
+        <span className="px-3 py-0.5 bg-emerald-50 text-emerald-600 dark:bg-emerald-600/20 dark:text-emerald-400 text-sm rounded-full">
+          {category}
+        </span>
+        <FaStar
+          className={`w-5 h-5 ${
+            isStarred
+              ? "text-yellow-400 fill-yellow-400"
+              : "text-gray-500 group-hover:text-gray-400"
+          }`}
+        />
+      </div>
+
+      <h3 className="text-lg font-semibold text-black dark:text-white pl-1 mb-4 line-clamp-2">
+        {title}
+      </h3>
+
+      <div className="flex items-center justify-between text-sm text-gray-400 dark:text-gray-100">
+        <div className="flex items-center gap-1 pl-1">
+          <span>{questionCount}</span>
+          <span>문항</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <FaUsers className="w-4 h-4" />
+          <span>{usage}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QuestionCard;
diff --git a/frontend/src/components/questions/create/QuestionForm/AccessSection/index.tsx b/frontend/src/components/questions/create/QuestionForm/AccessSection/index.tsx
new file mode 100644
index 00000000..28b352cc
--- /dev/null
+++ b/frontend/src/components/questions/create/QuestionForm/AccessSection/index.tsx
@@ -0,0 +1,16 @@
+import SelectTitle from "@/components/common/SelectTitle";
+import AccessButton from "@/components/common/AccessButton";
+import useQuestionFormStore from "@/stores/useQuestionFormStore";
+
+const AccessSection = () => {
+  const { access, setAccess } = useQuestionFormStore();
+
+  return (
+    <div className="w-full">
+      <SelectTitle title="공개 여부" />
+      <AccessButton access={access} onClick={setAccess} />
+    </div>
+  );
+};
+
+export default AccessSection;
diff --git a/frontend/src/components/questions/create/QuestionForm/CategorySection/data.ts b/frontend/src/components/questions/create/QuestionForm/CategorySection/data.ts
new file mode 100644
index 00000000..f4a814b4
--- /dev/null
+++ b/frontend/src/components/questions/create/QuestionForm/CategorySection/data.ts
@@ -0,0 +1,14 @@
+export const options = [
+  {
+    value: "운영체제",
+    label: "운영체제",
+  },
+  {
+    value: "네트워크",
+    label: "네트워크",
+  },
+  {
+    value: "프론트엔드",
+    label: "프론트엔드",
+  },
+];
diff --git a/frontend/src/components/questions/create/QuestionForm/CategorySection/index.tsx b/frontend/src/components/questions/create/QuestionForm/CategorySection/index.tsx
new file mode 100644
index 00000000..2ddebccf
--- /dev/null
+++ b/frontend/src/components/questions/create/QuestionForm/CategorySection/index.tsx
@@ -0,0 +1,22 @@
+import SelectTitle from "@/components/common/SelectTitle";
+import CategorySelector from "@/components/common/CategorySelector";
+import { options } from "./data";
+import useQuestionFormStore from "@/stores/useQuestionFormStore";
+
+const CategorySection = () => {
+  const { category, setCategory } = useQuestionFormStore();
+
+  return (
+    <div>
+      <SelectTitle title="카테고리" />
+      <CategorySelector
+        title="카테고리를 선택해주세요"
+        options={options}
+        value={category}
+        onChange={setCategory}
+      />
+    </div>
+  );
+};
+
+export default CategorySection;
diff --git a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/EditInput.tsx b/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/EditInput.tsx
new file mode 100644
index 00000000..11f11049
--- /dev/null
+++ b/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/EditInput.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useRef } from "react";
+import { adjustHeight } from "../utils/textarea";
+
+interface EditInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+const EditInput = ({ value, onChange, onSave, onCancel }: EditInputProps) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const changeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value.slice(0, 100);
+    onChange(newValue);
+  };
+
+  useEffect(() => {
+    adjustHeight(textareaRef, value);
+  }, [value]);
+
+  return (
+    <div className="flex items-center relative">
+      <textarea
+        ref={textareaRef}
+        className="w-full min-h-11 pl-4 pr-24 py-3 shadow-16 rounded-custom-m text-medium-m text-gray-black resize-none duration-200 overflow-hidden"
+        value={value}
+        onChange={changeHandler}
+        rows={1}
+      />
+      <div className="absolute right-4 flex gap-2 text-gray-500 text-semibold-s">
+        <button
+          onClick={onSave}
+          className="hover:text-gray-black transition-colors"
+        >
+          저장
+        </button>
+        <button
+          onClick={onCancel}
+          className="hover:text-gray-black transition-colors"
+        >
+          취소
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default EditInput;
diff --git a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionInput.tsx b/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionInput.tsx
new file mode 100644
index 00000000..f3a77322
--- /dev/null
+++ b/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionInput.tsx
@@ -0,0 +1,68 @@
+import { useEffect, useRef, useState } from "react";
+import useQuestionFormStore from "@/stores/useQuestionFormStore";
+import useToast from "@/hooks/useToast";
+import { adjustHeight } from "../utils/textarea";
+
+const QuestionInput = () => {
+  const toast = useToast();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [inputValue, setInputValue] = useState("");
+  const addQuestion = useQuestionFormStore((state) => state.addQuestion);
+  const questionList = useQuestionFormStore((state) => state.questionList);
+
+  const changeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value.slice(0, 200);
+    setInputValue(newValue);
+  };
+
+  const addInput = () => {
+    if (inputValue.trim().length >= 10) {
+      addQuestion(inputValue.trim());
+      setInputValue("");
+    } else {
+      toast.error("질문은 10자 이상 입력해주세요.");
+    }
+  };
+
+  const enterHandler = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      addInput();
+    }
+  };
+
+  const addHandler = () => {
+    addInput();
+  };
+
+  useEffect(() => {
+    adjustHeight(textareaRef, inputValue);
+  }, [inputValue]);
+
+  useEffect(() => {
+    setInputValue("");
+  }, [questionList]);
+
+  return (
+    <div className="relative flex items-center">
+      <textarea
+        ref={textareaRef}
+        className="text-medium-m w-full min-h-11 pl-4 pr-12 py-[0.5rem] border-custom-s border-gray-100 rounded-custom-m resize-none overflow-hidden duration-200"
+        placeholder="추가할 질문을 입력하세요"
+        value={inputValue}
+        onChange={changeHandler}
+        onKeyDown={enterHandler}
+        maxLength={200}
+        rows={1}
+      />
+      <button
+        className="absolute right-4 flex gap-2 text-gray-500 text-semibold-s hover:text-gray-black transition-colors"
+        onClick={addHandler}
+      >
+        추가
+      </button>
+    </div>
+  );
+};
+
+export default QuestionInput;
diff --git a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionList.tsx b/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionList.tsx
new file mode 100644
index 00000000..e82b7b06
--- /dev/null
+++ b/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QuestionList.tsx
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import useQuestionFormStore from "@/stores/useQuestionFormStore";
+import QuestionItem from "./QustionItem";
+import EditInput from "./EditInput";
+
+const QuestionList = () => {
+  const questionList = useQuestionFormStore((state) => state.questionList);
+  const deleteQuestion = useQuestionFormStore((state) => state.deleteQuestion);
+  const updateQuestion = useQuestionFormStore((state) => state.updateQuestion);
+
+  const [editingId, setEditingId] = useState("");
+  const [editValue, setEditValue] = useState("");
+
+  const editHandler = (id: string, content: string) => {
+    setEditingId(id);
+    setEditValue(content);
+  };
+
+  const handleSave = () => {
+    if (editingId && editValue.trim()) {
+      updateQuestion(editingId, editValue.trim());
+      setEditingId("");
+      setEditValue("");
+    }
+  };
+
+  const handleCancel = () => {
+    setEditingId("");
+    setEditValue("");
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      {questionList.map((question) => (
+        <div key={question.id}>
+          {editingId === question.id ? (
+            <EditInput
+              value={editValue}
+              onChange={setEditValue}
+              onSave={handleSave}
+              onCancel={handleCancel}
+            />
+          ) : (
+            <QuestionItem
+              content={question.content}
+              onDelete={() => deleteQuestion(question.id)}
+              onEdit={() => editHandler(question.id, question.content)}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default QuestionList;
diff --git a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QustionItem.tsx b/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QustionItem.tsx
new file mode 100644
index 00000000..07786889
--- /dev/null
+++ b/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/QustionItem.tsx
@@ -0,0 +1,26 @@
+import { MdEdit } from "react-icons/md";
+import { RiDeleteBin6Fill } from "react-icons/ri";
+
+interface ItemProps {
+  content: string;
+  onDelete: () => void;
+  onEdit: () => void;
+}
+
+const QuestionItem = ({ content, onDelete, onEdit }: ItemProps) => {
+  return (
+    <div className="flex gap-2 justify-between items-center w-full min-h-11 px-4 py-3 shadow-16 rounded-custom-m">
+      <span className="text-medium-m text-gray-black break-all">{content}</span>
+      <div className="flex text-gray-500 gap-2">
+        <button onClick={onEdit}>
+          <MdEdit className="w-5 h-5 hover:text-gray-black" />
+        </button>
+        <button onClick={onDelete}>
+          <RiDeleteBin6Fill className="w-5 h-5 hover:text-gray-black" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default QuestionItem;
diff --git a/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/index.tsx b/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/index.tsx
new file mode 100644
index 00000000..fc7860a0
--- /dev/null
+++ b/frontend/src/components/questions/create/QuestionForm/QuestionInputSection/index.tsx
@@ -0,0 +1,25 @@
+import SelectTitle from "@/components/common/SelectTitle";
+import QuestionInput from "./QuestionInput";
+import QuestionList from "./QuestionList";
+import useQuestionFormStore from "@/stores/useQuestionFormStore";
+
+const QuestionInputSection = () => {
+  const questionList = useQuestionFormStore((state) => state.questionList);
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex gap-1 items-center h-auto">
+        <SelectTitle title="질문" />
+        <span className="text-medium-s text-gray-500 h-8">
+          {questionList.length}/20
+        </span>
+      </div>
+      <div className="flex flex-col gap-4">
+        <QuestionInput />
+        <QuestionList />
+      </div>
+    </div>
+  );
+};
+
+export default QuestionInputSection;
diff --git a/frontend/src/components/questions/create/QuestionForm/TitleSection/index.tsx b/frontend/src/components/questions/create/QuestionForm/TitleSection/index.tsx
new file mode 100644
index 00000000..d71d7de4
--- /dev/null
+++ b/frontend/src/components/questions/create/QuestionForm/TitleSection/index.tsx
@@ -0,0 +1,19 @@
+import SelectTitle from "@/components/common/SelectTitle";
+import TitleInput from "@/components/common/TitleInput";
+import useQuestionFormStore from "@/stores/useQuestionFormStore";
+
+const TitleSection = () => {
+  const { setQuestionTitle } = useQuestionFormStore();
+
+  return (
+    <div>
+      <SelectTitle title="질문지 제목" />
+      <TitleInput
+        placeholder="예) 프론트엔드 면접 질문 리스트"
+        onChange={setQuestionTitle}
+      />
+    </div>
+  );
+};
+
+export default TitleSection;
diff --git a/frontend/src/components/questions/create/QuestionForm/index.tsx b/frontend/src/components/questions/create/QuestionForm/index.tsx
new file mode 100644
index 00000000..e6c898be
--- /dev/null
+++ b/frontend/src/components/questions/create/QuestionForm/index.tsx
@@ -0,0 +1,45 @@
+import useQuestionFormStore from "@/stores/useQuestionFormStore";
+import AccessSection from "./AccessSection";
+import CategorySection from "./CategorySection";
+import TitleSection from "./TitleSection";
+import QuestionInputSection from "./QuestionInputSection";
+import { useCreateQuestion } from "@/hooks/useCreateQuestion";
+
+const QuestionForm = () => {
+  const isValid = useQuestionFormStore((state) => state.isFormValid());
+  const { category, questionTitle, access, questionList } =
+    useQuestionFormStore();
+
+  const mutation = useCreateQuestion();
+
+  const submitHandler = () => {
+    const requestData = {
+      title: questionTitle,
+      contents: questionList.map((q) => q.content),
+      categoryNames: [category], // TODO: 현재 카테고리 하나만 선택 가능 - UI 변경 후 3개까지 받도록 수정
+      isPublic: access === "PUBLIC",
+    };
+
+    mutation.mutate(requestData);
+  };
+
+  return (
+    <div className="flex flex-col gap-7 p-8 bg-gray-white shadow-8 w-47.5 rounded-custom-l">
+      <CategorySection />
+      <TitleSection />
+      <AccessSection />
+      <QuestionInputSection />
+      <button
+        className={`w-full h-12 rounded-custom-m text-semibold-r text-gray-white
+        ${isValid ? "bg-green-200" : "bg-gray-200"}
+          `}
+        onClick={submitHandler}
+        disabled={!isValid}
+      >
+        질문지 생성하기
+      </button>
+    </div>
+  );
+};
+
+export default QuestionForm;
diff --git a/frontend/src/components/questions/create/QuestionForm/utils/textarea.ts b/frontend/src/components/questions/create/QuestionForm/utils/textarea.ts
new file mode 100644
index 00000000..bf2e137b
--- /dev/null
+++ b/frontend/src/components/questions/create/QuestionForm/utils/textarea.ts
@@ -0,0 +1,18 @@
+import { RefObject } from "react";
+
+export const adjustHeight = (
+  textareaRef: RefObject<HTMLTextAreaElement>,
+  value: string
+) => {
+  const textarea = textareaRef.current;
+  if (textarea) {
+    textarea.style.height = "auto";
+
+    const defaultHeight = 2.75;
+    const scrollHeight = textarea.scrollHeight;
+
+    textarea.style.height = value
+      ? `${Math.max(defaultHeight, scrollHeight / 16)}rem`
+      : `${defaultHeight}rem`;
+  }
+};
diff --git a/frontend/src/components/questions/detail/ButtonSection.tsx/Button.tsx b/frontend/src/components/questions/detail/ButtonSection.tsx/Button.tsx
new file mode 100644
index 00000000..779db1a4
--- /dev/null
+++ b/frontend/src/components/questions/detail/ButtonSection.tsx/Button.tsx
@@ -0,0 +1,25 @@
+import { IconType } from "react-icons";
+
+interface ButtonProps {
+  text: string;
+  type: "gray" | "green";
+  icon: IconType;
+}
+
+const Button = ({ text, type, icon: Icon }: ButtonProps) => {
+  const buttonColor =
+    type === "gray"
+      ? "bg-gray-200 text-gray-black"
+      : "bg-green-200 text-gray-white";
+
+  return (
+    <button
+      className={`w-full h-11 flex flex-row items-center justify-center gap-2 rounded-custom-m text-semibold-m ${buttonColor}`}
+    >
+      <Icon />
+      {text}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx b/frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx
new file mode 100644
index 00000000..7e28398f
--- /dev/null
+++ b/frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx
@@ -0,0 +1,14 @@
+import Button from "./Button";
+import { FaBookmark } from "react-icons/fa";
+import { IoMdShare } from "react-icons/io";
+
+const ButtonSection = () => {
+  return (
+    <div className="flex w-full gap-4 mt-4">
+      <Button text="공유하기" type="gray" icon={IoMdShare} />
+      <Button text="스크랩하기" type="green" icon={FaBookmark} />
+    </div>
+  );
+};
+
+export default ButtonSection;
diff --git a/frontend/src/components/questions/detail/QuestionList.tsx/QuestionItem.tsx b/frontend/src/components/questions/detail/QuestionList.tsx/QuestionItem.tsx
new file mode 100644
index 00000000..b427e8c0
--- /dev/null
+++ b/frontend/src/components/questions/detail/QuestionList.tsx/QuestionItem.tsx
@@ -0,0 +1,15 @@
+interface QuestionItemProps {
+  index: number;
+  content: string;
+}
+
+const QuestionItem = ({ index, content }: QuestionItemProps) => {
+  return (
+    <div className="flex flex-col gap-1 border-custom-s border-gray-200 rounded-custom-m p-3">
+      <h3 className="text-semibold-m text-gray-black">Q{index + 1}</h3>
+      <p className="text-medium-l">{content}</p>
+    </div>
+  );
+};
+
+export default QuestionItem;
diff --git a/frontend/src/components/questions/detail/QuestionList.tsx/index.tsx b/frontend/src/components/questions/detail/QuestionList.tsx/index.tsx
new file mode 100644
index 00000000..8984cdfe
--- /dev/null
+++ b/frontend/src/components/questions/detail/QuestionList.tsx/index.tsx
@@ -0,0 +1,29 @@
+import { useGetQuestion } from "@/hooks/useGetQuestion";
+import QuestionItem from "./QuestionItem";
+
+const QuestionList = ({ questionId }: { questionId: string }) => {
+  const {
+    data: question,
+    isLoading,
+    isError,
+    error,
+  } = useGetQuestion(questionId);
+
+  if (isLoading) return <div>로딩 중</div>;
+  if (isError) return <div>에러가 발생했습니다: {error.message}</div>;
+  if (!question) return null;
+
+  return (
+    <div className="flex flex-col gap-3">
+      {question.contents.map((content, index) => (
+        <QuestionItem
+          key={content.id}
+          index={index}
+          content={content.content}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default QuestionList;
diff --git a/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx b/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx
new file mode 100644
index 00000000..7d185822
--- /dev/null
+++ b/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx
@@ -0,0 +1,44 @@
+import { useGetQuestion } from "@/hooks/useGetQuestion";
+import { MdEdit } from "react-icons/md";
+import { RiDeleteBin6Fill } from "react-icons/ri";
+import { FaRegBookmark } from "react-icons/fa";
+
+const QuestionTitle = ({ questionId }: { questionId: string }) => {
+  const {
+    data: question,
+    isLoading,
+    isError,
+    error,
+  } = useGetQuestion(questionId);
+
+  if (isLoading) return <div>로딩 중</div>;
+  if (isError) return <div>에러가 발생했습니다: {error.message}</div>;
+  if (!question) return null;
+
+  return (
+    <div className="mb-4 flex flex-col gap-2">
+      <div className="flex justify-between">
+        <h3 className="text-semibold-l">{question.title}</h3>
+        <div className="flex gap-3 text-gray-500">
+          <button>
+            <MdEdit className="w-6 h-6 hover:text-gray-black" />
+          </button>
+          <button>
+            <RiDeleteBin6Fill className="w-6 h-6 hover:text-gray-black" />
+          </button>
+        </div>
+      </div>
+      <div className="flex gap-3">
+        <span className="text-medium-m text-gray-400">
+          작성자 {question.username} • {question.contents.length}개의 질문
+        </span>
+        <div className="flex gap-1 items-center">
+          <FaRegBookmark />
+          <span>{question.usage}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QuestionTitle;
diff --git a/frontend/src/components/sessions/SessionCard.tsx b/frontend/src/components/sessions/SessionCard.tsx
index 0338dce6..fc869ecf 100644
--- a/frontend/src/components/sessions/SessionCard.tsx
+++ b/frontend/src/components/sessions/SessionCard.tsx
@@ -1,29 +1,29 @@
 import { FaUserGroup } from "react-icons/fa6";
 import { IoArrowForwardSharp } from "react-icons/io5";
 interface Props {
-  category: string;
+  category?: string;
   title: string;
   host: string;
+  inProgress: boolean;
   participant: number;
   maxParticipant: number;
-  sessionStatus: "open" | "close";
   questionListId: number;
   onEnter: () => void;
 }
 
 const SessionCard = ({
-  category,
+  category = "None",
   title,
   host,
   participant,
   maxParticipant,
-  sessionStatus,
+  inProgress,
   questionListId,
   onEnter,
 }: Props) => {
   return (
     <li
-      className={`relative flex rounded-custom-l border-l-[1.625rem] ${sessionStatus === "open" ? "border-l-point-2" : "border-l-green-200"} bg-gray-white shadow-8 overflow-hidden py-3 max-w-[47.5rem] h-[8.75rem]`}
+      className={`relative flex rounded-custom-l border-l-[1.625rem] ${inProgress ? "border-l-point-2" : "border-l-green-200"} bg-gray-white shadow-8 overflow-hidden py-3 max-w-[47.5rem] h-[8.75rem]`}
     >
       <div className={"flex-grow px-[0.75rem] flex flex-col items-start"}>
         <span
@@ -33,9 +33,9 @@ const SessionCard = ({
         >
           {category}
         </span>
-        <h3 className={"text-semibold-r mt-[0.5rem]"}>{title}</h3>
+        <h3 className={"text-semibold-m mt-[0.5rem]"}>{title}</h3>
         <p className={"text-medium-r text-gray-400"}>
-          질문지인데 누르면 질문 리스트를 볼 수 있임 {questionListId}
+          질문지인데 누르면 질문 리스트를 볼 수 있음 {questionListId}
         </p>
         <div
           className={
@@ -50,10 +50,10 @@ const SessionCard = ({
               {participant}/{maxParticipant}명
             </span>
           </div>
-          {sessionStatus === "open" ? (
+          {!inProgress ? (
             <button
               className={
-                "text-semibold-s text-green-500 inline-flex items-center gap-[0.5rem] hover:gap-[0.375rem] transition-all"
+                "text-semibold-r text-green-500 inline-flex items-center gap-[0.5rem] hover:gap-[0.375rem] transition-all"
               }
               onClick={onEnter}
             >
diff --git a/frontend/src/components/sessions/create/SessionForm/AccessSection/index.tsx b/frontend/src/components/sessions/create/SessionForm/AccessSection/index.tsx
index 44f6b3a8..a6bd2747 100644
--- a/frontend/src/components/sessions/create/SessionForm/AccessSection/index.tsx
+++ b/frontend/src/components/sessions/create/SessionForm/AccessSection/index.tsx
@@ -1,5 +1,6 @@
 import useSessionFormStore from "@/stores/useSessionFormStore";
-import SelectTitle from "../../SelectTitle";
+import SelectTitle from "@/components/common/SelectTitle";
+import AccessButton from "@/components/common/AccessButton";
 
 const AccessSection = () => {
   const { access, setAccess } = useSessionFormStore();
@@ -7,30 +8,7 @@ const AccessSection = () => {
   return (
     <div className="w-full">
       <SelectTitle title="공개 여부" />
-      <div className="flex w-full h-11">
-        <button
-          className={`flex-grow rounded-l-custom-m border 
-          ${
-            access === "PUBLIC"
-              ? "text-semibold-r text-green-700 border-2 border-green-200 bg-green-50"
-              : "text-medium-m text-gray-400 border-r-0"
-          }`}
-          onClick={() => setAccess("PUBLIC")}
-        >
-          공개
-        </button>
-        <button
-          className={`flex-grow rounded-r-custom-m border
-          ${
-            access === "PRIVATE"
-              ? "text-semibold-r text-green-700 border-2 border-green-200 bg-green-50"
-              : "text-medium-m text-gray-400 border-l-0"
-          }`}
-          onClick={() => setAccess("PRIVATE")}
-        >
-          비공개
-        </button>
-      </div>
+      <AccessButton access={access} onClick={setAccess} />
     </div>
   );
 };
diff --git a/frontend/src/components/sessions/create/SessionForm/CategorySection/index.tsx b/frontend/src/components/sessions/create/SessionForm/CategorySection/index.tsx
index e14917e1..078fda6c 100644
--- a/frontend/src/components/sessions/create/SessionForm/CategorySection/index.tsx
+++ b/frontend/src/components/sessions/create/SessionForm/CategorySection/index.tsx
@@ -1,33 +1,30 @@
-import { IoChevronDownSharp } from "react-icons/io5";
-import SelectTitle from "../../SelectTitle";
+import SelectTitle from "@/components/common/SelectTitle";
 import useSessionFormStore from "@/stores/useSessionFormStore";
+import CategorySelector from "@/components/common/CategorySelector";
+
+const options = [
+  {
+    value: "프론트엔드",
+    label: "프론트엔드",
+  },
+  {
+    value: "백엔드",
+    label: "백엔드",
+  },
+];
 
 const CategorySection = () => {
   const { category, setCategory } = useSessionFormStore();
 
-  const changeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setCategory(event.target.value);
-  };
-
   return (
     <div>
       <SelectTitle title="카테고리" />
-      <div className="relative">
-        <select
-          className="text-medium-m w-full h-11 pl-4 border-custom-s border-gray-100 rounded-custom-m appearance-none"
-          value={category}
-          onChange={changeHandler}
-        >
-          <option value="" disabled>
-            카테고리를 선택해주세요
-          </option>
-          <option value="프론트엔드">프론트엔드</option>
-          <option value="백엔드">백엔드</option>
-        </select>
-        <span className="absolute top-1/2 -translate-y-1/2 right-3 pointer-events-none">
-          <IoChevronDownSharp className="w-5 h-5 text-gray-400" />
-        </span>
-      </div>
+      <CategorySelector
+        title="카테고리를 선택해주세요"
+        options={options}
+        value={category}
+        onChange={setCategory}
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/CategoryTab/Category.tsx b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/CategoryTab/Category.tsx
index 6e469ca6..3cbcec7c 100644
--- a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/CategoryTab/Category.tsx
+++ b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/CategoryTab/Category.tsx
@@ -1,4 +1,4 @@
-import useSessionFormStore from "../../../../../../stores/useSessionFormStore";
+import useSessionFormStore from "@/stores/useSessionFormStore";
 
 interface Props {
   tabName: "myList" | "savedList";
diff --git a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/Pagination/index.tsx b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/Pagination/index.tsx
new file mode 100644
index 00000000..d3d0cb33
--- /dev/null
+++ b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/Pagination/index.tsx
@@ -0,0 +1,65 @@
+import { MdArrowBackIosNew } from "react-icons/md";
+import { MdArrowForwardIos } from "react-icons/md";
+import { MAX_BUTTON } from "../constant";
+
+interface PagenationProps {
+  currentPage: number;
+  totalPage: number;
+  onPageChange: (page: number) => void;
+}
+
+const Pagination = ({
+  currentPage,
+  totalPage,
+  onPageChange,
+}: PagenationProps) => {
+  const getPageNumbers = () => {
+    const pages = [];
+    let startPage = Math.max(
+      1,
+      Math.floor((currentPage - 1) / MAX_BUTTON) * MAX_BUTTON + 1
+    );
+    let endPage = Math.min(totalPage, startPage + MAX_BUTTON - 1);
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return { pages, startPage, endPage };
+  };
+
+  const { pages, startPage, endPage } = getPageNumbers();
+  const showPrevButton = startPage > 1;
+  const showNextButton = endPage < totalPage;
+
+  return (
+    <div className="flex justify-center gap-1 my-6">
+      <button
+        onClick={() => onPageChange(startPage - 1)}
+        className={`px-2 py-1 text-gray-black ${!showPrevButton && "invisible"}`}
+      >
+        <MdArrowBackIosNew />
+      </button>
+      {pages.map((number) => (
+        <button
+          key={number}
+          onClick={() => onPageChange(number)}
+          className={`w-9 h-9 rounded-custom-s ${
+            currentPage === number
+              ? "bg-green-200 text-white text-semibold-m"
+              : "text-gray-black text-medium-l"
+          }`}
+        >
+          {number}
+        </button>
+      ))}
+      <button
+        onClick={() => onPageChange(endPage + 1)}
+        className={`px-2 py-1 text-gray-black ${!showNextButton && "invisible"}`}
+      >
+        <MdArrowForwardIos />
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;
diff --git a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/QuestionList/QuestionItem.tsx b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/QuestionList/QuestionItem.tsx
index 12ca9f93..2d75a836 100644
--- a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/QuestionList/QuestionItem.tsx
+++ b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/QuestionList/QuestionItem.tsx
@@ -1,22 +1,29 @@
 import { GrDown, GrUp } from "react-icons/gr";
 import { ImCheckmark } from "react-icons/im";
 import useSessionFormStore from "@/stores/useSessionFormStore";
+import axios from "axios";
+import { useState } from "react";
+import LoadingIndicator from "@components/common/LoadingIndicator.tsx";
 
 interface Question {
   id: number;
-  question: string;
+  content: string;
 }
 
-interface ListItem {
+interface QuestionsMap {
+  [key: number]: Question[];
+}
+
+interface QuestionList {
   id: number;
-  user_name: string;
-  category: string;
   title: string;
-  count: number;
-  questions: Question[];
+  usage: number;
+  isStarred?: boolean;
+  questionCount: number;
+  categoryNames: string[];
 }
 
-const QuestionItem = ({ item }: { item: ListItem }) => {
+const QuestionItem = ({ item }: { item: QuestionList }) => {
   const {
     questionId,
     selectedOpenId,
@@ -25,6 +32,13 @@ const QuestionItem = ({ item }: { item: ListItem }) => {
     setSelectedOpenId,
   } = useSessionFormStore();
 
+  const [questions, setQuestions] = useState<Question[]>([]);
+  const [questionLoading, setQuestionLoading] = useState(true);
+  const isSelected = questionId === item.id;
+  const isListOpen = selectedOpenId === item.id;
+
+  const [questionMap, setQuestionMap] = useState<QuestionsMap>({});
+
   const checkHandler = (id: number, title: string) => {
     setQuestionId(id);
     setQuestionTitle(title);
@@ -36,10 +50,31 @@ const QuestionItem = ({ item }: { item: ListItem }) => {
     } else {
       setSelectedOpenId(id);
     }
+
+    if (questionMap[id]) {
+      setQuestions(questionMap[id]);
+    } else {
+      getQuestionListDetail();
+    }
   };
 
-  const isSelected = questionId === item.id;
-  const isListOpen = selectedOpenId === item.id;
+  const getQuestionListDetail = async () => {
+    try {
+      setQuestionLoading(true);
+      const response = await axios.post(`/api/question-list/contents`, {
+        questionListId: item.id,
+      });
+      console.log(response);
+      const questionsData: Question[] =
+        response.data.data.questionListContents.contents;
+      console.log(questionsData);
+      setQuestionMap({ ...questionMap, [item.id]: questionsData });
+      setQuestions(questionsData);
+      setQuestionLoading(false);
+    } catch (e) {
+      console.error("질문지 리스트 디테일 불러오기 실패", e);
+    }
+  };
 
   return (
     <>
@@ -58,9 +93,12 @@ const QuestionItem = ({ item }: { item: ListItem }) => {
         </button>
         <div>
           <div className="flex gap-3">
-            <div>{item.category}</div>
+            <div>{item.categoryNames[0]}</div>
+            {/*<span className="text-medium-s text-gray-600">*/}
+            {/*  {item.user_name} • {item.count}개의 질문*/}
+            {/*</span>*/}
             <span className="text-medium-s text-gray-600">
-              {item.user_name} • {item.count}개의 질문
+              {"유저"} • {item.questionCount}개의 질문
             </span>
           </div>
           <p className="text-semibold-r text-gray-black">{item.title}</p>
@@ -72,17 +110,22 @@ const QuestionItem = ({ item }: { item: ListItem }) => {
                 ? "bg-green-200 text-green-50"
                 : "bg-gray-300 text-gray-50"
             }`}
-          onClick={() => checkHandler(item.id, item.title)}
+          onClick={() => {
+            checkHandler(item.id, item.title);
+          }}
         >
           <ImCheckmark className="m-auto w-5 h-5" />
         </button>
       </div>
       {isListOpen ? (
-        <div className="bg-gray-50 px-20 py-5">
-          {item.questions.map((item) => {
+        <div className="bg-gray-50 px-20 py-5 transition-all">
+          <div className={"h-fit"}>
+            <LoadingIndicator loadingState={questionLoading} />
+          </div>
+          {questions.map((item,index) => {
             return (
-              <p key={item.id} className="text-medium-r text-gray-600">
-                {item.question}
+              <p key={item.id} className="text-medium-r p-0.5 text-gray-600">
+                Q{index+1}. {item.content}
               </p>
             );
           })}
diff --git a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/QuestionList/index.tsx b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/QuestionList/index.tsx
index 3e9b82a2..327515d5 100644
--- a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/QuestionList/index.tsx
+++ b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/QuestionList/index.tsx
@@ -1,13 +1,53 @@
-import useSessionFormStore from "@/stores/useSessionFormStore";
-import { data } from "../data";
 import QuestionItem from "./QuestionItem";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import LoadingIndicator from "@components/common/LoadingIndicator.tsx";
+import { QUESTION_PER_PAGE } from "../constant";
+        
+interface QuestionList {
+  id: number;
+  title: string;
+  usage: number;
+  isStarred?: boolean;
+  questionCount: number;
+  categoryNames: string[];
+}
 
-const QuestionList = () => {
-  const { tab } = useSessionFormStore();
+const QuestionList = ({ page }: { page: number }) => {
+  const [questionList, setQuestionList] = useState<QuestionList[]>([]);
+  const [questionLoading, setQuestionLoading] = useState(true);
+
+  useEffect(() => {
+    getQuestionList();
+  }, []);
+
+  const getQuestionList = async () => {
+    try {
+      const response = await axios.get("/api/question-list");
+      const data = response.data.data.allQuestionLists ?? [];
+      setQuestionList(data);
+      setQuestionLoading(false);
+    } catch (error) {
+      console.error("질문지 리스트 불러오기 실패", error);
+      setQuestionList([]);
+    }
+  };
+  // const { tab } = useSessionFormStore();
+
+  const startIndex = (page - 1) * QUESTION_PER_PAGE;
+  const endIndex = startIndex + QUESTION_PER_PAGE;
 
   return (
-    <div className="mb-4">
-      {data[tab].map((item, id) => {
+    <div className="mb-4 h-80 overflow-y-auto">
+      <LoadingIndicator loadingState={questionLoading} />
+      {/*{data[tab].map((item, id) => {*/}
+      {/*  return (*/}
+      {/*    <div key={id}>*/}
+      {/*      <QuestionItem item={item} />*/}
+      {/*    </div>*/}
+      {/*  );*/}
+      {/*})}*/}
+      {questionList.slice(startIndex, endIndex).map((item, id) => {
         return (
           <div key={id}>
             <QuestionItem item={item} />
diff --git a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/constant.ts b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/constant.ts
new file mode 100644
index 00000000..baa7a9a3
--- /dev/null
+++ b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/constant.ts
@@ -0,0 +1,2 @@
+export const QUESTION_PER_PAGE = 4;
+export const MAX_BUTTON = 5;
diff --git a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/data.ts b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/data.ts
index f5c4f9d5..742c1d1c 100644
--- a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/data.ts
+++ b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/data.ts
@@ -70,6 +70,23 @@ export const data: Data = {
         },
       ],
     },
+    {
+      id: 4,
+      user_name: "사용자",
+      category: "프론트엔드",
+      title: "프론트엔드 면접 질문이심3",
+      count: 10,
+      questions: [
+        {
+          id: 123,
+          question: "클로저에 대해 설명해주세요.",
+        },
+        {
+          id: 1231,
+          question: "클로저에 대해 설명해주세요. 22",
+        },
+      ],
+    },
   ],
   savedList: [
     {
diff --git a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/index.tsx b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/index.tsx
index 5a66b57b..31e98409 100644
--- a/frontend/src/components/sessions/create/SessionForm/ListSelectModal/index.tsx
+++ b/frontend/src/components/sessions/create/SessionForm/ListSelectModal/index.tsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { IoMdClose } from "react-icons/io";
 import CategoryTap from "./CategoryTab";
 import SearchBar from "@/components/common/SearchBar";
@@ -6,11 +6,31 @@ import useModalStore from "@/stores/useModalStore";
 import useModal from "@/hooks/useModal";
 import QuestionList from "./QuestionList";
 import useSessionFormStore from "@/stores/useSessionFormStore";
+import Pagination from "./Pagination";
 
 const ListSelectModal = () => {
   const dialogRef = useRef<HTMLDialogElement>(null);
   const { isModalOpen, closeModal } = useModalStore();
-  const { setTab, setSelectedOpenId } = useSessionFormStore();
+  const { tab, setTab, setSelectedOpenId } = useSessionFormStore();
+  const [myListPage, setMyListPage] = useState(1);
+  const [savedListPage, setSavedListPage] = useState(1);
+
+  const totalPages = {
+    myList: 14,
+    savedList: 8,
+  };
+
+  const getCurrentPageProps = () => ({
+    currentPage: tab === "myList" ? myListPage : savedListPage,
+    totalPage: totalPages[tab],
+    onPageChange: (page: number) => {
+      if (tab === "myList") {
+        setMyListPage(page);
+      } else {
+        setSavedListPage(page);
+      }
+    },
+  });
 
   useModal({ isModalOpen, dialogRef });
 
@@ -29,10 +49,11 @@ const ListSelectModal = () => {
           <IoMdClose className="text-gray-black w-7 h-7" />
         </button>
       </div>
-      <div className="mx-8">
+      <div className="mx-8 mb-8">
         <SearchBar text="질문지를 검색해주세요" />
       </div>
-      <QuestionList />
+      <QuestionList page={getCurrentPageProps().currentPage} />
+      <Pagination {...getCurrentPageProps()} />
     </dialog>
   );
 };
diff --git a/frontend/src/components/sessions/create/SessionForm/NameSection/index.tsx b/frontend/src/components/sessions/create/SessionForm/NameSection/index.tsx
deleted file mode 100644
index 4fb2bcb4..00000000
--- a/frontend/src/components/sessions/create/SessionForm/NameSection/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import useSessionFormStore from "@/stores/useSessionFormStore";
-import SelectTitle from "../../SelectTitle";
-
-const NameSection = () => {
-  const { setSessionName } = useSessionFormStore();
-
-  const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSessionName(event.target.value);
-  };
-
-  return (
-    <div>
-      <SelectTitle title="스터디 세션" />
-      <input
-        className="text-medium-m w-full h-11 p-4 border-custom-s border-gray-100 rounded-custom-m"
-        placeholder="예) 프론트엔드 면접 스터디"
-        onChange={changeHandler}
-        minLength={5}
-        maxLength={20}
-      />
-    </div>
-  );
-};
-
-export default NameSection;
diff --git a/frontend/src/components/sessions/create/SessionForm/ParticipantSection/index.tsx b/frontend/src/components/sessions/create/SessionForm/ParticipantSection/index.tsx
index f23d67c0..f39b3e5f 100644
--- a/frontend/src/components/sessions/create/SessionForm/ParticipantSection/index.tsx
+++ b/frontend/src/components/sessions/create/SessionForm/ParticipantSection/index.tsx
@@ -1,5 +1,5 @@
 import ParticipantButton from "./ParticpantButton";
-import SelectTitle from "../../SelectTitle";
+import SelectTitle from "@/components/common/SelectTitle";
 import useSessionFormStore from "@/stores/useSessionFormStore";
 const MEMBER_COUNTS = [1, 2, 3, 4, 5] as const;
 
diff --git a/frontend/src/components/sessions/create/SessionForm/QuestionListSection/index.tsx b/frontend/src/components/sessions/create/SessionForm/QuestionListSection/index.tsx
index 87850849..c1297c96 100644
--- a/frontend/src/components/sessions/create/SessionForm/QuestionListSection/index.tsx
+++ b/frontend/src/components/sessions/create/SessionForm/QuestionListSection/index.tsx
@@ -1,6 +1,6 @@
 import useModalStore from "@/stores/useModalStore";
 import useSessionFormStore from "@/stores/useSessionFormStore";
-import SelectTitle from "../../SelectTitle";
+import SelectTitle from "@/components/common/SelectTitle";
 import { MdOutlineArrowForwardIos } from "react-icons/md";
 
 const QuestionListSection = () => {
diff --git a/frontend/src/components/sessions/create/SessionForm/TitleSection/index.tsx b/frontend/src/components/sessions/create/SessionForm/TitleSection/index.tsx
new file mode 100644
index 00000000..49735660
--- /dev/null
+++ b/frontend/src/components/sessions/create/SessionForm/TitleSection/index.tsx
@@ -0,0 +1,19 @@
+import useSessionFormStore from "@/stores/useSessionFormStore";
+import SelectTitle from "@/components/common/SelectTitle";
+import TitleInput from "@/components/common/TitleInput";
+
+const TitleSection = () => {
+  const { setSessionName } = useSessionFormStore();
+
+  return (
+    <div>
+      <SelectTitle title="스터디 세션" />
+      <TitleInput
+        placeholder="예) 프론트엔드 면접 스터디"
+        onChange={setSessionName}
+      />
+    </div>
+  );
+};
+
+export default TitleSection;
diff --git a/frontend/src/components/sessions/create/SessionForm/index.tsx b/frontend/src/components/sessions/create/SessionForm/index.tsx
index 9c0697bf..b93273cd 100644
--- a/frontend/src/components/sessions/create/SessionForm/index.tsx
+++ b/frontend/src/components/sessions/create/SessionForm/index.tsx
@@ -1,14 +1,14 @@
 import AccessSection from "./AccessSection";
 import CategorySection from "./CategorySection";
 import ParticipantSection from "./ParticipantSection";
-import NameSection from "./NameSection";
+import TitleSection from "./TitleSection";
 import QuestionListSection from "./QuestionListSection";
 import ListSelectModal from "./ListSelectModal";
 import useSessionFormStore from "@/stores/useSessionFormStore";
-import useSocketStore from "@/stores/useSocketStore";
 import { useNavigate } from "react-router-dom";
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
 import useToast from "@/hooks/useToast";
+import useSocket from "@/hooks/useSocket";
 
 interface RoomCreatedResponse {
   success?: boolean;
@@ -17,23 +17,13 @@ interface RoomCreatedResponse {
 }
 
 const SessionForm = () => {
-  const { socket, connect } = useSocketStore();
+  const { socket } = useSocket();
   const { category, sessionName, questionId, participant, access } =
     useSessionFormStore();
   const isValid = useSessionFormStore((state) => state.isFormValid());
   const navigate = useNavigate();
   const toast = useToast();
 
-  const initializeSocket = useCallback(() => {
-    if (!socket) {
-      connect(import.meta.env.VITE_SIGNALING_SERVER_URL);
-    }
-  }, [connect, socket]);
-
-  useEffect(() => {
-    initializeSocket();
-  }, [initializeSocket]);
-
   const submitHandler = () => {
     if (!isValid || !socket) {
       toast.error("입력값을 확인해주세요.");
@@ -44,7 +34,7 @@ const SessionForm = () => {
       title: sessionName,
       status: access ?? "PUBLIC",
       category,
-      questionId,
+      questionListId: questionId,
       maxParticipants: participant,
     };
 
@@ -53,6 +43,7 @@ const SessionForm = () => {
       maxParticipants: roomData.maxParticipants,
       status: roomData.status,
       category: roomData.category,
+      questionListId: roomData.questionListId,
     });
   };
 
@@ -77,10 +68,10 @@ const SessionForm = () => {
   }, [socket, navigate]);
 
   return (
-    <div className="flex flex-col gap-8 p-8 bg-gray-white shadow-8 w-47.5 rounded-custom-l">
+    <div className="flex flex-col gap-7 p-8 bg-gray-white shadow-8 w-47.5 rounded-custom-l">
       <ListSelectModal />
       <CategorySection />
-      <NameSection />
+      <TitleSection />
       <QuestionListSection />
       <ParticipantSection />
       <AccessSection />
diff --git a/frontend/src/constraints/LayoutConstant.ts b/frontend/src/constraints/LayoutConstant.ts
new file mode 100644
index 00000000..a056637c
--- /dev/null
+++ b/frontend/src/constraints/LayoutConstant.ts
@@ -0,0 +1 @@
+export const sectionWithSidebar = "flex w-screen h-screen";
diff --git a/frontend/src/hooks/__test__/mocks/useSession.mock.ts b/frontend/src/hooks/__test__/mocks/useSession.mock.ts
new file mode 100644
index 00000000..a5996b2c
--- /dev/null
+++ b/frontend/src/hooks/__test__/mocks/useSession.mock.ts
@@ -0,0 +1,34 @@
+import { MockPeerConnections, MockSocket } from "../../type/session.test";
+
+export const mockSocket: MockSocket = {
+  emit: jest.fn(),
+  on: jest.fn(),
+  off: jest.fn(),
+  id: "mock-socket-id",
+};
+
+export const mockSocketStore = {
+  socket: null as MockSocket | null,
+  connect: jest.fn(),
+  disconnect: jest.fn(),
+};
+
+export const mockMediaStream = {
+  getTracks: jest.fn().mockReturnValue([{ stop: jest.fn(), enabled: true }]),
+};
+
+export const mockToast = { success: jest.fn(), error: jest.fn() };
+
+export const mockNavigate = jest.fn();
+
+export const mockPeerConnections: MockPeerConnections = {
+  current: {
+    "peer-1": {
+      ontrack: null,
+      onicecandidate: null,
+      oniceconnectionstatechange: null,
+      onconnectionstatechange: null,
+      close: jest.fn(),
+    },
+  },
+};
diff --git a/frontend/src/hooks/__test__/useSession.test.ts b/frontend/src/hooks/__test__/useSession.test.ts
new file mode 100644
index 00000000..79000726
--- /dev/null
+++ b/frontend/src/hooks/__test__/useSession.test.ts
@@ -0,0 +1,305 @@
+import { renderHook } from "@testing-library/react";
+import { useSession } from "@/hooks/useSession";
+import useSocketStore from "@/stores/useSocketStore";
+import useMediaDevices from "@/hooks/useMediaDevices";
+import usePeerConnection from "@/hooks/usePeerConnection";
+import { useNavigate } from "react-router-dom";
+import { act } from "react";
+import {
+  mockMediaStream,
+  mockNavigate,
+  mockPeerConnections,
+  mockSocket,
+  mockSocketStore,
+  mockToast,
+} from "./mocks/useSession.mock";
+
+// jest.mock: 실제 모듈대신 mock 모듈을 사용하도록 설정
+jest.mock("@/hooks/useMediaDevices");
+
+jest.mock("@/hooks/usePeerConnection", () => ({
+  __esModule: true,
+  default: jest.fn().mockReturnValue({
+    createPeerConnection: jest.fn(),
+    closePeerConnection: jest.fn(),
+    peers: [],
+    setPeers: jest.fn(),
+    peerConnections: { current: {} },
+  }),
+}));
+
+jest.mock("@/hooks/useToast", () => ({
+  __esModule: true,
+  default: () => mockToast,
+}));
+
+jest.mock("react-router-dom", () => ({
+  useNavigate: jest.fn(),
+}));
+
+jest.mock("@/stores/useSocketStore", () => ({
+  __esModule: true,
+  default: jest.fn(() => mockSocketStore),
+}));
+
+jest.mock("@/hooks/useSocket", () => ({
+  __esModule: true,
+  default: () => {
+    const store = useSocketStore();
+    if (!store.socket) {
+      store.connect("test-url");
+    }
+    return { socket: store.socket };
+  },
+}));
+
+describe("useSession Hook 테스트", () => {
+  const mockGetMedia = jest.fn().mockResolvedValue(mockMediaStream);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useMediaDevices as jest.Mock).mockReturnValue({
+      userAudioDevices: [],
+      userVideoDevices: [],
+      selectedAudioDeviceId: "",
+      selectedVideoDeviceId: "",
+      stream: mockMediaStream,
+      isVideoOn: true,
+      isMicOn: true,
+      videoLoading: false,
+      handleMicToggle: jest.fn(),
+      handleVideoToggle: jest.fn(),
+      setSelectedAudioDeviceId: jest.fn(),
+      setSelectedVideoDeviceId: jest.fn(),
+      getMedia: mockGetMedia,
+    });
+
+    (usePeerConnection as jest.Mock).mockReturnValue({
+      createPeerConnection: jest.fn(),
+      closePeerConnection: jest.fn(),
+      peers: [],
+      setPeers: jest.fn(),
+      peerConnections: mockPeerConnections,
+    });
+
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+  });
+
+  describe("초기화 및 기본 동작 테스트", () => {
+    it("초기 상태 설정", () => {
+      const { result } = renderHook(() => useSession("test-session"));
+
+      expect(result.current.nickname).toBe("");
+      expect(result.current.reaction).toBe("");
+      expect(result.current.isVideoOn).toBe(true);
+      expect(result.current.isMicOn).toBe(true);
+      expect(result.current.roomMetadata).toBeNull();
+      expect(result.current.isHost).toBe(false);
+      expect(result.current.participants).toEqual([
+        { nickname: "", isHost: false },
+      ]);
+    });
+
+    it("소켓이 없는 경우: 연결 시도", () => {
+      renderHook(() => useSession("test-session"));
+
+      expect(mockSocketStore.connect).toHaveBeenCalled();
+    });
+
+    it("이미 소켓이 있는 경우: 연결 시도 X", () => {
+      mockSocketStore.socket = mockSocket;
+
+      renderHook(() => useSession("test-session"));
+      expect(mockSocketStore.connect).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("스터디룸 입장 테스트", () => {
+    beforeEach(() => {
+      mockSocketStore.socket = mockSocket;
+    });
+
+    it("스터디룸 입장 성공", async () => {
+      const { result } = renderHook(() => useSession("test-session"));
+
+      // 1. 닉네임 설정
+      act(() => {
+        result.current.setNickname("test-user");
+      });
+
+      // 2. 방 입장 시도
+      await act(async () => {
+        await result.current.joinRoom();
+      });
+
+      // 3. 미디어 스트림 요청 확인
+      expect(mockGetMedia).toHaveBeenCalled();
+
+      // 4. 소켓 이벤트 발생 확인
+      expect(mockSocket.emit).toHaveBeenCalledWith("join_room", {
+        roomId: "test-session",
+        nickname: "test-user",
+      });
+    });
+
+    it("세션 ID가 없이 스터디룸 입장", async () => {
+      const { result } = renderHook(() => useSession(undefined));
+
+      await act(async () => {
+        await result.current.joinRoom();
+      });
+
+      expect(mockToast.error).toHaveBeenCalledWith("세션 ID가 필요합니다.");
+    });
+
+    it("닉네임 없이 스터디룸 입장", async () => {
+      const { result } = renderHook(() => useSession("test-session"));
+
+      await act(async () => {
+        await result.current.joinRoom();
+      });
+
+      expect(mockToast.error).toHaveBeenCalledWith("닉네임을 입력해주세요.");
+      expect(mockSocket.emit).not.toHaveBeenCalled();
+    });
+
+    it("미디어 스트림 획득 실패 시 에러 처리", async () => {
+      (useMediaDevices as jest.Mock).mockReturnValue({
+        ...useMediaDevices(),
+        getMedia: jest.fn().mockResolvedValue(null),
+      });
+
+      const { result } = renderHook(() => useSession("test-session"));
+      act(() => {
+        result.current.setNickname("test-user");
+      });
+
+      await act(async () => {
+        await result.current.joinRoom();
+      });
+
+      expect(mockToast.error).toHaveBeenCalledWith(
+        "미디어 스트림을 가져오지 못했습니다. 미디어 장치를 확인 후 다시 시도해주세요."
+      );
+      expect(mockNavigate).toHaveBeenCalledWith("/sessions");
+    });
+  });
+
+  describe("리액션 기능 테스트", () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+      mockSocketStore.socket = mockSocket;
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it("리액션 이벤트 발생 및 타이머 동작", () => {
+      const { result } = renderHook(() => useSession("test-session"));
+
+      act(() => {
+        result.current.emitReaction("👍");
+      });
+
+      expect(mockSocket.emit).toHaveBeenCalledWith("reaction", {
+        roomId: "test-session",
+        reaction: "👍",
+      });
+
+      act(() => {
+        jest.advanceTimersByTime(3000);
+      });
+      expect(result.current.reaction).toBe("");
+    });
+  });
+
+  describe("소켓 이벤트 리스너 테스트", () => {
+    beforeEach(() => {
+      mockSocketStore.socket = mockSocket;
+      renderHook(() => useSession("test-session"));
+    });
+
+    it("모든 소켓 이벤트 리스너 등록", () => {
+      const expectedEvents = [
+        "all_users",
+        "getOffer",
+        "getAnswer",
+        "getCandidate",
+        "user_exit",
+        "room_full",
+        "master_changed",
+        "room_finished",
+        "reaction",
+      ];
+
+      expectedEvents.forEach((event) => {
+        expect(mockSocket.on).toHaveBeenCalledWith(event, expect.any(Function));
+      });
+    });
+
+    it("room_full 이벤트 발생", () => {
+      // room_full 이벤트 핸들러 찾기
+      const roomFullHandler = mockSocket.on.mock.calls.find(
+        ([event]: [string]) => event === "room_full"
+      )[1];
+
+      // 이벤트 핸들러 실행
+      roomFullHandler();
+
+      expect(mockToast.error).toHaveBeenCalledWith(
+        "해당 세션은 이미 유저가 가득 찼습니다."
+      );
+      expect(mockNavigate).toHaveBeenCalledWith("/sessions");
+    });
+  });
+
+  describe("정리(Clean up) 테스트", () => {
+    it("언마운트 시 모든 리소스 정리", () => {
+      mockSocketStore.socket = mockSocket;
+      const { unmount } = renderHook(() => useSession("test-session"));
+
+      unmount();
+
+      // 1. 소켓 이벤트 리스너 제거
+      expect(mockSocket.off).toHaveBeenCalledWith(
+        "all_users",
+        expect.any(Function)
+      );
+      expect(mockSocket.off).toHaveBeenCalledWith(
+        "getOffer",
+        expect.any(Function)
+      );
+      expect(mockSocket.off).toHaveBeenCalledWith(
+        "getAnswer",
+        expect.any(Function)
+      );
+      expect(mockSocket.off).toHaveBeenCalledWith(
+        "getCandidate",
+        expect.any(Function)
+      );
+      expect(mockSocket.off).toHaveBeenCalledWith("user_exit");
+      expect(mockSocket.off).toHaveBeenCalledWith("room_full");
+      expect(mockSocket.off).toHaveBeenCalledWith(
+        "master_changed",
+        expect.any(Function)
+      );
+      expect(mockSocket.off).toHaveBeenCalledWith(
+        "room_finished",
+        expect.any(Function)
+      );
+      expect(mockSocket.off).toHaveBeenCalledWith(
+        "reaction",
+        expect.any(Function)
+      );
+
+      // 2. 미디어 트랙 정리
+      expect(mockMediaStream.getTracks).toHaveBeenCalled();
+      expect(mockMediaStream.getTracks()[0].stop).toHaveBeenCalled();
+
+      // 3. Peer Connection 정리
+      expect(mockPeerConnections.current["peer-1"].close).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/frontend/src/hooks/type/session.d.ts b/frontend/src/hooks/type/session.d.ts
new file mode 100644
index 00000000..e0281334
--- /dev/null
+++ b/frontend/src/hooks/type/session.d.ts
@@ -0,0 +1,30 @@
+export type RoomStatus = "PUBLIC" | "PRIVATE";
+
+export interface RoomMetadata {
+  title: string;
+  status: RoomStatus;
+  maxParticipants: number;
+  createdAt: number;
+  host: string;
+}
+
+export interface AllUsersResponse {
+  roomMetadata: RoomMetadata;
+  users: {
+    [socketId: string]: {
+      joinTime: number;
+      nickname: string;
+      isHost: boolean;
+    };
+  };
+}
+
+export interface ResponseMasterChanged {
+  masterNickname: string;
+  masterSocketId: string;
+}
+
+export interface Participant {
+  nickname: string;
+  isHost: boolean;
+}
diff --git a/frontend/src/hooks/type/session.test.d.ts b/frontend/src/hooks/type/session.test.d.ts
new file mode 100644
index 00000000..fc14108a
--- /dev/null
+++ b/frontend/src/hooks/type/session.test.d.ts
@@ -0,0 +1,20 @@
+export type MockSocket = Partial<Socket> & {
+  emit: jest.Mock;
+  on: jest.Mock;
+  off: jest.Mock;
+  id: string;
+};
+
+interface MockPeerConnection {
+  ontrack: null | ((event: any) => void);
+  onicecandidate: null | ((event: any) => void);
+  oniceconnectionstatechange: null | (() => void);
+  onconnectionstatechange: null | (() => void);
+  close: jest.Mock;
+}
+
+export interface MockPeerConnections {
+  current: {
+    [key: string]: MockPeerConnection;
+  };
+}
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
new file mode 100644
index 00000000..6555e5bb
--- /dev/null
+++ b/frontend/src/hooks/useAuth.ts
@@ -0,0 +1,17 @@
+import useAuthStore from "@stores/useAuthStore.ts";
+
+const useAuth = () => {
+  const { isLoggedIn, nickname, login, logout, setNickname } = useAuthStore();
+
+  const logIn = () => {
+    login();
+  };
+
+  const logOut = () => {
+    logout();
+  };
+
+  return { isLoggedIn, nickname, logIn, logOut, setNickname };
+};
+
+export default useAuth;
diff --git a/frontend/src/hooks/useCreateQuestion.ts b/frontend/src/hooks/useCreateQuestion.ts
new file mode 100644
index 00000000..4d550ba4
--- /dev/null
+++ b/frontend/src/hooks/useCreateQuestion.ts
@@ -0,0 +1,21 @@
+import { useMutation } from "@tanstack/react-query";
+import { createQuestionList } from "@/api/questions/create";
+import useToast from "@/hooks/useToast";
+import { useNavigate } from "react-router-dom";
+
+export const useCreateQuestion = () => {
+  const toast = useToast();
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationFn: createQuestionList,
+    onSuccess: (response) => {
+      const questionListId = response.data.createdQuestionList.id;
+      toast.success("질문지 생성에 성공했습니다.");
+      navigate(`questions/${questionListId}`);
+    },
+    onError: () => {
+      toast.error("질문지 생성에 실패했습니다.");
+    },
+  });
+};
diff --git a/frontend/src/hooks/useGetQuestion.ts b/frontend/src/hooks/useGetQuestion.ts
new file mode 100644
index 00000000..339053bd
--- /dev/null
+++ b/frontend/src/hooks/useGetQuestion.ts
@@ -0,0 +1,25 @@
+import fetchQuestion from "@/api/questions/getQuestion";
+import { useQuery } from "@tanstack/react-query";
+
+interface QuestionContent {
+  id: number;
+  content: string;
+  index: number;
+  questionListId: number;
+}
+
+interface ApiResponse {
+  id: number;
+  title: string;
+  contents: QuestionContent[];
+  categoryNames: string[];
+  usage: number;
+  username: string;
+}
+
+export const useGetQuestion = (questionListId: string) => {
+  return useQuery<ApiResponse>({
+    queryKey: ["questions", questionListId],
+    queryFn: () => fetchQuestion(Number(questionListId)),
+  });
+};
diff --git a/frontend/src/hooks/useSession.ts b/frontend/src/hooks/useSession.ts
new file mode 100644
index 00000000..19bf748d
--- /dev/null
+++ b/frontend/src/hooks/useSession.ts
@@ -0,0 +1,342 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import useToast from "@/hooks/useToast";
+import useMediaDevices from "@/hooks/useMediaDevices";
+import usePeerConnection from "@/hooks/usePeerConnection";
+import useSocket from "./useSocket";
+import {
+  AllUsersResponse,
+  Participant,
+  ResponseMasterChanged,
+  RoomMetadata,
+} from "./type/session";
+
+export const useSession = (sessionId: string | undefined) => {
+  const { socket } = useSocket();
+  const navigate = useNavigate();
+  const toast = useToast();
+
+  const {
+    createPeerConnection,
+    closePeerConnection,
+    peers,
+    setPeers,
+    peerConnections,
+  } = usePeerConnection(socket!);
+
+  const [nickname, setNickname] = useState<string>("");
+  const [reaction, setReaction] = useState("");
+  const [roomMetadata, setRoomMetadata] = useState<RoomMetadata | null>(null);
+  const [isHost, setIsHost] = useState<boolean>(false);
+
+  const reactionTimeouts = useRef<{
+    [key: string]: ReturnType<typeof setTimeout>;
+  }>({});
+
+  const {
+    userVideoDevices,
+    userAudioDevices,
+    selectedAudioDeviceId,
+    selectedVideoDeviceId,
+    stream,
+    isVideoOn,
+    isMicOn,
+    handleMicToggle,
+    handleVideoToggle,
+    setSelectedAudioDeviceId,
+    setSelectedVideoDeviceId,
+    getMedia,
+  } = useMediaDevices();
+
+  useEffect(() => {
+    const connections = peerConnections;
+    return () => {
+      Object.values(connections.current).forEach((pc) => {
+        pc.ontrack = null;
+        pc.onicecandidate = null;
+        pc.oniceconnectionstatechange = null;
+        pc.onconnectionstatechange = null;
+        pc.close();
+      });
+    };
+  }, [peerConnections]);
+
+  useEffect(() => {
+    if (selectedAudioDeviceId || selectedVideoDeviceId) {
+      getMedia();
+    }
+  }, [selectedAudioDeviceId, selectedVideoDeviceId, getMedia]);
+
+  useEffect(() => {
+    return () => {
+      if (stream) {
+        stream.getTracks().forEach((track) => track.stop());
+      }
+    };
+  }, [stream]);
+
+  const handleUserExit = useCallback(
+    ({ socketId }: { socketId: string }) => {
+      toast.error("유저가 나갔습니다.");
+      closePeerConnection(socketId);
+    },
+    [toast, closePeerConnection]
+  );
+
+  const handleRoomFinished = useCallback(() => {
+    toast.error("방장이 세션을 종료했습니다.");
+    navigate("/sessions");
+  }, [toast, navigate]);
+
+  const handleHostChange = useCallback(
+    (data: ResponseMasterChanged) => {
+      if (socket && data.masterSocketId === socket.id) {
+        setIsHost(true);
+        toast.success("당신이 호스트가 되었습니다.");
+      } else {
+        setPeers((prev) =>
+          prev.map((peer) =>
+            peer.peerId === data.masterSocketId
+              ? { ...peer, isHost: true }
+              : peer
+          )
+        );
+        toast.success(`${data.masterNickname}님이 호스트가 되었습니다.`);
+      }
+    },
+    [socket, toast, setPeers]
+  );
+
+  const setupSocketListeners = useCallback(() => {
+    if (!socket || !stream) return;
+
+    const handleAllUsers = ({ roomMetadata, users }: AllUsersResponse) => {
+      if (!roomMetadata || !users) {
+        console.error("Invalid data received from server:", {
+          roomMetadata,
+          users,
+        });
+        return;
+      }
+
+      setRoomMetadata(roomMetadata);
+      setIsHost(roomMetadata.host === socket.id);
+      Object.entries(users).forEach(([socketId, userInfo]) => {
+        createPeerConnection(socketId, userInfo.nickname, stream, true, {
+          nickname,
+          isHost: userInfo.isHost,
+        });
+      });
+    };
+
+    const handleGetOffer = async (data: {
+      sdp: RTCSessionDescription;
+      offerSendID: string;
+      offerSendNickname: string;
+    }) => {
+      const pc = createPeerConnection(
+        data.offerSendID,
+        data.offerSendNickname,
+        stream,
+        false,
+        { nickname }
+      );
+      if (!pc) return;
+
+      try {
+        await pc.setRemoteDescription(new RTCSessionDescription(data.sdp));
+        const answer = await pc.createAnswer();
+        await pc.setLocalDescription(answer);
+
+        socket.emit("answer", {
+          answerReceiveID: data.offerSendID,
+          sdp: answer,
+          answerSendID: socket.id,
+        });
+      } catch (error) {
+        console.error("Error handling offer:", error);
+      }
+    };
+
+    const handleGetAnswer = async (data: {
+      sdp: RTCSessionDescription;
+      answerSendID: string;
+    }) => {
+      const pc = peerConnections.current[data.answerSendID];
+      if (!pc) return;
+      try {
+        await pc.setRemoteDescription(new RTCSessionDescription(data.sdp));
+      } catch (error) {
+        console.error("Error handling answer:", error);
+      }
+    };
+
+    const handleGetCandidate = async (data: {
+      candidate: RTCIceCandidate;
+      candidateSendID: string;
+    }) => {
+      const pc = peerConnections.current[data.candidateSendID];
+      if (!pc) return;
+      try {
+        await pc.addIceCandidate(new RTCIceCandidate(data.candidate));
+      } catch (error) {
+        console.error("Error handling ICE candidate:", error);
+      }
+    };
+
+    const handleReaction = ({
+      senderId,
+      reaction,
+    }: {
+      senderId: string;
+      reaction: string;
+    }) => {
+      if (reactionTimeouts.current[senderId]) {
+        clearTimeout(reactionTimeouts.current[senderId]);
+      }
+
+      if (senderId === socket.id) {
+        setReaction(reaction);
+        reactionTimeouts.current[senderId] = setTimeout(() => {
+          setReaction("");
+          delete reactionTimeouts.current[senderId];
+        }, 3000);
+      } else {
+        addReaction(senderId, reaction);
+        reactionTimeouts.current[senderId] = setTimeout(() => {
+          addReaction(senderId, "");
+          delete reactionTimeouts.current[senderId];
+        }, 3000);
+      }
+    };
+
+    socket.on("all_users", handleAllUsers);
+    socket.on("getOffer", handleGetOffer);
+    socket.on("getAnswer", handleGetAnswer);
+    socket.on("getCandidate", handleGetCandidate);
+    socket.on("user_exit", handleUserExit);
+    socket.on("room_full", () => {
+      toast.error("해당 세션은 이미 유저가 가득 찼습니다.");
+      navigate("/sessions");
+    });
+    socket.on("master_changed", handleHostChange);
+    socket.on("reaction", handleReaction);
+    socket.on("room_finished", handleRoomFinished);
+
+    return () => {
+      socket.off("all_users", handleAllUsers);
+      socket.off("getOffer", handleGetOffer);
+      socket.off("getAnswer", handleGetAnswer);
+      socket.off("getCandidate", handleGetCandidate);
+      socket.off("user_exit");
+      socket.off("room_full");
+      socket.off("master_changed", handleHostChange);
+      socket.off("room_finished", handleRoomFinished);
+      socket.off("reaction", handleReaction);
+
+      if (reactionTimeouts.current) {
+        Object.values(reactionTimeouts.current).forEach(clearTimeout);
+      }
+    };
+  }, [
+    socket,
+    stream,
+    nickname,
+    createPeerConnection,
+    closePeerConnection,
+    peerConnections,
+    navigate,
+    toast,
+    handleHostChange,
+    handleUserExit,
+    handleRoomFinished,
+  ]);
+
+  useEffect(() => {
+    const cleanup = setupSocketListeners();
+    return () => cleanup?.();
+  }, [setupSocketListeners]);
+
+  const joinRoom = async () => {
+    if (!socket) {
+      toast.error("소켓 연결이 필요합니다.");
+      return;
+    }
+
+    if (!sessionId) {
+      toast.error("세션 ID가 필요합니다.");
+      return;
+    }
+
+    if (!nickname) {
+      toast.error("닉네임을 입력해주세요.");
+      return;
+    }
+
+    const mediaStream = await getMedia();
+    if (!mediaStream) {
+      toast.error(
+        "미디어 스트림을 가져오지 못했습니다. 미디어 장치를 확인 후 다시 시도해주세요."
+      );
+      navigate("/sessions");
+      return;
+    }
+
+    socket.emit("join_room", { roomId: sessionId, nickname });
+  };
+
+  const emitReaction = useCallback(
+    (reactionType: string) => {
+      if (socket) {
+        socket.emit("reaction", {
+          roomId: sessionId,
+          reaction: reactionType,
+        });
+      }
+    },
+    [socket, sessionId]
+  );
+
+  const addReaction = useCallback(
+    (senderId: string, reactionType: string) => {
+      setPeers((prev) =>
+        prev.map((peer) =>
+          peer.peerId === senderId ? { ...peer, reaction: reactionType } : peer
+        )
+      );
+    },
+    [setPeers]
+  );
+
+  const participants: Participant[] = useMemo(
+    () => [
+      { nickname, isHost },
+      ...peers.map((peer) => ({
+        nickname: peer.peerNickname,
+        isHost: peer.isHost || false,
+      })),
+    ],
+    [nickname, isHost, peers]
+  );
+
+  return {
+    nickname,
+    setNickname,
+    reaction,
+    peers,
+    userVideoDevices,
+    userAudioDevices,
+    isVideoOn,
+    isMicOn,
+    stream,
+    roomMetadata,
+    isHost,
+    participants,
+    handleMicToggle,
+    handleVideoToggle,
+    setSelectedAudioDeviceId,
+    setSelectedVideoDeviceId,
+    joinRoom,
+    emitReaction,
+  };
+};
diff --git a/frontend/src/hooks/useSocket.ts b/frontend/src/hooks/useSocket.ts
index 11647d2e..1ae6527a 100644
--- a/frontend/src/hooks/useSocket.ts
+++ b/frontend/src/hooks/useSocket.ts
@@ -1,7 +1,9 @@
 import { useEffect } from "react";
 import useSocketStore from "../stores/useSocketStore";
 
-const useSocket = (socketURL: string) => {
+const socketURL = import.meta.env.VITE_SIGNALING_SERVER;
+
+const useSocket = () => {
   const { socket, connect } = useSocketStore();
 
   useEffect(() => {
@@ -9,7 +11,7 @@ const useSocket = (socketURL: string) => {
       connect(socketURL);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [socketURL]);
+  }, []);
 
   return { socket };
 };
diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
new file mode 100644
index 00000000..cd0fc401
--- /dev/null
+++ b/frontend/src/hooks/useTheme.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+type Theme = "light" | "dark";
+
+const useTheme = () => {
+  const [theme, setTheme] = useState<Theme>(
+    (localStorage.getItem("theme") as Theme) || "light"
+  );
+
+  useEffect(() => {
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    if (theme === "light") {
+      localStorage.setItem("theme", "dark");
+      setTheme("dark");
+    } else {
+      localStorage.setItem("theme", "light");
+      setTheme("light");
+    }
+  };
+  return { theme, toggleTheme };
+};
+
+export default useTheme;
diff --git a/frontend/src/hooks/useToast.ts b/frontend/src/hooks/useToast.ts
index 0d2e1aa0..998b73d5 100644
--- a/frontend/src/hooks/useToast.ts
+++ b/frontend/src/hooks/useToast.ts
@@ -1,25 +1,35 @@
-import useToastStore from "../stores/useToastStore.ts";
-import { useCallback } from "react";
+import useToastStore from "@/stores/useToastStore";
+import { useCallback, useEffect, useRef } from "react";
 
 const useToast = () => {
   const { createToast, removeToast } = useToastStore();
   const DURATION = 5000;
+  const timerIDs = useRef<ReturnType<typeof setTimeout>[]>([]);
 
   const toast = useCallback(
     (message: string, type: "success" | "error") => {
       const newToast = {
-        id: new Date().getTime(),
+        id: new Date().getTime() + Math.floor(Math.random() * 200),
         message,
         type,
         duration: DURATION || 5000,
       };
 
       createToast(newToast);
-      setTimeout(() => removeToast(newToast.id), DURATION);
+      const id = setTimeout(() => {
+        removeToast(newToast.id);
+        timerIDs.current = timerIDs.current.filter((timerId) => timerId !== id);
+      }, DURATION);
     },
     [createToast, removeToast]
   );
 
+  useEffect(() => {
+    return () => {
+      timerIDs.current.forEach((id) => clearTimeout(id));
+    };
+  }, []);
+
   const success = useCallback(
     (message: string) => {
       toast(message, "success");
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b3aec69e..594d229b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -12,11 +12,13 @@
 }
 
 :root {
+  --bg-color-default: #FAFAFA;
+
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
-  background-color: #FAFAFA;
+  background-color: var(--bg-color-default);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -24,12 +26,8 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #171717;
-    background-color: #FAFAFA;
-  }
+.dark {
+  --bg-color-default: #141414;
 }
 
 
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 1effd7bc..e013b5d8 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,15 +1,20 @@
-import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { routes } from "./routes.tsx";
 import ToastProvider from "./components/common/ToastProvider.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const router = createBrowserRouter(routes);
+const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <ToastProvider />
-    <RouterProvider router={router} />
-  </StrictMode>
+  <>
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools initialIsOpen={false} />
+      <ToastProvider />
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  </>
 );
diff --git a/frontend/src/pages/CreateQuestionPage.tsx b/frontend/src/pages/CreateQuestionPage.tsx
new file mode 100644
index 00000000..3a0cf147
--- /dev/null
+++ b/frontend/src/pages/CreateQuestionPage.tsx
@@ -0,0 +1,38 @@
+import QuestionForm from "@/components/questions/create/QuestionForm";
+import { IoArrowBackSharp } from "react-icons/io5";
+import { useNavigate } from "react-router-dom";
+import useAuth from "@hooks/useAuth.ts";
+import { useEffect } from "react";
+import useToast from "@hooks/useToast.ts";
+
+const CreateQuestionPage = () => {
+  const navigate = useNavigate();
+  const { isLoggedIn } = useAuth();
+  const toast = useToast();
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      toast.error("로그인이 필요한 서비스입니다.");
+      navigate("/questions");
+    }
+  }, [isLoggedIn]);
+
+  return (
+    <div className="m-20">
+      <button
+        className="flex items-center gap-4 mb-5 text-gray-black text-medium-l"
+        onClick={() => navigate("/questions")}
+      >
+        <IoArrowBackSharp className="w-5 h-5" />
+        <span>면접 리스트로 돌아가기</span>
+      </button>
+      <h1 className="text-bold-l mb-2">새로운 면접 질문 리스트 만들기</h1>
+      <p className="text-medium-l text-gray-400 mb-8">
+        면접 스터디를 위한 새로운 질문지를 생성합니다.
+      </p>
+      <QuestionForm />
+    </div>
+  );
+};
+
+export default CreateQuestionPage;
diff --git a/frontend/src/pages/CreateSessionPage.tsx b/frontend/src/pages/CreateSessionPage.tsx
index 08746e5f..35e3cc50 100644
--- a/frontend/src/pages/CreateSessionPage.tsx
+++ b/frontend/src/pages/CreateSessionPage.tsx
@@ -3,6 +3,8 @@ import SessionForm from "@/components/sessions/create/SessionForm";
 import { useNavigate } from "react-router-dom";
 import { useEffect } from "react";
 import useSessionFormStore from "@/stores/useSessionFormStore";
+import Sidebar from "@components/common/Sidebar.tsx";
+import { sectionWithSidebar } from "@/constraints/LayoutConstant.ts";
 
 const CreateSessionPage = () => {
   const navigate = useNavigate();
@@ -14,20 +16,23 @@ const CreateSessionPage = () => {
   }, []);
 
   return (
-    <div className="m-20">
-      <button
-        className="flex items-center gap-4 mb-5 text-gray-black text-medium-l"
-        onClick={() => navigate("/sessions")}
-      >
-        <IoArrowBackSharp className="w-5 h-5" />
-        <span>면접 채널로 돌아가기</span>
-      </button>
-      <h1 className="text-bold-l mb-2">새로운 스터디 세션 만들기</h1>
-      <p className="text-medium-l text-gray-400 mb-8">
-        면접 스터디를 위한 새로운 세션을 생성합니다.
-      </p>
-      <SessionForm />
-    </div>
+    <section className={`${sectionWithSidebar}`}>
+      <Sidebar />
+      <div className={"p-20"}>
+        <button
+          className="flex items-center gap-4 mb-5 text-gray-black text-medium-l"
+          onClick={() => navigate("/sessions")}
+        >
+          <IoArrowBackSharp className="w-5 h-5" />
+          <span>면접 채널로 돌아가기</span>
+        </button>
+        <h1 className="text-bold-l mb-2">새로운 스터디 세션 만들기</h1>
+        <p className="text-medium-l text-gray-400 mb-8">
+          면접 스터디를 위한 새로운 세션을 생성합니다.
+        </p>
+        <SessionForm />
+      </div>
+    </section>
   );
 };
 
diff --git a/frontend/src/pages/ErrorPage.tsx b/frontend/src/pages/ErrorPage.tsx
new file mode 100644
index 00000000..652f8c60
--- /dev/null
+++ b/frontend/src/pages/ErrorPage.tsx
@@ -0,0 +1,65 @@
+import snowmanAnimate from "/assets/snowman.lottie";
+import { useNavigate } from "react-router-dom";
+import { DotLottiePlayer } from "@dotlottie/react-player";
+
+const ErrorPage = () => {
+  const navigate = useNavigate();
+  return (
+    <section
+      className={
+        "w-full text-center py-20 h-screen flex items-center justify-center"
+      }
+    >
+      <div className={"relative "}>
+        <div
+          className={
+            "flex text-green-100 w-[1024px] relative -mt-32 mx-auto aspect-video -z-10"
+          }
+          aria-label={"눈사람"}
+        >
+          <span
+            className={
+              "text-9xl [text-shadow:_0_2px_2px_rgb(0_0_0_/_40%)] absolute left-80 top-1/2  font-bold"
+            }
+          >
+            4
+          </span>
+          <DotLottiePlayer
+            className={"w-full"}
+            src={snowmanAnimate}
+            autoplay
+            loop
+            speed={0.7}
+            style={{ height: 700 }}
+          />
+          <span
+            className={
+              "text-9xl [text-shadow:_0_2px_2px_rgb(0_0_0_/_40%)] absolute right-80 top-1/2 font-bold"
+            }
+          >
+            4
+          </span>
+        </div>
+        <div
+          className={
+            "absolute bottom-12 left-1/2 transform -translate-x-1/2 z-20 pointer-events-nones"
+          }
+        >
+          <p className={"font-light text-xl"}>
+            이런! 요청하신 데이터를 찾을 수 없어요!
+          </p>
+          <button
+            className={
+              "text-semibold-l text-green-500 hover:text-green-600 p-2 rounded-lg mt-4"
+            }
+            onClick={() => navigate("/sessions")}
+          >
+            메인 페이지로 이동하기
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ErrorPage;
diff --git a/frontend/src/pages/Login/AuthCallbackPage.tsx b/frontend/src/pages/Login/AuthCallbackPage.tsx
new file mode 100644
index 00000000..34ba2481
--- /dev/null
+++ b/frontend/src/pages/Login/AuthCallbackPage.tsx
@@ -0,0 +1,53 @@
+import LoadingIndicator from "@components/common/LoadingIndicator.tsx";
+import { useEffect } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import useToast from "@hooks/useToast.ts";
+import useAuth from "@hooks/useAuth.ts";
+
+const AuthCallbackPage = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const auth = useAuth();
+  useEffect(() => {
+    const code = new URLSearchParams(window.location.search).get("code");
+    if (code) {
+      sendCodeToServer(code);
+    } else {
+      console.error("Code not found");
+      toast.error("로그인에 실패했습니다.");
+      navigate("/login");
+    }
+  }, []);
+
+  const sendCodeToServer = async (code: string) => {
+    try {
+      const response = await axios.post("/api/auth/github", {
+        code: code,
+      });
+      if (response.data.success) {
+        toast.success("로그인에 성공했습니다.");
+        auth.logIn();
+        try {
+          const response = await axios.get("api/auth/whoami");
+          auth.setNickname(response.data.nickname);
+        } catch (error) {
+          console.error("Failed to get user info", error);
+        } finally {
+          navigate("/");
+        }
+      }
+    } catch (error) {
+      console.error("Failed to sending auth code to server", error);
+      toast.error("로그인에 실패했습니다.");
+      navigate("/login");
+    }
+  };
+
+  return (
+    <section className={"h-screen flex justify-center items-center"}>
+      <LoadingIndicator loadingState={true} text={"Authenticating..."} />
+    </section>
+  );
+};
+export default AuthCallbackPage;
diff --git a/frontend/src/pages/Login/LoginPage.tsx b/frontend/src/pages/Login/LoginPage.tsx
new file mode 100644
index 00000000..e307d8d4
--- /dev/null
+++ b/frontend/src/pages/Login/LoginPage.tsx
@@ -0,0 +1,120 @@
+import { FaGithub, FaGoogle } from "react-icons/fa";
+import { DotLottiePlayer } from "@dotlottie/react-player";
+
+import mainSnowman from "/assets/noondeumyum.lottie";
+
+const LoginPage = () => {
+  const handleOAuthLogin = (provider: "github" | "google") => {
+    if (provider === "github") {
+      // 깃허브 로그인
+      window.location.assign(
+        `https://github.com/login/oauth/authorize?client_id=${import.meta.env.VITE_OAUTH_GITHUB_ID}&redirect_uri=${import.meta.env.VITE_OAUTH_GITHUB_CALLBACK}`
+      );
+    } else if (provider === "google") {
+      // 구글 로그인
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-8">
+      {/* 전체 컨테이너 */}
+      <div className="w-full max-w-7xl mx-auto px-8">
+        {/* 전체 콘텐츠를 감싸는 프레임 */}
+        <div className="h-[640px] bg-gray-800/50 backdrop-blur-md rounded-2xl shadow-24 overflow-hidden">
+          {/* 내부 콘텐츠 그리드 */}
+          <div className="flex h-full">
+            {/* 왼쪽 콘텐츠 영역 - 7칸 차지 */}
+            <div className="hidden lg:flex flex-grow flex-col justify-center col-span-7 p-16 bg-gradient-to-br from-emerald-600 to-emerald-700">
+              <div className="max-w-2xl min-w-2xl flex flex-col justify-center">
+                <DotLottiePlayer
+                  src={mainSnowman}
+                  autoplay
+                  loop
+                  speed={0.7}
+                  style={{ height: 500 }}
+                />
+              </div>
+            </div>
+
+            {/* 오른쪽 로그인 폼 - 5칸 차지 */}
+            <div className="col-span-5 p-16 bg-gray-white w-full lg:w-5/12">
+              <h1 className="text-6xl font-raleway font-bold black mb-11 tracking-tight text-center">
+                Preview
+              </h1>
+              <div className="w-full max-w-md mx-auto">
+                <form className="space-y-4">
+                  <div>
+                    <input
+                      type="email"
+                      id="email"
+                      className="w-full px-4 py-3 bg-white border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
+                      placeholder="이메일을 입력하세요"
+                    />
+                  </div>
+
+                  <div>
+                    <input
+                      type="password"
+                      id="password"
+                      className="w-full px-4 py-3 bg-white border border-gray-300 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
+                      placeholder="비밀번호를 입력하세요"
+                    />
+                  </div>
+
+                  <button
+                    type="submit"
+                    className="w-full bg-green-200 text-white py-3 rounded-md hover:bg-green-100 transition-colors font-medium text-lg shadow-16"
+                  >
+                    로그인
+                  </button>
+
+                  <div className="flex items-center justify-between text-base text-gray-600">
+                    <button
+                      type="button"
+                      className="hover:text-green-300 transition-colors"
+                    >
+                      회원가입
+                    </button>
+                    <button
+                      type="button"
+                      className="hover:text-green-300 transition-colors"
+                    >
+                      비밀번호 찾기
+                    </button>
+                  </div>
+                  {/* 구분선 */}
+                  <div className="relative">
+                    <div className="absolute inset-0 flex items-center">
+                      <div className="w-full border-t border-gray-300"></div>
+                    </div>
+                    <div className="relative flex justify-center text-sm">
+                      <span className="px-2 bg-white text-gray-500">또는</span>
+                    </div>
+                  </div>
+                  {/* OAuth 로그인 버튼 */}
+                  <button
+                    onClick={() => handleOAuthLogin("github")}
+                    type="button"
+                    className="w-full bg-gray-900 text-white py-3 rounded-md hover:bg-gray-800 transition-colors font-medium text-lg shadow-16 flex items-center justify-center gap-3"
+                  >
+                    <FaGithub className="w-5 h-5" />
+                    GitHub으로 계속하기
+                  </button>
+                  <button
+                    type="button"
+                    className="w-full bg-blue-500 text-white py-3 rounded-md hover:bg-blue-400 transition-colors font-medium text-lg shadow-16 flex items-center justify-center gap-3"
+                  >
+                    <FaGoogle className="w-5 h-5" />
+                    Google으로 그만하기
+                  </button>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
diff --git a/frontend/src/pages/MyPage.tsx b/frontend/src/pages/MyPage.tsx
new file mode 100644
index 00000000..1cfea32f
--- /dev/null
+++ b/frontend/src/pages/MyPage.tsx
@@ -0,0 +1,58 @@
+import { sectionWithSidebar } from "@/constraints/LayoutConstant.ts";
+import { useEffect, useState } from "react";
+import useAuth from "@hooks/useAuth.ts";
+import { useNavigate } from "react-router-dom";
+import useToast from "@hooks/useToast.ts";
+import Sidebar from "@components/common/Sidebar.tsx";
+import axios from "axios";
+
+interface UserInfo {
+  nickname: string;
+}
+
+const MyPage = () => {
+  const { isLoggedIn, nickname } = useAuth();
+  const toast = useToast();
+  const navigate = useNavigate();
+  const [userInfo, setUserInfo] = useState<UserInfo>();
+  const auth = useAuth();
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      toast.error("로그인이 필요한 서비스입니다.");
+      navigate("/login");
+    } else {
+      if (auth.nickname) {
+        setUserInfo({ nickname: auth.nickname });
+      } else {
+        getUserInfo();
+      }
+      setUserInfo({ nickname });
+    }
+  }, [isLoggedIn]);
+
+  const getUserInfo = async () => {
+    try {
+      const response = await axios.get("/api/auth/whoami");
+
+      if (response.data.username) {
+        auth.setNickname(response.data.username);
+        setUserInfo({ nickname: response.data.username });
+      }
+    } catch (error) {
+      console.error("유저 정보 불러오기 실패", error);
+    }
+  };
+
+  return (
+    <section className={sectionWithSidebar}>
+      <Sidebar />
+      <div className={"p-20"}>
+        <h1 className={"text-4xl "}>My Page</h1>
+        <p>유저 정보: {userInfo && userInfo.nickname}</p>
+      </div>
+    </section>
+  );
+};
+
+export default MyPage;
diff --git a/frontend/src/pages/QuestionDetailPage.tsx b/frontend/src/pages/QuestionDetailPage.tsx
new file mode 100644
index 00000000..e5dd1e52
--- /dev/null
+++ b/frontend/src/pages/QuestionDetailPage.tsx
@@ -0,0 +1,46 @@
+import { useNavigate, useParams } from "react-router-dom";
+import Sidebar from "@/components/common/Sidebar";
+import { sectionWithSidebar } from "@/constraints/LayoutConstant";
+import QuestionTitle from "@/components/questions/detail/QuestionTitle.tsx";
+import QuestionList from "@/components/questions/detail/QuestionList.tsx";
+import { useGetQuestion } from "@/hooks/useGetQuestion";
+import ButtonSection from "@/components/questions/detail/ButtonSection.tsx";
+
+const QuestionDetailPage = () => {
+  const navigate = useNavigate();
+  const { questionId } = useParams();
+  if (!questionId) {
+    navigate("/questions");
+    return null;
+  }
+
+  const {
+    data: question,
+    isLoading,
+    isError,
+    error,
+  } = useGetQuestion(questionId);
+
+  if (isLoading) return <div>로딩 중</div>;
+  if (isError) return <div>에러가 발생했습니다: {error.message}</div>;
+  if (!question) return null;
+
+  return (
+    <section className={`${sectionWithSidebar}`}>
+      <Sidebar />
+      <div className={"flex h-fit gap-8 max-w-7xl px-12 pt-20"}>
+        <div
+          className={
+            "flex flex-col gap-4 w-47.5 p-8 bg-gray-white rounded-custom-l shadow-16"
+          }
+        >
+          <QuestionTitle questionId={questionId} />
+          <QuestionList questionId={questionId} />
+          <ButtonSection />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default QuestionDetailPage;
diff --git a/frontend/src/pages/QuestionListPage.tsx b/frontend/src/pages/QuestionListPage.tsx
new file mode 100644
index 00000000..817fc050
--- /dev/null
+++ b/frontend/src/pages/QuestionListPage.tsx
@@ -0,0 +1,140 @@
+import Sidebar from "@components/common/Sidebar.tsx";
+import SearchBar from "@components/common/SearchBar.tsx";
+import QuestionsPreviewCard from "@components/questions/QuestionsPreviewCard.tsx";
+import Select from "@components/common/Select.tsx";
+import useToast from "@hooks/useToast.ts";
+import { useEffect, useState } from "react";
+import LoadingIndicator from "@components/common/LoadingIndicator.tsx";
+import { IoMdAdd } from "react-icons/io";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import useAuth from "@hooks/useAuth.ts";
+
+
+interface QuestionList {
+  id: number;
+  title: string;
+  usage: number;
+  isStarred?: boolean;
+  questionCount: number;
+  categoryNames: string[];
+}
+
+const QuestionList = () => {
+  const toast = useToast();
+  // 더미 데이터
+  const [questionList, setQuestionList] = useState<QuestionList[]>([]);
+  const [questionLoading, setQuestionLoading] = useState(true);
+  const navigate = useNavigate();
+
+  const { isLoggedIn } = useAuth();
+
+  useEffect(() => {
+    getQuestionList();
+  }, []);
+
+  const getQuestionList = async () => {
+    try {
+      const response = await axios.get("/api/question-list");
+      console.log(response);
+      const data = response.data.data.allQuestionLists ?? [];
+      setQuestionList(data);
+      setQuestionLoading(false);
+    } catch (error) {
+      console.error("질문지 리스트 불러오기 실패", error);
+      const questionLists = [
+        {
+          id: 1,
+          title: "프론트엔드 기술 면접",
+          questionCount: 25,
+          usage: 128,
+          isStarred: true,
+          categoryNames: ["Frontend"],
+        },
+        {
+          id: 2,
+          title: "요청에 실패해서 더미 데이터입니다.",
+          questionCount: 30,
+          usage: 89,
+          isStarred: false,
+          categoryNames: ["React"],
+        },
+        {
+          id: 3,
+          title: "JavaScript 핵심 개념",
+          questionCount: 40,
+          usage: 156,
+          isStarred: true,
+          categoryNames: ["JavaScript"],
+        },
+      ];
+      setQuestionList(questionLists);
+    }
+  };
+
+  const handleNavigateDetail = (id: number) => {
+    toast.error(`질문지 아이디${id} 페이지는 준비중인 기능입니다.`);
+  };
+
+  const handleNavigateCreate = () => {
+    if (isLoggedIn) {
+      navigate("/questions/create");
+    } else {
+      toast.error("로그인이 필요한 기능입니다.");
+    }
+  };
+
+  return (
+    <section className="flex w-screen min-h-screen">
+      <Sidebar />
+      <div className="max-w-7xl w-full px-12 pt-20">
+        <div className="mb-12">
+          <h1 className="text-bold-l text-gray-black dark:text-white mb-6">
+            질문지 목록
+          </h1>
+          <div className="flex gap-2 items-stretch justify-between">
+            <SearchBar text={"질문지 검색하기"} />
+            <Select
+              options={[
+                { label: "FE", value: "FE" },
+                { label: "BE", value: "BE" },
+                { label: "CS", value: "CS" },
+              ]}
+            />
+            <button
+              className={
+                "flex justify-center items-center fill-current min-w-11 min-h-11 bg-green-200 rounded-custom-m box-border"
+              }
+              onClick={handleNavigateCreate}
+            >
+              <IoMdAdd className="w-[1.35rem] h-[1.35rem] text-gray-white" />
+            </button>
+          </div>
+        </div>
+        <LoadingIndicator loadingState={questionLoading} />
+        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+          {questionList.map((list) => (
+            <QuestionsPreviewCard
+              key={list.id}
+              id={list.id}
+              questionCount={list.questionCount ?? 0}
+              category={list.categoryNames[0]}
+              title={list.title}
+              isStarred={list.isStarred}
+              usage={list.usage}
+              onClick={() => handleNavigateDetail(list.id)}
+            />
+          ))}
+        </div>
+        {!questionLoading && questionList.length === 0 && (
+          <div className={"p-2 text-xl text-gray-500"}>
+            이런! 아직 질문지가 없습니다! 처음으로 생성해보시는 것은 어떤가요?
+            ☃️
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default QuestionList;
diff --git a/frontend/src/pages/SessionListPage.tsx b/frontend/src/pages/SessionListPage.tsx
index 8f335487..cac3e73c 100644
--- a/frontend/src/pages/SessionListPage.tsx
+++ b/frontend/src/pages/SessionListPage.tsx
@@ -1,75 +1,95 @@
-import { IoChevronDownSharp } from "react-icons/io5";
 import { useEffect, useState } from "react";
 import SessionCard from "@/components/sessions/SessionCard.tsx";
 import { useNavigate } from "react-router-dom";
 import { IoMdAdd } from "react-icons/io";
 import SearchBar from "@/components/common/SearchBar.tsx";
 import useToast from "@/hooks/useToast";
+import Sidebar from "@components/common/Sidebar.tsx";
+import Select from "@components/common/Select.tsx";
+import axios from "axios";
+import LoadingIndicator from "@components/common/LoadingIndicator.tsx";
 
 interface Session {
   id: number;
   title: string;
-  category: string;
-  sessionStatus: "open" | "close";
+  category?: string;
+  inProgress: boolean;
   host: {
-    nickname: string;
+    nickname?: string;
+    socketId: string;
   };
-  participant: number;
+  participant: number; // 현재 참여자
   maxParticipant: number;
-}
-enum SessionStatus {
-  OPEN = "open",
-  CLOSE = "close",
+  createdAt: number;
 }
 
 const SessionListPage = () => {
   const [sessionList, setSessionList] = useState<Session[]>([]);
-  const [listLoading, setListLoading] = useState(false);
+  const [listLoading, setListLoading] = useState(true);
+  const [inProgressListLoading, setInProgressListLoading] = useState(true);
   const navigate = useNavigate();
   const toast = useToast();
 
   useEffect(() => {
-    const sessionData: Session[] = [
-      {
-        id: 1,
-        title: "프론트엔드 초보만 들어올 수 있음",
-        category: "프론트엔드",
-        sessionStatus: "open",
-        host: {
-          nickname: "J133 네모정",
+    getSessionList();
+  }, []);
+
+  const getSessionList = async () => {
+    try {
+      const response = await axios.get("/api/rooms");
+      if (Array.isArray(response.data)) {
+        setSessionList(response.data ?? []);
+        setListLoading(false);
+        setInProgressListLoading(false);
+      } else {
+        throw new Error("세션리스트 불러오기 실패");
+      }
+    } catch (e) {
+      console.error("세션리스트 불러오기 실패", e);
+      const sessionData: Session[] = [
+        {
+          id: 1,
+          title: "프론트엔드 초보만 들어올 수 있음",
+          category: "프론트엔드",
+          inProgress: false,
+          host: {
+            nickname: "J133 네모정",
+            socketId: "2222",
+          },
+          participant: 1,
+          maxParticipant: 4,
+          createdAt: 1231231230,
         },
-        participant: 1,
-        maxParticipant: 4,
-      },
-      {
-        id: 2,
-        title: "백엔드 초보만 들어올 수 있음",
-        category: "백엔드",
-        sessionStatus: "close",
-        host: {
-          nickname: "J000",
+        {
+          id: 2,
+          title: "백엔드 고수만 들어올 수 있음",
+          category: "백엔드",
+          inProgress: true,
+          host: {
+            nickname: "J187 카드뮴",
+            socketId: "2221232",
+          },
+          participant: 1,
+          maxParticipant: 2,
+          createdAt: 1231231230,
         },
-        participant: 1,
-        maxParticipant: 2,
-      },
-    ];
-
-    setTimeout(() => {
+      ];
       setSessionList(sessionData);
       setListLoading(false);
-    }, 100);
-  }, []);
+      setInProgressListLoading(false);
+    }
+  };
 
-  const renderSessionList = (sessionStatus: SessionStatus) => {
+  const renderSessionList = (isInProgress: boolean) => {
     return sessionList.map((session) => {
       return (
-        session.sessionStatus === sessionStatus && (
+        session.inProgress === isInProgress && (
           <SessionCard
             key={session.id}
-            sessionStatus={session.sessionStatus}
+            inProgress={session.inProgress}
             category={session.category}
             title={session.title}
-            host={session.host.nickname}
+            host={session.host.nickname ?? "익명"}
             questionListId={1}
             participant={session.participant}
             maxParticipant={session.maxParticipant}
@@ -84,65 +104,62 @@ const SessionListPage = () => {
   };
 
   return (
-    <section className={"flex flex-col gap-8 max-w-7xl w-screen h-screen p-20"}>
-      <div>
-        <h1 className={"text-bold-l mb-6"}>스터디 세션 목록</h1>
-        <div className={"h-11 flex gap-2 w-[47.5rem]"}>
-          <SearchBar text="세션을 검색하세요" />
-          <div className="relative inline-block items-center">
-            <select
+    <section className={"flex w-screen h-screen"}>
+      <Sidebar />
+      <div className={"flex flex-col gap-8 max-w-7xl px-12 pt-20"}>
+        <div>
+          <h1 className={"text-bold-l mb-6"}>스터디 세션 목록</h1>
+          <div className={"h-11 flex gap-2 w-[47.5rem]"}>
+            <SearchBar text="세션을 검색하세요" />
+            <Select
+              options={[
+                { label: "FE", value: "FE" },
+                { label: "BE", value: "BE" },
+                { label: "CS", value: "CS" },
+              ]}
+            />
+            <button
               className={
-                "rounded-custom-m bg-green-200 text-semibold-s text-gray-white appearance-none pl-5 pr-11 h-full"
+                "flex justify-center items-center fill-current min-w-11 min-h-11 bg-green-200 rounded-custom-m box-border"
               }
+              onClick={() => navigate("/sessions/create")}
             >
-              <option>FE</option>
-              <option>BE</option>
-            </select>
-            <span className="absolute top-1/2 -translate-y-1/2 right-3 pointer-events-none">
-              <IoChevronDownSharp className="w-5 h-5 text-gray-white" />
-            </span>
+              <IoMdAdd className="w-[1.35rem] h-[1.35rem] text-gray-white" />
+            </button>
           </div>
-          <button
-            className={
-              "flex justify-center items-center fill-current min-w-11 min-h-11 bg-green-200 rounded-custom-m box-border"
-            }
-            onClick={() => navigate("/sessions/create")}
-          >
-            <IoMdAdd className="w-[1.35rem] h-[1.35rem] text-gray-white" />
-          </button>
         </div>
-      </div>
-      <div>
-        <h2 className={"text-semibold-l mb-6"}>공개된 세션 목록</h2>
-        <ul>
-          {listLoading ? (
-            <>loading</>
-          ) : (
-            <>
-              {sessionList.length <= 0 ? (
-                <li>아직 아무도 세션을 열지 않았어요..!</li>
-              ) : (
-                renderSessionList(SessionStatus.OPEN)
-              )}
-            </>
-          )}
-        </ul>
-      </div>
-      <div>
-        <h2 className={"text-semibold-l mb-6"}>진행 중인 세션 목록</h2>
-        <ul>
-          {listLoading ? (
-            <>loading</>
-          ) : (
-            <>
-              {sessionList.length <= 0 ? (
-                <li>아직 아무도 세션을 열지 않았어요..!</li>
-              ) : (
-                renderSessionList(SessionStatus.CLOSE)
-              )}
-            </>
-          )}
-        </ul>
+        <div>
+          <h2 className={"text-semibold-l mb-4"}>공개된 세션 목록</h2>
+          <ul>
+            {listLoading ? (
+              <LoadingIndicator loadingState={listLoading} />
+            ) : (
+              <>
+                {sessionList.length <= 0 ? (
+                  <li>아직 아무도 세션을 열지 않았어요..!</li>
+                ) : (
+                  renderSessionList(false)
+                )}
+              </>
+            )}
+          </ul>
+        </div>
+        <div>
+          <h2 className={"text-semibold-l mb-4"}>진행 중인 세션 목록</h2>
+          <ul>
+            {listLoading ? (
+              <LoadingIndicator loadingState={inProgressListLoading} />
+            ) : (
+              <>
+                {sessionList.length <= 0 ? (
+                  <li>아직 아무도 세션을 열지 않았어요..!</li>
+                ) : (
+                  renderSessionList(true)
+                )}
+              </>
+            )}
+          </ul>
+        </div>
       </div>
     </section>
   );
diff --git a/frontend/src/pages/SessionPage.tsx b/frontend/src/pages/SessionPage.tsx
index 88cfb641..c13d08dc 100644
--- a/frontend/src/pages/SessionPage.tsx
+++ b/frontend/src/pages/SessionPage.tsx
@@ -1,320 +1,34 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import VideoContainer from "@/components/session/VideoContainer.tsx";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import SessionSidebar from "@/components/session/SessionSidebar.tsx";
 import SessionToolbar from "@/components/session/SessionToolbar.tsx";
-import useMediaDevices from "@/hooks/useMediaDevices.ts";
-import useToast from "@/hooks/useToast.ts";
-import usePeerConnection from "@/hooks/usePeerConnection.ts";
-import useSocketStore from "@/stores/useSocketStore";
-import SessionHeader from "@components/session/SessionHeader.tsx";
-
-type RoomStatus = "PUBLIC" | "PRIVATE";
-interface RoomMetadata {
-  title: string;
-  status: RoomStatus;
-  maxParticipants: number;
-  createdAt: number;
-  host: string;
-}
-
-interface AllUsersResponse {
-  roomMetadata: RoomMetadata;
-  users: {
-    [socketId: string]: {
-      joinTime: number;
-      nickname: string;
-      isHost: boolean;
-    };
-  };
-}
-
-interface ResponseMasterChanged {
-  masterNickname: string;
-  masterSocketId: string;
-}
+import { useSession } from "@/hooks/useSession";
+import useSocket from "@/hooks/useSocket";
+import SessionHeader from "@/components/session/SessionHeader";
 
 const SessionPage = () => {
-  const { socket, connect } = useSocketStore();
-  const {
-    createPeerConnection,
-    closePeerConnection,
-    peers,
-    setPeers,
-    peerConnections,
-  } = usePeerConnection(socket!);
   const { sessionId } = useParams();
-  const [nickname, setNickname] = useState<string>("");
-  const [reaction, setReaction] = useState("");
-  const [roomMetadata, setRoomMetadata] = useState<RoomMetadata | null>(null);
-  const [isHost, setIsHost] = useState<boolean>(false);
-
+  const { socket } = useSocket();
   const {
+    nickname,
+    setNickname,
+    reaction,
+    peers,
     userVideoDevices,
     userAudioDevices,
-    selectedAudioDeviceId,
-    selectedVideoDeviceId,
-    stream,
     isVideoOn,
     isMicOn,
+    stream,
+    roomMetadata,
+    isHost,
+    participants,
     handleMicToggle,
     handleVideoToggle,
     setSelectedAudioDeviceId,
     setSelectedVideoDeviceId,
-    getMedia,
-  } = useMediaDevices();
-
-  const reactionTimeouts = useRef<{
-    [key: string]: ReturnType<typeof setTimeout>;
-  }>({});
-  const navigate = useNavigate();
-  const toast = useToast();
-
-  useEffect(() => {
-    if (!socket) connect(import.meta.env.VITE_SIGNALING_SERVER_URL);
-    const connections = peerConnections;
-
-    return () => {
-      Object.values(connections.current).forEach((pc) => {
-        pc.ontrack = null;
-        pc.onicecandidate = null;
-        pc.oniceconnectionstatechange = null;
-        pc.onconnectionstatechange = null;
-        pc.close();
-      });
-    };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    return () => {
-      if (stream) {
-        stream.getTracks().forEach((track) => track.stop());
-      }
-    };
-  }, [stream]);
-
-  useEffect(() => {
-    if (selectedAudioDeviceId || selectedVideoDeviceId) {
-      getMedia();
-    }
-  }, [selectedAudioDeviceId, selectedVideoDeviceId]);
-
-  useEffect(() => {
-    if (!socket || !stream) return;
-
-    console.log("Setting up socket event listeners");
-
-    const handleAllUsers = ({ roomMetadata, users }: AllUsersResponse) => {
-      console.log("Received roomMetadata:", roomMetadata);
-      console.log("Received all_users:", users);
-      setRoomMetadata(roomMetadata);
-      setIsHost(roomMetadata.host === socket.id);
-      Object.entries(users).forEach(([socketId, userInfo]) => {
-        console.log("Creating peer connection for:", {
-          socketId,
-          nickname: userInfo.nickname,
-        });
-
-        createPeerConnection(socketId, userInfo.nickname, stream, true, {
-          nickname,
-          isHost: userInfo.isHost,
-        });
-      });
-    };
-
-    const handleGetOffer = async (data: {
-      sdp: RTCSessionDescription;
-      offerSendID: string;
-      offerSendNickname: string;
-    }) => {
-      console.log("Received offer from:", data.offerSendID);
-      const pc = createPeerConnection(
-        data.offerSendID,
-        data.offerSendNickname,
-        stream,
-        false,
-        { nickname }
-      );
-      if (!pc) return;
-
-      try {
-        await pc.setRemoteDescription(new RTCSessionDescription(data.sdp));
-        const answer = await pc.createAnswer();
-        await pc.setLocalDescription(answer);
-
-        socket.emit("answer", {
-          answerReceiveID: data.offerSendID,
-          sdp: answer,
-          answerSendID: socket.id,
-        });
-      } catch (error) {
-        console.error("Error handling offer:", error);
-      }
-    };
-
-    const handleGetAnswer = async (data: {
-      sdp: RTCSessionDescription;
-      answerSendID: string;
-    }) => {
-      console.log("Received answer from:", data.answerSendID);
-      const pc = peerConnections.current[data.answerSendID];
-      if (!pc) return;
-      try {
-        await pc.setRemoteDescription(new RTCSessionDescription(data.sdp));
-      } catch (error) {
-        console.error("Error handling answer:", error);
-      }
-    };
-
-    const handleGetCandidate = async (data: {
-      candidate: RTCIceCandidate;
-      candidateSendID: string;
-    }) => {
-      const pc = peerConnections.current[data.candidateSendID];
-      if (!pc) return;
-      try {
-        await pc.addIceCandidate(new RTCIceCandidate(data.candidate));
-      } catch (error) {
-        console.error("Error handling ICE candidate:", error);
-      }
-    };
-
-    const handleHostChange = (data: ResponseMasterChanged) => {
-      console.log("Host Changed", data);
-      if (data.masterSocketId === socket.id) {
-        // 내가 호스트가 된 경우
-        setIsHost(true);
-        toast.success("당신이 호스트가 되었습니다.");
-      } else {
-        setPeers((prev) => {
-          return prev.map((peer) => {
-            if (peer.peerId === data.masterSocketId) {
-              return {
-                ...peer,
-                isHost: true,
-              };
-            } else {
-              return peer;
-            }
-          });
-        });
-        toast.success(`${data.masterNickname}님이 호스트가 되었습니다.`);
-      }
-    };
-
-    const handleReaction = ({
-      senderId,
-      reaction,
-    }: {
-      senderId: string;
-      reaction: string;
-    }) => {
-      if (reactionTimeouts.current[senderId]) {
-        clearTimeout(reactionTimeouts.current[senderId]);
-      }
-
-      if (senderId === socket.id) {
-        setReaction(reaction);
-        reactionTimeouts.current[senderId] = setTimeout(() => {
-          setReaction("");
-          delete reactionTimeouts.current[senderId];
-        }, 3000);
-      } else {
-        addReaction(senderId, reaction);
-        reactionTimeouts.current[senderId] = setTimeout(() => {
-          addReaction(senderId, "");
-          delete reactionTimeouts.current[senderId];
-        }, 3000);
-      }
-    };
-
-    const handleRoomFinished = () => {
-      toast.error("방장이 세션을 종료했습니다.");
-      navigate("/sessions");
-    };
-
-    const handleUserExit = ({ socketId }: { socketId: string }) => {
-      toast.error("유저가 나갔습니다.");
-      closePeerConnection(socketId);
-    };
-
-    socket.on("all_users", handleAllUsers);
-    socket.on("getOffer", handleGetOffer);
-    socket.on("getAnswer", handleGetAnswer);
-    socket.on("getCandidate", handleGetCandidate);
-    socket.on("user_exit", handleUserExit);
-    socket.on("room_full", () => {
-      toast.error("해당 세션은 이미 유저가 가득 찼습니다.");
-      navigate("/sessions");
-    });
-    socket.on("master_changed", handleHostChange);
-    socket.on("reaction", handleReaction);
-    socket.on("room_finished", handleRoomFinished);
-
-    return () => {
-      console.log("Cleaning up socket event listeners");
-      socket.off("all_users", handleAllUsers);
-      socket.off("getOffer", handleGetOffer);
-      socket.off("getAnswer", handleGetAnswer);
-      socket.off("getCandidate", handleGetCandidate);
-      socket.off("user_exit");
-      socket.off("room_full");
-      socket.off("master_changed", handleHostChange);
-      socket.off("room_finished", handleRoomFinished);
-      socket.off("reaction", handleReaction);
-
-      if (reactionTimeouts.current) {
-        Object.values(reactionTimeouts.current).forEach((timeout) => {
-          clearTimeout(timeout);
-        });
-      }
-    };
-  }, [
-    socket,
-    stream,
-    nickname,
-    createPeerConnection,
-    closePeerConnection,
-    peerConnections,
-    navigate,
-    toast,
-  ]);
-
-  const emitReaction = (reactionType: string) => {
-    if (socket) {
-      socket.emit("reaction", {
-        roomId: sessionId,
-        reaction: reactionType,
-      });
-    }
-  };
-
-  const joinRoom = async () => {
-    if (!socket || !sessionId || !nickname) {
-      toast.error("닉네임을 입력해주세요.");
-      return;
-    }
-
-    const mediaStream = await getMedia();
-    if (!mediaStream) {
-      toast.error(
-        "미디어 스트림을 가져오지 못했습니다. 미디어 장치를 확인 후 다시 시도해주세요."
-      );
-      navigate("/sessions");
-      return;
-    }
-
-    console.log("Joining room:", sessionId);
-    socket.emit("join_room", { roomId: sessionId, nickname });
-  };
-
-  const addReaction = useCallback((senderId: string, reactionType: string) => {
-    setPeers((prev) =>
-      prev.map((peer) =>
-        peer.peerId === senderId ? { ...peer, reaction: reactionType } : peer
-      )
-    );
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    joinRoom,
+    emitReaction,
+  } = useSession(sessionId);
 
   return (
     <section className="w-screen h-screen flex flex-col max-w-[1440px]">
@@ -359,21 +73,17 @@ const SessionPage = () => {
               />
             </div>
             <div className={"listeners w-full flex gap-2 px-6"}>
-              {useMemo(
-                () =>
-                  peers.map((peer) => (
-                    <VideoContainer
-                      key={peer.peerId}
-                      nickname={peer.peerNickname}
-                      isMicOn={true}
-                      isVideoOn={true}
-                      isLocal={false}
-                      reaction={peer.reaction || ""}
-                      stream={peer.stream}
-                    />
-                  )),
-                [peers]
-              )}
+              {peers.map((peer) => (
+                <VideoContainer
+                  key={peer.peerId}
+                  nickname={peer.peerNickname}
+                  isMicOn={true}
+                  isVideoOn={true}
+                  isLocal={false}
+                  reaction={peer.reaction || ""}
+                  stream={peer.stream}
+                />
+              ))}
             </div>
           </div>
           <SessionToolbar
@@ -391,13 +101,7 @@ const SessionPage = () => {
         <SessionSidebar
           socket={socket}
           question={"Restful API에 대해서 설명해주세요."}
-          participants={[
-            { nickname, isHost },
-            ...peers.map((peer) => ({
-              nickname: peer.peerNickname,
-              isHost: peer.isHost || false,
-            })),
-          ]}
+          participants={participants}
           roomId={sessionId}
           isHost={isHost}
         />
@@ -405,5 +109,4 @@ const SessionPage = () => {
     </section>
   );
 };
-
 export default SessionPage;
diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
index 745fd0e0..f17ca32f 100644
--- a/frontend/src/routes.tsx
+++ b/frontend/src/routes.tsx
@@ -1,13 +1,21 @@
 import App from "./App.tsx";
+import CreateQuestionPage from "./pages/CreateQuestionPage.tsx";
 import CreateSessionPage from "./pages/CreateSessionPage.tsx";
+import QuestionDetailPage from "./pages/QuestionDetailPage.tsx";
 import SessionListPage from "./pages/SessionListPage.tsx";
 import SessionPage from "./pages/SessionPage";
+import ErrorPage from "@/pages/ErrorPage.tsx";
+import LoginPage from "@/pages/Login/LoginPage.tsx";
+import QuestionListPage from "@/pages/QuestionListPage.tsx";
+import AuthCallbackPage from "@/pages/Login/AuthCallbackPage.tsx";
+import MyPage from "@/pages/MyPage.tsx";
 
 export const routes = [
   {
     element: <App />,
     path: "/",
   },
+
   {
     element: <SessionPage />,
     path: "/session/:sessionId",
@@ -17,15 +25,35 @@ export const routes = [
     path: "/sessions",
   },
   {
-    element: <>로그인 페이지</>,
+    element: <QuestionListPage />,
+    path: "/questions",
+  },
+  {
+    element: <QuestionDetailPage />,
+    path: "/questions/:questionId",
+  },
+  {
+    element: <LoginPage />,
     path: "/login",
   },
+  {
+    element: <AuthCallbackPage />,
+    path: "/login/callback",
+  },
+  {
+    element: <MyPage />,
+    path: "/mypage",
+  },
   {
     element: <CreateSessionPage />,
     path: "/sessions/create",
   },
   {
-    element: <>에러 페이지</>,
+    element: <CreateQuestionPage />,
+    path: "/questions/create",
+  },
+  {
+    element: <ErrorPage />,
     path: "/*",
   },
 ];
diff --git a/frontend/src/setupTests.ts b/frontend/src/setupTests.ts
new file mode 100644
index 00000000..cb1b1281
--- /dev/null
+++ b/frontend/src/setupTests.ts
@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+import "jest-environment-jsdom";
diff --git a/frontend/src/stores/useAuthStore.ts b/frontend/src/stores/useAuthStore.ts
new file mode 100644
index 00000000..9c156d79
--- /dev/null
+++ b/frontend/src/stores/useAuthStore.ts
@@ -0,0 +1,27 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface AuthState {
+  isLoggedIn: boolean;
+  nickname: string;
+  login: () => void;
+  logout: () => void;
+  setNickname: (nickname: string) => void;
+}
+
+const useAuthStore = create(
+  persist<AuthState>(
+    (set) => ({
+      isLoggedIn: false,
+      nickname: "",
+      login: () => set({ isLoggedIn: true }),
+      logout: () => set({ isLoggedIn: false }),
+      setNickname: (nickname: string) => set({ nickname }),
+    }),
+    {
+      name: "authState",
+    }
+  )
+);
+
+export default useAuthStore;
diff --git a/frontend/src/stores/useQuestionFormStore.ts b/frontend/src/stores/useQuestionFormStore.ts
new file mode 100644
index 00000000..fa441b23
--- /dev/null
+++ b/frontend/src/stores/useQuestionFormStore.ts
@@ -0,0 +1,75 @@
+import { create } from "zustand";
+
+interface Question {
+  id: string;
+  content: string;
+}
+
+interface QuestionState {
+  category: string;
+  questionTitle: string;
+  access: "PRIVATE" | "PUBLIC";
+  questionList: Question[];
+
+  setCategory: (category: string) => void;
+  setQuestionTitle: (name: string) => void;
+  setAccess: (access: "PRIVATE" | "PUBLIC") => void;
+  addQuestion: (content: string) => void;
+  deleteQuestion: (id: string) => void;
+  updateQuestion: (id: string, newContent: string) => void;
+  resetForm: () => void;
+  isFormValid: () => boolean;
+}
+
+const initialState = {
+  category: "",
+  questionTitle: "",
+  access: "PUBLIC" as const,
+  questionList: [],
+};
+
+const useQuestionFormStore = create<QuestionState>((set, get) => ({
+  ...initialState,
+
+  setCategory: (category) => set({ category }),
+  setQuestionTitle: (title) => set({ questionTitle: title }),
+  setAccess: (access) => set({ access }),
+
+  addQuestion: (content: string) =>
+    set((state) => {
+      const currentQuestions = state.questionList;
+      if (currentQuestions.length < 20) {
+        const newQuestion: Question = {
+          id: crypto.randomUUID(),
+          content,
+        };
+        return { questionList: [...currentQuestions, newQuestion] };
+      }
+      return state;
+    }),
+
+  deleteQuestion: (id: string) =>
+    set((state) => ({
+      questionList: state.questionList.filter((question) => question.id !== id),
+    })),
+
+  updateQuestion: (id: string, newContent: string) =>
+    set((state) => ({
+      questionList: state.questionList.map((question) =>
+        question.id === id ? { ...question, content: newContent } : question
+      ),
+    })),
+
+  resetForm: () => set(initialState),
+  isFormValid: () => {
+    const state = get();
+    return (
+      state.category.trim() !== "" &&
+      state.questionTitle.trim() !== "" &&
+      state.questionTitle.trim().length >= 5 &&
+      state.questionList.length >= 5
+    );
+  },
+}));
+
+export default useQuestionFormStore;
diff --git a/frontend/src/stores/useSessionFormStore.ts b/frontend/src/stores/useSessionFormStore.ts
index 16e7287e..4e2df899 100644
--- a/frontend/src/stores/useSessionFormStore.ts
+++ b/frontend/src/stores/useSessionFormStore.ts
@@ -52,6 +52,7 @@ const useSessionFormStore = create<SessionFormState>((set, get) => ({
     return (
       state.category.trim() !== "" &&
       state.sessionName.trim() !== "" &&
+      state.sessionName.trim().length > 5 &&
       state.questionId > 0 &&
       state.questionTitle.trim() !== ""
     );
diff --git a/frontend/src/stores/useToastStore.ts b/frontend/src/stores/useToastStore.ts
index a361bf77..d10645e2 100644
--- a/frontend/src/stores/useToastStore.ts
+++ b/frontend/src/stores/useToastStore.ts
@@ -17,7 +17,7 @@ const useToastStore = create<ToastState>((set) => ({
   toasts: [] as Toast[],
   // 액션
   createToast: (toast: Toast) =>
-    set((state) => ({ toasts: [...state.toasts, toast] })),
+    set((state) => ({ toasts: [toast, ...state.toasts] })),
   removeToast: (id: number) =>
     set((state) => ({
       toasts: state.toasts.filter((toast: Toast) => toast.id !== id),
diff --git a/frontend/src/types/declarations.d.ts b/frontend/src/types/declarations.d.ts
new file mode 100644
index 00000000..4175a897
--- /dev/null
+++ b/frontend/src/types/declarations.d.ts
@@ -0,0 +1,4 @@
+declare module "*.lottie" {
+  const content: string;
+  export default content;
+}
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
index 11f02fe2..1d2c3728 100644
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+/// <reference types="vite/types/importMeta.d.ts" />
+
+interface ImportMetaEnv {
+  readonly [key: string]: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index ec245134..953b4601 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,83 +1,83 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
   theme: {
     extend: {
       colors: {
         gray: {
-          white: '#FFFFFF',
-          50: '#FAFAFA',
-          100: '#EDEDED',
-          200: '#E1E1E1',
-          300: '#D9D9D9',
-          400: '#6C6C6C',
-          500: '#5E5E5E',
-          600: '#3F3F3F',
-          black: '#171717',
+          white: "#FFFFFF",
+          50: "#FAFAFA",
+          100: "#EDEDED",
+          200: "#E1E1E1",
+          300: "#D9D9D9",
+          400: "#6C6C6C",
+          500: "#5E5E5E",
+          600: "#3F3F3F",
+          black: "#171717",
         },
         green: {
-          50: '#F1FBF7',
-          100: '#01BF6F',
-          200: '#01AC64',
-          300: '#019959',
-          400: '#018F53',
-          500: '#017343',
-          600: '#005632',
-          700: '#004327'  
+          50: "#F1FBF7",
+          100: "#01BF6F",
+          200: "#01AC64",
+          300: "#019959",
+          400: "#018F53",
+          500: "#017343",
+          600: "#005632",
+          700: "#004327",
         },
         point: {
-          1: '#F04040',
-          2: '#DFDDD5',
-          3: '#2572E6'
-        }
+          1: "#F04040",
+          2: "#DFDDD5",
+          3: "#2572E6",
+        },
       },
       borderWidth: {
-        'custom-s': '0.0875rem'
+        "custom-s": "0.0875rem",
       },
       borderRadius: {
-        'custom-s': '0.25rem',
-        'custom-m': '0.5rem',
-        'custom-l': '0.875rem'
+        "custom-s": "0.25rem",
+        "custom-m": "0.5rem",
+        "custom-l": "0.875rem",
       },
       boxShadow: {
-        '8': '0 0 0.2rem 0.125rem rgba(182, 182, 182, 0.08)'
+        8: "0 0 0.2rem 0.125rem rgba(182, 182, 182, 0.08)",
+        16: "0 0 0.125rem 0.075rem rgba(182, 182, 182, 0.16)",
+        24: "0 0 0.4rem 0.15rem rgba(182, 182, 182, 0.24)",
       },
       fontSize: {
         // Bold(700) sizes
-        'bold-l': ['1.625rem', { lineHeight: 'auto', fontWeight: '700' }],
-        'bold-m': ['1.5rem', { lineHeight: 'auto', fontWeight: '700' }],
-        'bold-r': ['1.25rem', { lineHeight: 'auto', fontWeight: '700' }],
-        'bold-s': ['1.125rem', { lineHeight: 'auto', fontWeight: '700' }],
+        "bold-l": ["1.625rem", { lineHeight: "auto", fontWeight: "700" }],
+        "bold-m": ["1.5rem", { lineHeight: "auto", fontWeight: "700" }],
+        "bold-r": ["1.25rem", { lineHeight: "auto", fontWeight: "700" }],
+        "bold-s": ["1.125rem", { lineHeight: "auto", fontWeight: "700" }],
 
         // SemiBold(600) sizes
-        'semibold-l': ['1.375rem', { lineHeight: 'auto', fontWeight: '600' }],
-        'semibold-m': ['1.25rem', { lineHeight: 'auto', fontWeight: '600' }],
-        'semibold-r': ['1.125rem', { lineHeight: 'auto', fontWeight: '600' }],
-        'semibold-s': ['1rem', { lineHeight: 'auto', fontWeight: '600' }],
+        "semibold-l": ["1.25rem", { lineHeight: "auto", fontWeight: "600" }],
+        "semibold-m": ["1.125rem", { lineHeight: "auto", fontWeight: "600" }],
+        "semibold-r": ["1rem", { lineHeight: "auto", fontWeight: "600" }],
+        "semibold-s": ["0.8rem", { lineHeight: "auto", fontWeight: "600" }],
 
         // Medium(500) sizes
-        'medium-xl': ['1.375rem', { lineHeight: 'auto', fontWeight: '500' }],
-        'medium-l': ['1.25rem', { lineHeight: 'auto', fontWeight: '500' }],
-        'medium-m': ['1.125rem', { lineHeight: 'auto', fontWeight: '500' }],
-        'medium-r': ['1rem', { lineHeight: 'auto', fontWeight: '500' }],
-        'medium-s': ['0.875rem', { lineHeight: 'auto', fontWeight: '500' }],
-        'medium-xs': ['0.75rem', { lineHeight: 'auto', fontWeight: '500' }],
-        'medium-xxs': ['0.625rem', { lineHeight: 'auto', fontWeight: '500' }],
+        "medium-xl": ["1.25rem", { lineHeight: "auto", fontWeight: "500" }],
+        "medium-l": ["1.125rem", { lineHeight: "auto", fontWeight: "500" }],
+        "medium-m": ["1rem", { lineHeight: "auto", fontWeight: "500" }],
+        "medium-r": ["0.9rem", { lineHeight: "auto", fontWeight: "500" }],
+        "medium-s": ["0.875rem", { lineHeight: "auto", fontWeight: "500" }],
+        "medium-xs": ["0.75rem", { lineHeight: "auto", fontWeight: "500" }],
       },
       fontFamily: {
-        pretendard: ['Pretendard', 'sans-serif'],
-        raleway: ['Raleway', 'sans-serif'],
+        pretendard: ["Pretendard", "sans-serif"],
+        raleway: ["Raleway", "sans-serif"],
       },
       spacing: {
-        0.375:'0.375rem',
-        27.5: '27.5rem',
-        42.5: '42.5rem',
-        47.5: '47.5rem'
-      }
+        0.375: "0.375rem",
+        17.5: "17.5rem",
+        27.5: "27.5rem",
+        42.5: "42.5rem",
+        47.5: "47.5rem",
+      }, 
     },
   },
   plugins: [],
-}
\ No newline at end of file
+};
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index 9a80d6ca..e98ae452 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "typeRoots": ["src/types", "node_modules/@types"],
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
@@ -39,10 +40,10 @@
       ]
     },
     "types": [
-      "node"
+      "node", "vite/client"
     ]
   },
   "include": [
-    "src"
+    "src", "vite-env.d.ts"
   ]
 }
\ No newline at end of file
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 65f670c8..526fcd05 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -7,5 +7,22 @@
     {
       "path": "./tsconfig.node.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "@components/*": [
+        "src/components/*"
+      ],
+      "@hooks/*": [
+        "src/hooks/*"
+      ],
+      "@stores/*": [
+        "src/stores/*"
+      ]
+    }
+  }
 }
\ No newline at end of file
diff --git a/frontend/tsconfig.test.json b/frontend/tsconfig.test.json
new file mode 100644
index 00000000..f7f602ea
--- /dev/null
+++ b/frontend/tsconfig.test.json
@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "types": [
+      "jest",
+      "node"
+    ],
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 2dbacb46..1a97b2ee 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,9 +1,12 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 import removeConsole from "vite-plugin-remove-console";
 import { resolve } from "path";
 
 // https://vite.dev/config/
+
+const env = loadEnv("", process.cwd());
+
 export default defineConfig({
   plugins: [react(), removeConsole()],
   resolve: {
@@ -14,4 +17,15 @@ export default defineConfig({
       "@stores": resolve(__dirname, "src/stores"),
     },
   },
+  server: {
+    proxy: {
+      "/api": {
+        target: env.VITE_API_URL,
+        changeOrigin: true,
+        secure: false,
+        rewrite: (path) => path.replace(/^\/api/, ""), // 필요한 경우 경로 재작성
+      },
+    },
+  },
+  assetsInclude: ["**/*.lottie"],
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 069a910e..88eab84f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,21 +26,51 @@ importers:
       '@nestjs/core':
         specifier: ^10.0.0
         version: 10.4.6(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.6)(@nestjs/websockets@10.4.7)(reflect-metadata@0.2.2)(rxjs@7.8.1)
+      '@nestjs/jwt':
+        specifier: ^10.2.0
+        version: 10.2.0(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))
+      '@nestjs/passport':
+        specifier: ^10.0.3
+        version: 10.0.3(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(passport@0.7.0)
       '@nestjs/platform-express':
         specifier: ^10.0.0
         version: 10.4.6(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.6)
       '@nestjs/platform-socket.io':
         specifier: ^10.4.6
         version: 10.4.7(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/websockets@10.4.7)(rxjs@7.8.1)
+      '@nestjs/typeorm':
+        specifier: ^10.0.2
+        version: 10.0.2(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.6)(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(ioredis@5.4.1)(mysql2@3.11.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3)))
       '@nestjs/websockets':
         specifier: ^10.4.6
         version: 10.4.7(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.6)(@nestjs/platform-socket.io@10.4.7)(reflect-metadata@0.2.2)(rxjs@7.8.1)
+      '@types/passport-jwt':
+        specifier: ^4.0.1
+        version: 4.0.1
+      axios:
+        specifier: ^1.7.7
+        version: 1.7.7
+      cookie-parser:
+        specifier: ^1.4.7
+        version: 1.4.7
       dotenv:
         specifier: ^16.4.5
         version: 16.4.5
       ioredis:
         specifier: ^5.4.1
         version: 5.4.1
+      mysql2:
+        specifier: ^3.11.4
+        version: 3.11.4
+      passport:
+        specifier: ^0.7.0
+        version: 0.7.0
+      passport-custom:
+        specifier: ^1.1.1
+        version: 1.1.1
+      passport-jwt:
+        specifier: ^4.0.1
+        version: 4.0.1
       reflect-metadata:
         specifier: ^0.2.0
         version: 0.2.2
@@ -50,6 +80,15 @@ importers:
       socket.io:
         specifier: ^4.8.1
         version: 4.8.1
+      typeorm:
+        specifier: ^0.3.20
+        version: 0.3.20(ioredis@5.4.1)(mysql2@3.11.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3))
+      typeorm-naming-strategies:
+        specifier: ^4.1.0
+        version: 4.1.0(typeorm@0.3.20(ioredis@5.4.1)(mysql2@3.11.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3)))
+      typeorm-transactional:
+        specifier: ^0.5.0
+        version: 0.5.0(reflect-metadata@0.2.2)(typeorm@0.3.20(ioredis@5.4.1)(mysql2@3.11.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3)))
     devDependencies:
       '@nestjs/cli':
         specifier: ^10.0.0
@@ -60,6 +99,9 @@ importers:
       '@nestjs/testing':
         specifier: ^10.0.0
         version: 10.4.6(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.6)(@nestjs/platform-express@10.4.6)
+      '@types/cookie-parser':
+        specifier: ^1.4.7
+        version: 1.4.7
       '@types/express':
         specifier: ^5.0.0
         version: 5.0.0
@@ -69,6 +111,9 @@ importers:
       '@types/node':
         specifier: ^20.3.1
         version: 20.17.4
+      '@types/passport-github':
+        specifier: ^1.1.12
+        version: 1.1.12
       '@types/supertest':
         specifier: ^6.0.0
         version: 6.0.2
@@ -117,9 +162,33 @@ importers:
 
   frontend:
     dependencies:
+      '@dotlottie/react-player':
+        specifier: ^1.6.19
+        version: 1.6.19(react@18.3.1)
+      '@tanstack/react-query':
+        specifier: ^5.60.6
+        version: 5.61.0(react@18.3.1)
+      '@tanstack/react-query-devtools':
+        specifier: ^5.60.6
+        version: 5.61.0(@tanstack/react-query@5.61.0(react@18.3.1))(react@18.3.1)
+      '@tanstack/react-query':
+        specifier: ^5.60.6
+        version: 5.60.6(react@18.3.1)
+      '@tanstack/react-query-devtools':
+        specifier: ^5.60.6
+        version: 5.60.6(@tanstack/react-query@5.60.6(react@18.3.1))(react@18.3.1)
+      '@types/react-lottie':
+        specifier: ^1.2.10
+        version: 1.2.10
       '@types/socket.io-client':
         specifier: ^3.0.0
         version: 3.0.0
+      axios:
+        specifier: ^1.7.7
+        version: 1.7.7
+      axios:
+        specifier: ^1.7.7
+        version: 1.7.7
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -129,6 +198,9 @@ importers:
       react-icons:
         specifier: ^5.3.0
         version: 5.3.0(react@18.3.1)
+      react-lottie:
+        specifier: ^1.2.7
+        version: 1.2.7(react@18.3.1)
       react-router-dom:
         specifier: ^6.27.0
         version: 6.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -142,6 +214,21 @@ importers:
       '@eslint/js':
         specifier: ^9.13.0
         version: 9.13.0
+      '@testing-library/jest-dom':
+        specifier: ^6.6.3
+        version: 6.6.3
+      '@testing-library/react':
+        specifier: ^15.0.6
+        version: 15.0.6(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/react-hooks':
+        specifier: ^8.0.1
+        version: 8.0.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: ^14.5.2
+        version: 14.5.2(@testing-library/dom@10.4.0)
+      '@types/jest':
+        specifier: ^29.5.14
+        version: 29.5.14
       '@types/node':
         specifier: ^20.3.1
         version: 20.17.4
@@ -169,12 +256,21 @@ importers:
       globals:
         specifier: ^15.11.0
         version: 15.11.0
+      jest:
+        specifier: ^29.7.0
+        version: 29.7.0(@types/node@20.17.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3))
+      jest-environment-jsdom:
+        specifier: ^29.7.0
+        version: 29.7.0
       postcss:
         specifier: ^8.4.47
         version: 8.4.47
       tailwindcss:
         specifier: ^3.4.14
         version: 3.4.14(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3))
+      ts-jest:
+        specifier: ^29.1.0
+        version: 29.2.5(@babel/core@7.26.0)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.0))(jest@29.7.0(@types/node@20.17.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3)))(typescript@5.6.3)
       typescript:
         specifier: ~5.6.2
         version: 5.6.3
@@ -190,6 +286,9 @@ importers:
 
 packages:
 
+  '@adobe/css-tools@4.4.1':
+    resolution: {integrity: sha512-12WGKBQzjUAI4ayyF4IAtfw2QR/IDoqk6jTddXDhtYTJF9ASmoE1zst7cVtP0aL/F1jUJL5r+JxKXKEgHNbEUQ==}
+
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -387,6 +486,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.26.0':
+    resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.25.9':
     resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
     engines: {node: '>=6.9.0'}
@@ -479,6 +582,24 @@ packages:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
+  '@dotlottie/common@0.7.11':
+    resolution: {integrity: sha512-0ThV1uZVfKJ2pwYQy52EKH8edKnvEsSDGdxRf/n1Wz15xbqI+8qKs0BHSIQ7yLyaU5gFSaEooEgK1kTiKJaE4g==}
+    engines: {node: '>18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
+  '@dotlottie/dotlottie-js@0.7.2':
+    resolution: {integrity: sha512-BIEFkaKCRzVSHgKoZ2d/Squ1Rw4U93/YmHvON04PCx2gOBRAM2//GYUPcVijYHT8dQtom07KoyTKpXh0cRzKKw==}
+    engines: {node: '>=18.0.0'}
+
+  '@dotlottie/react-player@1.6.19':
+    resolution: {integrity: sha512-kXQ/BD3OnK70wIGOIy5DWg1jgfgb3AWaDLXwVnLtzSmTBcH2dFcU/XGXF+z4w8vm2/s2tdbNd7c4yq8twoIVLw==}
+    deprecated: This package is superceded by @lottiefiles/dotlottie-react
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
+  '@emnapi/runtime@1.3.1':
+    resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -684,6 +805,111 @@ packages:
     resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
     engines: {node: '>=18.18'}
 
+  '@img/sharp-darwin-arm64@0.33.5':
+    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.33.5':
+    resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.33.5':
+    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.33.5':
+    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.33.5':
+    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.33.5':
+    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.33.5':
+    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-ia32@0.33.5':
+    resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.33.5':
+    resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
   '@ioredis/commands@1.2.0':
     resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==}
 
@@ -840,6 +1066,17 @@ packages:
       '@nestjs/websockets':
         optional: true
 
+  '@nestjs/jwt@10.2.0':
+    resolution: {integrity: sha512-x8cG90SURkEiLOehNaN2aRlotxT0KZESUliOPKKnjWiyJOcWurkF3w345WOX0P4MgFzUjGoZ1Sy0aZnxeihT0g==}
+    peerDependencies:
+      '@nestjs/common': ^8.0.0 || ^9.0.0 || ^10.0.0
+
+  '@nestjs/passport@10.0.3':
+    resolution: {integrity: sha512-znJ9Y4S8ZDVY+j4doWAJ8EuuVO7SkQN3yOBmzxbGaXbvcSwFDAdGJ+OMCg52NdzIO4tQoN4pYKx8W6M0ArfFRQ==}
+    peerDependencies:
+      '@nestjs/common': ^8.0.0 || ^9.0.0 || ^10.0.0
+      passport: ^0.4.0 || ^0.5.0 || ^0.6.0 || ^0.7.0
+
   '@nestjs/platform-express@10.4.6':
     resolution: {integrity: sha512-HcyCpAKccAasrLSGRTGWv5BKRs0rwTIFOSsk6laNyqfqvgvYcJQAedarnm4jmaemtmSJ0PFI9PmtEZADd2ahCg==}
     peerDependencies:
@@ -871,6 +1108,15 @@ packages:
       '@nestjs/platform-express':
         optional: true
 
+  '@nestjs/typeorm@10.0.2':
+    resolution: {integrity: sha512-H738bJyydK4SQkRCTeh1aFBxoO1E9xdL/HaLGThwrqN95os5mEyAtK7BLADOS+vldP4jDZ2VQPLj4epWwRqCeQ==}
+    peerDependencies:
+      '@nestjs/common': ^8.0.0 || ^9.0.0 || ^10.0.0
+      '@nestjs/core': ^8.0.0 || ^9.0.0 || ^10.0.0
+      reflect-metadata: ^0.1.13 || ^0.2.0
+      rxjs: ^7.2.0
+      typeorm: ^0.3.0
+
   '@nestjs/websockets@10.4.7':
     resolution: {integrity: sha512-ajuoptYLYm+l3+KtaA9Ed+cO9yB34PtBE8UObavRT8Euh/f7QfeJiKcrU3+BQSAiTWM3nF2qfuV4CfEkP9uKuw==}
     peerDependencies:
@@ -908,10 +1154,25 @@ packages:
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@preact/signals-core@1.8.0':
+    resolution: {integrity: sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==}
+
   '@remix-run/router@1.20.0':
     resolution: {integrity: sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==}
     engines: {node: '>=14.0.0'}
 
+  '@rgba-image/common@0.1.13':
+    resolution: {integrity: sha512-AnOBmBpjSgcymTuVhTGy+RB4FfmEQqR2GeJY3d3xfvR9fl3HfhzwgVqopuh3bKSAT6KRpJr7wNmug0qr3oI7bA==}
+
+  '@rgba-image/copy@0.1.3':
+    resolution: {integrity: sha512-fscJhpp8YtVELGIwQsv1Pj6BEN4PEWAlMJ6a/HWzYxzVr3y/dut4BUrqeWRKiKeRXAGqaV6QxkBxAgYMQYZEvw==}
+
+  '@rgba-image/create-image@0.1.1':
+    resolution: {integrity: sha512-ndExUNyi9Ooa/OZqiJS53vYrQ48FX7MDmMrEslDxhsorDsXpeKI9w689r4AYhT9CF9KZlBe8SmI++3BwSvvwAQ==}
+
+  '@rgba-image/lanczos@0.1.1':
+    resolution: {integrity: sha512-MSGGU7BZmEbg1xHtNp+StARoN7R38zJnFgSEvSzB710nXsHGEaJt//z2VnPfRQTtKSKUXEnp95JSuqDlXTBrYA==}
+
   '@rollup/rollup-android-arm-eabi@4.24.3':
     resolution: {integrity: sha512-ufb2CH2KfBWPJok95frEZZ82LtDl0A6QKTa8MoM+cWwDZvVGl5/jNb79pIhRvAalUu+7LD91VYR0nwRD799HkQ==}
     cpu: [arm]
@@ -1014,6 +1275,88 @@ packages:
   '@socket.io/component-emitter@3.1.2':
     resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
 
+  '@tanstack/query-core@5.60.6':
+    resolution: {integrity: sha512-tI+k0KyCo1EBJ54vxK1kY24LWj673ujTydCZmzEZKAew4NqZzTaVQJEuaG1qKj2M03kUHN46rchLRd+TxVq/zQ==}
+
+  '@tanstack/query-devtools@5.59.20':
+    resolution: {integrity: sha512-vxhuQ+8VV4YWQSFxQLsuM+dnEKRY7VeRzpNabFXdhEwsBYLrjXlF1pM38A8WyKNLqZy8JjyRO8oP4Wd/oKHwuQ==}
+
+  '@tanstack/react-query-devtools@5.60.6':
+    resolution: {integrity: sha512-b55QgJs2PSzOtLdE3p9fxPOPmeXXfkzcsyVBFFyXwINIilSwz/wWoz2D5fwg5Vbp60CX34LccstzryU6Bg6Rqw==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.60.6
+      react: ^18 || ^19
+
+  '@tanstack/react-query@5.60.6':
+    resolution: {integrity: sha512-FUzSDaiPkuZCmuGqrixfRRXJV9u+nrUh9lAlA5Q3ZFrOw1Js1VeBfxi1NIcJO3ZWJdKceBqKeBJdNcWStCYZnw==}
+    peerDependencies:
+      react: ^18 || ^19
+
+  '@sqltools/formatter@1.2.5':
+    resolution: {integrity: sha512-Uy0+khmZqUrUGm5dmMqVlnvufZRSK0FbYzVgp0UMstm+F5+W2/jnEEQyc9vo1ZR/E5ZI/B1WjjoTqBqwJL6Krw==}
+
+  '@tanstack/query-core@5.60.6':
+    resolution: {integrity: sha512-tI+k0KyCo1EBJ54vxK1kY24LWj673ujTydCZmzEZKAew4NqZzTaVQJEuaG1qKj2M03kUHN46rchLRd+TxVq/zQ==}
+
+  '@tanstack/query-devtools@5.59.20':
+    resolution: {integrity: sha512-vxhuQ+8VV4YWQSFxQLsuM+dnEKRY7VeRzpNabFXdhEwsBYLrjXlF1pM38A8WyKNLqZy8JjyRO8oP4Wd/oKHwuQ==}
+
+  '@tanstack/react-query-devtools@5.61.0':
+    resolution: {integrity: sha512-hd3yXl+KV+OGQmAw946qHAFp6DygcXcYN+1ai9idYddx6uEQyCwYk3jyIBOQEUw9uzN5DOGJLBsgd/QcimDQsA==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.61.0
+      react: ^18 || ^19
+
+  '@tanstack/react-query@5.61.0':
+    resolution: {integrity: sha512-SBzV27XAeCRBOQ8QcC94w2H1Md0+LI0gTWwc3qRJoaGuewKn5FNW4LSqwPFJZVEItfhMfGT7RpZuSFXjTi12pQ==}
+    peerDependencies:
+      react: ^18 || ^19
+
+  '@testing-library/dom@10.4.0':
+    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.6.3':
+    resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react-hooks@8.0.1':
+    resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0
+      react: ^16.9.0 || ^17.0.0
+      react-dom: ^16.9.0 || ^17.0.0
+      react-test-renderer: ^16.9.0 || ^17.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react-dom:
+        optional: true
+      react-test-renderer:
+        optional: true
+
+  '@testing-library/react@15.0.6':
+    resolution: {integrity: sha512-UlbazRtEpQClFOiYp+1BapMT+xyqWMnE+hh9tn5DQ6gmlE7AIZWcGpzZukmDZuFk3By01oiqOf8lRedLS4k6xQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': ^18.0.0
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@testing-library/user-event@14.5.2':
+    resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
+  '@tootallnate/once@2.0.0':
+    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
+    engines: {node: '>= 10'}
+
   '@tsconfig/node10@1.0.11':
     resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
 
@@ -1026,6 +1369,9 @@ packages:
   '@tsconfig/node16@1.0.4':
     resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
 
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -1041,12 +1387,18 @@ packages:
   '@types/body-parser@1.19.5':
     resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
 
+  '@types/cls-hooked@4.3.9':
+    resolution: {integrity: sha512-CMtHMz6Q/dkfcHarq9nioXH8BDPP+v5xvd+N90lBQ2bdmu06UvnLDqxTKoOJzz4SzIwb/x9i4UXGAAcnUDuIvg==}
+
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
   '@types/conventional-commits-parser@5.0.0':
     resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
 
+  '@types/cookie-parser@1.4.7':
+    resolution: {integrity: sha512-Fvuyi354Z+uayxzIGCwYTayFKocfV7TuDYZClCdIP9ckhvAu/ixDtCB6qx2TT0FKjPLf1f3P/J1rgf6lPs64mw==}
+
   '@types/cookie@0.4.1':
     resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==}
 
@@ -1083,9 +1435,18 @@ packages:
   '@types/jest@29.5.14':
     resolution: {integrity: sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ==}
 
+  '@types/jsdom@20.0.1':
+    resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/jsonwebtoken@9.0.5':
+    resolution: {integrity: sha512-VRLSGzik+Unrup6BsouBeHsf4d1hOEgYWTm/7Nmw1sXoN1+tRly/Gy/po3yeahnP4jfnQWWAhQAqcNfH7ngOkA==}
+
+  '@types/jsonwebtoken@9.0.7':
+    resolution: {integrity: sha512-ugo316mmTYBl2g81zDFnZ7cfxlut3o+/EQdaP7J8QN2kY6lJ22hmQYCK5EHcJHbrW+dkCGSCPgbG8JtYj6qSrg==}
+
   '@types/methods@1.1.4':
     resolution: {integrity: sha512-ymXWVrDiCxTBE3+RIrrP533E70eA+9qu7zdWoHuOmGujkYtzf4HQF96b8nwHLqhuf4ykX61IGRIB38CC6/sImQ==}
 
@@ -1095,6 +1456,24 @@ packages:
   '@types/node@20.17.4':
     resolution: {integrity: sha512-Fi1Bj8qTJr4f1FDdHFR7oMlOawEYSzkHNdBJK+aRjcDDNHwEV3jPPjuZP2Lh2QNgXeqzM8Y+U6b6urKAog2rZw==}
 
+  '@types/oauth@0.9.6':
+    resolution: {integrity: sha512-H9TRCVKBNOhZZmyHLqFt9drPM9l+ShWiqqJijU1B8P3DX3ub84NjxDuy+Hjrz+fEca5Kwip3qPMKNyiLgNJtIA==}
+
+  '@types/passport-github@1.1.12':
+    resolution: {integrity: sha512-VJpMEIH+cOoXB694QgcxuvWy2wPd1Oq3gqrg2Y9DMVBYs9TmH9L14qnqPDZsNMZKBDH+SvqRsGZj9SgHYeDgcA==}
+
+  '@types/passport-jwt@4.0.1':
+    resolution: {integrity: sha512-Y0Ykz6nWP4jpxgEUYq8NoVZeCQPo1ZndJLfapI249g1jHChvRfZRO/LS3tqu26YgAS/laI1qx98sYGz0IalRXQ==}
+
+  '@types/passport-oauth2@1.4.17':
+    resolution: {integrity: sha512-ODiAHvso6JcWJ6ZkHHroVp05EHGhqQN533PtFNBkg8Fy5mERDqsr030AX81M0D69ZcaMvhF92SRckEk2B0HYYg==}
+
+  '@types/passport-strategy@0.2.38':
+    resolution: {integrity: sha512-GC6eMqqojOooq993Tmnmp7AUTbbQSgilyvpCYQjT+H6JfG/g6RGc7nXEniZlp0zyKJ0WUdOiZWLBZft9Yug1uA==}
+
+  '@types/passport@1.0.17':
+    resolution: {integrity: sha512-aciLyx+wDwT2t2/kJGJR2AEeBz0nJU4WuRX04Wu9Dqc5lSUtwu0WERPHYsLhF9PtseiAMPBGNUOtFjxZ56prsg==}
+
   '@types/prop-types@15.7.13':
     resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
 
@@ -1107,6 +1486,9 @@ packages:
   '@types/react-dom@18.3.1':
     resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
 
+  '@types/react-lottie@1.2.10':
+    resolution: {integrity: sha512-rCd1p3US4ELKJlqwVnP0h5b24zt5p9OCvKUoNpYExLqwbFZMWEiJ6EGLMmH7nmq5V7KomBIbWO2X/XRFsL0vCA==}
+
   '@types/react@18.3.12':
     resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==}
 
@@ -1129,6 +1511,9 @@ packages:
   '@types/supertest@6.0.2':
     resolution: {integrity: sha512-137ypx2lk/wTQbW6An6safu9hXmajAifU/s7szAHLN/FeIm5w7yR0Wkl9fdJMRSHwOn4HLAI0DaB2TOORuhPDg==}
 
+  '@types/tough-cookie@4.0.5':
+    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
+
   '@types/yargs-parser@21.0.3':
     resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
 
@@ -1256,10 +1641,17 @@ packages:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
 
+  abab@2.0.6:
+    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
+    deprecated: Use your platform's native atob() and btoa() methods instead
+
   accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
+  acorn-globals@7.0.1:
+    resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
+
   acorn-import-attributes@1.9.5:
     resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
     peerDependencies:
@@ -1279,6 +1671,10 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
   ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     peerDependencies:
@@ -1336,6 +1732,10 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  app-root-path@3.1.0:
+    resolution: {integrity: sha512-biN3PwB2gUtjaYy/isrU3aNWI5w+fAfvHkSvCKeQGxhmYpwKFUxudR3Yya+KqVRHBmEDYh+/lTozYCFbmzX4nA==}
+    engines: {node: '>= 6.0.0'}
+
   append-field@1.0.0:
     resolution: {integrity: sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==}
 
@@ -1351,6 +1751,13 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
   array-flatten@1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
 
@@ -1363,6 +1770,10 @@ packages:
   asap@2.0.6:
     resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
 
+  async-hook-jl@1.7.6:
+    resolution: {integrity: sha512-gFaHkFfSxTjvoxDMYqDuGHlcRyUuamF8s+ZTtJdDzqjws4mCt7v0vuV79/E2Wr2/riMQgtG4/yUtXWs1gZ7JMg==}
+    engines: {node: ^4.7 || >=6.9 || >=7.3}
+
   async@3.2.6:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
@@ -1376,6 +1787,13 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  aws-ssl-profiles@1.1.2:
+    resolution: {integrity: sha512-NZKeq9AfyQvEeNlN0zSYAaWrmBffJh3IELMZfRpJVWgrpEbtEpnjvzqBPf+mxoI287JohRDoa+/nsfqqiZmF6g==}
+    engines: {node: '>= 6.0.0'}
+
+  axios@1.7.7:
+    resolution: {integrity: sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==}
+
   babel-jest@29.7.0:
     resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -1401,6 +1819,9 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  babel-runtime@6.26.0:
+    resolution: {integrity: sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1432,6 +1853,9 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
+  browser-image-hash@0.0.5:
+    resolution: {integrity: sha512-j+rsA1L3vL8k8ji4pFPFAOU/wN/hegwk1eoMshFk3OtjzEzdDrT9Dz94OkLc43NhWGck2a9t5eQQok6zjJSPHQ==}
+
   browserslist@4.24.2:
     resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -1444,12 +1868,18 @@ packages:
   bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
 
+  buffer-equal-constant-time@1.0.1:
+    resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
+
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
   buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
 
+  buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+
   busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
@@ -1481,6 +1911,10 @@ packages:
   caniuse-lite@1.0.30001676:
     resolution: {integrity: sha512-Qz6zwGCiPghQXGJvgQAem79esjitvJ+CxSbSQkW9H/UX5hg8XM88d4lp2W+MEQ81j+Hip58Il+jGVdazk1z9cw==}
 
+  chalk@3.0.0:
+    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
+    engines: {node: '>=8'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -1515,6 +1949,11 @@ packages:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
 
+  cli-highlight@2.1.11:
+    resolution: {integrity: sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==}
+    engines: {node: '>=8.0.0', npm: '>=5.0.0'}
+    hasBin: true
+
   cli-spinners@2.9.2:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
@@ -1531,6 +1970,9 @@ packages:
     resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
     engines: {node: '>= 12'}
 
+  cliui@7.0.4:
+    resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
+
   cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -1539,6 +1981,10 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
+  cls-hooked@4.2.2:
+    resolution: {integrity: sha512-J4Xj5f5wq/4jAvcdgoGsL3G103BtWpZrMo8NEinRltN+xpTZdI+M38pyQqhuFU/P792xkMFvnKSf+Lm81U1bxw==}
+    engines: {node: ^4.7 || >=6.9 || >=7.3 || >=8.2.1}
+
   cluster-key-slot@1.1.2:
     resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
     engines: {node: '>=0.10.0'}
@@ -1557,6 +2003,13 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
+  color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -1612,6 +2065,10 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie-parser@1.4.7:
+    resolution: {integrity: sha512-nGUvgXnotP3BsjiLX2ypbQnWoGUPIIfHQNZkkC668ntrzGWEZVW70HDEB1qnNGMicPje6EttlIgzo51YSwNQGw==}
+    engines: {node: '>= 0.8.0'}
+
   cookie-signature@1.0.6:
     resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
 
@@ -1626,6 +2083,10 @@ packages:
   cookiejar@2.1.4:
     resolution: {integrity: sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw==}
 
+  core-js@2.6.12:
+    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
+    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -1671,11 +2132,24 @@ packages:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
 
+  cssom@0.3.8:
+    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
+
+  cssom@0.5.0:
+    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
+
+  cssstyle@2.3.0:
+    resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
+    engines: {node: '>=8'}
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -1683,6 +2157,13 @@ packages:
     resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
     engines: {node: '>=12'}
 
+  data-urls@3.0.2:
+    resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
+    engines: {node: '>=12'}
+
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -1700,6 +2181,9 @@ packages:
       supports-color:
         optional: true
 
+  decimal.js@10.4.3:
+    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
+
   dedent@1.5.3:
     resolution: {integrity: sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==}
     peerDependencies:
@@ -1734,10 +2218,18 @@ packages:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   destroy@1.2.0:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
+  detect-libc@2.0.3:
+    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
+    engines: {node: '>=8'}
+
   detect-newline@3.1.0:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
@@ -1763,6 +2255,17 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
+  domexception@4.0.0:
+    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
+    engines: {node: '>=12'}
+    deprecated: Use your platform's native DOMException instead
+
   dot-prop@5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
     engines: {node: '>=8'}
@@ -1774,6 +2277,9 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  ecdsa-sig-formatter@1.0.11:
+    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -1785,6 +2291,9 @@ packages:
   electron-to-chromium@1.5.49:
     resolution: {integrity: sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==}
 
+  emitter-listener@1.1.2:
+    resolution: {integrity: sha512-Bt1sBAGFHY9DKY+4/2cV6izcKJUf5T7/gkdmkxzX/qv9CcGH8xSwVRW5mtX03SWJtRTWSOpzCuWN9rBFYZepZQ==}
+
   emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
@@ -1818,6 +2327,10 @@ packages:
     resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -1825,6 +2338,9 @@ packages:
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
+  error-stack-parser@2.1.4:
+    resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
+
   es-define-property@1.0.0:
     resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
     engines: {node: '>= 0.4'}
@@ -1860,6 +2376,11 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
   eslint-config-prettier@9.1.0:
     resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==}
     hasBin: true
@@ -2016,6 +2537,9 @@ packages:
   fb-watchman@2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   figures@3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
@@ -2062,6 +2586,15 @@ packages:
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   foreground-child@3.3.0:
     resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
     engines: {node: '>=14'}
@@ -2109,6 +2642,9 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
+  generate-function@2.3.1:
+    resolution: {integrity: sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -2214,6 +2750,16 @@ packages:
     resolution: {integrity: sha512-qlspKUK7IlSQv2o+5I7yhUd7TxlOG2Vr5LTa3ve2XSNVKAL/n/u/7KLvKmFNimomDIKvZFXWHv0T12mv7rT8Aw==}
     engines: {node: '>=8'}
 
+  highlight.js@10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+
+  howler@2.2.4:
+    resolution: {integrity: sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==}
+
+  html-encoding-sniffer@3.0.0:
+    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
+    engines: {node: '>=12'}
+
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
@@ -2221,6 +2767,14 @@ packages:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
 
+  http-proxy-agent@5.0.0:
+    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
+    engines: {node: '>= 6'}
+
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
   human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -2234,6 +2788,10 @@ packages:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
 
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -2257,6 +2815,10 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -2287,6 +2849,9 @@ packages:
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
+  is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -2327,6 +2892,12 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  is-property@1.0.2:
+    resolution: {integrity: sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==}
+
   is-stream@2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
@@ -2423,6 +2994,15 @@ packages:
     resolution: {integrity: sha512-gns+Er14+ZrEoC5fhOfYCY1LOHHr0TI+rQUHZS8Ttw2l7gl+80eHc/gFf2Ktkw0+SIACDTeWvpFcv3B04VembQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  jest-environment-jsdom@29.7.0:
+    resolution: {integrity: sha512-k9iQbsf9OyOfdzWH8HDmrRT0gSIcX+FLNW7IQq94tFX0gynPwqDTW0Ho6iMVNjGz/nb+l/vW3dWM2bbLLpkbXA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jest-environment-node@29.7.0:
     resolution: {integrity: sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -2529,6 +3109,15 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
+  jsdom@20.0.3:
+    resolution: {integrity: sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
   jsesc@3.0.2:
     resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
     engines: {node: '>=6'}
@@ -2567,6 +3156,16 @@ packages:
     resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
     engines: {'0': node >= 0.2.0}
 
+  jsonwebtoken@9.0.2:
+    resolution: {integrity: sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==}
+    engines: {node: '>=12', npm: '>=6'}
+
+  jwa@1.4.1:
+    resolution: {integrity: sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==}
+
+  jws@3.2.2:
+    resolution: {integrity: sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -2615,12 +3214,27 @@ packages:
   lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
 
+  lodash.includes@4.3.0:
+    resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
+
   lodash.isarguments@3.1.0:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
 
+  lodash.isboolean@3.0.3:
+    resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
+
+  lodash.isinteger@4.0.4:
+    resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==}
+
+  lodash.isnumber@3.0.3:
+    resolution: {integrity: sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==}
+
   lodash.isplainobject@4.0.6:
     resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
 
+  lodash.isstring@4.0.1:
+    resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
+
   lodash.kebabcase@4.1.1:
     resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==}
 
@@ -2633,6 +3247,9 @@ packages:
   lodash.mergewith@4.6.2:
     resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
 
+  lodash.once@4.1.1:
+    resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
+
   lodash.snakecase@4.1.1:
     resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
 
@@ -2652,16 +3269,34 @@ packages:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
 
+  long@5.2.3:
+    resolution: {integrity: sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==}
+
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lottie-web@5.12.2:
+    resolution: {integrity: sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
+  lru.min@1.1.1:
+    resolution: {integrity: sha512-FbAj6lXil6t8z4z3j0E5mfRlPzxkySotzUHwRXjlpRh10vc6AI6WN62ehZj82VG7M20rqogJ0GLwar2Xa05a8Q==}
+    engines: {bun: '>=1.0.0', deno: '>=1.30.0', node: '>=8.0.0'}
+
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   magic-string@0.30.8:
     resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
     engines: {node: '>=12'}
@@ -2728,6 +3363,10 @@ packages:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
 
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -2750,6 +3389,11 @@ packages:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
 
+  mkdirp@2.1.6:
+    resolution: {integrity: sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
@@ -2767,9 +3411,17 @@ packages:
     resolution: {integrity: sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  mysql2@3.11.4:
+    resolution: {integrity: sha512-Z2o3tY4Z8EvSRDwknaC40MdZ3+m0sKbpnXrShQLdxPrAvcNli7jLrD2Zd2IzsRMw4eK9Yle500FDmlkIqp+krg==}
+    engines: {node: '>= 8.0'}
+
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
+  named-placeholders@1.1.3:
+    resolution: {integrity: sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==}
+    engines: {node: '>=12.0.0'}
+
   nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -2818,6 +3470,9 @@ packages:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
 
+  nwsapi@2.2.13:
+    resolution: {integrity: sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -2877,6 +3532,10 @@ packages:
     resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  p-map@2.1.0:
+    resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
+    engines: {node: '>=6'}
+
   p-try@2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
@@ -2892,10 +3551,37 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
+  parse5-htmlparser2-tree-adapter@6.0.1:
+    resolution: {integrity: sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==}
+
+  parse5@5.1.1:
+    resolution: {integrity: sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==}
+
+  parse5@6.0.1:
+    resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
+
+  parse5@7.2.1:
+    resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
 
+  passport-custom@1.1.1:
+    resolution: {integrity: sha512-/2m7jUGxmCYvoqenLB9UrmkCgPt64h8ZtV+UtuQklZ/Tn1NpKBeOorCYkB/8lMRoiZ5hUrCoMmDtxCS/d38mlg==}
+    engines: {node: '>= 0.10.0'}
+
+  passport-jwt@4.0.1:
+    resolution: {integrity: sha512-UCKMDYhNuGOBE9/9Ycuoyh7vP6jpeTp/+sfMJl7nLff/t6dps+iaeE0hhNkKN8/HZHcJ7lCdOyDxHdDoxoSvdQ==}
+
+  passport-strategy@1.0.0:
+    resolution: {integrity: sha512-CB97UUvDKJde2V0KDWWB3lyf6PC3FaZP7YxZ2G8OAtn9p4HI9j9JLP9qjOGZFvyl8uwNT8qM+hGnz/n16NI7oA==}
+    engines: {node: '>= 0.4.0'}
+
+  passport@0.7.0:
+    resolution: {integrity: sha512-cPLl+qZpSc+ireUvt+IzqbED1cHHkDoVYMo30jbJIdOOjQ1MQYZBPiNvmi8UM6lJuOpTPXJGZQk0DtC4y61MYQ==}
+    engines: {node: '>= 0.4.0'}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -2929,6 +3615,9 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  pause@0.0.1:
+    resolution: {integrity: sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -3010,6 +3699,10 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
   pretty-format@29.7.0:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3021,10 +3714,19 @@ packages:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
 
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
   proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  psl@1.10.0:
+    resolution: {integrity: sha512-KSKHEbjAnpUuAUserOq0FxGXCUrzC3WniuSJhvdbs102rL55266ZcHBqLWOsG30spQMlPdpy7icATiAQehg/iA==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -3036,6 +3738,9 @@ packages:
     resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==}
     engines: {node: '>=0.6'}
 
+  querystringify@2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -3055,14 +3760,31 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-error-boundary@3.1.4:
+    resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==}
+    engines: {node: '>=10', npm: '>=6'}
+    peerDependencies:
+      react: '>=16.13.1'
+
   react-icons@5.3.0:
     resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==}
     peerDependencies:
       react: '*'
 
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-lottie@1.2.7:
+    resolution: {integrity: sha512-VVY/dL77jdpAY97LeAbPKExVqlKqZqqG0PtdCJh1NmChtfUlemUQXPkF6rrOw2cp3T+xmtcsFs+N9U+nXUzAqw==}
+    peerDependencies:
+      react: '>=15.0.0'
+
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
@@ -3098,6 +3820,10 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
   redis-errors@1.2.0:
     resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
     engines: {node: '>=4'}
@@ -3109,6 +3835,12 @@ packages:
   reflect-metadata@0.2.2:
     resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}
 
+  regenerator-runtime@0.11.1:
+    resolution: {integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==}
+
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
   repeat-string@1.6.1:
     resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
     engines: {node: '>=0.10'}
@@ -3121,6 +3853,9 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+
   resolve-cwd@3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
     engines: {node: '>=8'}
@@ -3182,6 +3917,10 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
@@ -3189,6 +3928,10 @@ packages:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
     engines: {node: '>= 10.13.0'}
 
+  semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -3202,6 +3945,9 @@ packages:
     resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
     engines: {node: '>= 0.8.0'}
 
+  seq-queue@0.0.5:
+    resolution: {integrity: sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q==}
+
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
@@ -3216,6 +3962,20 @@ packages:
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
+  sha.js@2.4.11:
+    resolution: {integrity: sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==}
+    hasBin: true
+
+  sharp-phash@2.2.0:
+    resolution: {integrity: sha512-/gBoes9EycJkt/2aakKl9BeSGxFbPpZ5lCDtpRRlnU+vkqqcdXi8YLIlXnJsTtTBmaL82zh1bPkV7uZSSIsj8w==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      sharp: '>= 0.32.0'
+
+  sharp@0.33.5:
+    resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -3224,6 +3984,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shimmer@1.2.1:
+    resolution: {integrity: sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==}
+
   side-channel@1.0.6:
     resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
     engines: {node: '>= 0.4'}
@@ -3235,6 +3998,9 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -3271,6 +4037,10 @@ packages:
   source-map-support@0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
 
+  source-map@0.5.6:
+    resolution: {integrity: sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==}
+    engines: {node: '>=0.10.0'}
+
   source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -3286,10 +4056,29 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
+  sqlstring@2.3.3:
+    resolution: {integrity: sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==}
+    engines: {node: '>= 0.6'}
+
+  stack-chain@1.3.7:
+    resolution: {integrity: sha512-D8cWtWVdIe/jBA7v5p5Hwl5yOSOrmZPWDPe2KxQ5UAGD+nxbxU0lKXA4h85Ta6+qgdKVL3vUxsbIZjc1kBG7ug==}
+
+  stack-generator@2.0.10:
+    resolution: {integrity: sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==}
+
   stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
 
+  stackframe@1.3.4:
+    resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
+
+  stacktrace-gps@3.1.2:
+    resolution: {integrity: sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==}
+
+  stacktrace-js@2.0.2:
+    resolution: {integrity: sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==}
+
   standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
 
@@ -3339,6 +4128,10 @@ packages:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
 
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -3372,6 +4165,9 @@ packages:
     resolution: {integrity: sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==}
     engines: {node: '>=0.10'}
 
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
   synckit@0.9.2:
     resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -3445,9 +4241,17 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
+  tough-cookie@4.1.4:
+    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
+    engines: {node: '>=6'}
+
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tr46@3.0.0:
+    resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
+    engines: {node: '>=12'}
+
   tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -3543,6 +4347,76 @@ packages:
   typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
 
+  typeorm-naming-strategies@4.1.0:
+    resolution: {integrity: sha512-vPekJXzZOTZrdDvTl1YoM+w+sUIfQHG4kZTpbFYoTsufyv9NIBRe4Q+PdzhEAFA2std3D9LZHEb1EjE9zhRpiQ==}
+    peerDependencies:
+      typeorm: ^0.2.0 || ^0.3.0
+
+  typeorm-transactional@0.5.0:
+    resolution: {integrity: sha512-53/CwnXpOIJnWU3oVCNbhHB95FwciKSGbY+m/Hw4e2dBM2c4toiOHwf4pmk83Ne7guznmDgVr/5IUfbp+JTPCg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      reflect-metadata: '>= 0.1.12'
+      typeorm: '>= 0.2.8'
+
+  typeorm@0.3.20:
+    resolution: {integrity: sha512-sJ0T08dV5eoZroaq9uPKBoNcGslHBR4E4y+EBHs//SiGbblGe7IeduP/IH4ddCcj0qp3PHwDwGnuvqEAnKlq/Q==}
+    engines: {node: '>=16.13.0'}
+    hasBin: true
+    peerDependencies:
+      '@google-cloud/spanner': ^5.18.0
+      '@sap/hana-client': ^2.12.25
+      better-sqlite3: ^7.1.2 || ^8.0.0 || ^9.0.0
+      hdb-pool: ^0.1.6
+      ioredis: ^5.0.4
+      mongodb: ^5.8.0
+      mssql: ^9.1.1 || ^10.0.1
+      mysql2: ^2.2.5 || ^3.0.1
+      oracledb: ^6.3.0
+      pg: ^8.5.1
+      pg-native: ^3.0.0
+      pg-query-stream: ^4.0.0
+      redis: ^3.1.1 || ^4.0.0
+      sql.js: ^1.4.0
+      sqlite3: ^5.0.3
+      ts-node: ^10.7.0
+      typeorm-aurora-data-api-driver: ^2.0.0
+    peerDependenciesMeta:
+      '@google-cloud/spanner':
+        optional: true
+      '@sap/hana-client':
+        optional: true
+      better-sqlite3:
+        optional: true
+      hdb-pool:
+        optional: true
+      ioredis:
+        optional: true
+      mongodb:
+        optional: true
+      mssql:
+        optional: true
+      mysql2:
+        optional: true
+      oracledb:
+        optional: true
+      pg:
+        optional: true
+      pg-native:
+        optional: true
+      pg-query-stream:
+        optional: true
+      redis:
+        optional: true
+      sql.js:
+        optional: true
+      sqlite3:
+        optional: true
+      ts-node:
+        optional: true
+      typeorm-aurora-data-api-driver:
+        optional: true
+
   typescript-eslint@8.12.2:
     resolution: {integrity: sha512-UbuVUWSrHVR03q9CWx+JDHeO6B/Hr9p4U5lRH++5tq/EbFq1faYZe50ZSBePptgfIKLEti0aPQ3hFgnPVcd8ZQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3573,6 +4447,10 @@ packages:
     resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
     engines: {node: '>=18'}
 
+  universalify@0.2.0:
+    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
+    engines: {node: '>= 4.0.0'}
+
   universalify@2.0.1:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
@@ -3590,6 +4468,9 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  url-parse@1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -3597,6 +4478,10 @@ packages:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
     engines: {node: '>= 0.4.0'}
 
+  uuid@9.0.1:
+    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    hasBin: true
+
   v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
@@ -3604,6 +4489,9 @@ packages:
     resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
     engines: {node: '>=10.12.0'}
 
+  valibot@0.13.1:
+    resolution: {integrity: sha512-SG2W1RHqE2LShl3p6tyERt6I+G6PQa9ZFVfkyNKXz01HBzL+tBeH5kXw/5AQeAzPJSjI3djVGBl1CyozA1kyBQ==}
+
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -3642,9 +4530,16 @@ packages:
       terser:
         optional: true
 
+  w3c-xmlserializer@4.0.0:
+    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
+    engines: {node: '>=14'}
+
   walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
 
+  wasm-imagemagick@1.2.8:
+    resolution: {integrity: sha512-V7u80n7g+iAoV7sYgQKGSdG59J6/aSMGO0DDK0zxKnwOGjmVXyjP0yU4tX4cMrfC0t/Wk3I8TX7cmdbFQOYHpg==}
+
   watchpack@2.4.2:
     resolution: {integrity: sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==}
     engines: {node: '>=10.13.0'}
@@ -3655,6 +4550,10 @@ packages:
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
   webpack-node-externals@3.0.0:
     resolution: {integrity: sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==}
     engines: {node: '>=6'}
@@ -3673,6 +4572,18 @@ packages:
       webpack-cli:
         optional: true
 
+  whatwg-encoding@2.0.0:
+    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
+    engines: {node: '>=12'}
+
+  whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
+  whatwg-url@11.0.0:
+    resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==}
+    engines: {node: '>=12'}
+
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -3716,10 +4627,20 @@ packages:
       utf-8-validate:
         optional: true
 
+  xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
   xmlhttprequest-ssl@2.1.2:
     resolution: {integrity: sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==}
     engines: {node: '>=0.4.0'}
 
+  xstate@4.38.3:
+    resolution: {integrity: sha512-SH7nAaaPQx57dx6qvfcIgqKRXIh4L0A1iYEqim4s1u7c9VoCgzZc+63FY90AKU4ZzOC2cfJzTnpO4zK7fCUzzw==}
+
   xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
@@ -3736,10 +4657,18 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  yargs-parser@20.2.9:
+    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
+    engines: {node: '>=10'}
+
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
 
+  yargs@16.2.0:
+    resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
+    engines: {node: '>=10'}
+
   yargs@17.7.2:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
@@ -3776,6 +4705,8 @@ packages:
 
 snapshots:
 
+  '@adobe/css-tools@4.4.1': {}
+
   '@alloc/quick-lru@5.2.0': {}
 
   '@ampproject/remapping@2.3.0':
@@ -4008,6 +4939,10 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
+  '@babel/runtime@7.26.0':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
   '@babel/template@7.25.9':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -4150,6 +5085,32 @@ snapshots:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
+  '@dotlottie/common@0.7.11':
+    dependencies:
+      '@dotlottie/dotlottie-js': 0.7.2
+      '@preact/signals-core': 1.8.0
+      howler: 2.2.4
+      lottie-web: 5.12.2
+      xstate: 4.38.3
+
+  '@dotlottie/dotlottie-js@0.7.2':
+    dependencies:
+      browser-image-hash: 0.0.5
+      fflate: 0.8.2
+      sharp: 0.33.5
+      sharp-phash: 2.2.0(sharp@0.33.5)
+      valibot: 0.13.1
+
+  '@dotlottie/react-player@1.6.19(react@18.3.1)':
+    dependencies:
+      '@dotlottie/common': 0.7.11
+      react: 18.3.1
+
+  '@emnapi/runtime@1.3.1':
+    dependencies:
+      tslib: 2.8.0
+    optional: true
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -4300,6 +5261,81 @@ snapshots:
 
   '@humanwhocodes/retry@0.3.1': {}
 
+  '@img/sharp-darwin-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.0.5
+    optional: true
+
+  '@img/sharp-linux-s390x@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-wasm32@0.33.5':
+    dependencies:
+      '@emnapi/runtime': 1.3.1
+    optional: true
+
+  '@img/sharp-win32-ia32@0.33.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.33.5':
+    optional: true
+
   '@ioredis/commands@1.2.0': {}
 
   '@isaacs/cliui@8.0.2':
@@ -4567,6 +5603,17 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  '@nestjs/jwt@10.2.0(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))':
+    dependencies:
+      '@nestjs/common': 10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1)
+      '@types/jsonwebtoken': 9.0.5
+      jsonwebtoken: 9.0.2
+
+  '@nestjs/passport@10.0.3(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(passport@0.7.0)':
+    dependencies:
+      '@nestjs/common': 10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1)
+      passport: 0.7.0
+
   '@nestjs/platform-express@10.4.6(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.6)':
     dependencies:
       '@nestjs/common': 10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1)
@@ -4621,6 +5668,15 @@ snapshots:
     optionalDependencies:
       '@nestjs/platform-express': 10.4.6(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.6)
 
+  '@nestjs/typeorm@10.0.2(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.6)(reflect-metadata@0.2.2)(rxjs@7.8.1)(typeorm@0.3.20(ioredis@5.4.1)(mysql2@3.11.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3)))':
+    dependencies:
+      '@nestjs/common': 10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1)
+      '@nestjs/core': 10.4.6(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/platform-express@10.4.6)(@nestjs/websockets@10.4.7)(reflect-metadata@0.2.2)(rxjs@7.8.1)
+      reflect-metadata: 0.2.2
+      rxjs: 7.8.1
+      typeorm: 0.3.20(ioredis@5.4.1)(mysql2@3.11.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3))
+      uuid: 9.0.1
+
   '@nestjs/websockets@10.4.7(@nestjs/common@10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.6)(@nestjs/platform-socket.io@10.4.7)(reflect-metadata@0.2.2)(rxjs@7.8.1)':
     dependencies:
       '@nestjs/common': 10.4.6(reflect-metadata@0.2.2)(rxjs@7.8.1)
@@ -4658,8 +5714,26 @@ snapshots:
 
   '@pkgr/core@0.1.1': {}
 
+  '@preact/signals-core@1.8.0': {}
+
   '@remix-run/router@1.20.0': {}
 
+  '@rgba-image/common@0.1.13': {}
+
+  '@rgba-image/copy@0.1.3':
+    dependencies:
+      '@rgba-image/common': 0.1.13
+
+  '@rgba-image/create-image@0.1.1':
+    dependencies:
+      '@rgba-image/common': 0.1.13
+
+  '@rgba-image/lanczos@0.1.1':
+    dependencies:
+      '@rgba-image/common': 0.1.13
+      '@rgba-image/copy': 0.1.3
+      '@rgba-image/create-image': 0.1.1
+
   '@rollup/rollup-android-arm-eabi@4.24.3':
     optional: true
 
@@ -4726,6 +5800,71 @@ snapshots:
 
   '@socket.io/component-emitter@3.1.2': {}
 
+  '@sqltools/formatter@1.2.5': {}
+
+  '@sqltools/formatter@1.2.5': {}
+
+  '@tanstack/query-core@5.60.6': {}
+
+  '@tanstack/query-devtools@5.59.20': {}
+
+  '@tanstack/react-query-devtools@5.60.6(@tanstack/react-query@5.60.6(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@tanstack/query-devtools': 5.59.20
+      '@tanstack/react-query': 5.60.6(react@18.3.1)
+      react: 18.3.1
+
+  '@tanstack/react-query@5.60.6(react@18.3.1)':
+    dependencies:
+      '@tanstack/query-core': 5.60.6
+      react: 18.3.1
+
+  '@testing-library/dom@10.4.0':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/runtime': 7.26.0
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      chalk: 4.1.2
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.6.3':
+    dependencies:
+      '@adobe/css-tools': 4.4.1
+      aria-query: 5.3.2
+      chalk: 3.0.0
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      lodash: 4.17.21
+      redent: 3.0.0
+
+  '@testing-library/react-hooks@8.0.1(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      react: 18.3.1
+      react-error-boundary: 3.1.4(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@testing-library/react@15.0.6(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@testing-library/dom': 10.4.0
+      '@types/react-dom': 18.3.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+
+  '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
+    dependencies:
+      '@testing-library/dom': 10.4.0
+
+  '@tootallnate/once@2.0.0': {}
+
   '@tsconfig/node10@1.0.11': {}
 
   '@tsconfig/node12@1.0.11': {}
@@ -4734,6 +5873,8 @@ snapshots:
 
   '@tsconfig/node16@1.0.4': {}
 
+  '@types/aria-query@5.0.4': {}
+
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.26.2
@@ -4760,6 +5901,10 @@ snapshots:
       '@types/connect': 3.4.38
       '@types/node': 20.17.4
 
+  '@types/cls-hooked@4.3.9':
+    dependencies:
+      '@types/node': 20.17.4
+
   '@types/connect@3.4.38':
     dependencies:
       '@types/node': 20.17.4
@@ -4768,6 +5913,10 @@ snapshots:
     dependencies:
       '@types/node': 20.17.4
 
+  '@types/cookie-parser@1.4.7':
+    dependencies:
+      '@types/express': 5.0.0
+
   '@types/cookie@0.4.1': {}
 
   '@types/cookiejar@2.1.5': {}
@@ -4813,8 +5962,22 @@ snapshots:
       expect: 29.7.0
       pretty-format: 29.7.0
 
+  '@types/jsdom@20.0.1':
+    dependencies:
+      '@types/node': 20.17.4
+      '@types/tough-cookie': 4.0.5
+      parse5: 7.2.1
+
   '@types/json-schema@7.0.15': {}
 
+  '@types/jsonwebtoken@9.0.5':
+    dependencies:
+      '@types/node': 20.17.4
+
+  '@types/jsonwebtoken@9.0.7':
+    dependencies:
+      '@types/node': 20.17.4
+
   '@types/methods@1.1.4': {}
 
   '@types/mime@1.3.5': {}
@@ -4823,6 +5986,36 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
+  '@types/oauth@0.9.6':
+    dependencies:
+      '@types/node': 20.17.4
+
+  '@types/passport-github@1.1.12':
+    dependencies:
+      '@types/express': 5.0.0
+      '@types/passport': 1.0.17
+      '@types/passport-oauth2': 1.4.17
+
+  '@types/passport-jwt@4.0.1':
+    dependencies:
+      '@types/jsonwebtoken': 9.0.7
+      '@types/passport-strategy': 0.2.38
+
+  '@types/passport-oauth2@1.4.17':
+    dependencies:
+      '@types/express': 5.0.0
+      '@types/oauth': 0.9.6
+      '@types/passport': 1.0.17
+
+  '@types/passport-strategy@0.2.38':
+    dependencies:
+      '@types/express': 5.0.0
+      '@types/passport': 1.0.17
+
+  '@types/passport@1.0.17':
+    dependencies:
+      '@types/express': 5.0.0
+
   '@types/prop-types@15.7.13': {}
 
   '@types/qs@6.9.16': {}
@@ -4833,6 +6026,10 @@ snapshots:
     dependencies:
       '@types/react': 18.3.12
 
+  '@types/react-lottie@1.2.10':
+    dependencies:
+      '@types/react': 18.3.12
+
   '@types/react@18.3.12':
     dependencies:
       '@types/prop-types': 15.7.13
@@ -4871,6 +6068,8 @@ snapshots:
       '@types/methods': 1.1.4
       '@types/superagent': 8.1.9
 
+  '@types/tough-cookie@4.0.5': {}
+
   '@types/yargs-parser@21.0.3': {}
 
   '@types/yargs@17.0.33':
@@ -5110,11 +6309,18 @@ snapshots:
       jsonparse: 1.3.1
       through: 2.3.8
 
+  abab@2.0.6: {}
+
   accepts@1.3.8:
     dependencies:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
+  acorn-globals@7.0.1:
+    dependencies:
+      acorn: 8.14.0
+      acorn-walk: 8.3.4
+
   acorn-import-attributes@1.9.5(acorn@8.14.0):
     dependencies:
       acorn: 8.14.0
@@ -5129,6 +6335,12 @@ snapshots:
 
   acorn@8.14.0: {}
 
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.3.7
+    transitivePeerDependencies:
+      - supports-color
+
   ajv-formats@2.1.1(ajv@8.12.0):
     optionalDependencies:
       ajv: 8.12.0
@@ -5183,6 +6395,8 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  app-root-path@3.1.0: {}
+
   append-field@1.0.0: {}
 
   arg@4.1.3: {}
@@ -5195,6 +6409,12 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
+  aria-query@5.3.2: {}
+
   array-flatten@1.1.1: {}
 
   array-ify@1.0.0: {}
@@ -5203,6 +6423,10 @@ snapshots:
 
   asap@2.0.6: {}
 
+  async-hook-jl@1.7.6:
+    dependencies:
+      stack-chain: 1.3.7
+
   async@3.2.6: {}
 
   asynckit@0.4.0: {}
@@ -5217,6 +6441,24 @@ snapshots:
       postcss: 8.4.47
       postcss-value-parser: 4.2.0
 
+  axios@1.7.7:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.1
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
+  aws-ssl-profiles@1.1.2: {}
+
+  axios@1.7.7:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.1
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   babel-jest@29.7.0(@babel/core@7.26.0):
     dependencies:
       '@babel/core': 7.26.0
@@ -5272,6 +6514,11 @@ snapshots:
       babel-plugin-jest-hoist: 29.6.3
       babel-preset-current-node-syntax: 1.1.0(@babel/core@7.26.0)
 
+  babel-runtime@6.26.0:
+    dependencies:
+      core-js: 2.6.12
+      regenerator-runtime: 0.11.1
+
   balanced-match@1.0.2: {}
 
   base64-js@1.5.1: {}
@@ -5316,6 +6563,12 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
+  browser-image-hash@0.0.5:
+    dependencies:
+      '@rgba-image/lanczos': 0.1.1
+      decimal.js: 10.4.3
+      wasm-imagemagick: 1.2.8
+
   browserslist@4.24.2:
     dependencies:
       caniuse-lite: 1.0.30001676
@@ -5331,9 +6584,16 @@ snapshots:
     dependencies:
       node-int64: 0.4.0
 
+  buffer-equal-constant-time@1.0.1: {}
+
   buffer-from@1.1.2: {}
 
-  buffer@5.7.1:
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  buffer@6.0.3:
     dependencies:
       base64-js: 1.5.1
       ieee754: 1.2.1
@@ -5362,6 +6622,11 @@ snapshots:
 
   caniuse-lite@1.0.30001676: {}
 
+  chalk@3.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -5395,6 +6660,15 @@ snapshots:
     dependencies:
       restore-cursor: 3.1.0
 
+  cli-highlight@2.1.11:
+    dependencies:
+      chalk: 4.1.2
+      highlight.js: 10.7.3
+      mz: 2.7.0
+      parse5: 5.1.1
+      parse5-htmlparser2-tree-adapter: 6.0.1
+      yargs: 16.2.0
+
   cli-spinners@2.9.2: {}
 
   cli-table3@0.6.5:
@@ -5407,6 +6681,12 @@ snapshots:
 
   cli-width@4.1.0: {}
 
+  cliui@7.0.4:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
@@ -5415,6 +6695,12 @@ snapshots:
 
   clone@1.0.4: {}
 
+  cls-hooked@4.2.2:
+    dependencies:
+      async-hook-jl: 1.7.6
+      emitter-listener: 1.1.2
+      semver: 5.7.2
+
   cluster-key-slot@1.1.2: {}
 
   co@4.6.0: {}
@@ -5427,6 +6713,16 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+
+  color@4.2.3:
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -5484,6 +6780,11 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  cookie-parser@1.4.7:
+    dependencies:
+      cookie: 0.7.2
+      cookie-signature: 1.0.6
+
   cookie-signature@1.0.6: {}
 
   cookie@0.7.1: {}
@@ -5492,6 +6793,8 @@ snapshots:
 
   cookiejar@2.1.4: {}
 
+  core-js@2.6.12: {}
+
   core-util-is@1.0.3: {}
 
   cors@2.8.5:
@@ -5547,12 +6850,30 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css.escape@1.5.1: {}
+
   cssesc@3.0.0: {}
 
+  cssom@0.3.8: {}
+
+  cssom@0.5.0: {}
+
+  cssstyle@2.3.0:
+    dependencies:
+      cssom: 0.3.8
+
   csstype@3.1.3: {}
 
   dargs@8.1.0: {}
 
+  data-urls@3.0.2:
+    dependencies:
+      abab: 2.0.6
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 11.0.0
+
+  dayjs@1.11.13: {}
+
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
@@ -5561,6 +6882,8 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decimal.js@10.4.3: {}
+
   dedent@1.5.3: {}
 
   deep-is@0.1.4: {}
@@ -5583,8 +6906,12 @@ snapshots:
 
   depd@2.0.0: {}
 
+  dequal@2.0.3: {}
+
   destroy@1.2.0: {}
 
+  detect-libc@2.0.3: {}
+
   detect-newline@3.1.0: {}
 
   dezalgo@1.0.4:
@@ -5604,6 +6931,14 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
+  domexception@4.0.0:
+    dependencies:
+      webidl-conversions: 7.0.0
+
   dot-prop@5.3.0:
     dependencies:
       is-obj: 2.0.0
@@ -5612,6 +6947,10 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  ecdsa-sig-formatter@1.0.11:
+    dependencies:
+      safe-buffer: 5.2.1
+
   ee-first@1.1.1: {}
 
   ejs@3.1.10:
@@ -5620,6 +6959,10 @@ snapshots:
 
   electron-to-chromium@1.5.49: {}
 
+  emitter-listener@1.1.2:
+    dependencies:
+      shimmer: 1.2.1
+
   emittery@0.13.1: {}
 
   emoji-regex@8.0.0: {}
@@ -5666,12 +7009,18 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.2.1
 
+  entities@4.5.0: {}
+
   env-paths@2.2.1: {}
 
   error-ex@1.3.2:
     dependencies:
       is-arrayish: 0.2.1
 
+  error-stack-parser@2.1.4:
+    dependencies:
+      stackframe: 1.3.4
+
   es-define-property@1.0.0:
     dependencies:
       get-intrinsic: 1.2.4
@@ -5716,6 +7065,14 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
   eslint-config-prettier@9.1.0(eslint@8.57.1):
     dependencies:
       eslint: 8.57.1
@@ -5965,6 +7322,8 @@ snapshots:
     dependencies:
       bser: 2.1.1
 
+  fflate@0.8.2: {}
+
   figures@3.2.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -6026,6 +7385,8 @@ snapshots:
 
   flatted@3.3.1: {}
 
+  follow-redirects@1.15.9: {}
+
   foreground-child@3.3.0:
     dependencies:
       cross-spawn: 7.0.3
@@ -6081,6 +7442,10 @@ snapshots:
 
   function-bind@1.1.2: {}
 
+  generate-function@2.3.1:
+    dependencies:
+      is-property: 1.0.2
+
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
@@ -6180,6 +7545,14 @@ snapshots:
 
   hexoid@2.0.0: {}
 
+  highlight.js@10.7.3: {}
+
+  howler@2.2.4: {}
+
+  html-encoding-sniffer@3.0.0:
+    dependencies:
+      whatwg-encoding: 2.0.0
+
   html-escaper@2.0.2: {}
 
   http-errors@2.0.0:
@@ -6190,6 +7563,21 @@ snapshots:
       statuses: 2.0.1
       toidentifier: 1.0.1
 
+  http-proxy-agent@5.0.0:
+    dependencies:
+      '@tootallnate/once': 2.0.0
+      agent-base: 6.0.2
+      debug: 4.3.7
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.3.7
+    transitivePeerDependencies:
+      - supports-color
+
   human-signals@2.1.0: {}
 
   husky@9.1.6: {}
@@ -6198,6 +7586,10 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}
@@ -6216,6 +7608,8 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  indent-string@4.0.0: {}
+
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -6279,6 +7673,8 @@ snapshots:
 
   is-arrayish@0.2.1: {}
 
+  is-arrayish@0.3.2: {}
+
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
@@ -6305,6 +7701,10 @@ snapshots:
 
   is-path-inside@3.0.3: {}
 
+  is-potential-custom-element-name@1.0.1: {}
+
+  is-property@1.0.2: {}
+
   is-stream@2.0.1: {}
 
   is-text-path@2.0.0:
@@ -6474,6 +7874,21 @@ snapshots:
       jest-util: 29.7.0
       pretty-format: 29.7.0
 
+  jest-environment-jsdom@29.7.0:
+    dependencies:
+      '@jest/environment': 29.7.0
+      '@jest/fake-timers': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/jsdom': 20.0.1
+      '@types/node': 20.17.4
+      jest-mock: 29.7.0
+      jest-util: 29.7.0
+      jsdom: 20.0.3
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   jest-environment-node@29.7.0:
     dependencies:
       '@jest/environment': 29.7.0
@@ -6701,6 +8116,39 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  jsdom@20.0.3:
+    dependencies:
+      abab: 2.0.6
+      acorn: 8.14.0
+      acorn-globals: 7.0.1
+      cssom: 0.5.0
+      cssstyle: 2.3.0
+      data-urls: 3.0.2
+      decimal.js: 10.4.3
+      domexception: 4.0.0
+      escodegen: 2.1.0
+      form-data: 4.0.1
+      html-encoding-sniffer: 3.0.0
+      http-proxy-agent: 5.0.0
+      https-proxy-agent: 5.0.1
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.13
+      parse5: 7.2.1
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.4
+      w3c-xmlserializer: 4.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 11.0.0
+      ws: 8.17.1
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   jsesc@3.0.2: {}
 
   json-buffer@3.0.1: {}
@@ -6727,6 +8175,30 @@ snapshots:
 
   jsonparse@1.3.1: {}
 
+  jsonwebtoken@9.0.2:
+    dependencies:
+      jws: 3.2.2
+      lodash.includes: 4.3.0
+      lodash.isboolean: 3.0.3
+      lodash.isinteger: 4.0.4
+      lodash.isnumber: 3.0.3
+      lodash.isplainobject: 4.0.6
+      lodash.isstring: 4.0.1
+      lodash.once: 4.1.1
+      ms: 2.1.3
+      semver: 7.6.3
+
+  jwa@1.4.1:
+    dependencies:
+      buffer-equal-constant-time: 1.0.1
+      ecdsa-sig-formatter: 1.0.11
+      safe-buffer: 5.2.1
+
+  jws@3.2.2:
+    dependencies:
+      jwa: 1.4.1
+      safe-buffer: 5.2.1
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -6764,10 +8236,20 @@ snapshots:
 
   lodash.defaults@4.2.0: {}
 
+  lodash.includes@4.3.0: {}
+
   lodash.isarguments@3.1.0: {}
 
+  lodash.isboolean@3.0.3: {}
+
+  lodash.isinteger@4.0.4: {}
+
+  lodash.isnumber@3.0.3: {}
+
   lodash.isplainobject@4.0.6: {}
 
+  lodash.isstring@4.0.1: {}
+
   lodash.kebabcase@4.1.1: {}
 
   lodash.memoize@4.1.2: {}
@@ -6776,6 +8258,8 @@ snapshots:
 
   lodash.mergewith@4.6.2: {}
 
+  lodash.once@4.1.1: {}
+
   lodash.snakecase@4.1.1: {}
 
   lodash.startcase@4.4.0: {}
@@ -6791,16 +8275,26 @@ snapshots:
       chalk: 4.1.2
       is-unicode-supported: 0.1.0
 
+  long@5.2.3: {}
+
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
 
+  lottie-web@5.12.2: {}
+
   lru-cache@10.4.3: {}
 
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
 
+  lru-cache@7.18.3: {}
+
+  lru.min@1.1.1: {}
+
+  lz-string@1.5.0: {}
+
   magic-string@0.30.8:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -6848,6 +8342,8 @@ snapshots:
 
   mimic-fn@2.1.0: {}
 
+  min-indent@1.0.1: {}
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -6868,6 +8364,8 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
+  mkdirp@2.1.6: {}
+
   ms@2.0.0: {}
 
   ms@2.1.3: {}
@@ -6886,12 +8384,28 @@ snapshots:
 
   mute-stream@1.0.0: {}
 
+  mysql2@3.11.4:
+    dependencies:
+      aws-ssl-profiles: 1.1.2
+      denque: 2.1.0
+      generate-function: 2.3.1
+      iconv-lite: 0.6.3
+      long: 5.2.3
+      lru.min: 1.1.1
+      named-placeholders: 1.1.3
+      seq-queue: 0.0.5
+      sqlstring: 2.3.3
+
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
+  named-placeholders@1.1.3:
+    dependencies:
+      lru-cache: 7.18.3
+
   nanoid@3.3.7: {}
 
   natural-compare@1.4.0: {}
@@ -6922,6 +8436,8 @@ snapshots:
     dependencies:
       path-key: 3.1.1
 
+  nwsapi@2.2.13: {}
+
   object-assign@4.1.1: {}
 
   object-hash@3.0.0: {}
@@ -6987,6 +8503,8 @@ snapshots:
     dependencies:
       p-limit: 4.0.0
 
+  p-map@2.1.0: {}
+
   p-try@2.2.0: {}
 
   package-json-from-dist@1.0.1: {}
@@ -7002,8 +8520,37 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
+  parse5-htmlparser2-tree-adapter@6.0.1:
+    dependencies:
+      parse5: 6.0.1
+
+  parse5@5.1.1: {}
+
+  parse5@6.0.1: {}
+
+  parse5@7.2.1:
+    dependencies:
+      entities: 4.5.0
+
   parseurl@1.3.3: {}
 
+  passport-custom@1.1.1:
+    dependencies:
+      passport-strategy: 1.0.0
+
+  passport-jwt@4.0.1:
+    dependencies:
+      jsonwebtoken: 9.0.2
+      passport-strategy: 1.0.0
+
+  passport-strategy@1.0.0: {}
+
+  passport@0.7.0:
+    dependencies:
+      passport-strategy: 1.0.0
+      pause: 0.0.1
+      utils-merge: 1.0.1
+
   path-exists@4.0.0: {}
 
   path-exists@5.0.0: {}
@@ -7025,6 +8572,8 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  pause@0.0.1: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -7087,6 +8636,12 @@ snapshots:
 
   prettier@3.3.3: {}
 
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
   pretty-format@29.7.0:
     dependencies:
       '@jest/schemas': 29.6.3
@@ -7100,11 +8655,23 @@ snapshots:
       kleur: 3.0.3
       sisteransi: 1.0.5
 
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
   proxy-addr@2.0.7:
     dependencies:
       forwarded: 0.2.0
       ipaddr.js: 1.9.1
 
+  proxy-from-env@1.1.0: {}
+
+  psl@1.10.0:
+    dependencies:
+      punycode: 2.3.1
+
   punycode@2.3.1: {}
 
   pure-rand@6.1.0: {}
@@ -7113,6 +8680,8 @@ snapshots:
     dependencies:
       side-channel: 1.0.6
 
+  querystringify@2.2.0: {}
+
   queue-microtask@1.2.3: {}
 
   randombytes@2.1.0:
@@ -7134,12 +8703,28 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-error-boundary@3.1.4(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.26.0
+      react: 18.3.1
+
   react-icons@5.3.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
+  react-is@16.13.1: {}
+
+  react-is@17.0.2: {}
+
   react-is@18.3.1: {}
 
+  react-lottie@1.2.7(react@18.3.1):
+    dependencies:
+      babel-runtime: 6.26.0
+      lottie-web: 5.12.2
+      prop-types: 15.8.1
+      react: 18.3.1
+
   react-refresh@0.14.2: {}
 
   react-router-dom@6.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -7182,6 +8767,11 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
   redis-errors@1.2.0: {}
 
   redis-parser@3.0.0:
@@ -7190,12 +8780,18 @@ snapshots:
 
   reflect-metadata@0.2.2: {}
 
+  regenerator-runtime@0.11.1: {}
+
+  regenerator-runtime@0.14.1: {}
+
   repeat-string@1.6.1: {}
 
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
 
+  requires-port@1.0.0: {}
+
   resolve-cwd@3.0.0:
     dependencies:
       resolve-from: 5.0.0
@@ -7265,6 +8861,10 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
@@ -7275,6 +8875,8 @@ snapshots:
       ajv: 6.12.6
       ajv-keywords: 3.5.2(ajv@6.12.6)
 
+  semver@5.7.2: {}
+
   semver@6.3.1: {}
 
   semver@7.6.3: {}
@@ -7297,6 +8899,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  seq-queue@0.0.5: {}
+
   serialize-javascript@6.0.2:
     dependencies:
       randombytes: 2.1.0
@@ -7321,12 +8925,49 @@ snapshots:
 
   setprototypeof@1.2.0: {}
 
+  sha.js@2.4.11:
+    dependencies:
+      inherits: 2.0.4
+      safe-buffer: 5.2.1
+
+  sharp-phash@2.2.0(sharp@0.33.5):
+    dependencies:
+      sharp: 0.33.5
+
+  sharp@0.33.5:
+    dependencies:
+      color: 4.2.3
+      detect-libc: 2.0.3
+      semver: 7.6.3
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.33.5
+      '@img/sharp-darwin-x64': 0.33.5
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+      '@img/sharp-libvips-linux-arm': 1.0.5
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+      '@img/sharp-libvips-linux-x64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+      '@img/sharp-linux-arm': 0.33.5
+      '@img/sharp-linux-arm64': 0.33.5
+      '@img/sharp-linux-s390x': 0.33.5
+      '@img/sharp-linux-x64': 0.33.5
+      '@img/sharp-linuxmusl-arm64': 0.33.5
+      '@img/sharp-linuxmusl-x64': 0.33.5
+      '@img/sharp-wasm32': 0.33.5
+      '@img/sharp-win32-ia32': 0.33.5
+      '@img/sharp-win32-x64': 0.33.5
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
   shebang-regex@3.0.0: {}
 
+  shimmer@1.2.1: {}
+
   side-channel@1.0.6:
     dependencies:
       call-bind: 1.0.7
@@ -7338,6 +8979,10 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  simple-swizzle@0.2.2:
+    dependencies:
+      is-arrayish: 0.3.2
+
   sisteransi@1.0.5: {}
 
   slash@3.0.0: {}
@@ -7409,6 +9054,8 @@ snapshots:
       buffer-from: 1.1.2
       source-map: 0.6.1
 
+  source-map@0.5.6: {}
+
   source-map@0.6.1: {}
 
   source-map@0.7.4: {}
@@ -7417,10 +9064,31 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
+  sqlstring@2.3.3: {}
+
+  stack-chain@1.3.7: {}
+
+  stack-generator@2.0.10:
+    dependencies:
+      stackframe: 1.3.4
+
   stack-utils@2.0.6:
     dependencies:
       escape-string-regexp: 2.0.0
 
+  stackframe@1.3.4: {}
+
+  stacktrace-gps@3.1.2:
+    dependencies:
+      source-map: 0.5.6
+      stackframe: 1.3.4
+
+  stacktrace-js@2.0.2:
+    dependencies:
+      error-stack-parser: 2.1.4
+      stack-generator: 2.0.10
+      stacktrace-gps: 3.1.2
+
   standard-as-callback@2.1.0: {}
 
   statuses@2.0.1: {}
@@ -7466,6 +9134,10 @@ snapshots:
 
   strip-final-newline@2.0.0: {}
 
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
   strip-json-comments@3.1.1: {}
 
   sucrase@3.35.0:
@@ -7511,6 +9183,8 @@ snapshots:
 
   symbol-observable@4.0.0: {}
 
+  symbol-tree@3.2.4: {}
+
   synckit@0.9.2:
     dependencies:
       '@pkgr/core': 0.1.1
@@ -7595,8 +9269,19 @@ snapshots:
 
   toidentifier@1.0.1: {}
 
+  tough-cookie@4.1.4:
+    dependencies:
+      psl: 1.10.0
+      punycode: 2.3.1
+      universalify: 0.2.0
+      url-parse: 1.5.10
+
   tr46@0.0.3: {}
 
+  tr46@3.0.0:
+    dependencies:
+      punycode: 2.3.1
+
   tree-kill@1.2.2: {}
 
   ts-api-utils@1.4.0(typescript@5.6.3):
@@ -7685,6 +9370,42 @@ snapshots:
 
   typedarray@0.0.6: {}
 
+  typeorm-naming-strategies@4.1.0(typeorm@0.3.20(ioredis@5.4.1)(mysql2@3.11.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3))):
+    dependencies:
+      typeorm: 0.3.20(ioredis@5.4.1)(mysql2@3.11.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3))
+
+  typeorm-transactional@0.5.0(reflect-metadata@0.2.2)(typeorm@0.3.20(ioredis@5.4.1)(mysql2@3.11.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3))):
+    dependencies:
+      '@types/cls-hooked': 4.3.9
+      cls-hooked: 4.2.2
+      reflect-metadata: 0.2.2
+      semver: 7.6.3
+      typeorm: 0.3.20(ioredis@5.4.1)(mysql2@3.11.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3))
+
+  typeorm@0.3.20(ioredis@5.4.1)(mysql2@3.11.4)(ts-node@10.9.2(@types/node@20.17.4)(typescript@5.6.3)):
+    dependencies:
+      '@sqltools/formatter': 1.2.5
+      app-root-path: 3.1.0
+      buffer: 6.0.3
+      chalk: 4.1.2
+      cli-highlight: 2.1.11
+      dayjs: 1.11.13
+      debug: 4.3.7
+      dotenv: 16.4.5
+      glob: 10.4.5
+      mkdirp: 2.1.6
+      reflect-metadata: 0.2.2
+      sha.js: 2.4.11
+      tslib: 2.8.0
+      uuid: 9.0.1
+      yargs: 17.7.2
+    optionalDependencies:
+      ioredis: 5.4.1
+      mysql2: 3.11.4
+      ts-node: 10.9.2(@types/node@20.17.4)(typescript@5.6.3)
+    transitivePeerDependencies:
+      - supports-color
+
   typescript-eslint@8.12.2(eslint@9.13.0(jiti@1.21.6))(typescript@5.6.3):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.12.2(@typescript-eslint/parser@8.12.2(eslint@9.13.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.13.0(jiti@1.21.6))(typescript@5.6.3)
@@ -7708,6 +9429,8 @@ snapshots:
 
   unicorn-magic@0.1.0: {}
 
+  universalify@0.2.0: {}
+
   universalify@2.0.1: {}
 
   unpipe@1.0.0: {}
@@ -7722,10 +9445,17 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  url-parse@1.5.10:
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+
   util-deprecate@1.0.2: {}
 
   utils-merge@1.0.1: {}
 
+  uuid@9.0.1: {}
+
   v8-compile-cache-lib@3.0.1: {}
 
   v8-to-istanbul@9.3.0:
@@ -7734,6 +9464,8 @@ snapshots:
       '@types/istanbul-lib-coverage': 2.0.6
       convert-source-map: 2.0.0
 
+  valibot@0.13.1: {}
+
   vary@1.1.2: {}
 
   vite-plugin-remove-console@2.2.0: {}
@@ -7748,10 +9480,19 @@ snapshots:
       fsevents: 2.3.3
       terser: 5.36.0
 
+  w3c-xmlserializer@4.0.0:
+    dependencies:
+      xml-name-validator: 4.0.0
+
   walker@1.0.8:
     dependencies:
       makeerror: 1.0.12
 
+  wasm-imagemagick@1.2.8:
+    dependencies:
+      p-map: 2.1.0
+      stacktrace-js: 2.0.2
+
   watchpack@2.4.2:
     dependencies:
       glob-to-regexp: 0.4.1
@@ -7763,6 +9504,8 @@ snapshots:
 
   webidl-conversions@3.0.1: {}
 
+  webidl-conversions@7.0.0: {}
+
   webpack-node-externals@3.0.0: {}
 
   webpack-sources@3.2.3: {}
@@ -7797,6 +9540,17 @@ snapshots:
       - esbuild
       - uglify-js
 
+  whatwg-encoding@2.0.0:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@3.0.0: {}
+
+  whatwg-url@11.0.0:
+    dependencies:
+      tr46: 3.0.0
+      webidl-conversions: 7.0.0
+
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3
@@ -7835,8 +9589,14 @@ snapshots:
 
   ws@8.17.1: {}
 
+  xml-name-validator@4.0.0: {}
+
+  xmlchars@2.2.0: {}
+
   xmlhttprequest-ssl@2.1.2: {}
 
+  xstate@4.38.3: {}
+
   xtend@4.0.2: {}
 
   y18n@5.0.8: {}
@@ -7845,8 +9605,20 @@ snapshots:
 
   yaml@2.6.0: {}
 
+  yargs-parser@20.2.9: {}
+
   yargs-parser@21.1.1: {}
 
+  yargs@16.2.0:
+    dependencies:
+      cliui: 7.0.4
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 20.2.9
+
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1