refactor(fe): change project architecture (#40)

* refactor: remove unused exports and components

* refactor: change file structure

* refactor: rename refresh to tokenRefresh and update related types

* chore: auto-fix linting and formatting issues

* refactor: update import rules

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

apps/client/eslint.config.js

@@ -2,7 +2,7 @@ import pluginJs from '@eslint/js';
 import prettier from 'eslint-config-prettier';
 import pluginImport from 'eslint-plugin-import';
 import pluginReact from 'eslint-plugin-react';
-import pluginReactHooks from 'eslint-plugin-react-hooks'; // 추가
+import pluginReactHooks from 'eslint-plugin-react-hooks';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
 
@@ -60,7 +60,17 @@ export default [
           groups: ['builtin', 'external', ['parent', 'sibling'], 'index'],
           pathGroups: [
             {
-              pattern: '@/component/**',
+              pattern: '@/app/**',
+              group: 'parent',
+              position: 'before',
+            },
+            {
+              pattern: '@/pages/**',
+              group: 'parent',
+              position: 'before',
+            },
+            {
+              pattern: '@/widgets/**',
               group: 'parent',
               position: 'before',
             },
@@ -69,6 +79,16 @@ export default [
               group: 'parent',
               position: 'before',
             },
+            {
+              pattern: '@/entities/**',
+              group: 'parent',
+              position: 'before',
+            },
+            {
+              pattern: '@/shared/**',
+              group: 'parent',
+              position: 'before',
+            },
           ],
           named: true,
           alphabetize: {

apps/client/src/shared/axios.config.ts → apps/client/src/app/config/axios.config.ts

@@ -1,7 +1,6 @@
 import axios from 'axios';
 
-import { useAuthStore } from '@/features/auth';
-import { PostRefreshResponseDTO } from '@/features/auth/auth.dto';
+import { PostTokenRefreshResponseDTO, useAuthStore } from '@/features/auth';
 
 axios.interceptors.request.use(
   (config) => {
@@ -29,7 +28,7 @@ axios.interceptors.response.use(
         credentials: 'include',
       });
 
-      const { accessToken, userId } = (await response.json()) as PostRefreshResponseDTO;
+      const { accessToken, userId } = (await response.json()) as PostTokenRefreshResponseDTO;
 
       const { setAuthInformation, clearAuthInformation } = useAuthStore.getState();
 

apps/client/src/entities/session/index.ts

@@ -0,0 +1,5 @@
+export * from './model/session.type';
+export * from './model/qna.type';
+export * from './model/chatting.type';
+export * from './model/session.store';
+export { default as ChattingMessage } from './ui/ChattingMessage';

apps/client/src/features/session/chatting/chatting.slice.ts → apps/client/src/entities/session/model/chatting.slice.ts

@@ -1,6 +1,6 @@
 import { StateCreator } from 'zustand';
 
-import { Chat } from '@/features/session/chatting';
+import { Chat } from '@/entities/session/model/chatting.type';
 
 export interface ChattingSlice {
   chatting: Chat[];

apps/client/src/features/session/qna/qna.slice.ts → apps/client/src/entities/session/model/qna.slice.ts

@@ -1,6 +1,6 @@
-import { StateCreator } from 'zustand/index';
+import { StateCreator } from 'zustand';
 
-import { Question, Reply } from '@/features/session/qna/qna.type';
+import { Question, Reply } from '@/entities/session/model/qna.type';
 
 export interface QnASlice {
   questions: Question[];

apps/client/src/features/session/session.slice.ts → apps/client/src/entities/session/model/session.slice.ts

@@ -1,8 +1,8 @@
-import { QnASlice } from 'src/features/session/qna';
-import { StateCreator } from 'zustand/index';
+import { StateCreator } from 'zustand';
 
-import { ChattingSlice } from '@/features/session/chatting';
-import { User } from '@/features/session/session.type';
+import { ChattingSlice } from '@/entities/session/model/chatting.slice';
+import { QnASlice } from '@/entities/session/model/qna.slice';
+import { User } from '@/entities/session/model/session.type';
 
 export interface SessionSlice {
   sessionId?: string;

apps/client/src/features/session/session.store.ts → apps/client/src/entities/session/model/session.store.ts

@@ -1,8 +1,8 @@
 import { create } from 'zustand';
 
-import { ChattingSlice, createChattingSlice } from '@/features/session/chatting';
-import { createQnASlice, QnASlice } from '@/features/session/qna';
-import { createSessionSlice, SessionSlice } from '@/features/session/session.slice';
+import { ChattingSlice, createChattingSlice } from '@/entities/session/model/chatting.slice';
+import { createQnASlice, QnASlice } from '@/entities/session/model/qna.slice';
+import { createSessionSlice, SessionSlice } from '@/entities/session/model/session.slice';
 
 export type SessionStore = SessionSlice & QnASlice & ChattingSlice;
 

apps/client/src/components/qna/ChattingMessage.tsx → apps/client/src/entities/session/ui/ChattingMessage.tsx

@@ -1,4 +1,4 @@
-import { Chat } from '@/features/session/chatting';
+import { Chat } from '@/entities/session/model/chatting.type';
 
 interface ChattingMessageProps {
   chat: Chat;

apps/client/src/features/auth/auth.dto.ts → apps/client/src/features/auth/api/login.api.ts

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { z } from 'zod';
 
 export const PostLoginRequestSchema = z.object({
@@ -10,11 +11,11 @@ export const PostLoginResponseSchema = z.object({
   userId: z.number(),
 });
 
-export const PostRefreshResponseSchema = z.object({
-  accessToken: z.string(),
-  userId: z.number(),
-});
-
 export type PostLoginRequestDTO = z.infer<typeof PostLoginRequestSchema>;
+
 export type PostLoginResponseDTO = z.infer<typeof PostLoginResponseSchema>;
-export type PostRefreshResponseDTO = z.infer<typeof PostRefreshResponseSchema>;
+
+export const login = (body: PostLoginRequestDTO) =>
+  axios
+    .post<PostLoginResponseDTO>(`/api/auth/login`, PostLoginRequestSchema.parse(body))
+    .then((res) => PostLoginResponseSchema.parse(res.data));

apps/client/src/features/auth/api/logout.api.ts

@@ -0,0 +1,3 @@
+import axios from 'axios';
+
+export const logout = () => axios.post(`/api/auth/logout`);

apps/client/src/features/auth/api/token-refresh.api.ts

@@ -0,0 +1,16 @@
+import axios from 'axios';
+import { z } from 'zod';
+
+export const PostTokenRefreshResponseSchema = z.object({
+  accessToken: z.string(),
+  userId: z.number(),
+});
+
+export type PostTokenRefreshResponseDTO = z.infer<typeof PostTokenRefreshResponseSchema>;
+
+export const tokenRefresh = () =>
+  axios
+    .post<PostTokenRefreshResponseDTO>(`/api/auth/token`, undefined, {
+      withCredentials: true,
+    })
+    .then((res) => PostTokenRefreshResponseSchema.parse(res.data));

apps/client/src/features/auth/index.ts

@@ -1,3 +1,5 @@
-export * from './auth.api';
-export * from './auth.hook';
-export * from './auth.store';
+export * from './api/token-refresh.api';
+export * from './api/logout.api';
+export * from './api/login.api';
+export * from './model/auth.store';
+export { default as SignInModal } from './ui/SignInModal';

apps/client/src/features/auth/auth.hook.ts → apps/client/src/features/auth/model/useSignInForm.ts

@@ -4,11 +4,10 @@ import { isAxiosError } from 'axios';
 import { useState } from 'react';
 import { ZodError } from 'zod';
 
-import { login } from '@/features/auth/auth.api';
-import { useAuthStore } from '@/features/auth/auth.store';
-import { useToastStore } from '@/features/toast';
+import { login, useAuthStore } from '@/features/auth';
 
-import { ValidationStatusWithMessage } from '@/shared';
+import { ValidationStatusWithMessage } from '@/shared/model/validation-status';
+import { useToastStore } from '@/shared/ui/toast';
 
 export function useSignInForm() {
   const router = useRouterState();

apps/client/src/components/modal/SignInModal.tsx → apps/client/src/features/auth/ui/SignInModal.tsx

@@ -1,10 +1,8 @@
-import { useSignInForm } from '@/features/auth';
-import { useModalContext } from '@/features/modal';
+import { useSignInForm } from '@/features/auth/model/useSignInForm';
 
-import Button from '../Button';
-
-import InputField from '@/components/modal/InputField';
-import Modal from '@/components/modal/Modal';
+import { Button } from '@/shared/ui/button';
+import { InputField } from '@/shared/ui/InputField';
+import { Modal, useModalContext } from '@/shared/ui/modal';
 
 function SignInModal() {
   const { closeModal } = useModalContext();

apps/client/src/features/close-question/api/close-question.api.ts

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import { z } from 'zod';
+
+export const PatchQuestionClosedRequestSchema = z.object({
+  token: z.string(),
+  sessionId: z.string(),
+  closed: z.boolean(),
+});
+
+export const PatchQuestionClosedResponseSchema = z.object({
+  question: z.object({
+    questionId: z.number(),
+    createUserToken: z.string(),
+    sessionId: z.string(),
+    body: z.string(),
+    closed: z.boolean(),
+    pinned: z.boolean(),
+    createdAt: z.string(),
+  }),
+});
+
+export type PatchQuestionClosedRequestDTO = z.infer<typeof PatchQuestionClosedRequestSchema>;
+
+export type PatchQuestionClosedResponseDTO = z.infer<typeof PatchQuestionClosedResponseSchema>;
+
+export const patchQuestionClosed = (questionId: number, body: PatchQuestionClosedRequestDTO) =>
+  axios
+    .patch<PatchQuestionClosedResponseDTO>(
+      `/api/questions/${questionId}/closed`,
+      PatchQuestionClosedRequestSchema.parse(body),
+    )
+    .then((res) => PatchQuestionClosedResponseSchema.parse(res.data));

apps/client/src/features/close-question/index.ts

@@ -0,0 +1 @@
+export * from './api/close-question.api';

apps/client/src/features/create-session/api/create-session.api.ts

@@ -0,0 +1,19 @@
+import axios from 'axios';
+import { z } from 'zod';
+
+export const PostSessionRequestSchema = z.object({
+  title: z.string().min(1),
+});
+
+export const PostSessionResponseSchema = z.object({
+  sessionId: z.string(),
+});
+
+export type PostSessionRequestDTO = z.infer<typeof PostSessionRequestSchema>;
+
+export type PostSessionResponseDTO = z.infer<typeof PostSessionResponseSchema>;
+
+export const postSession = (body: PostSessionRequestDTO) =>
+  axios
+    .post<PostSessionResponseDTO>('/api/sessions', PostSessionRequestSchema.parse(body))
+    .then((res) => PostSessionResponseSchema.parse(res.data));

apps/client/src/features/create-session/index.ts

@@ -0,0 +1 @@
+export { default as CreateSessionModal } from './ui/CreateSessionModal';

apps/client/src/components/modal/CreateSessionModal.tsx → apps/client/src/features/create-session/ui/CreateSessionModal.tsx

@@ -2,13 +2,12 @@ import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { useState } from 'react';
 
-import { useModalContext } from '@/features/modal';
-import { postSession } from '@/features/session/session.api';
-import { useToastStore } from '@/features/toast';
+import { postSession } from '@/features/create-session/api/create-session.api';
 
-import Button from '@/components/Button';
-import InputField from '@/components/modal/InputField';
-import Modal from '@/components/modal/Modal';
+import { Button } from '@/shared/ui/button';
+import { InputField } from '@/shared/ui/InputField';
+import { Modal, useModalContext } from '@/shared/ui/modal';
+import { useToastStore } from '@/shared/ui/toast';
 
 function CreateSessionModal() {
   const addToast = useToastStore((state) => state.addToast);

apps/client/src/features/create-update-question/api/create-question.api.ts

@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { z } from 'zod';
+
+import { QuestionSchema } from '@/entities/session';
+
+export const PostQuestionRequestSchema = z.object({
+  token: z.string(),
+  sessionId: z.string(),
+  body: z.string().min(1),
+});
+
+export const PostQuestionResponseSchema = z.object({
+  question: QuestionSchema,
+});
+
+export type PostQuestionRequestDTO = z.infer<typeof PostQuestionRequestSchema>;
+
+export type PostQuestionResponseDTO = z.infer<typeof PostQuestionResponseSchema>;
+
+export const postQuestion = (body: PostQuestionRequestDTO) =>
+  axios
+    .post<PostQuestionResponseDTO>('/api/questions', PostQuestionRequestSchema.parse(body))
+    .then((res) => PostQuestionResponseSchema.parse(res.data));

apps/client/src/features/create-update-question/api/update-question.api.ts

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import { z } from 'zod';
+
+export const PatchQuestionBodyRequestSchema = z.object({
+  token: z.string(),
+  sessionId: z.string(),
+  body: z.string().min(1),
+});
+
+export const PatchQuestionBodyResponseSchema = z.object({
+  question: z.object({
+    questionId: z.number(),
+    createUserToken: z.string(),
+    sessionId: z.string(),
+    body: z.string(),
+    closed: z.boolean(),
+    pinned: z.boolean(),
+    createdAt: z.string(),
+  }),
+});
+
+export type PatchQuestionBodyRequestDTO = z.infer<typeof PatchQuestionBodyRequestSchema>;
+
+export type PatchQuestionBodyResponseDTO = z.infer<typeof PatchQuestionBodyResponseSchema>;
+
+export const patchQuestionBody = (questionId: number, body: PatchQuestionBodyRequestDTO) =>
+  axios
+    .patch<PatchQuestionBodyResponseDTO>(
+      `/api/questions/${questionId}/body`,
+      PatchQuestionBodyRequestSchema.parse(body),
+    )
+    .then((res) => PatchQuestionBodyResponseSchema.parse(res.data));

apps/client/src/features/create-update-question/index.ts

@@ -0,0 +1 @@
+export { default as CreateQuestionModal } from './ui/CreateQuestionModal';

apps/client/src/components/modal/CreateQuestionModal.tsx → apps/client/src/features/create-update-question/ui/CreateQuestionModal.tsx

@@ -3,12 +3,14 @@ import { useEffect, useState } from 'react';
 import Markdown from 'react-markdown';
 import { useShallow } from 'zustand/react/shallow';
 
-import { useModalContext } from '@/features/modal';
-import { useSessionStore } from '@/features/session';
-import { patchQuestionBody, postQuestion, Question } from '@/features/session/qna';
-import { useToastStore } from '@/features/toast';
+import { postQuestion } from '@/features/create-update-question/api/create-question.api';
+import { patchQuestionBody } from '@/features/create-update-question/api/update-question.api';
 
-import Button from '@/components/Button';
+import { Question, useSessionStore } from '@/entities/session';
+
+import { Button } from '@/shared/ui/button';
+import { useModalContext } from '@/shared/ui/modal';
+import { useToastStore } from '@/shared/ui/toast';
 
 interface CreateQuestionModalProps {
   question?: Question;