[FE] 공통 컴포넌트 구현 (#19)

* feat, refactor: 공통 컴포넌트 개발 및 리팩토링

* feat: 공통 컴포넌트 개발

* chore: 디렉토리 구조 변경

frontend/package.json

@@ -15,7 +15,7 @@
     "styled-components": "^6.0.3"
   },
   "devDependencies": {
-    "@types/react": "^18.2.14",
+    "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",

frontend/src/App.tsx

@@ -1,72 +1,27 @@
-import { useState, useRef } from "react";
-import styled, { ThemeProvider } from "styled-components";
-import Board from "./components/Board";
-import HistoryBtn from "./components/HistoryBtn";
-import Logo from "./components/Logo";
-import Modal from "./components/Modal";
-import Header from "./components/landmark/Header";
-import Main from "./components/landmark/Main";
-import CommonStyle from "./styles/CommonStyle";
-import { theme } from "./theme";
-import { TTheme } from "./types/theme";
-
-export default function App() {
-  const [isUserLogOpened, setIsUserLogOpened] = useState<boolean>(false);
-  const [message, setMessage] = useState<string>("");
-  const callbackTemp = useRef<() => void | undefined>();
-
-  function clearMessage() {
-    setMessage("");
-  }
-
-  function dummyAction() {
-    clearMessage();
-    if (callbackTemp.current) {
-      callbackTemp.current();
-    }
-  }
-
-  function openConfirmModal(content: string, callback: () => void) {
-    setMessage(content);
-    callbackTemp.current = callback;
-  }
-
-  function toggleActiveUserLog() {
-    setIsUserLogOpened((bool) => !bool);
+import { useState } from "react";
+import Header from "./components/Header";
+import Main from "./components/main/Main";
+import Alert from "./components/common/Alert";
+import Container from "./styles/Container";
+import Aside from "./components/aside/Aside";
+
+const App: React.FC = () => {
+  const [isHistoryOpen, setIsHistoryOpen] = useState<boolean>(false);
+
+  function toggleHistory() {
+    setIsHistoryOpen((bool) => !bool);
   }
 
   return (
-    <ThemeProvider theme={theme}>
-      <AppStyledDiv>
-        <CommonStyle />
-        <Header>
-          <Logo />
-          <HistoryBtn {...{ toggleActiveUserLog }} />
-        </Header>
-        <Container>
-          <Main>
-            <Board handleDeleteButtonClick={openConfirmModal} />
-          </Main>
-          {/* <Aside>
-            <UserActionLogList />
-          </Aside> */}
-        </Container>
-        <Modal message={message} action={dummyAction} />
-      </AppStyledDiv>{" "}
-    </ThemeProvider>
+    <>
+      <Header />
+      <Container>
+        <Main />
+        {/* <Aside /> */}
+      </Container>
+      <Alert />
+    </>
   );
-}
-
-const AppStyledDiv = styled.div<{ theme: TTheme }>`
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  background-color: ${(props) => props.theme.color.surface.alt};
-`;
+};
 
-const Container = styled.div`
-  display: flex;
-  padding: calc(2.29rem - 4px) calc(5.8rem - 4px);
-`;
+export default App;