[#134] 대회 페이지 시뮬레이션 영역 모달로 분리하기

frontend/src/components/Common/Modal/Modal.tsx

@@ -0,0 +1,74 @@
+import { css, cx } from '@style/css';
+
+import type { HTMLAttributes, MouseEvent } from 'react';
+import { useContext, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+
+import { ModalContext } from './ModalContext';
+import { ModalProvider } from './ModalProvider';
+
+export interface Props extends HTMLAttributes<HTMLDialogElement> {
+  onBackdropPressed?: () => void;
+}
+
+export function Modal({ onBackdropPressed, children, ...props }: Props) {
+  const modal = useContext(ModalContext);
+  const $dialog = useRef<HTMLDialogElement>(null);
+
+  const handleClickBackdrop = (e: MouseEvent<HTMLDialogElement>) => {
+    const $target = e.target as HTMLDialogElement;
+
+    if ($target.nodeName !== 'DIALOG') return;
+
+    if (onBackdropPressed instanceof Function) {
+      onBackdropPressed();
+    }
+  };
+
+  useEffect(() => {
+    if (modal.isOpen) {
+      $dialog.current?.showModal();
+    } else {
+      $dialog.current?.close();
+    }
+  }, [modal.isOpen]);
+
+  return ReactDOM.createPortal(
+    <dialog
+      ref={$dialog}
+      className={cx(style, dialogStyle)}
+      aria-modal="true"
+      aria-labelledby="dialog-title"
+      onClick={handleClickBackdrop}
+      {...props}
+    >
+      <div className={contentStyle}>{children}</div>
+    </dialog>,
+    document.body,
+  );
+}
+
+Modal.Context = ModalContext;
+Modal.Provider = ModalProvider;
+
+const style = css({
+  borderRadius: '0.5rem',
+});
+
+const dialogStyle = css({
+  position: 'fixed',
+  left: '50%',
+  top: '50%',
+  transform: 'translate(-50%,-50%)',
+  width: '500px',
+  height: '400px',
+  _backdrop: {
+    background: 'rgba(00,00,00,0.5)',
+    backdropFilter: 'blur(1rem)',
+  },
+});
+
+const contentStyle = css({
+  width: '100%',
+  height: '100%',
+});

frontend/src/components/Common/Modal/ModalContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+interface ModalContextProps {
+  isOpen: boolean;
+  close: () => void;
+  open: () => void;
+}
+
+export const ModalContext = createContext<ModalContextProps>({
+  isOpen: false,
+  close: () => {},
+  open: () => {},
+});

frontend/src/components/Common/Modal/ModalProvider.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+
+import { ModalContext } from './ModalContext';
+
+export function ModalProvider({ children }: { children: ReactNode }) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const close = () => {
+    setIsOpen(false);
+  };
+  const open = () => {
+    setIsOpen(true);
+  };
+
+  return (
+    <ModalContext.Provider
+      value={{
+        isOpen,
+        close,
+        open,
+      }}
+    >
+      {children}
+    </ModalContext.Provider>
+  );
+}

frontend/src/components/Common/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { Props as ModalProps } from './Modal';

frontend/src/components/Common/index.ts

@@ -1 +1,2 @@
 export { Input } from './Input';
+export * from './Modal';

frontend/src/components/Simulation/SimulationInputModal.tsx

@@ -0,0 +1,46 @@
+import { useContext, useState } from 'react';
+
+import type { SimulationInput } from '@/hooks/simulation';
+import { deepCopy } from '@/utils/copy';
+
+import { Modal, type ModalProps } from '../Common';
+import { SimulationInputList } from './SimulationInputList';
+
+interface Props extends ModalProps {
+  simulationInputs: SimulationInput[];
+  onSave: (inputs: SimulationInput[]) => void;
+}
+
+export function SimulationInputModal({ simulationInputs, onSave, ...props }: Props) {
+  const modal = useContext(Modal.Context);
+  const [inputs, setInputs] = useState<SimulationInput[]>(deepCopy(simulationInputs));
+
+  const handleCloseModal = () => {
+    setInputs(simulationInputs);
+    modal.close();
+  };
+
+  const handleSave = () => {
+    onSave(deepCopy(inputs));
+    modal.close();
+  };
+
+  const handleChangeInput = (targetId: number, newParam: string) => {
+    const changedSimulation = inputs.find(({ id }) => id === targetId);
+    if (changedSimulation) {
+      changedSimulation.input = newParam;
+    }
+    setInputs([...inputs]);
+  };
+
+  return (
+    <Modal {...props}>
+      <SimulationInputList
+        inputList={inputs}
+        onChangeInput={handleChangeInput}
+      ></SimulationInputList>
+      <button onClick={handleCloseModal}>닫기</button>
+      <button onClick={handleSave}>저장</button>
+    </Modal>
+  );
+}

frontend/src/hooks/simulation/index.ts

@@ -1,2 +1,2 @@
-export * from './useSimulations';
+export * from './useSimulation';
 export * from './types';

frontend/src/hooks/simulation/useSimulation.ts

@@ -0,0 +1,94 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import evaluator from '@/modules/evaluator';
+
+import type { SimulationInput, SimulationResult } from './types';
+
+export const useSimulation = () => {
+  const [inputs, setInputs] = useState<SimulationInput[]>([
+    { id: 1, input: '' },
+    { id: 2, input: '' },
+    { id: 3, input: '' },
+    { id: 4, input: '' },
+    { id: 5, input: '' },
+  ]);
+  const [results, setResults] = useState<SimulationResult[]>([
+    { id: 1, isDone: true, input: '', output: '' },
+    { id: 2, isDone: true, input: '', output: '' },
+    { id: 3, isDone: true, input: '', output: '' },
+    { id: 4, isDone: true, input: '', output: '' },
+    { id: 5, isDone: true, input: '', output: '' },
+  ]);
+  const isRunning = useMemo(() => {
+    return results.some((result) => !result.isDone);
+  }, [results]);
+
+  useEffect(() => {
+    return evaluator.subscribe(({ result: output, error, task }) => {
+      if (!task) return;
+
+      setResults((results) => {
+        return results.map((result) => {
+          if (result.id !== task.clientId) return result;
+
+          if (error) {
+            return {
+              ...result,
+              isDone: true,
+              output: `${error.name}: ${error.message} \n${error.stack}`,
+            };
+          }
+          return {
+            ...result,
+            isDone: true,
+            output,
+          };
+        });
+      });
+    });
+  }, []);
+
+  function run(code: string) {
+    const tasks = inputs.map(({ id, input }) => evaluator.createEvalMessage(id, code, input));
+
+    const isRequestSuccess = evaluator.evaluate(tasks);
+
+    if (!isRequestSuccess) {
+      return;
+    }
+
+    setResults((results) => {
+      return results
+        .map((result, index) => ({
+          ...result,
+          input: inputs[index].input,
+        }))
+        .map(toEvaluatingState);
+    });
+  }
+
+  function changeInputs(inputs: SimulationInput[]) {
+    setInputs([...inputs]);
+  }
+
+  function cancel() {
+    evaluator.cancelEvaluation();
+  }
+
+  return {
+    inputs,
+    results,
+    isRunning,
+    run,
+    cancel,
+    changeInputs,
+  };
+};
+
+const toEvaluatingState = (simulation: SimulationResult) => {
+  return {
+    ...simulation,
+    output: '계산중...',
+    isDone: false,
+  };
+};