[OD-67] 로그인 여부에 따른 로그인 페이지로 리디렉션 구현

src/App.tsx

@@ -1,59 +1,92 @@
 import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
 import Home from './pages/Home';
+import Login from './pages/Login';
+import SignUp from './pages/SignUp';
+import LoginComplete from './pages/Login/components/LoginComplete';
+import TermsAgreement from './pages/TermsAgreement';
+import KakaoCallback from './pages/Login/components/Kakao/KakaoCallback';
+import NaverCallback from './pages/Login/components/Naver/NaverCallback';
+
 import MyPage from './pages/MyPage';
-import MyPost from './pages/MyPost';
 import ProfileEdit from './pages/ProfileEdit';
 import AccountSetting from './pages/AccountSetting';
 import AccountEdit from './pages/AccountEdit';
 import AccountCancel from './pages/AccountCancel';
 import Verification from './pages/verification';
-import Login from './pages/Login';
-import SignUp from './pages/SignUp';
+
 import ProfileViewer from './pages/ProfileViewer';
-import Chats from './pages/Chats';
-import ChatRoom from './pages/Chats/ChatRoom';
+
+import Post from './pages/Post';
+import MyPost from './pages/MyPost';
+import PostUpload from './pages/PostUpload';
 import PostImageSelect from './pages/PostImageSelect';
 import PostInstaConnect from './pages/PostInstaConnect';
 import PostInstaFeedSelect from './pages/PostInstaFeedSelect';
-import PostUpload from './pages/PostUpload';
-import Post from './pages/Post';
-import KakaoCallback from './pages/Login/components/Kakao/KakaoCallback';
-import NaverCallback from './pages/Login/components/Naver/NaverCallback';
-import LoginComplete from './pages/Login/components/LoginComplete';
-import TermsAgreement from './pages/TermsAgreement';
+
+import Chats from './pages/Chats';
+import ChatRoom from './pages/Chats/ChatRoom';
+
+import NotFound from './pages/NotFound';
+
+const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
+	const isAuthenticated = Boolean(localStorage.getItem('new_jwt_token'));
+	return isAuthenticated ? children : <Navigate to="/login" />;
+};
+
+// 인증이 필요한 페이지 배열
+const protectedRoutes = [
+	{ path: '/', element: <Home /> },
+
+	// 사용자 프로필 및 계정 관리
+	{ path: '/mypage', element: <MyPage /> },
+	{ path: '/profile/edit', element: <ProfileEdit /> },
+	{ path: '/account-setting', element: <AccountSetting /> },
+	{ path: '/account-edit', element: <AccountEdit /> },
+	{ path: '/account-cancel', element: <AccountCancel /> },
+	{ path: '/verification', element: <Verification /> },
+	{ path: '/users/:userId', element: <ProfileViewer /> },
+
+	{ path: '/post/:postId', element: <Post /> },
+	{ path: '/my-post/:postId', element: <MyPost /> },
+	{ path: '/upload', element: <PostUpload /> },
+	{ path: '/image-select', element: <PostImageSelect /> },
+	{ path: '/insta-connect', element: <PostInstaConnect /> },
+	{ path: '/insta-feed-select', element: <PostInstaFeedSelect /> },
+
+	// 메시지/채팅
+	{ path: '/chats', element: <Chats /> },
+	{ path: '/chats/:chatRoomId', element: <ChatRoom /> },
+];
+
+// 인증이 필요 없는 페이지 배열
+const publicRoutes = [
+	{ path: '/login', element: <Login /> },
+	{ path: '/signup', element: <SignUp /> },
+	{ path: '/login/complete', element: <LoginComplete /> },
+	{ path: '/terms-agreement', element: <TermsAgreement /> },
+
+	// 콜백
+	{ path: '/auth/kakao/callback', element: <KakaoCallback /> },
+	{ path: '/auth/naver/callback', element: <NaverCallback /> },
+];
 
 const App: React.FC = () => {
 	return (
 		<BrowserRouter>
 			<Routes>
-				<Route path="/" element={<Home />} />
-				<Route path="/chats/:chatRoomId" element={<ChatRoom />} />
-				<Route path="/mypage" element={<MyPage />} />
-				<Route path="/my-post/:postId" element={<MyPost />} />
-				<Route path="/profile/edit" element={<ProfileEdit />} />
-				<Route path="/account-setting" element={<AccountSetting />} />
-
-				<Route path="/account-edit" element={<AccountEdit />} />
-				<Route path="/account-cancel" element={<AccountCancel />} />
-				<Route path="/Verification" element={<Verification />} />
-
-				<Route path="/login" element={<Login />} />
-				<Route path="/login/complete" element={<LoginComplete />}></Route>
-				<Route path="/terms-agreement" element={<TermsAgreement />} />
-				<Route path="/chats" element={<Chats />} />
-
-				<Route path="/image-select" element={<PostImageSelect />} />
-				<Route path="/insta-connect" element={<PostInstaConnect />} />
-				<Route path="/insta-feed-select" element={<PostInstaFeedSelect />} />
-				<Route path="/upload" element={<PostUpload />} />
-
-				<Route path="/post/:postId" element={<Post />} />
-				<Route path="/users/:userId" element={<ProfileViewer />} />
-				<Route path="signup" element={<SignUp />} />
-
-				<Route path="/auth/kakao/callback" element={<KakaoCallback />}></Route>
-				<Route path="/auth/naver/callback" element={<NaverCallback />}></Route>
+				{/* 인증이 필요한 페이지 */}
+				{protectedRoutes.map(({ path, element }) => (
+					<Route key={path} path={path} element={<ProtectedRoute>{element}</ProtectedRoute>} />
+				))}
+
+				{/* 인증이 필요 없는 페이지 */}
+				{publicRoutes.map(({ path, element }) => (
+					<Route key={path} path={path} element={element} />
+				))}
+
+				{/* 없는 페이지에 대한 처리 */}
+				<Route path="*" element={<NotFound />} />
 			</Routes>
 		</BrowserRouter>
 	);

src/pages/NotFound/index.tsx

@@ -0,0 +1,44 @@
+import { useNavigate } from 'react-router-dom';
+import { OODDFrame } from '../../components/Frame/Frame';
+import { NotFoundContainer, TextContainer, ButtonContainer, StyledButton } from './styles';
+import { StyledText } from '../../components/Text/StyledText';
+import theme from '../../styles/theme';
+
+const NotFound = () => {
+	const navigate = useNavigate();
+
+	return (
+		<OODDFrame>
+			<NotFoundContainer>
+				<TextContainer>
+					<StyledText $textTheme={{ style: 'display1-bold' }} color={theme.colors.pink3}>
+						404 ERROR
+					</StyledText>
+					<StyledText $textTheme={{ style: 'headline2-medium' }}>죄송합니다. 페이지를 찾을 수 없습니다.</StyledText>
+					<div>
+						<StyledText $textTheme={{ style: 'body2-regular' }}>페이지의 주소가 잘못 입력되었거나,</StyledText>
+						<StyledText $textTheme={{ style: 'body2-regular' }}>
+							요청하신 페이지의 주소가 변경, 삭제되어 찾을 수 없습니다.
+						</StyledText>
+					</div>
+				</TextContainer>
+				<ButtonContainer>
+					<StyledButton as="a" href="/" $textTheme={{ style: 'body2-regular' }} color={theme.colors.pink3}>
+						메인으로
+					</StyledButton>
+					<StyledButton
+						as="button"
+						onClick={() => navigate(-1)}
+						className="prev"
+						$textTheme={{ style: 'body2-regular' }}
+						color={theme.colors.white}
+					>
+						이전으로
+					</StyledButton>
+				</ButtonContainer>
+			</NotFoundContainer>
+		</OODDFrame>
+	);
+};
+
+export default NotFound;

src/pages/NotFound/styles.tsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import { StyledText } from '../../components/Text/StyledText';
+
+export const NotFoundContainer = styled.div`
+	display: flex;
+	height: 80%;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+`;
+
+export const TextContainer = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 10px;
+
+	div {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+`;
+
+export const ButtonContainer = styled.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+	margin: 20px;
+`;
+
+export const StyledButton = styled(StyledText)`
+	display: inline-block;
+	text-align: center;
+	padding: 6px 16px;
+	border: 1px solid ${({ theme }) => theme.colors.pink3};
+	border-radius: 8px;
+	cursor: pointer;
+	text-decoration: none;
+
+	&.prev {
+		background-color: ${({ theme }) => theme.colors.pink3};
+		color: ${({ theme }) => theme.colors.white};
+	}
+`;

src/recoil/Home/FeedsAtom.ts

@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { PostSummary } from '../../apis/post/dto';
+
+export const FeedsAtom = atom<PostSummary[] | []>({
+	key: 'FeedsAtom',
+	default: [],
+});

src/recoil/Home/MatchingCommentBottomSheetAtom.ts

@@ -0,0 +1,12 @@
+import { atom } from 'recoil';
+import { MatchingInfoDto } from '../../pages/Home/dto';
+
+export const IsMatchingCommentBottomSheetOpenAtom = atom<boolean>({
+	key: 'isMatchingCommentBottomSheetOpenAtom',
+	default: false,
+});
+
+export const MatchingInfoAtom = atom<MatchingInfoDto | null>({
+	key: 'matchingInfoAtom',
+	default: null,
+});

src/recoil/Home/SelectedTagsAtom.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const SelectedTagsAtom = atom<number[]>({
+	key: 'SelectedTagsAtom',
+	default: [],
+});