fix : lazyloading 제거

Team-hangout · Nov 8, 2024 · f30d45e · f30d45e
1 parent 88a756c
commit f30d45e
Show file tree

Hide file tree

Showing 8 changed files with 169 additions and 238 deletions.
diff --git a/src/components/common/Header/login.tsx b/src/components/common/Header/login.tsx
@@ -6,8 +6,8 @@ import cookie from 'react-cookies';
 import styled from 'styled-components';
 import axios from 'axios';
 import { getLogout } from '@/api/api';
-
-const LoginModal = React.lazy(() => import('../Modal/LoginModal'));
+import LoginModal from '../Modal/LoginModal';
+// const LoginModal = React.lazy(() => import('../Modal/LoginModal'));
 
 
 export const Login = () => {

diff --git a/src/components/main/postList.tsx b/src/components/main/postList.tsx
@@ -1,13 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { restFetcher } from '@/queryClient';
 import likeIcon from '@mui/icons-material/Favorite';
-import Comment from '@/assets/image/detailcomment.png';
 import place from '@/assets/image/placeholder.png';
 import { useNavigate } from 'react-router-dom';
 import { PostType } from '@/types/post';
-import axios from 'axios';
 import gyeongju from '@/assets/image/trip3.webp';
 import user from '@/assets/image/user.png';
 import cookie from 'react-cookies';
@@ -59,47 +56,62 @@ const Preview = (queryString: any) => {
   );
 
 
-  const likeMutation = useMutation(
-    async (postId: number) => {
-      await postLikeData(postId);
-    },
-    {
-      onMutate: async (postId: number) => {
-        await queryClient.cancelQueries(likeDataQueryKey);
-
-        const previousLiked = queryClient.getQueryData<PostType[]>(likeDataQueryKey);
-
-        setLiked((prevLiked) => 
-          prevLiked.includes(postId) 
-            ? prevLiked.filter((id) => id !== postId)
-            : [...prevLiked, postId]
-        );
-
-        return { previousLiked };
-      },
-      onError: (error:any, postId, context) => {
-        console.log(error);
-        if (context?.previousLiked) {
-          setLiked(context.previousLiked);
-        }
-        if (error.response && error.response.status === 401) {
-          alert('로그인을 진행해주세요!');
-        }
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries(likeDataQueryKey);
-      },
+
+  const setLike = async (postId: number) => {
+    //로그인 안된 경우 코드 수정
+    try {
+      postLikeData(postId);
+      console.log('좋아요 실행 및 취소');
+    } catch (error) {
+      console.log(error);
+      if(error.response.status === 401){
+        alert('로그인을 진행해주세요!')
+      }
     }
-  );
+  }
 
 
-  const setLike = (postId: number) => {
-    if (!cookie.load('accessToken')) {
-      alert('로그인을 진행해주세요!');
-      return;
-    }
-    likeMutation.mutate(postId);
-  };
+  // const likeMutation = useMutation(
+  //   async (postId: number) => {
+  //     await postLikeData(postId);
+  //   },
+  //   {
+  //     onMutate: async (postId: number) => {
+  //       await queryClient.cancelQueries(likeDataQueryKey);
+
+  //       const previousLiked = queryClient.getQueryData<PostType[]>(likeDataQueryKey);
+
+  //       setLiked((prevLiked) => 
+  //         prevLiked.includes(postId) 
+  //           ? prevLiked.filter((id) => id !== postId)
+  //           : [...prevLiked, postId]
+  //       );
+
+  //       return { previousLiked };
+  //     },
+  //     onError: (error:any, postId, context) => {
+  //       console.log(error);
+  //       if (context?.previousLiked) {
+  //         setLiked(context.previousLiked);
+  //       }
+  //       if (error.response && error.response.status === 401) {
+  //         alert('로그인을 진행해주세요!');
+  //       }
+  //     },
+  //     onSettled: () => {
+  //       queryClient.invalidateQueries(likeDataQueryKey);
+  //     },
+  //   }
+  // );
+
+
+  // const setLike = (postId: number) => {
+  //   if (!cookie.load('accessToken')) {
+  //     alert('로그인을 진행해주세요!');
+  //     return;
+  //   }
+  //   likeMutation.mutate(postId);
+  // };
 
   const goto = (num: number): void => {
     const postnum = String(num);

diff --git a/src/components/travel/detailsearch/detailsearch.tsx b/src/components/travel/detailsearch/detailsearch.tsx
@@ -3,9 +3,9 @@ import SearchIcon from '@/assets/image/Search icon.png';
 import './detailsearch.scss';
 import DatePicker from "react-datepicker";
 import { ko } from 'date-fns/esm/locale';
-// import Destinationmodal from '../destinationmodal/destinationmodal';
+import Destinationmodal from '../destinationmodal/destinationmodal';
 
-const Destinationmodal = lazy(() => import('../destinationmodal/destinationmodal'));
+// const Destinationmodal = lazy(() => import('../destinationmodal/destinationmodal'));
 
 const DetailSearch = () => {
     const [destinationmodal, setDestinationModal] = useState(false);

diff --git a/src/pages/main/Contents.tsx b/src/pages/main/Contents.tsx
@@ -8,6 +8,8 @@ import jeonraBtn from '../../assets/image/jeonra-btn.webp';
 import allBtn from '../../assets/image/all-btn.webp';
 import PostList from '@/components/main/postList';
 
+//TODO:> png webp 변환
+
 interface ContentsImgProps {
   backgroundImg: string;
   marginLeft: string;

diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
@@ -1,67 +1,42 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import Content from './Contents';
-import trip1 from '../../assets/image/trip1.webp';
+import trip1 from '../../assets/image/trip1.jpg';
+import trip2 from '../../assets/image/trip2.jpg';
+import trip3 from '../../assets/image/trip3.jpg';
 import '../../assets/font/font.css';
-import { useNavigate } from 'react-router-dom';
+import { Link, Navigate, useNavigate } from 'react-router-dom';
 
+const items = [
+  { id: 1, url: trip1 },
+  { id: 2, url: trip2 },
+  { id: 3, url: trip3 },
+];
 
 interface ImageContainerProps {
   imageUrl: string;
 }
 
-const ImageWrapper = styled.div`
-  position: relative;
+const ImageContainer = styled.div<ImageContainerProps>`
+  background-position: center;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)),
+    url(${(props) => props.imageUrl});
+  background-repeat: no-repeat;
+  background-size: cover;
   width: 100rem;
   height: 33.5rem;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
-
-  @media (min-width: 1200px) {
-    aspect-ratio: 16 / 3;
-  }
-
-  /* 태블릿 */
-  @media (max-width: 1199px) and (min-width: 768px) {
-    aspect-ratio: 4 / 3;
-    height: auto;
-  }
-
-  /* 모바일 */
-  @media (max-width: 767px) {
-    aspect-ratio: 1 / 1;
-    height: auto;
-  }
-`;
-
-const StyledImage = styled.img.attrs(() => ({
-  loading: 'eager',
-}))`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-`;
-
-const Overlay = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 `;
 
 const TitleContainer = styled.div`
   margin-top: 13rem;
+
   width: 100%;
   height: 5rem;
   color: #f9f4f4;
@@ -113,81 +88,41 @@ const TextContainer = styled.div`
   font-size: 1.1rem;
   overflow: visible;
   text-align: center;
-  line-height: 1.5rem;
+  line-height: 1.5rem; //문장 상하 간격
   color: white;
   font-family: 'SUITE-Regular';
   overflow: visible;
 `;
 
-const Layout = styled.div`
-  height: 100%;
-`
-
-  interface ImageItem {
-  id: number;
-  url: string | null;
-}
-const initialItems: ImageItem[] = [
-  { id: 1, url: trip1 },
-  { id: 2, url: null },
-  { id: 3, url: null },
-];
-
 const Main = () => {
   const navigate = useNavigate();
-  const [images, setImages] = useState<any[]>(initialItems);
 
   const settings = {
     dots: false,
-    infinite: true,
+    infinite: true, //무한 반복 옵션
     fade: true,
     speed: 2000,
-    slidesToShow: 1,
+    slidesToShow: 1, //한 화면에 보여질 컨텐츠 개수
     slidesToScroll: 1,
     autoplay: true,
     autoplaySpeed: 5000,
   };
 
   const gotoWrite = () => {
+    console.log('hello');
     navigate('/create-post');
   };
 
-  useEffect(() => {
-    const loadImages = async () => {
-      try {
-        setTimeout(async () => {
-          const trip2Module = await import('../../assets/image/trip2.webp');
-          setImages((prevImages) =>
-            prevImages.map((img) =>
-              img.id === 2 ? { ...img, url: trip2Module.default } : img
-            )
-          );
-        }, 4000);
-
-        setTimeout(async () => {
-          const trip3Module = await import('../../assets/image/trip3.webp');
-          setImages((prevImages) =>
-            prevImages.map((img) =>
-              img.id === 3 ? { ...img, url: trip3Module.default } : img
-            )
-          );
-        }, 8000);
-      } catch (error) {
-        console.error('이미지 로드 실패:', error);
-      }
-    };
-
-    loadImages();
-  }, []);
+  const Layout = styled.div`
+    height: 100%;
+  `;
 
   return (
     <Layout>
       <Slider {...settings}>
-        {images.map((item) => (
-          <ImageWrapper key={item.id}>
-          <StyledImage rel="preload" src={item.url || trip1} alt={`Trip ${item.id}`} />     
-          <Overlay>
-          <TitleContainer>
+        {items.map((item) => (
+          <ImageContainer key={item.id} imageUrl={item.url}>
+            <TitleContainer>
               세상의 <Highlight>다양한</Highlight> 곳을
               <br /> 세상의 <Highlight>다양한</Highlight> 사람들과{' '}
               <Highlight>함께</Highlight>할 수 있도록
@@ -199,10 +134,9 @@ const Main = () => {
               동행해보세요.
             </TextContainer>
             <WriteLayout>
-              <WriteButton onClick={gotoWrite}>동행 찾기</WriteButton>
+              <WriteButton onClick={() => gotoWrite()}>동행 찾기</WriteButton>
             </WriteLayout>
-            </Overlay>
-          </ImageWrapper>
+          </ImageContainer>
         ))}
       </Slider>
       <Content />

diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
@@ -17,7 +17,7 @@ import '@/assets/font/font.css';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { BASE_URL, getUserData } from '@/api/api';
 import ProfileEditModal from '@/components/common/Modal/ProfileEditModal';
-
+//TODO : mypage 기능 누락 수정
 
 // const ProfileEditModal = lazy(() => import('@/components/common/Modal/ProfileEditModal'));
 

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -3,13 +3,22 @@ import GlobalLayout from './pages/_layout';
 import { createBrowserRouter } from 'react-router-dom';
 // import ErrorPage from './pages/Errorpage';
 import Main from './pages/main';
-const SignUpPage = lazy(() => import('./pages/SignUpPage'));
-const CreatePostPage = lazy(() => import('./pages/post/CreatePostPage'));
-const KMap = lazy(() => import('./pages/Map'));
-const Mypage = lazy(() => import('./pages/mypage/index'));
-const Travel = lazy(() => import('./pages/Travel'));
-const Detail = lazy(() => import('./pages/Detail'));
-const Errorpage = lazy(() => import('./pages/Errorpage'));
+import CreatePostPage from './pages/post/CreatePostPage';
+import KMap from './pages/Map';
+import SignUpPage from './pages/SignUpPage';
+import ErrorPage from './pages/Errorpage';
+import Mypage from './pages/mypage/index';
+import Detail from './pages/Detail';
+import Travel from './pages/Travel';
+// const Main = lazy(() => import('./pages/main'));
+// const Register = lazy(() => import('./pages/SignUpPage'));
+// const SignUpPage = lazy(() => import('./pages/SignUpPage'));
+// const CreatePostPage = lazy(() => import('./pages/post/CreatePostPage'));
+// const KMap = lazy(() => import('./pages/Map'));
+// const Mypage = lazy(() => import('./pages/mypage/index'));
+// const Travel = lazy(() => import('./pages/Travel'));
+// const Detail = lazy(() => import('./pages/Detail'));
+// const ErrorPage = lazy(() => import('./pages/Errorpage'));
 
 export const router = createBrowserRouter([
   {
@@ -22,7 +31,7 @@ export const router = createBrowserRouter([
       },
       {
         path: "/create-post",
-        element: <CreatePostPage /> 
+        element: <CreatePostPage/> 
       },
       {
         path: "/mypage",
@@ -45,7 +54,7 @@ export const router = createBrowserRouter([
         element: <KMap/> 
       },
     ],
-    errorElement: <Errorpage/>
+    errorElement: <ErrorPage/>
   }
 ]);