Fix: Material-UI theme 타입 에러 해결

wafflestudio · Jan 10, 2025 · c4a91e3 · c4a91e3
1 parent 3d94e42
commit c4a91e3
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 94 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@emotion/styled": "11.14.0",
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",
+    "@mui/styles": "6.3.1",
     "axios": "1.7.9",
     "dayjs": "1.11.13",
     "lucide-react": "0.469.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -22,9 +22,9 @@ export const App = () => {
           <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>} />
           <Route path="/hosting" element={<Hosting />} />
-      </Routes>
+          <Route path="*" element={<h1>404 Not Found</h1>} />
+        </Routes>
       </SearchProvider>
     </StyledEngineProvider>
   );

diff --git a/src/components/home/FilterBar/index.tsx b/src/components/home/FilterBar/index.tsx
@@ -4,83 +4,14 @@ import { useState } from 'react';
 
 import { ACCOMMODATION_TYPES } from '@/components/common/constants/accommodationTypes';
 
-<<<<<<< HEAD
-// 필터 데이터
-export const filterItems: FilterItem[] = [
-  {
-    label: '한적한 시골',
-    imageUrl:
-      'https://a0.muscache.com/pictures/6ad4bd95-f086-437d-97e3-14d12155ddfe.jpg',
-  },
-  {
-    label: '최고의 전망',
-    imageUrl:
-      'https://a0.muscache.com/pictures/3b1eb541-46d9-4bef-abc4-c37d77e3c21b.jpg',
-  },
-  {
-    label: '캠핑장',
-    imageUrl:
-      'https://a0.muscache.com/pictures/ca25c7f3-0d1f-432b-9efa-b9f5dc6d8770.jpg',
-  },
-  {
-    label: '한옥',
-    imageUrl:
-      'https://a0.muscache.com/pictures/51f5cf64-5821-400c-8033-8a10c7787d69.jpg',
-  },
-  {
-    label: '해변 바로 앞',
-    imageUrl:
-      'https://a0.muscache.com/pictures/bcd1adc0-5cee-4d7a-85ec-f6730b0f8d0c.jpg',
-  },
-  {
-    label: '디자인',
-    imageUrl:
-      'https://a0.muscache.com/pictures/50861fca-582c-4bcc-89d3-857fb7ca6528.jpg',
-  },
-  {
-    label: '멋진 수영장',
-    imageUrl:
-      'https://a0.muscache.com/pictures/3fb523a0-b622-4368-8142-b5e03df7549b.jpg',
-  },
-  {
-    label: '통나무집',
-    imageUrl:
-      'https://a0.muscache.com/pictures/732edad8-3ae0-49a8-a451-29a8010dcc0c.jpg',
-  },
-  {
-    label: '최고의 조리시설',
-    imageUrl:
-      'https://a0.muscache.com/pictures/7630c83f-96a8-4232-9a10-0398661e2e6f.jpg',
-  },
-  {
-    label: '북극',
-    imageUrl:
-      'https://a0.muscache.com/pictures/8b44f770-7156-4c7b-b4d3-d92549c8652f.jpg',
-  },
-  {
-    label: '농장',
-    imageUrl:
-      'https://a0.muscache.com/pictures/aaa02c2d-9f0d-4c41-878a-68c12ec6c6bd.jpg',
-  },
-  {
-    label: '인기 급상승',
-    imageUrl:
-      'https://a0.muscache.com/pictures/3726d94b-534a-42b8-bca0-a0304d912260.jpg',
-  },
-];
-
-export const FilterBar = () => {
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-=======
 import FilterModal from './FilterModal';
 
 type FilterBarProps = {
   onTypeSelect?: (type: string) => void;
   onPriceFilterChange?: (priceRange: { min: number; max: number }) => void;
 };
->>>>>>> d3fe4e7 (feat: Hosting 페이지 구현 및 메인 페이지 기능 개선)
 
-const FilterBar = ({ onTypeSelect, onPriceFilterChange }: FilterBarProps) => {
+export const FilterBar = ({ onTypeSelect, onPriceFilterChange }: FilterBarProps) => {
   const [selectedType, setSelectedType] = useState<string>('');
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
 
@@ -157,3 +88,5 @@ const FilterBar = ({ onTypeSelect, onPriceFilterChange }: FilterBarProps) => {
     </div>
   );
 };
+
+export default FilterBar;
diff --git a/src/components/home/Topbar/index.tsx b/src/components/home/Topbar/index.tsx
@@ -7,13 +7,10 @@ import LogoText from '@/components/common/LogoText';
 import SearchBar from './Search/SearchBar';
 const Topbar = () => {
   const navigate = useNavigate();
-<<<<<<< HEAD
 
   const handleLogoClick = () => {
     void navigate(`/`);
   };
-=======
->>>>>>> d3fe4e7 (feat: Hosting 페이지 구현 및 메인 페이지 기능 개선)
 
   return (
     <div className="flex flex-col w-full">
@@ -22,13 +19,7 @@ const Topbar = () => {
           <div className="flex-1">
             <button
               className="flex items-center gap-1"
-<<<<<<< HEAD
               onClick={handleLogoClick}
-=======
-              onClick={() => {
-                void navigate('/');
-              }}
->>>>>>> d3fe4e7 (feat: Hosting 페이지 구현 및 메인 페이지 기능 개선)
             >
               <LogoIcon />
               <div className="hidden md:block">

diff --git a/src/components/roomdetail/Info.tsx b/src/components/roomdetail/Info.tsx
@@ -1,7 +1,7 @@
 import PhotoSizeSelectActualIcon from '@mui/icons-material/PhotoSizeSelectActual';
 import StarIcon from '@mui/icons-material/Star';
 
-import { filterItems } from '@/components/home/FilterBar/index';
+import { ACCOMMODATION_TYPES } from '@/components/common/constants/accommodationTypes';
 import checkin from '@/components/roomdetail/checkin.svg';
 import crownleft from '@/components/roomdetail/crownleft.svg';
 import crownright from '@/components/roomdetail/crownright.svg';
@@ -16,7 +16,9 @@ interface InfoProps {
 }
 
 const Info = ({ data }: InfoProps) => {
-  const matchingItem = filterItems.find((item) => item.label === data.type2);
+  const matchingItem = ACCOMMODATION_TYPES.find(
+    (item) => item.label === data.type2,
+  );
   const issuperhost = data.superhost;
   const isluggage = data.luggage;
   const ischeckin = data.selfcheckin;

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,5 +1,6 @@
 import '@/tailwind.css';
 
+import type { Theme } from '@mui/material/styles';
 import {
   createTheme,
   StyledEngineProvider,
@@ -15,7 +16,7 @@ const rootElement = document.getElementById('root');
 if (rootElement === null) throw new Error('Root element not found');
 
 // Material-UI 테마 생성 및 Portal 컨테이너 설정
-const theme = createTheme({
+const theme: Theme = createTheme({ 
   components: {
     MuiPopover: {
       defaultProps: {

diff --git a/vite.config.ts b/vite.config.ts
@@ -13,11 +13,7 @@ const config = defineConfig({
   server: {
     proxy: {
       '/api': {
-<<<<<<< HEAD
-        target: 'https://d2gjarpl85ijp5.cloudfront.net/', // 백엔드 서버 주소
-=======
         target: 'https://d2gjarpl85ijp5.cloudfront.net', // 백엔드 서버 주소
->>>>>>> d3fe4e7 (feat: Hosting 페이지 구현 및 메인 페이지 기능 개선)
         changeOrigin: true, // Origin 헤더 변경
         //rewrite: (path) => path.replace(/^\/api/, ''), // `/api` 제거
       },