Merge pull request #89 from EveryUniv/refactor/86(백수연)

refactor: Textarea 컴포넌트 수정 및 Chakra UI에서 shadcn-ui로 변경

.eslintrc.js

@@ -25,8 +25,26 @@ module.exports = {
       ecmaVersion: 'latest',
       sourceType: 'module',
    },
-   plugins: ['@typescript-eslint', 'react', 'cypress'],
+   plugins: ['@typescript-eslint', 'react', 'cypress', 'import'],
    rules: {
+      'import/order': [
+         'error',
+         {
+            groups: ['builtin', 'external', ['parent', 'sibling'], 'index'],
+            pathGroups: [
+               {
+                  pattern: 'angular',
+                  group: 'external',
+                  position: 'before',
+               },
+            ],
+            alphabetize: {
+               order: 'asc',
+               caseInsensitive: true,
+            },
+            'newlines-between': 'always',
+         },
+      ],
       indent: ['error', 3, { SwitchCase: 1 }],
       quotes: ['error', 'single'],
       semi: ['error', 'always'],

craco.config.js

@@ -0,0 +1,13 @@
+const CracoAlias = require('craco-alias');
+
+module.exports = {
+   plugins: [
+      {
+         plugin: CracoAlias,
+         options: {
+            source: 'tsconfig',
+            tsConfigPath: 'tsconfig.paths.json',
+         },
+      },
+   ],
+};

package.json

@@ -4,9 +4,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
+    "@craco/craco": "^7.1.0",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -18,10 +21,11 @@
     "chart.js": "^4.4.1",
     "chartjs": "^0.3.24",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "framer-motion": "^11.0.5",
+    "lucide-react": "^0.356.0",
     "react": "^18.2.0",
-    "react-calendar": "^4.6.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
@@ -30,17 +34,19 @@
     "react-router-dom": "^6.15.0",
     "react-scripts": "^5.0.1",
     "swiper": "^10.3.0",
+    "tailwind-merge": "^2.2.1",
     "ts-node": "^10.9.1",
     "typescript": "*",
     "web-vitals": "^2.1.0",
     "zustand": "^4.4.1"
   },
   "scripts": {
     "prepare": "husky install",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "craco start",
+    "build": "craco build",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "test": "jest"
+    "test": "jest",
+    "eject": "react-scripts eject"
   },
   "husky": {
     "hooks": {
@@ -82,7 +88,8 @@
     "@types/axios": "^0.14.0",
     "@types/react-lazy-load-image-component": "^1.6.0",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "craco-alias": "^3.0.1",
     "eslint": "^8.0.1",
     "eslint-config-standard-with-typescript": "^39.0.0",
     "eslint-plugin-cypress": "^2.14.0",

src/App.tsx

@@ -1,18 +1,16 @@
+import ModalProvider from '@components/ui/modal/modal-provider';
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import Router from './Router';
-import ModalProvider from 'components/ui/modal/modal-provider';
-import ChakraUIProvider from 'components/common/chakra';
+
+import Router from '@/Router';
 
 const queryClient = new QueryClient();
 
 export default function App() {
    return (
       <QueryClientProvider client={queryClient}>
          <ModalProvider>
-            <ChakraUIProvider>
-               <Router />
-            </ChakraUIProvider>
+            <Router />
          </ModalProvider>
       </QueryClientProvider>
    );

src/PrivateRoute.tsx

@@ -1,8 +1,8 @@
+import { ROUTES } from '@constants/route';
+import { useAuth } from '@hooks/useAuth';
+import { IWithReactChildren } from '@shared/interfaces/default-interfaces';
 import React from 'react';
-import { useAuth } from 'hooks/useAuth';
-import { IWithReactChildren } from 'shared/interfaces/default-interfaces';
 import { Navigate } from 'react-router-dom';
-import { ROUTES } from 'constants/route';
 
 export default function PrivateRoute({ children }: IWithReactChildren) {
    const { isLoggedIn } = useAuth();

src/Router.tsx

@@ -1,37 +1,38 @@
+import { ROUTES } from '@constants/route';
+import DefaultLayout from '@layouts/DefaultLayout';
+import NotFound from '@pages/404';
+import BusinessBoard from '@pages/business';
+import BusinessDetail from '@pages/business/[id]';
+import ConferenceBoard from '@pages/conference';
+import Greeting from '@pages/council';
+import Location from '@pages/council/location';
+import Organization from '@pages/council/organization';
+import Recruitment from '@pages/council/recruitment';
+import Main from '@pages/index';
+import Login from '@pages/login';
+import MyPageEdit from '@pages/mypage/edit';
+import MyPage from '@pages/mypage/index';
+import MyPagePassword from '@pages/mypage/password';
+import MyPageUpdate from '@pages/mypage/update';
+import NoticeDetail from '@pages/notice/[id]';
+import NoticeBoard from '@pages/notice/index';
+import NoticePost from '@pages/notice/post';
+import PetitionBoard from '@pages/petition';
+import PetitionDetail from '@pages/petition/[id]';
+import PetitionForm from '@pages/petition/post';
+import ResetId from '@pages/reset/resetId';
+import ResetIdPw from '@pages/reset/resetIdPw';
+import ResetPw from '@pages/reset/resetPw';
+import VerifyPw from '@pages/reset/verifyPw';
+import RuleBoard from '@pages/rule';
+import SignupVerify from '@pages/signup';
+import SignupInfo from '@pages/signup/info';
+import SignupSuccess from '@pages/signup/success';
+import SignupTerms from '@pages/signup/terms';
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { ROUTES } from 'constants/route';
-import DefaultLayout from 'layouts/DefaultLayout';
-import PetitionBoard from 'pages/petition';
-import NoticePost from 'pages/notice/post';
-import PetitionForm from 'pages/petition/post';
-import Main from 'pages';
-import NotFound from 'pages/404';
-import Login from 'pages/login';
-import SignupTerms from 'pages/signup/terms';
-import SignupVerify from 'pages/signup';
-import SignupSuccess from 'pages/signup/success';
-import SignupInfo from 'pages/signup/info';
-import Greeting from 'pages/council';
-import Organization from 'pages/council/organization';
-import Location from 'pages/council/location';
-import Recruitment from 'pages/council/recruitment';
-import MyPage from 'pages/mypage/index';
-import PrivateRoute from 'PrivateRoute';
-import NoticeDetail from 'pages/notice/[id]';
-import NoticeBoard from 'pages/notice/index';
-import PetitionDetail from 'pages/petition/[id]';
-import ConferenceBoard from 'pages/conference';
-import RuleBoard from 'pages/rule';
-import MyPagePassword from 'pages/mypage/password';
-import MyPageEdit from 'pages/mypage/edit';
-import MyPageUpdate from 'pages/mypage/update';
-import ResetIdPw from 'pages/reset/resetIdPw';
-import ResetId from 'pages/reset/resetId';
-import VerifyPw from 'pages/reset/verifyPw';
-import ResetPw from 'pages/reset/resetPw';
-import BusinessBoard from 'pages/business';
-import BusinessDetail from 'pages/business/[id]';
+
+import PrivateRoute from '@/PrivateRoute';
 
 /**
  * @description 라우터

src/__test__/login.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { CONSTANTS } from '@constants/api';
+import Login from '@pages/login';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import Login from '../pages/login';
+import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { CONSTANTS } from 'constants/api';
 
 describe('로그인', () => {
    it('로그인 버튼이 있어야 한다.', () => {

src/api/index.ts

@@ -1,5 +1,5 @@
+import { CONSTANTS } from '@constants/api';
 import axios from 'axios';
-import { CONSTANTS } from 'constants/api';
 
 export const client = axios.create({
    baseURL: CONSTANTS.SERVER_URL,

src/api/main/main.ts

@@ -1,6 +1,6 @@
-import { API_PATH } from 'constants/api';
-import { IMain } from './types/main';
-import { client } from 'api';
+import { client } from '@api/index';
+import { IMain } from '@api/main/types/main';
+import { API_PATH } from '@constants/api';
 
 export const main = async () => {
    try {

src/api/reset/reset.ts

@@ -1,7 +1,7 @@
-import { client } from 'api';
-import { API_PATH } from 'constants/api';
-import { formatphoneNumber } from 'utils/tell';
-import { ResetPwParams, VerifyCodeParams } from './types/reset';
+import { client } from '@api/index';
+import { ResetPwParams, VerifyCodeParams } from '@api/reset/types/reset';
+import { API_PATH } from '@constants/api';
+import { formatphoneNumber } from '@utils/tell';
 import { isAxiosError } from 'axios';
 
 export const findId = async (phoneNumber: string) => {

src/api/signup/signup.ts

@@ -1,13 +1,13 @@
-import { client } from 'api';
+import { client } from '@api/index';
 import {
    IVerifyInfo,
    PhoneVerifyParams,
    SignupParams,
    StudentVerifyResponse,
    confirmCodeParams,
-} from './types/signup';
-import { API_PATH } from 'constants/api';
-import { formatphoneNumber } from 'utils/tell';
+} from '@api/signup/types/signup';
+import { API_PATH } from '@constants/api';
+import { formatphoneNumber } from '@utils/tell';
 
 export const verify = async (verifyInfo: IVerifyInfo) => {
    try {

src/api/upload/upload.ts

@@ -1,6 +1,6 @@
-import { client } from 'api';
-import { IFormInfo } from './types/upload';
-import { CONSTANTS } from 'constants/api';
+import { client } from '@api/index';
+import { IFormInfo } from '@api/upload/types/upload';
+import { CONSTANTS } from '@constants/api';
 
 export const uploadForm = async ({ formInfo, API_PATH }: { formInfo: IFormInfo; API_PATH: string }) => {
    const token = localStorage.getItem(CONSTANTS.atk_key);

src/components/common/board/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import Box from 'components/ui/box';
-import { BaseSkeleton, TextSkeleton } from 'components/ui/skeleton';
+import Box from '@components/ui/box';
+import { BaseSkeleton, TextSkeleton } from '@components/ui/skeleton';
+import Delay from '@layouts/Delay';
 import { ComponentProps } from 'react';
-import Delay from 'layouts/Delay';
+import React from 'react';
 
 type BoardProps = ComponentProps<'ol'>;
 type CellProps = ComponentProps<'li'>;

src/components/common/carousel/index.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import ArrowButton from '@components/common/carousel/ArrowButton';
+import React from 'react';
 import { GoDotFill } from 'react-icons/go';
-import ArrowButton from './ArrowButton';
 
 export default function Carousel({ data }: { data: string[] }) {
-   const [index, setIndex] = useState(0);
+   const [index, setIndex] = React.useState(0);
 
    return (
       <div className='relative flex justify-center aspect-square overflow-hidden bg-gray-200 rounded-lg mt-2'>

src/components/common/gnb/index.tsx

@@ -1,8 +1,8 @@
+import logo from '@assets/images/logo.png';
+import IconButton from '@components/ui/button/IconButton';
+import { ROUTES } from '@constants/route';
 import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import logo from '../../../assets/images/logo.png';
-import { ROUTES } from 'constants/route';
-import IconButton from 'components/ui/button/IconButton';
 
 interface Props extends React.ComponentProps<'header'> {
    left?: JSX.Element | null;

src/components/common/gnh/index.tsx

@@ -1,5 +1,5 @@
-import React, { Fragment } from 'react';
-import Selector, { TOption } from 'components/ui/selector';
+import Selector, { TOption } from '@components/ui/selector';
+import React from 'react';
 
 interface GnhProps {
    headingText: string;
@@ -10,13 +10,13 @@ interface GnhProps {
 }
 
 const Gnh = ({ headingText, subHeadingText, headingStyle, subHeadingStyle, dropDown }: GnhProps) => (
-   <Fragment>
+   <React.Fragment>
       {headingText && <h1 className={`${headingStyle} text-2xl font-extrabold text-white`}>{headingText}</h1>}
       {dropDown !== undefined && dropDown.length > 0 && subHeadingText ? (
          <Selector list={dropDown} subHeadingText={subHeadingText} />
       ) : (
          <h2 className={`${subHeadingStyle} text-white`}>{subHeadingText}</h2>
       )}
-   </Fragment>
+   </React.Fragment>
 );
 export default Gnh;

src/components/common/icon/SvgIcon.tsx

@@ -1,4 +1,4 @@
-import IconSprite from 'assets/icons/IconSprite.svg';
+import IconSprite from '@assets/icons/IconSprite.svg';
 import React from 'react';
 
 export interface IconProps {