dev-fe -> dev merge

packages/frontend/package.json

@@ -13,13 +13,17 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.59.19",
+    "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lightweight-charts": "^4.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-lottie-player": "^2.1.0",
     "react-router-dom": "^6.28.0",
-    "tailwind-merge": "^2.5.4"
+    "socket.io-client": "^4.8.1",
+    "tailwind-merge": "^2.5.4",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.2",

packages/frontend/src/apis/config/index.ts

@@ -0,0 +1,24 @@
+import axios, { AxiosError } from 'axios';
+
+export const instance = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+  timeout: 1000,
+  withCredentials: true,
+});
+
+instance.interceptors.response.use(
+  (response) => response,
+  async (error: AxiosError) => {
+    const status = error.response?.status;
+
+    if (status === 400) {
+      alert('잘못된 요청입니다.');
+    }
+
+    if (status === 403) {
+      alert('로그인이 필요합니다.');
+      location.href = '/login';
+    }
+    return Promise.reject(error);
+  },
+);

packages/frontend/src/apis/queries/auth/index.ts

@@ -0,0 +1 @@
+export * from './useGetLoginStatus';

packages/frontend/src/apis/queries/auth/schema.ts

@@ -0,0 +1,55 @@
+import { z } from 'zod';
+
+export const GetLoginStatusSchema = z.object({
+  message: z.enum(['Authenticated', 'Not Authenticated']),
+  nickname: z.string().nullish(),
+});
+
+export type GetLoginStatus = z.infer<typeof GetLoginStatusSchema>;
+
+export const GetTestLoginSchema = z.object({
+  password: z.string(),
+  username: z.string(),
+});
+
+export type GetTestLogin = z.infer<typeof GetTestLoginSchema>;
+
+export const GetUserInfoSchema = z.object({
+  nickname: z.string(),
+  subName: z.string(),
+  createdAt: z.string().datetime(),
+  email: z.string(),
+  type: z.string(),
+});
+
+export type GetUserInfo = z.infer<typeof GetUserInfoSchema>;
+
+export const PostUserNicknameSchema = z.object({
+  message: z.string(),
+  date: z.string().datetime(),
+});
+
+export type PostUserNickname = z.infer<typeof PostUserNicknameSchema>;
+
+export const PostLogoutSchema = z.object({
+  message: z.string(),
+});
+
+export type PostLogout = z.infer<typeof PostLogoutSchema>;
+
+export const GetUserStockSchema = z.object({
+  id: z.number(),
+  stockId: z.string(),
+  name: z.string(),
+  isTrading: z.boolean(),
+  groupCode: z.string(),
+  createdAt: z.string().datetime(),
+});
+
+export type GetUserStock = z.infer<typeof GetUserStockSchema>;
+
+export const GetUserStockResponseSchema = z.object({
+  userStocks: z.array(GetUserStockSchema),
+});
+
+export type GetUserStockResponse = z.infer<typeof GetUserStockResponseSchema>;

packages/frontend/src/apis/queries/auth/useGetLoginStatus.ts

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import { GetLoginStatusSchema, type GetLoginStatus } from './schema';
+import { get } from '@/apis/utils/get';
+
+const getLoginStatus = () =>
+  get<GetLoginStatus>({
+    schema: GetLoginStatusSchema,
+    url: '/api/auth/status',
+  });
+
+export const useGetLoginStatus = () => {
+  return useQuery({
+    queryKey: ['loginStatus'],
+    queryFn: getLoginStatus,
+  });
+};

packages/frontend/src/apis/queries/auth/useGetTestLogin.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { GetTestLoginSchema, type GetTestLogin } from './schema';
+import { get } from '@/apis/utils/get';
+
+const getTestLogin = ({ password, username }: GetTestLogin) =>
+  get({
+    schema: GetTestLoginSchema,
+    url: '/api/auth/tester/login',
+    params: {
+      password,
+      username,
+    },
+  });
+
+export const useGetTestLogin = ({ password, username }: GetTestLogin) => {
+  return useQuery({
+    queryKey: ['testLogin', password, username],
+    queryFn: () => getTestLogin({ password, username }),
+    enabled: false,
+  });
+};

packages/frontend/src/apis/queries/auth/useGetUserInfo.ts

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import { GetUserInfoSchema, type GetUserInfo } from './schema';
+import { get } from '@/apis/utils/get';
+
+const getUserInfo = () =>
+  get<GetUserInfo>({
+    schema: GetUserInfoSchema,
+    url: '/api/user/info',
+  });
+
+export const useGetUserInfo = () => {
+  return useQuery({
+    queryKey: ['userInfo'],
+    queryFn: getUserInfo,
+  });
+};

packages/frontend/src/apis/queries/auth/useGetUserStock.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  GetUserStockResponseSchema,
+  type GetUserStockResponse,
+} from './schema';
+import { get } from '@/apis/utils/get';
+
+const getUserStock = () =>
+  get<GetUserStockResponse>({
+    schema: GetUserStockResponseSchema,
+    url: '/api/stock/user',
+  });
+
+export const useGetUserStock = () => {
+  return useQuery({
+    queryKey: ['userStock'],
+    queryFn: getUserStock,
+  });
+};

packages/frontend/src/apis/queries/auth/usePostLogout.ts

@@ -0,0 +1,16 @@
+import { useMutation } from '@tanstack/react-query';
+import { PostLogout, PostLogoutSchema } from './schema';
+import { post } from '@/apis/utils/post';
+
+const postLogout = () =>
+  post<PostLogout>({
+    schema: PostLogoutSchema,
+    url: '/api/auth/logout',
+  });
+
+export const usePostLogout = () => {
+  return useMutation({
+    mutationKey: ['logout'],
+    mutationFn: postLogout,
+  });
+};

packages/frontend/src/apis/queries/auth/usePostUserNickname.ts

@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { PostUserNickname, PostUserNicknameSchema } from './schema';
+import { post } from '@/apis/utils/post';
+
+const postUserNickname = ({ nickname }: { nickname: string }) =>
+  post<PostUserNickname>({
+    params: { nickname },
+    schema: PostUserNicknameSchema,
+    url: '/api/user/info',
+  });
+
+export const usePostUserNickname = ({ nickname }: { nickname: string }) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['userNickname'],
+    mutationFn: () => postUserNickname({ nickname }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['userInfo'] });
+    },
+  });
+};

packages/frontend/src/apis/queries/chat/index.ts

@@ -0,0 +1,2 @@
+export * from './schema';
+export * from './usePostChatLike';

packages/frontend/src/apis/queries/chat/schema.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod';
+
+export const GetChatLikeRequestSchema = z.object({
+  chatId: z.number(),
+});
+
+export type GetChatLikeRequest = z.infer<typeof GetChatLikeRequestSchema>;
+
+export const GetChatLikeResponseSchema = z.object({
+  chatId: z.number(),
+  stockId: z.string(),
+  likeCount: z.number(),
+  message: z.string(),
+  date: z.string().datetime(),
+});
+
+export type GetChatLikeResponse = z.infer<typeof GetChatLikeResponseSchema>;

packages/frontend/src/apis/queries/chat/usePostChatLike.ts

@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  GetChatLikeResponseSchema,
+  type GetChatLikeRequest,
+  type GetChatLikeResponse,
+} from './schema';
+import { post } from '@/apis/utils/post';
+
+const postChatLike = ({ chatId }: GetChatLikeRequest) =>
+  post<GetChatLikeResponse>({
+    params: { chatId },
+    schema: GetChatLikeResponseSchema,
+    url: '/api/chat/like',
+  });
+
+export const usePostChatLike = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['chatLike'],
+    mutationFn: ({ chatId }: GetChatLikeRequest) => postChatLike({ chatId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['chatLike'] });
+    },
+  });
+};

packages/frontend/src/apis/queries/stock-detail/index.ts

@@ -0,0 +1,6 @@
+export * from './useGetStockDetail';
+export * from './usePostStockView';
+export * from './usePostStockUser';
+export * from './schema';
+export * from './useGetStockOwnership';
+export * from './useDeleteStockUser';

packages/frontend/src/apis/queries/stock-detail/schema.ts

@@ -0,0 +1,57 @@
+import { z } from 'zod';
+
+export const GetStockRequestSchema = z.object({
+  stockId: z.string(),
+});
+
+export type GetStockRequest = z.infer<typeof GetStockRequestSchema>;
+
+export const GetStockResponseSchema = z.object({
+  marketCap: z.number(),
+  name: z.string(),
+  eps: z.number(),
+  per: z.string(),
+  high52w: z.number(),
+  low52w: z.number(),
+});
+
+export type GetStockResponse = z.infer<typeof GetStockResponseSchema>;
+
+export const PostStockRequestSchema = z.object({
+  stockId: z.string(),
+});
+
+export type PostStockRequest = z.infer<typeof PostStockRequestSchema>;
+
+export const PostStockResponseSchema = z.object({
+  id: z.string(),
+  message: z.string(),
+  date: z.string().datetime(),
+});
+
+export type PostStockResponse = z.infer<typeof PostStockResponseSchema>;
+
+export const GetStockOwnershipResponseSchema = z.object({
+  isOwner: z.boolean(),
+  date: z.string().datetime(),
+});
+
+export type GetStockOwnershipResponse = z.infer<
+  typeof GetStockOwnershipResponseSchema
+>;
+
+export const DeleteStockUserRequestSchema = z.object({
+  stockId: z.string(),
+});
+
+export type DeleteStockUserRequest = z.infer<
+  typeof DeleteStockUserRequestSchema
+>;
+
+export const DeleteStockUserSchema = z.object({
+  id: z.string(),
+  message: z.string(),
+  date: z.string().datetime(),
+});
+
+export type DeleteStockUser = z.infer<typeof DeleteStockUserRequestSchema>;

packages/frontend/src/apis/queries/stock-detail/useDeleteStockUser.ts

@@ -0,0 +1,25 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import {
+  DeleteStockUserSchema,
+  type DeleteStockUserRequest,
+  type DeleteStockUser,
+} from './schema';
+import { deleteRequest } from '@/apis/utils/delete';
+
+const deleteStockUser = ({ stockId }: DeleteStockUserRequest) =>
+  deleteRequest<DeleteStockUser>({
+    schema: DeleteStockUserSchema,
+    url: '/api/stock/user',
+    data: { stockId },
+  });
+
+export const useDeleteStockUser = (
+  options?: UseMutationOptions<DeleteStockUser, Error, DeleteStockUserRequest>,
+) => {
+  return useMutation({
+    mutationKey: ['deleteStockUser'],
+    mutationFn: ({ stockId }: DeleteStockUserRequest) =>
+      deleteStockUser({ stockId }),
+    ...options,
+  });
+};

packages/frontend/src/apis/queries/stock-detail/useGetStockDetail.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  GetStockResponseSchema,
+  type GetStockRequest,
+  type GetStockResponse,
+} from './schema';
+import { get } from '@/apis/utils/get';
+
+const getStockDetail = ({ stockId }: GetStockRequest) =>
+  get<GetStockResponse>({
+    schema: GetStockResponseSchema,
+    url: `/api/stock/${stockId}/detail`,
+  });
+
+export const useGetStockDetail = ({ stockId }: GetStockRequest) => {
+  return useQuery({
+    queryKey: ['stockDetail', stockId],
+    queryFn: () => getStockDetail({ stockId }),
+    enabled: !!stockId,
+  });
+};