드래그로 카테고리 순서 변경 가능하도록 변경

.github/workflows/frontend_cd.yml

@@ -22,6 +22,11 @@ jobs:
         with:
           node-version: "20"
 
+      - name: pnpm 설치
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
       - name: 환경 파일 생성
         run: |
           if [ "${{ github.ref_name }}" == "main" ]; then
@@ -38,12 +43,11 @@ jobs:
       - name: 환경 파일 권한 설정
         run: chmod 644 ${{ env.frontend-directory }}/.env.*
 
-      - name: npm install
-        run: npm install
-        working-directory: ${{ env.frontend-directory }}
+      - name: 의존성 설치
+        run: pnpm install
 
-      - name: npm run build
-        run: npm run build
+      - name: 빌드 실행
+        run: pnpm run build
         working-directory: ${{ env.frontend-directory }}
 
       - name: AWS credentials 설정

.github/workflows/frontend_ci.yml

@@ -27,7 +27,6 @@ jobs:
 
       - name: 의존성 설치
         run: pnpm install
-        working-directory: ${{ env.frontend-directory }}
 
       - name: 타입 체크 실행
         run: pnpm run tsc

frontend/src/api/categories.ts

@@ -1,6 +1,6 @@
 import { apiClient } from '@/api/config';
 import { END_POINTS } from '@/routes';
-import type { CategoryUploadRequest, CategoryEditRequest, CategoryDeleteRequest } from '@/types';
+import type { CategoryEditRequest, Category } from '@/types';
 
 export const getCategoryList = async (memberId: number) => {
   const queryParams = new URLSearchParams({
@@ -11,14 +11,10 @@ export const getCategoryList = async (memberId: number) => {
   return await response.json();
 };
 
-export const postCategory = async (newCategory: CategoryUploadRequest) => {
+export const postCategory = async (newCategory: Omit<Category, 'id'>) => {
   const response = await apiClient.post(`${END_POINTS.CATEGORIES}`, newCategory);
 
   return await response.json();
 };
 
-export const editCategory = async ({ id, name }: CategoryEditRequest) =>
-  await apiClient.put(`${END_POINTS.CATEGORIES}/${id}`, { name });
-
-export const deleteCategory = async ({ id }: CategoryDeleteRequest) =>
-  await apiClient.delete(`${END_POINTS.CATEGORIES}/${id}`);
+export const editCategory = async (body: CategoryEditRequest) => await apiClient.put(`${END_POINTS.CATEGORIES}`, body);

frontend/src/api/index.ts

@@ -9,7 +9,7 @@ export {
   deleteTemplate,
 } from './templates';
 export { postSignup, postLogin, postLogout, getLoginState, checkName } from './authentication';
-export { getCategoryList, postCategory, editCategory, deleteCategory } from './categories';
+export { getCategoryList, postCategory, editCategory } from './categories';
 export { getTagList } from './tags';
 export { postLike, deleteLike } from './like';
 export { getMemberName } from './members';

frontend/src/assets/images/index.ts

@@ -20,6 +20,7 @@ export { default as LikeIcon } from './like';
 export { default as PrivateIcon } from './private.svg';
 export { default as PublicIcon } from './public.svg';
 export { default as ShareIcon } from './share.svg';
+export { default as DragIcon } from './drag.svg';
 
 // Logo
 export { default as CodeZapLogo } from './codezapLogo.svg';

frontend/src/hooks/category/useCategory.ts

@@ -12,7 +12,7 @@ export const useCategory = ({ memberId, initCategory }: Props) => {
   const options = data?.categories || [];
 
   if (!initCategory) {
-    initCategory = { id: options[0]?.id, name: '카테고리 없음' };
+    initCategory = { id: options[0]?.id, name: '카테고리 없음', ordinal: 0 };
   }
 
   const { isOpen, toggleDropdown, currentValue, handleCurrentValue, dropdownRef } = useDropdown<Category>(initCategory);
@@ -31,7 +31,7 @@ export const useCategory = ({ memberId, initCategory }: Props) => {
       return;
     }
 
-    const newCategory = { name: categoryName };
+    const newCategory = { name: categoryName, ordinal: options.length };
 
     await postCategory(newCategory);
   };

frontend/src/hooks/category/useCategoryNameValidation.ts

@@ -4,11 +4,7 @@ import type { Category } from '@/types';
 
 const INVALID_NAMES = ['전체보기', '카테고리 없음', ''];
 
-export const useCategoryNameValidation = (
-  categories: Category[],
-  newCategories: { id: number; name: string }[],
-  editedCategories: Record<number, string>,
-) => {
+export const useCategoryNameValidation = (categoryList: Category[], editedCategoryList: Category[]) => {
   const [invalidIds, setInvalidIds] = useState<number[]>([]);
 
   useEffect(() => {
@@ -23,29 +19,21 @@ export const useCategoryNameValidation = (
       allNames.get(name)!.push(id);
     };
 
-    categories.forEach(({ id, name }) => {
+    categoryList.forEach(({ id, name }) => {
       if (INVALID_NAMES.includes(name)) {
         invalidNames.add(id);
       } else {
         addNameToMap(id, name);
       }
     });
 
-    newCategories.forEach(({ id, name }) => {
-      if (INVALID_NAMES.includes(name)) {
-        invalidNames.add(id);
-      } else {
-        addNameToMap(id, name);
-      }
-    });
-
-    Object.entries(editedCategories).forEach(([id, name]) => {
-      const originalName = categories.find((category) => category.id === Number(id))?.name;
+    editedCategoryList.forEach(({ id, name }) => {
+      const originalName = categoryList.find((category) => category.id === id)?.name;
 
       if (INVALID_NAMES.includes(name)) {
-        invalidNames.add(Number(id));
+        invalidNames.add(id);
       } else if (name !== originalName) {
-        addNameToMap(Number(id), name);
+        addNameToMap(id, name);
       }
     });
 
@@ -56,7 +44,7 @@ export const useCategoryNameValidation = (
     });
 
     setInvalidIds(Array.from(invalidNames));
-  }, [categories, newCategories, editedCategories]);
+  }, [categoryList, editedCategoryList]);
 
   return {
     invalidIds,

frontend/src/mocks/fixtures/categoryList.json

@@ -2,19 +2,23 @@
   "categories": [
     {
       "id": 1,
-      "name": "카테고리 없음"
+      "name": "카테고리 없음",
+      "ordinal": 0
     },
     {
       "id": 2,
-      "name": "Category1"
+      "name": "Category1",
+      "ordinal": 1
     },
     {
       "id": 3,
-      "name": "Category2"
+      "name": "Category2",
+      "ordinal": 2
     },
     {
       "id": 4,
-      "name": "Category3"
+      "name": "Category3",
+      "ordinal": 3
     }
   ]
 }

frontend/src/mocks/handlers/category.ts

@@ -1,7 +1,7 @@
 import { http } from 'msw';
 
 import { API_URL } from '@/api';
-import  categories from '@/mocks/fixtures/categoryList.json';
+import categories from '@/mocks/fixtures/categoryList.json';
 import { END_POINTS } from '@/routes';
 import { Category } from '@/types';
 import { mockResponse } from '@/utils/mockResponse';
@@ -33,19 +33,12 @@ export const categoryHandlers = [
     });
   }),
 
-  http.put(`${API_URL}${END_POINTS.CATEGORIES}/:id`, async (req) => {
-    const { id } = req.params;
+  http.put(`${API_URL}${END_POINTS.CATEGORIES}`, async (req) => {
     const updatedCategory = await req.request.json();
-    const categoryIndex = mockCategoryList.findIndex((cat) => cat.id.toString() === id);
-
-    if (categoryIndex !== -1 && typeof updatedCategory === 'object' && updatedCategory !== null) {
-      mockCategoryList[categoryIndex] = { id: parseInt(id as string), ...updatedCategory } as Category;
 
+    if (typeof updatedCategory === 'object' && updatedCategory !== null) {
       return mockResponse({
         status: 200,
-        body: {
-          category: mockCategoryList[categoryIndex],
-        },
       });
     }
 
@@ -56,24 +49,4 @@ export const categoryHandlers = [
       },
     });
   }),
-
-  http.delete(`${API_URL}${END_POINTS.CATEGORIES}/:id`, (req) => {
-    const { id } = req.params;
-    const categoryIndex = mockCategoryList.findIndex((cat) => cat.id.toString() === id);
-
-    if (categoryIndex !== -1) {
-      mockCategoryList.splice(categoryIndex, 1);
-
-      return mockResponse({
-        status: 204,
-      });
-    }
-
-    return mockResponse({
-      status: 404,
-      body: {
-        message: 'Category not found',
-      },
-    });
-  }),
 ];

frontend/src/pages/LandingPage/LandingPage.tsx

@@ -21,6 +21,12 @@ const LandingPage = () => {
 
   const { isLogin } = useAuth();
 
+  const EXPLAIN = [
+    { title: 'ZAP하게 저장', description: '자주 쓰는 나의 코드를 간편하게 저장하세요' },
+    { title: 'ZAP하게 관리', description: '직관적인 분류 시스템으로 체계적으로 관리하세요' },
+    { title: 'ZAP하게 검색', description: '필요한 나의 코드를 빠르게 찾아 사용하세요' },
+  ];
+
   return (
     <S.Container>
       <S.ContentSection>
@@ -40,29 +46,15 @@ const LandingPage = () => {
       </S.ContentSection>
 
       <S.CardSection>
-        <S.Card>
-          <Flex align='center' gap='0.25rem'>
-            <CheckCircleIcon width={ICON_SIZE.LARGE} />
-            <Text.Large color='black'>ZAP하게 저장</Text.Large>
-          </Flex>
-          <Text.Medium color={theme.color.light.secondary_600}>자주 쓰는 나의 코드를 간편하게 저장하세요</Text.Medium>
-        </S.Card>
-        <S.Card>
-          <Flex align='center' gap='0.25rem'>
-            <CheckCircleIcon width={ICON_SIZE.LARGE} />
-            <Text.Large color='black'>ZAP하게 관리</Text.Large>
-          </Flex>
-          <Text.Medium color={theme.color.light.secondary_600}>
-            직관적인 분류 시스템으로 체계적으로 관리하세요
-          </Text.Medium>
-        </S.Card>
-        <S.Card>
-          <Flex align='center' gap='0.25rem'>
-            <CheckCircleIcon width={ICON_SIZE.LARGE} />
-            <Text.Large color='black'>ZAP하게 검색</Text.Large>
-          </Flex>
-          <Text.Medium color={theme.color.light.secondary_600}>필요한 나의 코드를 빠르게 찾아 사용하세요</Text.Medium>
-        </S.Card>
+        {EXPLAIN.map((el, idx) => (
+          <S.Card key={idx}>
+            <Flex align='center' gap='0.25rem'>
+              <CheckCircleIcon width={ICON_SIZE.LARGE} />
+              <Text.Large color='black'>{el.title}</Text.Large>
+            </Flex>
+            <Text.Medium color={theme.color.light.secondary_600}>{el.description}</Text.Medium>
+          </S.Card>
+        ))}
       </S.CardSection>
 
       <S.TemplateSection>

frontend/src/pages/MemberTemplatePage/components/CategoryEditModal/CategoryEditModal.style.ts

@@ -11,6 +11,8 @@ export const EditCategoryItemList = styled.div`
 `;
 
 export const EditCategoryItem = styled.div<{ hasError?: boolean; isButton?: boolean; disabled?: boolean }>`
+  cursor: move;
+
   display: flex;
   gap: 1rem;
   align-items: center;