refactor: 마이페이지 카테고리 SSR + RSC 적용

src/api/hooks/categoryHooks/useGetCategoryList.ts

@@ -1,10 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
-import { getCategoryList } from '@/api/queryFn/categoryQueryFn';
+import { Category, getCategoryList } from '@/api/queryFn/categoryQueryFn';
 
-const useGetCategoryList = () => {
+const useGetCategoryList = (initialData?: Category[]) => {
   const { data: categoryList, isLoading } = useQuery({
     queryKey: ['categoryList'],
     queryFn: () => getCategoryList(),
+    initialData,
   });
 
   return { categoryList, isLoading };

src/app/mypage/category/Category.styled.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import styled from '@emotion/styled';
 
 export const Container = styled.div`

src/app/mypage/category/CategoryModal.tsx

@@ -2,6 +2,7 @@ import { Box, Button, FormControlLabel, Modal, Switch, TextField, Typography } f
 import { TodoModalStyle } from '@/components/todo/Todo.styled';
 import ColorPickerBox from '@/components/ColorPickerBox';
 import { CreateCategoryInfo } from '@/api/queryFn/categoryQueryFn';
+
 import DeleteCategoryButton from './DeleteCategoryButton';
 
 interface CategoryModalProps {

src/app/mypage/category/CategoryTableBody.tsx

@@ -1,127 +1,41 @@
-import useGetCategoryList from '@/api/hooks/categoryHooks/useGetCategoryList';
-import { Flex } from '@/components/common';
-import { Button, Skeleton, styled, TableBody, TableCell, TableRow, Tooltip } from '@mui/material';
-import useBooleanState from '@/hooks/utils/useBooleanState';
-import { useState } from 'react';
-import useUpdateCategory from '@/api/hooks/categoryHooks/useUpdateCategory';
-import { CreateCategoryInfo } from '@/api/queryFn/categoryQueryFn';
-import * as S from './Category.styled';
-import CategoryModal from './CategoryModal';
+import { Skeleton, TableBody, TableCell, TableRow } from '@mui/material';
 
-interface StyledTableRowProps {
-  disabled: boolean;
-}
-
-function CategoryTableBody() {
-  const { value: isOpen, setTrue: open, setFalse: close } = useBooleanState();
-  const [id, setId] = useState<number | undefined>(undefined);
-
-  const { categoryList, isLoading } = useGetCategoryList();
-
-  const { mutate: updateCategory } = useUpdateCategory();
-
-  const [data, setData] = useState<CreateCategoryInfo>(() => ({
-    title: '',
-    isDisplayed: 0,
-    color: '',
-  }));
-
-  const setCategoryData = (unit: keyof typeof data, value: number | string | boolean) => {
-    setData((prevData) => ({
-      ...prevData,
-      [unit]: value,
-    }));
-  };
-
-  const handleUpdateCategory = (categoryId: number, createInfo: CreateCategoryInfo) => {
-    updateCategory({ categoryId, createInfo });
-  };
+import { getServerDataAboutCategory } from './server/categoryService';
+import CategoryTableInfo from './CategoryTableInfo';
 
-  const mutateFunction = (body: CreateCategoryInfo) => {
-    handleUpdateCategory(id!, body);
-    close();
-  };
+async function CategoryTableBody() {
+  const categories = await getServerDataAboutCategory().catch((error) => {
+    console.error(error);
+    return null;
+  });
 
-  const clickUpdateButton = (categoryId: number) => {
-    setId(categoryId);
-    open();
-  };
-
-  const handleCloseModal = () => {
-    setId(undefined);
-    close();
-  };
-
-  const convertBoolStateToString = (isDisplayed: number | null) => {
-    return isDisplayed ? '포함' : '미포함';
-  };
-
-  const StyledTableRow = styled(TableRow)<StyledTableRowProps>(({ theme, disabled }) => ({
-    backgroundColor: disabled ? theme.palette.action.hover : 'inherit',
-    cursor: disabled ? 'not-allowed' : 'default',
-    opacity: disabled ? 0.5 : 1,
-    '&:last-child td, &:last-child th': {
-      border: 0,
-    },
-    '& td': {
-      color: disabled ? theme.palette.text.disabled : theme.palette.text.primary,
-    },
-  }));
-
-  return (
-    <TableBody>
-      {isLoading ? (
+  if (categories && 'error' in categories) {
+    return (
+      <TableBody>
+        <TableRow>
+          <TableCell colSpan={4}>에러가 났습니다잇..</TableCell>
+        </TableRow>
+      </TableBody>
+    );
+  }
+  if (categories === null) {
+    return (
+      <TableBody>
         <TableRow>
           <TableCell colSpan={4}>
             <Skeleton variant="rectangular" width="100%" height="100%" />
           </TableCell>
         </TableRow>
-      ) : (
-        categoryList?.map((category) => {
-          const isDisable = category.isDefault === 1;
-          return (
-            <Tooltip key={category.id} title="기본 카테고리는 수정 불가능 합니다." disableHoverListener={!isDisable}>
-              <StyledTableRow disabled={isDisable}>
-                <TableCell component="th" scope="row" sx={{ maxWidth: '200px', overflowX: 'auto' }}>
-                  {category.title}
-                </TableCell>
-                <TableCell align="right">
-                  <Flex $gap="20px">
-                    <S.ColorState hexColor={category.color} />
-                    <S.ColorCode>{category.color}</S.ColorCode>
-                  </Flex>
-                </TableCell>
-                <TableCell align="right">{convertBoolStateToString(category.isDisplayed)}</TableCell>
-                <TableCell align="right">
-                  <Button
-                    disabled={isDisable}
-                    onClick={() => {
-                      setCategoryData('title', category.title);
-                      setCategoryData('color', category.color || '');
-                      setCategoryData('isDisplayed', category.isDisplayed || 0);
-                      clickUpdateButton(category.id);
-                    }}
-                  >
-                    수정
-                  </Button>
-                </TableCell>
-              </StyledTableRow>
-            </Tooltip>
-          );
-        })
-      )}
-
-      <CategoryModal
-        isOpen={isOpen}
-        close={handleCloseModal}
-        title="수정"
-        mutateAction={mutateFunction}
-        data={data}
-        setData={setCategoryData}
-        id={id}
-      />
-    </TableBody>
-  );
+      </TableBody>
+    );
+  }
+  if (Array.isArray(categories)) {
+    return (
+      <TableBody>
+        <CategoryTableInfo categoryList={categories} />
+      </TableBody>
+    );
+  }
 }
 
 export default CategoryTableBody;

src/app/mypage/category/CategoryTableFooter.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import useBooleanState from '@/hooks/utils/useBooleanState';
 import { Button, TableCell, TableFooter, TableRow } from '@mui/material';
 import useCreateCategory from '@/api/hooks/categoryHooks/useCreateCategory';

src/app/mypage/category/CategoryTableInfo.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { styled, TableRow, Button, TableCell } from '@mui/material';
+import randomColor from 'randomcolor';
+import { useState } from 'react';
+import { Category, CreateCategoryInfo } from '@/api/queryFn/categoryQueryFn';
+import useUpdateCategory from '@/api/hooks/categoryHooks/useUpdateCategory';
+import useGetCategoryList from '@/api/hooks/categoryHooks/useGetCategoryList';
+import CategoryModal from './CategoryModal';
+
+interface CategoryTableInfoProps {
+  categoryList: Category[];
+}
+
+interface StyledTableRowProps {
+  disabled: boolean;
+}
+
+const StyledTableRow = styled(TableRow)<StyledTableRowProps>(({ theme, disabled }) => ({
+  backgroundColor: disabled ? theme.palette.action.hover : 'inherit',
+  cursor: disabled ? 'not-allowed' : 'default',
+  opacity: disabled ? 0.5 : 1,
+
+  '&:last-child td, &:last-child th': {
+    border: 0,
+  },
+  '& td': {
+    color: disabled ? theme.palette.text.disabled : theme.palette.text.primary,
+  },
+}));
+
+function CategoryTableInfo({ categoryList }: CategoryTableInfoProps) {
+  const { categoryList: data } = useGetCategoryList(categoryList);
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [id, setId] = useState<number | undefined>(undefined);
+
+  const [categoryData, setCategoryData] = useState<CreateCategoryInfo>({
+    title: '',
+    color: '',
+    isDisplayed: 0,
+  });
+
+  const setCategoryDataForUnit = (unit: keyof typeof categoryData, value: number | string | boolean) => {
+    setCategoryData((prevData) => ({
+      ...prevData,
+      [unit]: value,
+    }));
+  };
+
+  const handleEditClick = (category: Category) => {
+    setId(category.id);
+    setIsEditing(true);
+    categoryData.title = category.title;
+    categoryData.color = category.color;
+    categoryData.isDisplayed = category.isDisplayed;
+  };
+
+  const handleCloseModal = () => {
+    setId(undefined);
+    setIsEditing(false);
+  };
+
+  const { mutate: updateCategory } = useUpdateCategory();
+
+  const handleUpdateCategory = (categoryId: number, createInfo: CreateCategoryInfo) => {
+    updateCategory({ categoryId, createInfo });
+  };
+
+  const mutateFunction = (body: CreateCategoryInfo) => {
+    handleUpdateCategory(id!, body);
+    setIsEditing(false);
+  };
+
+  if (!data) {
+    return null;
+  }
+
+  return data.map((category) => {
+    const isDisable = category.isDefault === 1;
+    return (
+      <StyledTableRow key={category.id} disabled={isDisable}>
+        <TableCell sx={{ width: '300px', maxWidth: '300px', overflow: 'auto', whiteSpace: 'nowrap' }}>{category.title}</TableCell>
+        <TableCell align="right">
+          <div style={{ display: 'flex', gap: '20px' }}>
+            <div style={{ backgroundColor: category.color || randomColor(), width: '20px', height: '20px' }} />
+            <span>{category.color}</span>
+          </div>
+        </TableCell>
+        <TableCell align="right">{category.isDisplayed ? '포함' : '미포함'}</TableCell>
+        <TableCell align="right">
+          <Button disabled={isDisable} onClick={() => handleEditClick(category)}>
+            수정
+          </Button>
+        </TableCell>
+        <CategoryModal
+          isOpen={isEditing}
+          close={handleCloseModal}
+          title="수정"
+          mutateAction={mutateFunction}
+          data={categoryData}
+          setData={setCategoryDataForUnit}
+          id={id}
+        />
+      </StyledTableRow>
+    );
+  });
+}
+
+export default CategoryTableInfo;

src/app/mypage/category/page.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import Paper from '@mui/material/Paper';
 import { Table, TableContainer } from '@mui/material';
 

src/app/mypage/category/server/categoryService.ts

@@ -0,0 +1,38 @@
+import { eq } from 'drizzle-orm';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+import { db } from '@/db';
+import { categoriesTable } from '@/db/schema';
+import { NextResponse } from 'next/server';
+
+export async function getServerDataAboutCategory() {
+  const session = await getServerSession(authOptions);
+  if (!session) {
+    return NextResponse.json({ error: 'unAuthorized Error' }, { status: 401 });
+  }
+
+  const userId = session.user.id;
+
+  try {
+    const categories = await db
+      .select({
+        id: categoriesTable.id,
+        userId: categoriesTable.userId,
+        title: categoriesTable.title,
+        color: categoriesTable.color,
+        isDisplayed: categoriesTable.isDisplayed,
+        isDefault: categoriesTable.isDefault,
+      })
+      .from(categoriesTable)
+      .where(eq(categoriesTable.userId, userId))
+      .all();
+
+    if (categories.length === 0) {
+      throw new Error('카테고리가 존재하지 않습니다.');
+    }
+
+    return categories;
+  } catch (error) {
+    throw new Error('Failed to fetch categories');
+  }
+}

src/components/common/Container.styled.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import styled from '@emotion/styled';
 
 interface ContainerProps {