From 5aadf1c969f50a5fdf1b9013d71b1b0c7e901b49 Mon Sep 17 00:00:00 2001 From: KingBoRam Date: Wed, 4 Sep 2024 15:10:05 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=E2=9C=A8=20Feat:=20NotFound=20page=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/404.svg | 9 +++++++++ src/App.tsx | 3 +++ src/components/layout/HeaderLanding.tsx | 10 +++++++--- src/pages/notfound/NotFound.tsx | 20 ++++++++++++++++++++ src/pages/notfound/index.tsx | 3 +++ 5 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 public/images/404.svg create mode 100644 src/pages/notfound/NotFound.tsx create mode 100644 src/pages/notfound/index.tsx diff --git a/public/images/404.svg b/public/images/404.svg new file mode 100644 index 0000000..a33489c --- /dev/null +++ b/public/images/404.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/App.tsx b/src/App.tsx index 746e985..9458051 100644 --- 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() { } /> } /> + + } /> ); diff --git a/src/components/layout/HeaderLanding.tsx b/src/components/layout/HeaderLanding.tsx index f510a1f..7a958af 100644 --- 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 (
-
- Logo -
+

+ + Logo + +

); }; diff --git a/src/pages/notfound/NotFound.tsx b/src/pages/notfound/NotFound.tsx new file mode 100644 index 0000000..1caaa2a --- /dev/null +++ b/src/pages/notfound/NotFound.tsx @@ -0,0 +1,20 @@ +import HeaderLanding from '../../components/layout/HeaderLanding'; + +const NotFound = () => { + return ( + <> +
+ +
+
+ +

요청하신 페이지를 찾을 수 없습니다.

+

+ 존재하지 않는 주소를 입력하셨거나
요청하신 페이지의 주소가 변경, 삭제되어 찾을 수 없습니다. +

+
+ + ); +}; + +export default NotFound; diff --git a/src/pages/notfound/index.tsx b/src/pages/notfound/index.tsx new file mode 100644 index 0000000..a09bef3 --- /dev/null +++ b/src/pages/notfound/index.tsx @@ -0,0 +1,3 @@ +import NotFound from './NotFound'; + +export { NotFound }; From dcdb3b38ed816d2d67ca2fb882a53cab86791640 Mon Sep 17 00:00:00 2001 From: KingBoRam Date: Wed, 4 Sep 2024 15:10:54 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EA=B2=BD=EB=A1=9C=EA=B0=80=20=EC=95=84=EB=8B=8C=20?= =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EB=8C=80=EC=B2=B4=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=EB=A1=9C=20=EB=85=B8=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Image.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/common/Image.tsx b/src/components/common/Image.tsx index 10593ae..5fe3d20 100644 --- 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, 'src' | 'alt'> { @@ -7,13 +7,28 @@ interface ImageProps extends Omit, 'sr } const Image: React.FC = (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 ; + const handleError = () => { + // 이미지 로드 실패 시 기본 이미지로 변경 + setImgSrc('/images/anonymous_avatars.svg'); + }; + + return ( + {props.alt} + ); }; export default Image; From 78b0e39f28e230e2c5e9573e4ec4c8ba47aa9b43 Mon Sep 17 00:00:00 2001 From: KingBoRam Date: Wed, 4 Sep 2024 15:11:34 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=94=A5=20Edit:=20=EC=86=8C=EA=B0=9C?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=97=A4=EB=8D=94=20=EB=AC=B8?= =?UTF-8?q?=EA=B5=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 2cc2d90..507cd6f 100644 --- 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) { From 6427ac325577fdee3b0a1dc8b3545e1939406497 Mon Sep 17 00:00:00 2001 From: KingBoRam Date: Wed, 4 Sep 2024 15:12:30 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=EC=86=8C=EA=B0=9C?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B0=9D=EC=B2=B4=20=EA=B0=AF?= =?UTF-8?q?=EC=88=98=20=EB=82=98=EC=98=A4=EB=8D=98=20=ED=98=84=EC=83=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/introduction/Introduction.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/introduction/Introduction.tsx b/src/pages/introduction/Introduction.tsx index a3589f9..fd1fa29 100644 --- 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 ( -
{Object.keys(response).length && }
- ); -} + return
{}
; +}; + +export default Introduction; From 5d5527eba63532dbc5173213ace96b94ca20520a Mon Sep 17 00:00:00 2001 From: KingBoRam Date: Wed, 4 Sep 2024 15:13:07 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EA=B2=BD=EB=A1=9C=EA=B0=80=20=EC=95=84=EB=8B=90=20?= =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EB=8C=80=EC=B2=B4=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EB=85=B8=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/thunder/ThunderCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/thunder/ThunderCard.tsx b/src/components/thunder/ThunderCard.tsx index 8383dc5..45f6c0c 100644 --- a/src/components/thunder/ThunderCard.tsx +++ b/src/components/thunder/ThunderCard.tsx @@ -42,7 +42,7 @@ const ThunderCard: React.FC = ({ 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} From b16fb88d7f36b860bf0817334e347327d6254201 Mon Sep 17 00:00:00 2001 From: KingBoRam Date: Wed, 4 Sep 2024 15:14:07 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=94=A5=20Edit:=20=EC=97=86=EB=8A=94?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=91=EA=B7=BC=EC=8B=9C=20?= =?UTF-8?q?Notfound=20/=20loading=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/board/BoardId.tsx | 19 ++++++++++++++++--- src/pages/thunder/ThunderId.tsx | 11 ++++++++++- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/pages/board/BoardId.tsx b/src/pages/board/BoardId.tsx index 6a77eda..2de5888 100644 --- 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(null); const [commentToEdit, setCommentToEdit] = useState(null); const [editCommentText, setEditCommentText] = useState(''); + 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 ; + } + if (!selectedBoardItem) { - return
게시물 정보를 불러올 수 없습니다.
; + return ; } 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'; + }} /> @@ -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'; + }} />
{comment.nickname}
diff --git a/src/pages/thunder/ThunderId.tsx b/src/pages/thunder/ThunderId.tsx index 9e2f385..9be7063 100644 --- 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(null); // 선택된 모임 정보를 관리 const [selectedImages, setSelectedImages] = useState([]); // 선택된 이미지 URL들을 관리 const [meetingMembers, setMeetingMembers] = useState([]); // 모임 멤버 정보를 관리 + 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 ; + } + if (!selectedMeeting) { - return
모임 정보를 불러올 수 없습니다.
; + return ; } // 참여 하기 modal