Merge pull request #100 from oodd-team/feat/OD-157

[OD-157] myPage & profileViewer 조건부렌더링으로 수정

Author: gustn99

src/App.tsx

@@ -6,15 +6,13 @@ import SignUp from './pages/SignUp';
 import LoginComplete from './pages/Login/components/LoginComplete';
 import TermsAgreement from './pages/TermsAgreement';
 
-import MyPage from './pages/MyPage';
+import Profile from './pages/Profile';
 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 ProfileViewer from './pages/ProfileViewer';
-
 import Post from './pages/Post';
 import MyPost from './pages/MyPost';
 import PostUpload from './pages/PostUpload';
@@ -37,13 +35,12 @@ const protectedRoutes = [
 	{ path: '/', element: <Home /> },
 
 	// 사용자 프로필 및 계정 관리
-	{ path: '/mypage', element: <MyPage /> },
+	{ path: '/profile/:userId', element: <Profile /> },
 	{ 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 /> },

src/components/NavBar/index.tsx

@@ -32,16 +32,18 @@ import { StyledText } from '../Text/StyledText';
 import Modal from '../Modal';
 import { ModalProps } from '../Modal/dto';
 
+const userId = localStorage.getItem('my_id');
+
 const tabs = [
 	{ name: 'Chats', iconSelected: Chat_f, iconUnselected: Chat_s, route: '/chats' },
 	{ name: 'Home', iconSelected: Home_f, iconUnselected: Home_s, route: '/' },
-	{ name: 'Profile', iconSelected: Profile_f, iconUnselected: Profile_s, route: '/mypage' },
+	{ name: 'Profile', iconSelected: Profile_f, iconUnselected: Profile_s, route: `/profile/${userId}` },
 ];
 
 const desktopTabs = [
 	{ name: 'Home', iconSelected: homeFillDesktopIcon, iconUnselected: homeDesktopIcon, route: '/' },
 	{ name: 'Chats', iconSelected: chatFillDesktopIcon, iconUnselected: chatDesktopIcon, route: '/chats' },
-	{ name: 'Profile', iconSelected: profileFillDesktopIcon, iconUnselected: profileDesktopIcon, route: '/mypage' },
+	{ name: 'Profile', iconSelected: profileFillDesktopIcon, iconUnselected: profileDesktopIcon, route: `/profile/${userId}` },
 ];
 
 const NavBar: React.FC = () => {

src/components/PostBase/LikeCommentBottomSheetContent/index.tsx

@@ -321,7 +321,7 @@ const LikeCommentBottomSheetContent: React.FC<LikeCommentBottomSheetProps> = ({
 
 		if (String(myUserId) === String(userId)) {
 			// 나인 경우
-			nav('/mypage');
+			nav(`/profile/${userId}`);
 		} else {
 			// 다른 유저인 경우
 			nav(`/users/${userId}`);

src/components/PostBase/index.tsx

@@ -62,6 +62,8 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
 	const [activeTab, setActiveTab] = useState<'likes' | 'comments'>('likes'); // activeTab state
 
 	const nav = useNavigate();
+	const userId = localStorage.getItem('my_id');
+
 
 	useEffect(() => {
 		setPostId(Number(postId));
@@ -100,7 +102,7 @@ const PostBase: React.FC<PostBaseProps> = ({ onClickMenu }) => {
 	const handleUserClick = () => {
 		if (post?.isPostWriter) {
 			// 내 게시물인 경우
-			nav('/mypage');
+			nav(`/profile/${userId}`);
 		} else {
 			// 다른 유저의 게시물인 경우
 			nav(`/users/${post?.user.id}`);

src/pages/MyPage/index.tsx

@@ -28,6 +28,8 @@ const MyPost: React.FC = () => {
 	const [isApiResponseModalOpen, setIsApiResponseModalOpen] = useState(false);
 	const [pinPostResultlModalContent, setPinPostResultlModalContent] = useState('');
 	const navigate = useNavigate();
+	const userId = localStorage.getItem('my_id');
+
 
 	useEffect(() => {
 		if (isPostRepresentative) {
@@ -105,9 +107,9 @@ const MyPost: React.FC = () => {
 
 			if (response.isSuccess) {
 				setPinPostResultlModalContent('OOTD 삭제에 성공했어요');
-				// 1초 뒤에 mypage로 이동
+
 				setTimeout(() => {
-					navigate('/mypage');
+					navigate(`/profile/${userId}`);
 				}, 1000);
 			} else {
 				setPinPostResultlModalContent(`OOTD 삭제에 실패했어요\n잠시 뒤 다시 시도해 보세요`);

src/pages/MyPost/index.tsx

@@ -35,9 +35,10 @@ const PostImageSelect: React.FC<ImageSelectModalProps> = () => {
 	const fileInputRef = useRef<HTMLInputElement | null>(null);
 	const location = useLocation();
 	const navigate = useNavigate();
+	const userId = localStorage.getItem('my_id');
 
 	const handleClose = () => {
-		navigate('/mypage');
+		navigate(`/profile/${userId}`);
 	};
 
 	const handlePrev = () => {

src/pages/PostImageSelect/index.tsx

@@ -22,6 +22,7 @@ const PostInstaFeedSelect: React.FC<InstaFeedSelectModalProps> = () => {
 	const [posts, setPosts] = useState<Post[]>([]); // Post 타입으로 지정
 	const [, setImages] = useRecoilState(postImagesAtom);
 	const navigate = useNavigate();
+	const userId = localStorage.getItem('my_id');
 
 	// 인스타그램 데이터 가져오는 함수
 	const fetchInstagramData = async (accessToken: string) => {
@@ -70,7 +71,7 @@ const PostInstaFeedSelect: React.FC<InstaFeedSelectModalProps> = () => {
 
 	// 페이지 종료 함수
 	const handleClose = () => {
-		navigate('/mypage'); // 마이페이지로 이동
+		navigate(`/profile/${userId}`); 
 	};
 
 	return (

src/pages/PostInstaFeedSelect/index.tsx

@@ -66,6 +66,7 @@ const PostUpload: React.FC<PostUploadModalProps> = () => {
 	const [modalContent, setModalContent] = useState('알 수 없는 오류입니다.\n관리자에게 문의해 주세요.');
 	const location = useLocation();
 	const navigate = useNavigate();
+	const userId = localStorage.getItem('my_id');
 
 	const styletags = [
 		'classic',
@@ -286,7 +287,7 @@ const PostUpload: React.FC<PostUploadModalProps> = () => {
 			setSelectedStyletag([]);
 			setMode('');
 
-			navigate('/mypage');
+			navigate(`/profile/${userId}`);
 		} catch (error) {
 			const errorMessage = handleError(error, 'post');
 			setModalContent(errorMessage);