From 03d036f19ad6f5f6c76d3ea43b1451639733a931 Mon Sep 17 00:00:00 2001 From: sinamong0620 Date: Wed, 25 Sep 2024 04:11:15 +0900 Subject: [PATCH 1/2] =?UTF-8?q?#83=20fix:=20=EC=97=90=EB=9F=AC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 6 +- src/api/BoardApi.tsx | 8 +- src/pages/Error403Page.tsx | 287 ++++++++++++++++++ src/pages/{ErrorPage.tsx => Error404Page.tsx} | 4 +- 4 files changed, 299 insertions(+), 6 deletions(-) create mode 100644 src/pages/Error403Page.tsx rename src/pages/{ErrorPage.tsx => Error404Page.tsx} (99%) diff --git a/src/App.tsx b/src/App.tsx index fb12b10..0c105cb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,7 +22,6 @@ import ChallengeCommunityPage from './pages/ChallengeCommunityPage'; import CreateChallengePage from './pages/CreateChallengePage'; import ChallengeDetailPage from './pages/ChallengeDetailPage'; import TutorialPage from './pages/TutorialPage'; -import ErrorPage from './pages/ErrorPage'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; @@ -34,6 +33,8 @@ import 'react-toastify/dist/ReactToastify.css'; import './App.css'; import { useSSE } from './hooks/useSSE'; import ProtectedRoute from './components/ProtectedRoute'; +import Error404Page from './pages/Error404Page'; +import Error403Page from './pages/Error403Page'; const queryClient = new QueryClient(); @@ -76,7 +77,8 @@ const router = (isLoggedIn: boolean) => {/* 로그인 상관없이 접근 가능한 라우터. 보호되지 않는 라우터 */} } /> - } /> + } /> + } /> {/* 보호된 경로들에 ProtectedRoute 적용 */} { + const navigate = useNavigate(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* ERROR */} + + 죄송합니다. 해당 대시보드에 접근할 권한이 없습니다. + + navigate('/')}>뒤로가기 + + ); +}; + +export default Error403Page; diff --git a/src/pages/ErrorPage.tsx b/src/pages/Error404Page.tsx similarity index 99% rename from src/pages/ErrorPage.tsx rename to src/pages/Error404Page.tsx index 52e642f..e0d6a8a 100644 --- a/src/pages/ErrorPage.tsx +++ b/src/pages/Error404Page.tsx @@ -7,7 +7,7 @@ const ErrorPage = () => { return ( - {/* { - */} + 404 ERROR From c62608b2f56f0c53ff81b478921d01c68e1c3569 Mon Sep 17 00:00:00 2001 From: sinamong0620 Date: Wed, 25 Sep 2024 05:18:08 +0900 Subject: [PATCH 2/2] =?UTF-8?q?#83=20fix=20:=20=ED=94=84=EB=A1=9C=ED=95=84?= =?UTF-8?q?=20=EC=A0=95=EB=B3=B4=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ProfileUpdateModal.tsx | 12 +++++++++--- src/pages/MyPage.tsx | 8 +++++++- src/styles/ModalStyled.tsx | 2 +- src/styles/MyPageStyled.tsx | 16 +++++++++++++++- src/styles/NavBarStyled.tsx | 1 + 5 files changed, 33 insertions(+), 6 deletions(-) diff --git a/src/components/ProfileUpdateModal.tsx b/src/components/ProfileUpdateModal.tsx index 753b835..84e4f03 100644 --- a/src/components/ProfileUpdateModal.tsx +++ b/src/components/ProfileUpdateModal.tsx @@ -7,16 +7,19 @@ import { useAtom } from 'jotai'; import { descriptionAtom, nicknameAtom } from '../contexts/NickName'; import { useQuery } from '@tanstack/react-query'; import { userInfoApi } from '../api/UserApi'; +import closebutton from '../img/closebutton.png'; import { unreadCount } from '../contexts/sseAtom'; type Props = { onModalVisibleFunc: () => void; + nickname: string | undefined; + introduction: string | undefined; }; -const ProfileUpdateModal = ({ onModalVisibleFunc }: Props) => { +const ProfileUpdateModal = ({ onModalVisibleFunc, nickname, introduction }: Props) => { const [, setNicknameAtom] = useAtom(nicknameAtom); const [, setDescriptionAtom] = useAtom(descriptionAtom); - const [newNickname, setNewNickname] = useState(''); - const [newDescription, setNewDescription] = useState(''); + const [newNickname, setNewNickname] = useState(nickname || ''); + const [newDescription, setNewDescription] = useState(introduction || ''); const [errMsg, setErrMsg] = useState('한글자 이상은 작성해주세요!'); const [descriptionErrMsg, setDescriptionErrMsg] = useState('한글자 이상은 작성해주세요!'); @@ -69,6 +72,9 @@ const ProfileUpdateModal = ({ onModalVisibleFunc }: Props) => { return ( + + + 내 정보수정 diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx index 5f9e90c..85d70cc 100644 --- a/src/pages/MyPage.tsx +++ b/src/pages/MyPage.tsx @@ -319,7 +319,13 @@ const MyPage = () => { - {visibleModal && } + {visibleModal && ( + + )} ); }; diff --git a/src/styles/ModalStyled.tsx b/src/styles/ModalStyled.tsx index 7eabfc3..9629f04 100644 --- a/src/styles/ModalStyled.tsx +++ b/src/styles/ModalStyled.tsx @@ -91,7 +91,7 @@ export const BtnUpdate = styled.button` export const StyledModalUpdate = styled(Modal)` width: 27rem; - padding: 2rem 3rem; + padding: 1rem 1rem 2rem 1rem; /* 화면 중앙에 고정 (navbar 크기 제외) */ position: fixed; diff --git a/src/styles/MyPageStyled.tsx b/src/styles/MyPageStyled.tsx index a9e5335..159d2be 100644 --- a/src/styles/MyPageStyled.tsx +++ b/src/styles/MyPageStyled.tsx @@ -103,6 +103,20 @@ export const CahllengeInfo = styled.div` } `; +export const CloseButtonWrapper = styled.div` + display: flex; + width: 100%; + justify-content: end; + + img { + width: 1rem; + } + + img:hover { + cursor: pointer; + } +`; + export const ButtonContainer = styled.div<{ teamBool: string }>` display: flex; justify-content: space-around; @@ -188,7 +202,7 @@ export const EditContainer = styled.div` } p { - color: red; + color: ${theme.color.main}; margin-top: 0.5rem; margin-left: 0.5rem; } diff --git a/src/styles/NavBarStyled.tsx b/src/styles/NavBarStyled.tsx index 6dd2118..e2dfc36 100644 --- a/src/styles/NavBarStyled.tsx +++ b/src/styles/NavBarStyled.tsx @@ -2,6 +2,7 @@ import { styled } from 'styled-components'; import theme from '../styles/Theme/Theme'; export const NavBarLayout = styled.nav` + position: sticky; width: 12.5rem; min-width: 12.5rem; height: 100vh;