Merge pull request #24 from wafflestudio/dev

Merge dev branch into main

eslint.config.js

@@ -2,7 +2,7 @@ import react from '@woohm402/eslint-config-react';
 
 export default [
   {
-    ignores: ['.yarn', '*.js'],
+    ignores: ['.yarn', '*.js', 'dist/**'],
   },
   ...react({
     tsconfigRootDir: import.meta.dirname,

package.json

@@ -15,6 +15,8 @@
     "check-all": "yarn types:check && yarn format:check && yarn lint:check && yarn unused:check"
   },
   "dependencies": {
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",
     "axios": "1.7.9",

src/App.tsx

@@ -1,3 +1,4 @@
+import { StyledEngineProvider } from '@mui/material/styles';
 import { Route, Routes } from 'react-router-dom';
 
 import { SearchProvider } from '@/components/home/context/SearchContext';
@@ -11,16 +12,18 @@ import { Roomdetail } from './routes/roomDetail';
 export const App = () => {
   return (
     // useSearch 훅을 이용해서 컴포넌트를 감싸 놨습니다. AppProvider 등의 다른 파일을 만들어서 옮겨두는 것도 가능합니다.
-    <SearchProvider>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/:id" element={<Roomdetail />} />
-        <Route path="/tests" element={<ApiTest />} />
-        <Route path="/registerTest" element={<Auth mode="signup" />} />
-        <Route path="/loginTest" element={<Auth mode="login" />} />
-        <Route path="/redirect" element={<Redirect />} />
-        <Route path="*" element={<h1>404 Not Found</h1>} />
-      </Routes>
-    </SearchProvider>
+    <StyledEngineProvider injectFirst>
+      <SearchProvider>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/:id" element={<Roomdetail />} />
+          <Route path="/tests" element={<ApiTest />} />
+          <Route path="/registerTest" element={<Auth mode="signup" />} />
+          <Route path="/loginTest" element={<Auth mode="login" />} />
+          <Route path="/redirect" element={<Redirect />} />
+          <Route path="*" element={<h1>404 Not Found</h1>} />
+        </Routes>
+      </SearchProvider>
+    </StyledEngineProvider>
   );
 };

src/main.tsx

@@ -1,19 +1,53 @@
 import '@/tailwind.css';
 
+import {
+  createTheme,
+  StyledEngineProvider,
+  ThemeProvider,
+} from '@mui/material/styles';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
 import { App } from './App';
 
-const root = document.getElementById('root');
+const rootElement = document.getElementById('root');
+if (rootElement === null) throw new Error('Root element not found');
 
-if (root === null) throw new Error('Root element not found');
+// Material-UI 테마 생성 및 Portal 컨테이너 설정
+const theme = createTheme({
+  components: {
+    MuiPopover: {
+      defaultProps: {
+        container: rootElement,
+      },
+    },
+    MuiPopper: {
+      defaultProps: {
+        container: rootElement,
+      },
+    },
+    MuiDialog: {
+      defaultProps: {
+        container: rootElement,
+      },
+    },
+    MuiModal: {
+      defaultProps: {
+        container: rootElement,
+      },
+    },
+  },
+});
 
-createRoot(root).render(
+createRoot(rootElement).render(
   <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </ThemeProvider>
+    </StyledEngineProvider>
   </StrictMode>,
 );

tailwind.config.js

@@ -1,8 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['index.html', './src/**/*.{ts,tsx}'],
+  important: '#root',
   theme: {
     extend: {},
   },
   plugins: [],
+  corePlugins: {
+    preflight: true,
+  },
 };

tsconfig.json

@@ -23,5 +23,6 @@
     "noUncheckedIndexedAccess": true,
     "verbatimModuleSyntax": true
   },
-  "include": ["src", "vite.config.ts"]
+  "include": ["src", "vite.config.ts"],
+  "exclude": ["dist"]
 }

tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/common/LogoIcon.tsx","./src/components/common/LogoText.tsx","./src/components/common/Modal/BaseModal.tsx","./src/components/home/FilterBar/index.tsx","./src/components/home/Listings/ListingItem.tsx","./src/components/home/Listings/index.tsx","./src/components/home/Topbar/index.tsx","./src/components/home/Topbar/Search/SearchBar.tsx","./src/components/home/Topbar/Search/modals/CalendarModal.tsx","./src/components/home/Topbar/Search/modals/GuestsModal.tsx","./src/components/home/Topbar/Search/modals/LocationModal.tsx","./src/components/home/context/SearchContext.tsx","./src/components/roomdetail/Info.tsx","./src/components/roomdetail/Reservation.tsx","./src/mock/listings.tsx","./src/mock/mockRoom.ts","./src/routes/ApiTest.tsx","./src/routes/Auth.tsx","./src/routes/Home.tsx","./src/routes/Redirect.tsx","./src/routes/roomDetail.tsx","./src/types/listing.tsx","./src/types/roomType.ts","./vite.config.ts"],"version":"5.7.2"}