BrainPix · minjeong9919 · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
   <body>
     <div id="root"></div>
     <script
+      defer
       type="module"
       src="/src/main.tsx"></script>
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "globals": "^15.14.0",
     "import-fresh": "^3.3.1",
     "prettier": "^3.4.2",
+    "rollup-plugin-visualizer": "^5.14.0",
     "sass": "^1.55.0",
     "stylelint": "^16.12.0",
     "stylelint-config-prettier-scss": "^1.0.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,6 +3,8 @@ import { routes } from './routes';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { ToastProvider } from './contexts/toastContext';
+import { Suspense } from 'react';
+import LoadingPage from './pages/loading/LoadingPage';
 
 function App() {
   const queryClient = new QueryClient();
@@ -11,7 +13,9 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools initialIsOpen={false} />
       <ToastProvider>
-        <RouterProvider router={routes}></RouterProvider>;
+        <Suspense fallback={<LoadingPage />}>
+          <RouterProvider router={routes}></RouterProvider>;
+        </Suspense>
       </ToastProvider>
     </QueryClientProvider>
   );

diff --git a/src/components/preview/PreviewThumbnail.tsx b/src/components/preview/PreviewThumbnail.tsx
@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import { useNavigate } from 'react-router-dom';
 import Bookmark from '../../assets/icons/bookmark.svg?react';
 import UnclickBookmark from '../../assets/icons/unclickBookmark.svg?react';
-import DefaultImage from '../../assets/icons/defaultImage.svg?react';
 import styles from './previewThumbnail.module.scss';
 import { Image } from '../common/image/Image';
 
@@ -106,22 +105,11 @@ const PreviewThumbnail: React.FC<PreviewThumbnailProps> = ({ data }) => {
         className={styles.thumbnailImage}
         onClick={handleImageClick}
         style={{ cursor: 'pointer' }}>
-        {imageUrl && imageUrl.trim() !== '' && imageUrl !== 'string' ? (
-          <Image
-            src={imageUrl}
-            alt={description}
-          />
-        ) : (
-          <DefaultImage
-            style={{
-              width: '100%',
-              height: '100%',
-              objectFit: 'cover',
-              display: 'block',
-            }}
-            preserveAspectRatio='none'
-          />
-        )}
+        <Image
+          src={imageUrl}
+          alt={description}
+        />
+
         <div className={styles.overlay}>
           <div className={styles.overlayTags}>
             <span className={classNames(styles.postAuth, authClass)}>

diff --git a/src/pages/collaboration/CollaborationMain.tsx b/src/pages/collaboration/CollaborationMain.tsx
@@ -44,7 +44,7 @@ interface CollaborationData {
   isSavedPost: boolean;
 }
 
-export const CollaborationMain = () => {
+const CollaborationMain = () => {
   const navigate = useNavigate();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [collaborationData, setCollaborationData] = useState<
@@ -268,3 +268,4 @@ export const CollaborationMain = () => {
     </>
   );
 };
+export default CollaborationMain;
diff --git a/src/pages/collaboration/CollaborationRegister.tsx b/src/pages/collaboration/CollaborationRegister.tsx
@@ -104,7 +104,7 @@ const OPTIONS = [
 //   numberOfPeople: number;
 // }
 
-export const CollaborationRegister = () => {
+const CollaborationRegister = () => {
   const navigate = useNavigate();
   const [category, setCategory] = useState<string>('');
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
@@ -790,3 +790,5 @@ export const CollaborationRegister = () => {
     </div>
   );
 };
+
+export default CollaborationRegister;
diff --git a/src/pages/collaboration/PostDetailWithLink.tsx b/src/pages/collaboration/PostDetailWithLink.tsx
@@ -17,7 +17,7 @@ import { getCollaborationDetail } from '../../apis/detailPageAPI';
 import { CollaborationDetail } from '../../types/detailPageType';
 import { getUserIdFromToken } from '../../utils/auth';
 
-export const PostDetailWithLink = () => {
+const PostDetailWithLink = () => {
   const { collaborationId } = useParams<{ collaborationId: string }>();
 
   const { data, isLoading, error } = useQuery<CollaborationDetail, Error>({
@@ -120,3 +120,4 @@ export const PostDetailWithLink = () => {
     </>
   );
 };
+export default PostDetailWithLink;
diff --git a/src/pages/errorPage/ErrorPage.tsx b/src/pages/errorPage/ErrorPage.tsx
@@ -2,7 +2,7 @@ import PageErrorIcon from '../../assets/icons/pageError.svg?react';
 import styles from './errorPage.module.scss';
 import { useNavigate } from 'react-router-dom';
 
-export const ErrorPage = () => {
+const ErrorPage = () => {
   const navigate = useNavigate();
 
   const goBackTwice = () => {
@@ -30,3 +30,4 @@ export const ErrorPage = () => {
     </div>
   );
 };
+export default ErrorPage;
diff --git a/src/pages/idea-market/IdeaMarketMain.tsx b/src/pages/idea-market/IdeaMarketMain.tsx
@@ -46,7 +46,7 @@ const sortMap: Record<string, SortType> = {
   lowView: 'LOWEST_PRICE',
 };
 
-export const IdeaMarketMain = () => {
+const IdeaMarketMain = () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -359,3 +359,5 @@ export const IdeaMarketMain = () => {
     </>
   );
 };
+
+export default IdeaMarketMain;
diff --git a/src/pages/idea-market/IdeaMarketMarketPlace.tsx b/src/pages/idea-market/IdeaMarketMarketPlace.tsx
@@ -46,7 +46,7 @@ const sortMap: Record<string, SortType> = {
   lowView: 'LOWEST_PRICE',
 };
 
-export const IdeaMarketMarketPlace = () => {
+const IdeaMarketMarketPlace = () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -359,3 +359,5 @@ export const IdeaMarketMarketPlace = () => {
     </>
   );
 };
+
+export default IdeaMarketMarketPlace;
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ @@
       <body>
         <div id="root"></div>
         <script
+          defer
           type="module"
           src="/src/main.tsx"></script>
       </body>
@@ Expand Down @@