모임 선택 화면에 기존 모임 선택 기능 추가

.storybook/main.ts

@@ -19,5 +19,14 @@ const config: StorybookConfig = {
     options: {},
   },
   refs: {},
+  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+    return mergeConfig(config, {
+      // 환경변수 설정 덮어씌우기
+      define: {
+        'import.meta.env.VITE_SERVER_URL': JSON.stringify(''),
+      },
+    });
+  },
 };
 export default config;

src/app/App.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { QueryClientProvider } from '@tanstack/react-query';
 import GlobalStyles from '@/shared/styles/globalStyles';
@@ -7,19 +6,11 @@ import AppRouter from '@/app/Router';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import GlobalErrorBoundary from '@/app/GlobalErrorBoundary';
 import Toast from '@/shared/ui/Toast';
-import useApiError from '@/shared/hooks/useApiError';
-import { queryClient, setupQueryClient } from '@/shared/api/queryClient';
+import { queryClient } from '@/shared/api/queryClient';
 import Layout from './Layout';
 import 'react-toastify/dist/ReactToastify.css';
 
 function App() {
-  const { handleError: handleQueryError } = useApiError({});
-  const { handleError: handleMutationError } = useApiError({});
-
-  useEffect(() => {
-    setupQueryClient(handleQueryError, handleMutationError);
-  }, [handleMutationError, handleQueryError]);
-
   return (
     <ThemeProvider theme={theme}>
       <GlobalErrorBoundary>

src/app/Router.tsx

@@ -4,22 +4,22 @@ import { ROUTE } from '@/shared/config/route';
 import RouteErrorBoundary from '@/app/RouteErrorBoundary';
 import RouteErrorElement from '@/app/RouteErrorElement';
 import checkAuth from '@/entities/auth/lib/checkAuth';
-import getGroupManagerAuth from '@/entities/auth/lib/getGroupManagerAuth';
 import groupTokenUrlLoader from '@/entities/auth/lib/groupTokenUrlLoader';
+import createExpensePageGuardLoader from '@/pages/CreateExpensePage/lib/createExpensePageGuardLoader';
 
-const BillDetail = lazy(() =>
-  import('@/pages/billDetail/').then(({ BillDetailPage }) => ({
-    default: BillDetailPage,
+const ExpenseDetail = lazy(() =>
+  import('@/pages/expenseDetail/').then(({ ExpenseDetailPage }) => ({
+    default: ExpenseDetailPage,
   }))
 );
 const CharacterShare = lazy(() =>
   import('@/pages/characterShare').then(({ CharacterSharePage }) => ({
     default: CharacterSharePage,
   }))
 );
-const CreateBill = lazy(() =>
-  import('@/pages/createBill').then(({ CreateBillPage }) => ({
-    default: CreateBillPage,
+const CreateExpense = lazy(() =>
+  import('@/pages/CreateExpensePage').then(({ CreateExpensePage }) => ({
+    default: CreateExpensePage,
   }))
 );
 const GroupSetup = lazy(() =>
@@ -87,21 +87,21 @@ function AppRouter() {
               path: ROUTE.groupSetup,
               element: <GroupSetup />,
             },
+            {
+              path: ROUTE.createExpense,
+              element: <CreateExpense />,
+              loader: createExpensePageGuardLoader,
+            },
           ],
         },
         // TODO : 로그인 기능으로 변경될 예정
         {
-          path: ROUTE.createBill,
-          element: <CreateBill />,
-          loader: getGroupManagerAuth,
-        },
-        {
-          path: ROUTE.billDetail,
-          element: <BillDetail />,
+          path: ROUTE.expenseDetail,
+          element: <ExpenseDetail />,
           loader: groupTokenUrlLoader,
         },
         {
-          path: ROUTE.billDetailCharacterShare,
+          path: ROUTE.characterShare,
           element: <CharacterShare />,
           loader: groupTokenUrlLoader,
         },

src/entities/auth/lib/kakaoLogin.ts

@@ -1,11 +1,11 @@
 const KAKAO_CLIENT_ID = import.meta.env.VITE_KAKAO_CLIENT_ID;
 const KAKAO_REDIRECT_URI = import.meta.env.VITE_KAKAO_REDIRECT_URI;
 
-if (!KAKAO_CLIENT_ID || !KAKAO_REDIRECT_URI) {
-  throw new Error('카카오 OAuth에 필요한 환경 변수가 설정되지 않았습니다.');
-}
-
 function kakaoLogin(url?: string) {
+  if (!KAKAO_CLIENT_ID || !KAKAO_REDIRECT_URI) {
+    throw new Error('카카오 OAuth에 필요한 환경 변수가 설정되지 않았습니다.');
+  }
+
   const defaultRedirectUrl = window.location.origin;
   const redirectUrl = url || defaultRedirectUrl;
 

src/entities/group/api/group.ts

@@ -6,19 +6,24 @@ import {
   GroupHeaderResponse,
 } from '@/entities/group/model/group.type';
 
-const group = {
-  get: (groupToken: string): Promise<Group> =>
-    axiosInstance
-      .get(`/group?groupToken=${groupToken}`)
-      .then((res) => res.data),
+export const getGroupList = async (): Promise<Group[]> => {
+  const response = await axiosInstance.get('/groups', { useMock: true }); // NOTE : API 경로 확인 필요
+  return response.data.groups;
+};
 
-  post: async (groupData: CreateGroupData) => {
-    const response = await axiosInstance.post<{ groupToken: string }>(
-      '/group',
-      groupData
-    );
-    return response.data;
-  },
+export const getGroupDetail = async (groupToken: string): Promise<Group> => {
+  const response = await axiosInstance.get('/group', {
+    params: { groupToken },
+  });
+  return response.data;
+};
+
+export const createGroup = async (groupData: CreateGroupData) => {
+  const response = await axiosInstance.post<{ groupToken: string }>(
+    '/group',
+    groupData
+  );
+  return response.data;
 };
 
 export const putGroupAccount = async ({
@@ -42,5 +47,3 @@ export const getGroupHeader = (
     .get(`/group/header?groupToken=${groupToken}`)
     .then((res) => res.data);
 };
-
-export default group;

src/entities/group/api/groupQueries.ts

@@ -0,0 +1,30 @@
+import useQueryWithHandlers from '@/shared/hooks/useQueryWithHandlers';
+import { ErrorHandlers, IgnoreBoundaryErrors } from '@/shared/types/error.type';
+import { getGroupDetail, getGroupList } from './group';
+
+export const useGetGroupList = (
+  errorHandlers: ErrorHandlers,
+  ignoreBoundaryErrors: IgnoreBoundaryErrors
+) => {
+  const query = useQueryWithHandlers({
+    queryKey: ['groupList'],
+    queryFn: getGroupList,
+    errorHandlers,
+    ignoreBoundaryErrors,
+  });
+  return query;
+};
+
+export const useGetGroupDetail = (
+  groupToken: string,
+  errorHandlers: ErrorHandlers,
+  ignoreBoundaryErrors: IgnoreBoundaryErrors
+) => {
+  const query = useQueryWithHandlers({
+    queryKey: ['groupDetail', groupToken],
+    queryFn: () => getGroupDetail(groupToken),
+    errorHandlers,
+    ignoreBoundaryErrors,
+  });
+  return query;
+};

src/entities/group/model/group.type.ts

@@ -1,6 +1,7 @@
 import { Member } from '@/entities/member/model/member.type';
 
 export interface Group {
+  id: string;
   groupName: string;
   members: Member[];
 }

src/features/character-management/ui/CharacterBottomSheet/index.tsx

@@ -53,9 +53,7 @@ function CharacterBottomSheet({ open, setOpen }: CharacterBottomSheetProps) {
           </Button>
           <Button
             onClick={() =>
-              navigate(
-                generatePath(ROUTE.billDetailCharacterShare, { groupToken })
-              )
+              navigate(generatePath(ROUTE.characterShare, { groupToken }))
             }
           >
             캐릭터 보기

src/features/expense-management/lib/createBillFunnel.type.ts → src/features/expense-management/lib/createExpenseFunnel.type.ts

@@ -1,17 +1,17 @@
 import { SingleExpenseForm } from '@/entities/expense/model/expense.type';
 
-export type EditBillContext = {
+export type EditExpenseContext = {
   expenseId: number;
   initialExpense: SingleExpenseForm;
 };
 
-export type BillStepContext = {
+export type ExpenseStepContext = {
   isExpenseCreated: boolean;
   expenseId?: number;
   initialExpense?: SingleExpenseForm;
 };
 
-export type EditBillStepContext = {
+export type EditExpenseStepContext = {
   isExpenseCreated: boolean;
   expenseId: number;
   initialExpense: SingleExpenseForm;

src/features/expense-management/lib/useAddExpenseFormArray.ts

@@ -1,14 +1,13 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useLoaderData } from 'react-router';
 import { format } from 'date-fns';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Group } from '@/entities/group/model/group.type';
 import {
   SingleExpenseForm,
   ExpenseFormSchema,
 } from '@/entities/expense/model/expense.type';
-import group from '@/entities/group/api/group';
+import { Group } from '@/entities/group/model/group.type';
 
 const defaultValues: SingleExpenseForm = {
   amount: 0,
@@ -21,14 +20,11 @@ const defaultValues: SingleExpenseForm = {
  * 지출 폼을 위한 커스텀 훅
  */
 const useAddExpenseFormArray = (initialExpense?: SingleExpenseForm) => {
-  const { groupToken } = useLoaderData();
-  const [groupInfo, setGroupInfo] = useState<Group | null>(null);
+  const { groupData } = useLoaderData() as { groupData: Group };
   const formMethods = useForm({
     resolver: zodResolver(ExpenseFormSchema),
     mode: 'onChange', // 폼들의 필수 입력값이 모두 입력되었을 때 '다음' 버튼을 활성화시키기 위함
     defaultValues: async () => {
-      const groupData = await group.get(groupToken);
-      setGroupInfo(groupData);
       // 기본 데이터가 있는 경우 (ex. 수정)
       if (initialExpense) {
         return {
@@ -54,28 +50,28 @@ const useAddExpenseFormArray = (initialExpense?: SingleExpenseForm) => {
   });
 
   const defaultFormValue = useMemo(() => {
-    if (!groupInfo) {
+    if (!groupData) {
       return defaultValues;
     }
     return {
       ...defaultValues,
-      memberExpenses: groupInfo.members.map((member) => ({
+      memberExpenses: groupData.members.map((member) => ({
         id: member.id,
         name: member.name,
         amount: 0,
         profile: member.profile,
         role: member.role,
       })),
     };
-  }, [groupInfo]);
+  }, [groupData]);
 
   const fieldArrayReturns = useFieldArray({
     control: formMethods.control,
     name: 'expenses',
   });
 
   return {
-    groupInfo,
+    groupInfo: groupData,
     formMethods,
     defaultFormValue,
     fieldArrayReturns,

src/features/expense-management/ui/FormCard/index.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/entities/expense/model/expense.type';
 import Alert from '@/shared/ui/Alert';
 import Button from '@/shared/ui/Button';
-import BillDatePicker from '@/shared/ui/DatePicker';
+import ExpenseDatePicker from '@/shared/ui/DatePicker';
 import Text from '@/shared/ui/Text';
 import FormField from '@/features/expense-management/ui/FormField';
 import distributeAmount from '@/features/expense-management/lib/distributeExpense';
@@ -111,7 +111,7 @@ const FormCard = forwardRef<HTMLDivElement, FormCardProps>(
               control={control}
               name={`expenses.${index}.date`}
               renderInput={({ field }) => (
-                <BillDatePicker
+                <ExpenseDatePicker
                   selected={new Date(field.value)}
                   onChange={(date) =>
                     field.onChange(format(date || new Date(), 'yyyy-MM-dd'))

src/features/group-creation/api/usePostCreateGroup.ts

@@ -1,5 +1,5 @@
 import { CreateGroupData } from '@/entities/group/model/group.type';
-import group from '@/entities/group/api/group';
+import { createGroup } from '@/entities/group/api/group';
 import { useMutation } from '@tanstack/react-query';
 
 interface CreateGroupVariables {
@@ -8,7 +8,7 @@ interface CreateGroupVariables {
 
 export const usePostCreateGroup = () => {
   return useMutation<CreateGroupVariables, Error, CreateGroupData>({
-    mutationFn: (newGroup) => group.post(newGroup),
+    mutationFn: (newGroup) => createGroup(newGroup),
     onSuccess: (response) => {
       localStorage.setItem('groupToken', response?.groupToken);
     },