refactor: 컴포넌트 프로젝트 구조 변경 (#104)

* chore: update husky hooks

* refactor: remove unused types

* chore: update component structure

* chore: update eslintcache

* chore: remove RFC issue template

* refactor: update types

* chore: update eslintcache

* fix: correct path for data alias

* chore: update eslintcache

* feat: add error page

* chore: remove eslintcache

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 yarn lint-staged

src/App.tsx

@@ -9,12 +9,14 @@ import {
 } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import { Toaster } from 'react-hot-toast';
+import ErrorPage from '@pages/ErrorPage/ErrorPage';
 
 const queryClient = new QueryClient();
 
 const router = createBrowserRouter([
   {
     element: <Layout />,
+    errorElement: <ErrorPage />,
     children: [
       { path: PATH.ROOT, element: <HomePage /> },
       { path: '*', element: <Navigate to={PATH.ROOT} replace={true} /> },

src/components/Button.tsx

@@ -1,4 +1,3 @@
-import { forwardRef } from 'react';
 import clsx from 'clsx';
 
 interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -16,26 +15,25 @@ const COLORS = {
   disabled: 'border bg-gray-200 text-white cursor-not-allowed',
 } as const;
 
-const Button = forwardRef<HTMLButtonElement, Props>(
-  ({ children, className, color = 'default', icon, ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={clsx(
-          'border rounded py-1.5 px-2 transition-colors text-nowrap',
-          { 'flex items-center justify-center gap-1': icon },
-          COLORS[color],
-          className,
-        )}
-        {...props}
-      >
-        {icon}
-        {children}
-      </button>
-    );
-  },
-);
-
-Button.displayName = 'Button';
-
-export { Button };
+export const Button = ({
+  children,
+  className,
+  color = 'default',
+  icon,
+  ...props
+}: Props) => {
+  return (
+    <button
+      className={clsx(
+        'border rounded py-1.5 px-2 transition-colors text-nowrap',
+        { 'flex items-center justify-center gap-1': icon },
+        COLORS[color],
+        className,
+      )}
+      {...props}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+};

src/components/Input.tsx

@@ -1,23 +1,22 @@
 import clsx from 'clsx';
-import { forwardRef } from 'react';
 
 interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
 }
 
-const Input = forwardRef<HTMLInputElement, Props>(
-  ({ label, className, ...props }, ref) => {
-    return (
-      <div className="flex flex-col gap-1">
-        <p className="text-start dark:text-white">{label}</p>
-        <input
-          ref={ref}
-          className={clsx('p-2 border rounded outline-none ', className)}
-          {...props}
-        />
-      </div>
-    );
-  },
-);
+const Input = ({ id, label, className, ...props }: Props) => {
+  return (
+    <div className="flex flex-col gap-1">
+      <label htmlFor={id} className="text-start dark:text-white">
+        {label}
+      </label>
+      <input
+        id={id}
+        className={clsx('p-2 border rounded outline-none ', className)}
+        {...props}
+      />
+    </div>
+  );
+};
 
 export default Input;

src/components/Navbar.tsx

@@ -10,7 +10,6 @@ const Navbar = () => {
   );
 
   useEffect(() => {
-    // 다크 모드 상태에 따라 클래스를 추가하거나 제거하고, 로컬 스토리지에 상태를 저장합니다.
     const className = darkMode ? 'dark' : 'light';
     document.documentElement.className = className;
     localStorage.setItem('theme', className);

src/components/modal/AccidentModal.tsx

@@ -0,0 +1,63 @@
+import { useSetSelectedModalStore } from '@store/modal-type';
+import { Button } from '../Button';
+import { Modal } from './Modal';
+import { useState } from 'react';
+import { postAccidentData } from '@api/acryl';
+import { useSetSelectedCaseStore } from '@store/selected-case';
+import { matchingCaseWithResponse } from '@utils/element';
+import { useSetLoadingStateStore } from '@store/loading';
+import { toast } from '@utils/toast';
+
+const AccidentModal = () => {
+  const setModal = useSetSelectedModalStore();
+  const setSelectedCase = useSetSelectedCaseStore();
+  const setIsLoading = useSetLoadingStateStore();
+  const [accidentData, setAccidentData] = useState('');
+
+  const handleAccidentDataChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
+    setAccidentData(e.target.value);
+  };
+
+  const handleAcylSearchClick = async () => {
+    setIsLoading(true);
+    setModal('none');
+
+    try {
+      const response = await postAccidentData(accidentData);
+      const data = matchingCaseWithResponse(response);
+      setSelectedCase(data);
+      setIsLoading(false);
+      toast('완료되었습니다!');
+    } catch {
+      toast('오류가 발생했습니다.');
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Modal onClose={() => setModal('none')}>
+      <div className="grid items-center gap-2 text-center">
+        <span className="py-3 text-xl dark:text-white">
+          아래 빈칸에 사고 데이터를 입력해주세요.
+        </span>
+        <textarea
+          placeholder="여기에 입력하세요"
+          value={accidentData}
+          onChange={handleAccidentDataChange}
+          className="resize-none w-[800px] min-h-[400px] border p-4 overflow-auto scrollbar-hide outline-none mb-5 rounded-md"
+        />
+        <Button
+          color="black"
+          onClick={handleAcylSearchClick}
+          className="py-3 text-lg font-semibold"
+        >
+          입력하기
+        </Button>
+      </div>
+    </Modal>
+  );
+};
+
+export default AccidentModal;

src/components/modal/ApplyPresetModal.tsx

@@ -0,0 +1,69 @@
+import { useSetSelectedModalStore } from '@store/modal-type';
+import { Modal } from './Modal';
+import { PRESETS } from '@/data/preset';
+import { Button } from '../Button';
+import { useState } from 'react';
+import { useSetSelectedCaseStore } from '@store/selected-case';
+import { useGetCaseStore } from '@store/case';
+import clsx from 'clsx/lite';
+
+const ApplyPresetModal = () => {
+  const setModal = useSetSelectedModalStore();
+  const defaultCase = useGetCaseStore();
+  const setSelectedCase = useSetSelectedCaseStore();
+  const [selectedPreset, setSelectedPreset] = useState(0);
+
+  const handleSelectPresetClick = (id: number) => {
+    setSelectedPreset(id);
+  };
+
+  const handleApplyCaseClick = (id: number) => {
+    const selectedPreset = PRESETS.find((preset) => preset.id === id);
+
+    if (selectedPreset) {
+      const removalIds = new Set(
+        selectedPreset.removalElements.map((el) => el.id),
+      );
+      const filteredCase = defaultCase.filter(
+        (caseItem) => !removalIds.has(caseItem.id),
+      );
+
+      setSelectedCase(filteredCase);
+    }
+
+    setModal('none');
+  };
+
+  return (
+    <Modal onClose={() => setModal('none')}>
+      <div className="flex flex-col items-center gap-8 text-center">
+        <p className="text-xl">적용할 프리셋을 선택해주세요</p>
+        <div className="grid grid-cols-4 rounded-lg">
+          {PRESETS.map((preset) => (
+            <button
+              key={`preset-${preset.id}`}
+              type="button"
+              onClick={() => handleSelectPresetClick(preset.id)}
+              className={clsx(
+                'px-4 py-3 border',
+                selectedPreset === preset.id &&
+                  'border-orange-400 bg-orange-400 text-white font-semibold',
+              )}
+            >
+              {preset.name}
+            </button>
+          ))}
+        </div>
+        <Button
+          onClick={() => handleApplyCaseClick(selectedPreset)}
+          color="black"
+          className="w-full text-lg font-semibold"
+        >
+          적용하기
+        </Button>
+      </div>
+    </Modal>
+  );
+};
+
+export default ApplyPresetModal;