Merge pull request #29 from KingBoRam/feat/notfound

✨ Feat: NotFound page 생성
OZ-Coding-School · Sep 4, 2024 · 0ee72bb · 0ee72bb
2 parents f367620 + b16fb88
commit 0ee72bb
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 17 deletions.
diff --git a/public/images/404.svg b/public/images/404.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,6 +11,7 @@ import Landing from './pages/Home/Landing.tsx';
 import ProfileId from './pages/profile/ProfileId.tsx';
 import ImageOverview from './pages/Image/ImageOverview.tsx';
 import Introduction from './pages/introduction/Introduction.tsx';
+import NotFound from './pages/notfound/NotFound.tsx';
 
 function App() {
   return (
@@ -67,6 +68,8 @@ function App() {
         <Route path="image" element={<ImageOverview />} />
 
         <Route path="introduction" element={<Introduction />} />
+
+        <Route path="*" element={<NotFound />} />
       </Route>
     </Routes>
   );

diff --git a/src/components/common/Image.tsx b/src/components/common/Image.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
@@ -7,13 +7,28 @@ interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'sr
 }
 
 const Image: React.FC<ImageProps> = (props) => {
+  const [imgSrc, setImgSrc] = useState(props.src); // 이미지 소스를 상태로 관리
   const navigate = useNavigate();
 
   const handleClick = () => {
-    navigate('/image', { state: { src: props.src, alt: props.alt } });
+    navigate('/image', { state: { src: imgSrc, alt: props.alt } });
   };
 
-  return <img {...props} onClick={handleClick} className={`cursor-pointer ${props.className || ''}`} />;
+  const handleError = () => {
+    // 이미지 로드 실패 시 기본 이미지로 변경
+    setImgSrc('/images/anonymous_avatars.svg');
+  };
+
+  return (
+    <img
+      {...props}
+      src={imgSrc}
+      onClick={handleClick}
+      onError={handleError} // 이미지 로드 실패 시 handleError 호출
+      className={`cursor-pointer ${props.className || ''}`}
+      alt={props.alt}
+    />
+  );
 };
 
 export default Image;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -63,7 +63,7 @@ const Header = () => {
 
     if (isImgPath) return '이미지 상세보기';
 
-    if (isIntroductionPath) return '밥피엔스란';
+    if (isIntroductionPath) return '밥피엔스란?';
   };
 
   if (isLandingPage) {

diff --git a/src/components/layout/HeaderLanding.tsx b/src/components/layout/HeaderLanding.tsx
@@ -1,9 +1,13 @@
+import { Link } from 'react-router-dom';
+
 const HeaderLanding = () => {
   return (
     <div className="fixed z-50 mt-0 flex h-[72px] w-full max-w-[600px] items-center justify-center bg-white px-2 py-5 text-xl font-semibold xs:h-[52px]">
-      <div className="flex w-full max-w-[600px] items-center justify-center">
-        <img src="/images/bobpience_logo2.png" alt="Logo" className="h-full w-[150px]" />
-      </div>
+      <h1 className="flex w-full max-w-[600px] items-center justify-center">
+        <Link to={'/'}>
+          <img src="/images/bobpience_logo2.png" alt="Logo" className="h-full w-[150px]" />
+        </Link>
+      </h1>
     </div>
   );
 };

diff --git a/src/components/thunder/ThunderCard.tsx b/src/components/thunder/ThunderCard.tsx
@@ -42,7 +42,7 @@ const ThunderCard: React.FC<ThunderCardProps> = ({
               className={`block h-full w-full object-cover transition-transform duration-200 ${
                 imageLoaded ? 'block' : 'hidden'
               } hover:scale-105`}
-              src={imageError ? defaultImageUrl : meeting_image_url}
+              src={imageError || !meeting_image_url ? defaultImageUrl : meeting_image_url}
               alt={title}
               onLoad={handleImageLoad}
               onError={handleImageError}

diff --git a/src/pages/board/BoardId.tsx b/src/pages/board/BoardId.tsx
@@ -10,6 +10,8 @@ import { IoMdMore } from 'react-icons/io';
 import ModalBottom from '../../components/common/ModalBottom';
 import ModalCenter from '../../components/common/ModalCenter';
 import BoardCommentModal from '../../components/board/BoardCommentModal';
+import { NotFound } from '../notfound';
+import Loading from '../../components/common/Loading';
 
 interface BoardItem {
   uuid: string;
@@ -46,6 +48,7 @@ const BoardId = () => {
   const [commentToDelete, setCommentToDelete] = useState<number | null>(null);
   const [commentToEdit, setCommentToEdit] = useState<number | null>(null);
   const [editCommentText, setEditCommentText] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const fetchBoardItem = async () => {
@@ -64,16 +67,22 @@ const BoardId = () => {
             }),
           ),
         );
+        setIsLoading(false);
       } catch (error) {
         console.error('게시물 정보를 불러오는 중 오류가 발생했습니다:', error);
+        setIsLoading(false);
       }
     };
 
     fetchBoardItem();
   }, []);
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   if (!selectedBoardItem) {
-    return <div>게시물 정보를 불러올 수 없습니다.</div>;
+    return <NotFound />;
   }
 
   const toggleLike = () => {
@@ -194,7 +203,9 @@ const BoardId = () => {
             src={selectedBoardItem.comments[0]?.profile_image_url || '../images/anonymous_avatars.svg'}
             alt="프로필 사진"
             className="mr-2 h-10 w-10 rounded-full"
-            onError={(e) => { e.currentTarget.src = '../images/anonymous_avatars.svg'; }}
+            onError={(e) => {
+              e.currentTarget.src = '../images/anonymous_avatars.svg';
+            }}
           />
         </Link>
 
@@ -260,7 +271,9 @@ const BoardId = () => {
                 src={comment.profile_image_url}
                 alt="프로필 이미지"
                 className="mb-[28px] mr-2 h-8 w-8 rounded-full"
-                onError={(e) => { e.currentTarget.src = '/images/anonymous_avatars.svg'; }}
+                onError={(e) => {
+                  e.currentTarget.src = '/images/anonymous_avatars.svg';
+                }}
               />
               <div>
                 <div className="font-normal">{comment.nickname}</div>

diff --git a/src/pages/introduction/Introduction.tsx b/src/pages/introduction/Introduction.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { NotionRenderer } from 'react-notion';
 
-export default function ReactNotion() {
+const Introduction = () => {
   const [response, setResponse] = useState({});
 
   useEffect(() => {
@@ -22,7 +22,7 @@ export default function ReactNotion() {
     document.head.appendChild(style);
   }, []);
 
-  return (
-    <div className="p-4">{Object.keys(response).length && <NotionRenderer blockMap={response} fullPage={true} />}</div>
-  );
-}
+  return <div className="p-4">{<NotionRenderer blockMap={response} fullPage={true} />}</div>;
+};
+
+export default Introduction;
diff --git a/src/pages/notfound/NotFound.tsx b/src/pages/notfound/NotFound.tsx
@@ -0,0 +1,20 @@
+import HeaderLanding from '../../components/layout/HeaderLanding';
+
+const NotFound = () => {
+  return (
+    <>
+      <div className="fixed top-0 z-50">
+        <HeaderLanding />
+      </div>
+      <div className="flex h-full w-full flex-col items-center justify-center pb-[75px] xs:pb-[65px]">
+        <img src="/images/404.svg" className="h-[300px] w-full"></img>
+        <p className="my-10 text-[20px] font-bold">요청하신 페이지를 찾을 수 없습니다.</p>
+        <p className="mb-10 px-5 text-center text-[16px] font-medium text-[#666666]">
+          존재하지 않는 주소를 입력하셨거나 <br /> 요청하신 페이지의 주소가 변경, 삭제되어 찾을 수 없습니다.
+        </p>
+      </div>
+    </>
+  );
+};
+
+export default NotFound;
diff --git a/src/pages/notfound/index.tsx b/src/pages/notfound/index.tsx
@@ -0,0 +1,3 @@
+import NotFound from './NotFound';
+
+export { NotFound };
diff --git a/src/pages/thunder/ThunderId.tsx b/src/pages/thunder/ThunderId.tsx
@@ -7,6 +7,8 @@ import ContentLoader from 'react-content-loader';
 import { format, differenceInMinutes, differenceInHours } from 'date-fns';
 import { ko } from 'date-fns/locale';
 import { authInstance } from '../../api/util/instance';
+import { NotFound } from '../notfound';
+import Loading from '../../components/common/Loading';
 
 // ThunderId - 소셜다이닝 글 목록 조회
 interface Meeting {
@@ -39,6 +41,7 @@ const ThunderId = () => {
   const [selectedMeeting, setSelectedMeeting] = useState<Meeting | null>(null); // 선택된 모임 정보를 관리
   const [selectedImages, setSelectedImages] = useState<string[]>([]); // 선택된 이미지 URL들을 관리
   const [meetingMembers, setMeetingMembers] = useState<MeetingMember[]>([]); // 모임 멤버 정보를 관리
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const fetchMeeting = async () => {
@@ -49,16 +52,22 @@ const ThunderId = () => {
         console.log('Meeting members:', response.data.meeting_member);
         setSelectedMeeting(response.data.meeting);
         setMeetingMembers(response.data.meeting_member);
+        setIsLoading(false);
       } catch (error) {
         console.error('모임 정보를 불러오는 중 오류가 발생했습니다:', error);
+        setIsLoading(false);
       }
     };
 
     fetchMeeting();
   }, []);
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   if (!selectedMeeting) {
-    return <div>모임 정보를 불러올 수 없습니다.</div>;
+    return <NotFound />;
   }
 
   // 참여 하기 modal
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import NotFound from './NotFound';

		export { NotFound };