feat: prettier import order 플러그인 추가 (#37)

package.json

@@ -26,6 +26,7 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@eslint/js": "^9.8.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/eslint__js": "^8.42.3",
     "@types/js-cookie": "^3.0.6",

prettier.config.mjs

@@ -9,4 +9,23 @@ export default {
   tabWidth: 2,
   trailingComma: 'all',
   useTabs: false,
+  plugins: ['@trivago/prettier-plugin-sort-imports'],
+  importOrder: [
+    '^react',
+    '^next',
+
+    '^@/app',
+    '^@/component',
+    '^@/context',
+    '^@/store',
+    '^@/hook',
+    '^@/api',
+    '^@/style',
+
+    '^[./]',
+
+    '<THIRD_PARTY_MODULES>',
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
 };

src/api/WinkApi.ts

@@ -1,4 +1,4 @@
-import { WinkApiRequest, Activity, Auth, Member, MemberAdmin } from '@/api';
+import { Activity, Auth, Member, MemberAdmin, WinkApiRequest } from '@/api';
 
 export class WinkApi {
   private static instance: WinkApi | null = null;

src/api/WinkApiApplication.tsx

@@ -2,12 +2,12 @@
 
 import React, { useEffect } from 'react';
 
-import { Loading } from '@/components';
-
-import { WinkApi } from '@/api';
+import { Loading } from '@/component';
 
 import { useApplicationState } from '@/store';
 
+import { WinkApi } from '@/api';
+
 interface WinkApiApplicationProps {
   children: React.ReactNode;
 }

src/api/request/WinkApiRequest.ts

@@ -1,9 +1,10 @@
-import Cookies from 'js-cookie';
 import { toast } from 'react-toastify';
 
-import { RefreshResponseDto, MyInfoResponseDto } from '@/api';
+import { useApplicationState, useMemberStore } from '@/store';
+
+import { MyInfoResponseDto, RefreshResponseDto } from '@/api';
 
-import { useMemberStore, useApplicationState } from '@/store';
+import Cookies from 'js-cookie';
 
 interface WinkRawApiResponse<T> {
   code: number;

src/app/layout.tsx

@@ -2,14 +2,15 @@
 
 import React from 'react';
 import { Bounce, ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 import { usePathname } from 'next/navigation';
 
+import { Footer, Header } from '@/component';
+
 import { WinkApiApplication } from '@/api';
-import { Header, Footer } from '@/components';
 
-import '@/styles/globals.css';
-import 'react-toastify/dist/ReactToastify.css';
+import '@/style/globals.css';
 
 interface RootLayoutProps {
   children: React.ReactNode;

src/app/login/page.tsx

@@ -6,7 +6,7 @@ import { toast } from 'react-toastify';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
-import { Button, WebInKookmin, FormContainer, TextField, Fields } from '@/components';
+import { Button, Fields, FormContainer, TextField, WebInKookmin } from '@/component';
 
 import { useForm } from '@/hook';
 

src/app/project/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 
-import { Carousel, ProjectCard } from '@/components';
+import { Carousel, ProjectCard } from '@/component';
 
 interface Project {
   id: number;

src/app/signup/page.tsx

@@ -6,12 +6,12 @@ import { toast } from 'react-toastify';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
-import { Button, WebInKookmin, Fields, FormContainer, TextField } from '@/components';
-
-import { WinkApi } from '@/api';
+import { Button, Fields, FormContainer, TextField, WebInKookmin } from '@/component';
 
 import { useForm } from '@/hook';
 
+import { WinkApi } from '@/api';
+
 import * as yup from 'yup';
 
 type Inputs =

src/app/study/page.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 
-import { StudyCard } from '@/components';
+import { StudyCard } from '@/component';
 
 interface StudyType {
   id: number; // 유니크한 ID

src/components/Carousel.tsx → src/component/Carousel.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 
-import '@/styles/Carousel.css';
+import '@/style/Carousel.css';
 
 interface CarouselCard {
   id: number;

src/components/Header.tsx → src/component/Header.tsx

@@ -7,10 +7,10 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { WinkApi } from '@/api';
-
 import { useMemberStore } from '@/store';
 
+import { WinkApi } from '@/api';
+
 import logo from '@/public/logo.png';
 
 export const Header: React.FC = () => {

src/store/useMemberStore.ts

@@ -1,7 +1,7 @@
-import { create } from 'zustand';
-
 import { MemberType } from '@/api';
 
+import { create } from 'zustand';
+
 interface MemberState {
   member: MemberType | null;
   setMember: (member: MemberType | null) => void;