리팩토링 v1.2.1

package.json

@@ -12,6 +12,8 @@
     "start:json-server": "json-server --watch db.json --port 5000"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.70.0",
+    "@tanstack/react-query-devtools": "^5.70.0",
     "@types/styled-components": "^5.1.34",
     "axios": "^1.7.2",
     "dayjs": "^1.11.12",

src/apis/post/index.ts

@@ -1,3 +1,5 @@
+import { useQuery } from '@tanstack/react-query';
+
 import { newRequest } from '@apis/core';
 
 import type { EmptySuccessResponse } from '@apis/core/dto';
@@ -17,8 +19,15 @@ export const createPostApi = (data: CreatePostRequest) => newRequest.post<Create
 
 // 게시글 리스트 조회
 // 전체 게시글 리스트
-export const getPostListApi = (page: number = 1, take: number = 10) =>
-	newRequest.get<GetPostListResponse>(`/post`, { params: { page, take } });
+export const getPostListApi = async ({ pageParam = 1 }) => {
+	const response = await newRequest.get<GetPostListResponse>('/post', {
+		params: { page: pageParam, take: 10 },
+	});
+	return {
+		posts: response.data.post,
+		nextPage: response.data.post.length > 0 ? pageParam + 1 : undefined, // 다음 페이지 여부 확인
+	};
+};
 // 유저 게시글 리스트
 export const getUserPostListApi = (page: number = 1, take: number = 10, userId: number) =>
 	newRequest.get<GetUserPostListResponse>(`/post`, { params: { page, take, userId } });
@@ -36,3 +45,11 @@ export const deletePostApi = (postId: number) => newRequest.delete<EmptySuccessR
 // 대표 게시글 지정
 export const modifyPostRepresentativeStatusApi = (postId: number) =>
 	newRequest.patch<EmptySuccessResponse>(`/post/${postId}/is-representative`);
+
+export const usePostDetail = (postId: number) => {
+	return useQuery({
+		queryKey: ['postDetail', postId],
+		queryFn: () => getPostDetailApi(postId),
+		enabled: !!postId, // postId가 존재할 때만 요청 수행
+	});
+};

src/components/Skeleton/index.tsx

@@ -0,0 +1,37 @@
+import { SkeletonContainer } from './styles';
+
+interface SkeletonProps {
+	width?: string | number;
+	height?: string | number;
+	borderRadius?: string | number;
+	className?: string;
+	style?: React.CSSProperties;
+}
+
+const Skeleton: React.FC<SkeletonProps> = ({
+	width = '100%',
+	height = '16px',
+	borderRadius = '5px',
+	className = '',
+}) => {
+	// width와 height가 숫자인 경우 rem 단위를 추가
+	const getSize = (size: string | number) => {
+		if (typeof size === 'number') {
+			return `${size}rem`;
+		}
+		return size;
+	};
+
+	return (
+		<SkeletonContainer
+			className={className}
+			style={{
+				width: getSize(width),
+				height: getSize(height),
+				borderRadius: getSize(borderRadius),
+			}}
+		/>
+	);
+};
+
+export default Skeleton;

src/components/Skeleton/styles.tsx

@@ -0,0 +1,19 @@
+import { styled } from 'styled-components';
+
+export const SkeletonContainer = styled.div`
+	background-color: #e0e0e0;
+	position: relative;
+	overflow: hidden;
+	background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
+	background-size: 200% 100%;
+	animation: shimmer 1.5s infinite;
+
+	@keyframes shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+`;

src/main.tsx

@@ -1,3 +1,5 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { createRoot } from 'react-dom/client';
 import { RecoilRoot } from 'recoil';
 import { ThemeProvider } from 'styled-components';
@@ -10,13 +12,18 @@ import { SocketProvider } from '@context/SocketProvider';
 
 import App from './App';
 
+const queryClient = new QueryClient();
+
 createRoot(document.getElementById('root')!).render(
 	<ThemeProvider theme={theme}>
-		<GlobalStyle />
-		<RecoilRoot>
-			<SocketProvider>
-				<App />
-			</SocketProvider>
-		</RecoilRoot>
+		<QueryClientProvider client={queryClient}>
+			<GlobalStyle />
+			<RecoilRoot>
+				<SocketProvider>
+					<App />
+					<ReactQueryDevtools initialIsOpen={false} />
+				</SocketProvider>
+			</RecoilRoot>
+		</QueryClientProvider>
 	</ThemeProvider>,
 );

src/pages/Account/AccountCancel/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import theme from '@styles/theme';
@@ -11,6 +11,7 @@ import back from '@assets/arrow/left.svg';
 import BottomButton from '@components/BottomButton/index';
 import { OODDFrame } from '@components/Frame/Frame';
 import Modal from '@components/Modal/index';
+import Skeleton from '@components/Skeleton';
 import { StyledText } from '@components/Text/StyledText';
 import TopBar from '@components/TopBar/index';
 
@@ -30,8 +31,15 @@ const AccountCancel: React.FC = () => {
 	const [isChecked, setIsChecked] = useState(false);
 	const [modalContent, setModalContent] = useState<string | null>(null);
 	const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+	const [isLoading, setIsLoading] = useState(true); // Loading state
 	const navigate = useNavigate();
 
+	useEffect(() => {
+		setTimeout(() => {
+			setIsLoading(false);
+		}, 1000);
+	}, []);
+
 	const handleCheckboxChange = () => {
 		setIsChecked(!isChecked);
 	};
@@ -79,6 +87,23 @@ const AccountCancel: React.FC = () => {
 		}
 	};
 
+	if (isLoading) {
+		return (
+			<OODDFrame>
+				<CancelContainer>
+					<TopBar text="회원 탈퇴" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
+					<SubTitle>
+						<StyledText as="div" $textTheme={{ style: 'headline2-medium' }} color={theme.colors.text.primary}>
+							OOTD 탈퇴 전 확인하세요!
+							<Skeleton width="100%" height={25} />
+						</StyledText>
+					</SubTitle>
+				</CancelContainer>
+				<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
+			</OODDFrame>
+		);
+	}
+
 	return (
 		<OODDFrame>
 			<CancelContainer>

src/pages/Account/AccountSetting/index.tsx

@@ -12,8 +12,8 @@ import leave from '@assets/default/leave.svg';
 import Profile_s from '@assets/default/my-page.svg';
 
 import { OODDFrame } from '@components/Frame/Frame';
-import Loading from '@components/Loading/index';
 import Modal from '@components/Modal';
+import Skeleton from '@components/Skeleton';
 import { StyledText } from '@components/Text/StyledText';
 import TopBar from '@components/TopBar/index';
 
@@ -44,8 +44,7 @@ const AccountSetting: React.FC = () => {
 				setIsLoading(false);
 			}
 		};
-
-		getUserInfo();
+		setTimeout(getUserInfo, 1000);
 	}, []);
 
 	const handleConfirmLogout = () => {
@@ -68,7 +67,33 @@ const AccountSetting: React.FC = () => {
 	};
 
 	if (isLoading) {
-		return <Loading />;
+		return (
+			<OODDFrame>
+				<ProfileEditContainer>
+					<TopBar text="계정 관리" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
+					<ProfilePicWrapper>
+						<ProfilePic>
+							<Skeleton width={7.5} height={7.5} borderRadius={5} />
+						</ProfilePic>{' '}
+						<Row>
+							<Skeleton width="60%" height={1.25} />
+						</Row>
+						<Row>
+							<Skeleton width="100%" height={1.25} />
+						</Row>
+					</ProfilePicWrapper>
+
+					<List>
+						<ListItem>
+							<Skeleton width="100%" height={2.5} />
+						</ListItem>
+						<ListItem>
+							<Skeleton width="100%" height={2.5} />
+						</ListItem>
+					</List>
+				</ProfileEditContainer>
+			</OODDFrame>
+		);
 	}
 
 	return (

src/pages/Account/AccountSetting/styles.tsx

@@ -13,8 +13,6 @@ export const ProfilePicWrapper = styled.div`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-bottom: 1.25rem;
-	margin-top: 1.5rem;
 `;
 
 export const ProfilePic = styled.div`
@@ -24,7 +22,6 @@ export const ProfilePic = styled.div`
 	border-radius: 50%;
 	overflow: hidden;
 	margin-top: 2.125rem;
-	margin-bottom: 1.375rem;
 
 	img {
 		width: 100%;
@@ -42,7 +39,7 @@ export const Row = styled.div`
 	justify-content: center;
 	align-items: center;
 	width: 100%;
-	margin-bottom: 0.625rem;
+	margin-top: 10px;
 
 	${Label} {
 		width: auto;
@@ -67,7 +64,8 @@ export const List = styled.ul`
 export const ListItem = styled.li`
 	display: flex;
 	align-items: center;
-	padding: 0.9375rem 1.25rem;
+	padding: 15px 10px;
+
 	border-bottom: 0px solid ${({ theme }) => theme.colors.background.divider};
 	cursor: pointer;