diff --git a/frontend/package.json b/frontend/package.json
index cb7270ae1..5b3f60274 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,15 +15,14 @@
     "@emotion/styled": "^11.11.5",
     "@tanstack/react-query": "^5.51.1",
     "@tanstack/react-query-devtools": "^5.51.1",
-    "@testing-library/jest-dom": "^6.4.7",
-    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "dotenv-webpack": "^8.1.0",
+    "jest": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-router": "^6.24.1",
-    "react-router-dom": "^6.24.1",
-    "jest": "^29.7.0"
+    "react-router-dom": "^6.24.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -33,7 +32,9 @@
     "@emotion/babel-plugin": "^11.11.0",
     "@stylelint/postcss-css-in-js": "^0.38.0",
     "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
diff --git a/frontend/src/apis/endpoints.ts b/frontend/src/apis/endpoints.ts
index 1e07ca7f3..5c1809380 100644
--- a/frontend/src/apis/endpoints.ts
+++ b/frontend/src/apis/endpoints.ts
@@ -1,7 +1,14 @@
+export const DETAILED_REVIEW_API_PARAMS = {
+  resource: 'reviews',
+  queryString: {
+    memberId: 'memberId',
+  },
+};
+
 const endPoint = {
   postingReview: `${process.env.API_BASE_URL}/reviews`,
   gettingDetailedReview: (reviewId: number, memberId: number) =>
-    `${process.env.API_BASE_URL}/reviews/${reviewId}?memberId=${memberId}`,
+    `${process.env.API_BASE_URL}/${DETAILED_REVIEW_API_PARAMS.resource}/${reviewId}?${DETAILED_REVIEW_API_PARAMS.queryString.memberId}=${memberId}`,
   gettingDataToWriteReview: (reviewerGroupId: number) =>
     `${process.env.API_BASE_URL}/reviews/write?reviewerGroupId=${reviewerGroupId}`,
   gettingReviewList: (revieweeId: number, lastReviewId: number, memberId: number) =>
diff --git a/frontend/src/apis/review.ts b/frontend/src/apis/review.ts
index 9b7aa7366..24b731613 100644
--- a/frontend/src/apis/review.ts
+++ b/frontend/src/apis/review.ts
@@ -1,4 +1,4 @@
-import { ReviewData, WritingReviewInfoData } from '@/types';
+import { DetailReviewData, ReviewData, WritingReviewInfoData } from '@/types';
 
 import createApiErrorMessage from './apiErrorMessageCreator';
 import endPoint from './endpoints';
@@ -47,7 +47,7 @@ export const getDetailedReviewApi = async ({ reviewId, memberId }: { reviewId: n
   }
 
   const data = await response.json();
-  return data;
+  return data as DetailReviewData;
 };
 
 // 리뷰 리스트
diff --git a/frontend/src/components/common/ReviewComment/index.tsx b/frontend/src/components/common/ReviewComment/index.tsx
deleted file mode 100644
index 64351c54f..000000000
--- a/frontend/src/components/common/ReviewComment/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as S from './styles';
-
-interface ReviewCommentProps {
-  comment: string;
-}
-
-const ReviewComments = ({ comment }: ReviewCommentProps) => {
-  return <S.ReviewComment>{comment}</S.ReviewComment>;
-};
-
-export default ReviewComments;
diff --git a/frontend/src/components/common/RevieweeComments/index.tsx b/frontend/src/components/common/RevieweeComments/index.tsx
new file mode 100644
index 000000000..7e4c89079
--- /dev/null
+++ b/frontend/src/components/common/RevieweeComments/index.tsx
@@ -0,0 +1,13 @@
+import * as S from './styles';
+
+interface RevieweeCommentsProps {
+  comment: string;
+}
+
+const DEFAULT_COMMENTS = '안녕하세요! 리뷰 잘 부탁드립니다.';
+
+const RevieweeComments = ({ comment }: RevieweeCommentsProps) => {
+  return <S.RevieweeComments>{comment || DEFAULT_COMMENTS}</S.RevieweeComments>;
+};
+
+export default RevieweeComments;
diff --git a/frontend/src/components/common/ReviewComment/styles.ts b/frontend/src/components/common/RevieweeComments/styles.ts
similarity index 87%
rename from frontend/src/components/common/ReviewComment/styles.ts
rename to frontend/src/components/common/RevieweeComments/styles.ts
index 3073cad59..d861b5496 100644
--- a/frontend/src/components/common/ReviewComment/styles.ts
+++ b/frontend/src/components/common/RevieweeComments/styles.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const ReviewComment = styled.p`
+export const RevieweeComments = styled.p`
   width: inherit;
   height: 3rem;
   margin-top: 1.6rem;
diff --git a/frontend/src/components/common/index.tsx b/frontend/src/components/common/index.tsx
index 3052e49a4..ed6c91a10 100644
--- a/frontend/src/components/common/index.tsx
+++ b/frontend/src/components/common/index.tsx
@@ -3,7 +3,7 @@ export { default as DropDown } from './DropDown';
 export { default as SearchInput } from './SearchInput';
 export { default as ProjectImg } from './ProjectImg';
 export { default as ReviewDate } from './ReviewDate';
-export { default as ReviewComment } from './ReviewComment';
+export { default as RevieweeComments } from './RevieweeComments';
 export { default as MultilineTextViewer } from './MultilineTextViewer';
 export { default as TopButton } from './TopButton';
 export * from './modals';
diff --git a/frontend/src/components/error/ErrorFallback/index.tsx b/frontend/src/components/error/ErrorFallback/index.tsx
new file mode 100644
index 000000000..92b2fd410
--- /dev/null
+++ b/frontend/src/components/error/ErrorFallback/index.tsx
@@ -0,0 +1,16 @@
+import { FallbackProps } from 'react-error-boundary';
+import { useNavigate } from 'react-router';
+
+import ErrorSection from '../ErrorSection';
+
+const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
+  const navigate = useNavigate();
+  const handleGoHome = () => {
+    resetErrorBoundary();
+    navigate('/'); //TODO : 홈 페이지 경로가 결정되면 변경
+  };
+
+  return <ErrorSection errorMessage={error.message} handleGoHome={handleGoHome} handleReload={resetErrorBoundary} />;
+};
+
+export default ErrorFallback;
diff --git a/frontend/src/pages/ErrorPage/components/ErrorSection/index.tsx b/frontend/src/components/error/ErrorSection/index.tsx
similarity index 75%
rename from frontend/src/pages/ErrorPage/components/ErrorSection/index.tsx
rename to frontend/src/components/error/ErrorSection/index.tsx
index 44f80dcc0..396975857 100644
--- a/frontend/src/pages/ErrorPage/components/ErrorSection/index.tsx
+++ b/frontend/src/components/error/ErrorSection/index.tsx
@@ -13,9 +13,10 @@ interface ErrorSectionProps {
 }
 
 const ErrorSection = ({ errorMessage, handleReload, handleGoHome }: ErrorSectionProps) => {
-  const buttons = [
+  const buttonList = [
     {
       buttonType: 'primary' as ButtonType,
+      key: 'refreshButton',
       text: '새로고침하기',
       image: ReloadIcon,
       imageDescription: '새로고침 이미지',
@@ -23,6 +24,7 @@ const ErrorSection = ({ errorMessage, handleReload, handleGoHome }: ErrorSection
     },
     {
       buttonType: 'secondary' as ButtonType,
+      key: 'homeButton',
       text: '홈으로 이동하기',
       image: HomeIcon,
       imageDescription: '홈 이미지',
@@ -37,16 +39,15 @@ const ErrorSection = ({ errorMessage, handleReload, handleGoHome }: ErrorSection
       </S.ErrorLogoWrapper>
       <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
       <S.Container>
-        {buttons.map((button, index) => (
-          <S.ButtonContainer key={index}>
-            <Button
-              buttonType={button.buttonType}
-              text={button.text}
-              image={button.image}
-              imageDescription={button.imageDescription}
-              onClick={button.onClick}
-            />
-          </S.ButtonContainer>
+        {buttonList.map((button) => (
+          <Button
+            key={button.key}
+            buttonType={button.buttonType}
+            text={button.text}
+            image={button.image}
+            imageDescription={button.imageDescription}
+            onClick={button.onClick}
+          />
         ))}
       </S.Container>
     </S.Layout>
diff --git a/frontend/src/pages/ErrorPage/components/ErrorSection/styles.ts b/frontend/src/components/error/ErrorSection/styles.ts
similarity index 82%
rename from frontend/src/pages/ErrorPage/components/ErrorSection/styles.ts
rename to frontend/src/components/error/ErrorSection/styles.ts
index 8f2911944..b8eae0ad0 100644
--- a/frontend/src/pages/ErrorPage/components/ErrorSection/styles.ts
+++ b/frontend/src/components/error/ErrorSection/styles.ts
@@ -29,13 +29,6 @@ export const Container = styled.div`
   gap: 3.5rem;
   align-items: center;
   justify-content: center;
-`;
-
-export const ButtonContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 3rem;
 
   & > button {
     width: 17rem;
diff --git a/frontend/src/components/error/ErrorSuspenseContainer/index.tsx b/frontend/src/components/error/ErrorSuspenseContainer/index.tsx
new file mode 100644
index 000000000..eca63af03
--- /dev/null
+++ b/frontend/src/components/error/ErrorSuspenseContainer/index.tsx
@@ -0,0 +1,22 @@
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import LoadingPage from '@/pages/LoadingPage';
+import { EssentialPropsWithChildren } from '@/types';
+
+import ErrorFallback from '../ErrorFallback';
+
+const ErrorSuspenseContainer = ({ children }: EssentialPropsWithChildren) => {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={reset}>
+          <Suspense fallback={<LoadingPage />}>{children}</Suspense>
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+};
+
+export default ErrorSuspenseContainer;
diff --git a/frontend/src/components/error/index.tsx b/frontend/src/components/error/index.tsx
new file mode 100644
index 000000000..21f4f669b
--- /dev/null
+++ b/frontend/src/components/error/index.tsx
@@ -0,0 +1,2 @@
+export { default as ErrorSection } from './ErrorSection';
+export { default as ErrorSuspenseContainer } from './ErrorSuspenseContainer';
diff --git a/frontend/src/components/index.tsx b/frontend/src/components/index.tsx
index a54853d52..8d8b4e2ad 100644
--- a/frontend/src/components/index.tsx
+++ b/frontend/src/components/index.tsx
@@ -1,2 +1,3 @@
 export * from './layouts';
 export * from './common';
+export * from './error';
diff --git a/frontend/src/components/layouts/Sidebar/index.tsx b/frontend/src/components/layouts/Sidebar/index.tsx
index 6f15f78a1..9236fd658 100644
--- a/frontend/src/components/layouts/Sidebar/index.tsx
+++ b/frontend/src/components/layouts/Sidebar/index.tsx
@@ -2,6 +2,7 @@ import { useLocation, Link } from 'react-router-dom';
 
 import CloseIcon from '@/assets/close.svg';
 import LogoIcon from '@/assets/logo.svg';
+import { DETAILED_PAGE_MOCK_API_SETTING_VALUES } from '@/mocks/mockData/detailedReviewMockData';
 
 import { PAGE } from '../../../constants';
 
@@ -11,7 +12,7 @@ const PATH = {
   myPage: '/user/mypage',
   reviewWriting: '/user/review-writing',
   reviewPreviewList: '/user/review-preview-list',
-  detailedReview: '/user/detailed-review/0?memberId=1',
+  detailedReview: `/user/detailed-review/${DETAILED_PAGE_MOCK_API_SETTING_VALUES.reviewId}?memberId=${DETAILED_PAGE_MOCK_API_SETTING_VALUES.memberId}`,
   reviewGroupManagement: '/user/review-group-management',
 };
 
diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
index ade74ffe4..4bfc080db 100644
--- a/frontend/src/constants/index.ts
+++ b/frontend/src/constants/index.ts
@@ -1,3 +1,4 @@
 export * from './page';
 export * from './apiErrorMessage';
 export * from './review';
+export * from './queryKeys';
diff --git a/frontend/src/constants/queryKeys.ts b/frontend/src/constants/queryKeys.ts
new file mode 100644
index 000000000..ef3f32e4b
--- /dev/null
+++ b/frontend/src/constants/queryKeys.ts
@@ -0,0 +1,3 @@
+export const REVIEW_QUERY_KEYS = {
+  detailedReview: 'detailedReview',
+};
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 6b4f45d89..f6d783db0 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,10 +1,12 @@
 import { Global, ThemeProvider } from '@emotion/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import App from '@/App';
 
+import { ErrorSuspenseContainer } from './components';
 import DetailedReviewPage from './pages/DetailedReviewPage';
 import ErrorPage from './pages/ErrorPage';
 import ReviewPreviewListPage from './pages/ReviewPreviewListPage';
@@ -12,6 +14,17 @@ import ReviewWritingPage from './pages/ReviewWriting';
 import globalStyles from './styles/globalStyles';
 import theme from './styles/theme';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      throwOnError: true,
+    },
+    mutations: {
+      throwOnError: true,
+    },
+  },
+});
+
 const router = createBrowserRouter([
   {
     path: '/',
@@ -32,7 +45,11 @@ const router = createBrowserRouter([
       },
       {
         path: 'user/detailed-review/:id',
-        element: <DetailedReviewPage />,
+        element: (
+          <ErrorSuspenseContainer>
+            <DetailedReviewPage />
+          </ErrorSuspenseContainer>
+        ),
       },
     ],
   },
@@ -42,9 +59,11 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
 root.render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <Global styles={globalStyles} />
-      <RouterProvider router={router} />
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <Global styles={globalStyles} />
+        <RouterProvider router={router} />
+      </ThemeProvider>
+    </QueryClientProvider>
   </React.StrictMode>,
 );
diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts
index 2c065c259..e3501ad37 100644
--- a/frontend/src/mocks/handlers/review.ts
+++ b/frontend/src/mocks/handlers/review.ts
@@ -2,14 +2,32 @@ import { http, HttpResponse } from 'msw';
 
 import endPoint from '@/apis/endpoints';
 
-import { DETAILED_REVIEW_MOCK_DATA } from '../mockData/detailedReviewMockData';
+import {
+  DETAILED_REVIEW_MOCK_DATA,
+  DETAILED_PAGE_MOCK_API_SETTING_VALUES,
+  DETAILED_PAGE_ERROR_API_VALUES,
+} from '../mockData/detailedReviewMockData';
 import { REVIEW_PREVIEW_LIST } from '../mockData/reviewPreviewList';
 import { REVIEW_WRITING_DATA } from '../mockData/reviewWritingData';
 
 const getDetailedReview = () =>
-  http.get(endPoint.gettingDetailedReview(123456, 123456), async ({ request }) => {
-    return HttpResponse.json(DETAILED_REVIEW_MOCK_DATA);
-  });
+  http.get(
+    endPoint.gettingDetailedReview(
+      DETAILED_PAGE_MOCK_API_SETTING_VALUES.reviewId,
+      DETAILED_PAGE_MOCK_API_SETTING_VALUES.memberId,
+    ),
+    async () => {
+      return HttpResponse.json(DETAILED_REVIEW_MOCK_DATA);
+    },
+  );
+
+const getWrongDetailReview = () =>
+  http.get(
+    endPoint.gettingDetailedReview(DETAILED_PAGE_ERROR_API_VALUES.reviewId, DETAILED_PAGE_ERROR_API_VALUES.memberId),
+    async () => {
+      return HttpResponse.json({ error: '잘못된 상세리뷰 요청' }, { status: 404 });
+    },
+  );
 
 const getDataToWriteReview = () =>
   http.get(endPoint.gettingDataToWriteReview(10), async ({ request }) => {
@@ -21,6 +39,6 @@ const getReviewPreviewList = () =>
     return HttpResponse.json(REVIEW_PREVIEW_LIST);
   });
 
-const reviewHandler = [getDetailedReview(), getReviewPreviewList(), getDataToWriteReview()];
+const reviewHandler = [getDetailedReview(), getWrongDetailReview(), getReviewPreviewList(), getDataToWriteReview()];
 
 export default reviewHandler;
diff --git a/frontend/src/mocks/mockData/detailedReviewMockData.ts b/frontend/src/mocks/mockData/detailedReviewMockData.ts
index df88cd590..4eb73b170 100644
--- a/frontend/src/mocks/mockData/detailedReviewMockData.ts
+++ b/frontend/src/mocks/mockData/detailedReviewMockData.ts
@@ -1,25 +1,35 @@
 import { DetailReviewData } from '@/types';
 
+export const DETAILED_PAGE_MOCK_API_SETTING_VALUES = {
+  reviewId: 5,
+  memberId: 2,
+};
+
+export const DETAILED_PAGE_ERROR_API_VALUES = {
+  reviewId: 0,
+  memberId: 0,
+};
+
 const ANSWER =
   '림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. 림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. ';
 
 export const DETAILED_REVIEW_MOCK_DATA: DetailReviewData = {
   id: 123456,
   createdAt: new Date('2024-07-16'),
-  isPublic: false,
-  reviewerGroup: {
-    id: 123456,
-    name: 'review-me',
-    description: 'vite 쓰고 싶다.',
-    thumnailUrl: '',
-  },
-  reviews: [
+  revieweeName: 'badahertz52',
+  projectName: 'review-me',
+  contents: [
     {
+      id: 1,
       question: '[공개] 동료의 개발 역량 향상을 위해 피드백을 남겨 주세요.',
       answer: ANSWER,
     },
-    { question: '[공개] 동료의 소프트 스킬의 성장을 위해 피드백을 남겨 주세요.', answer: ANSWER },
-    { question: '[비공개] 팀 동료로 근무한다면 같이 일 하고 싶은 개발자인가요?', answer: ANSWER },
+
+    { id: 2, question: '[공개] 동료의 소프트 스킬의 성장을 위해 피드백을 남겨 주세요.', answer: ANSWER },
+    { id: 3, question: '[비공개] 팀 동료로 근무한다면 같이 일 하고 싶은 개발자인가요?', answer: ANSWER },
+  ],
+  keywords: [
+    { id: 11, detail: '친절해요' },
+    { id: 22, detail: '이야기를 잘 들어줘요.' },
   ],
-  keywords: ['친절해요', '친절합니다!', '친절해요요요요요', '친절해해해해해', '친절해요요용'],
 };
diff --git a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
index 0ee031dae..7505e2677 100644
--- a/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/KeywordSection/index.tsx
@@ -1,9 +1,11 @@
+import { DetailReviewKeyword } from '@/types';
+
 import ReviewSectionHeader from '../ReviewSectionHeader';
 
 import * as S from './styles';
 
 interface KeywordSectionProps {
-  keywords: string[];
+  keywords: DetailReviewKeyword[];
   index: number;
 }
 const KEY_WORD_HEADER = '키워드';
@@ -13,8 +15,8 @@ const KeywordSection = ({ keywords, index }: KeywordSectionProps) => {
     <S.KeywordSection>
       <ReviewSectionHeader number={index + 1} text={KEY_WORD_HEADER} />
       <S.KeywordContainer>
-        {keywords.map((keyword) => (
-          <S.KeywordBox key={keyword}>{keyword}</S.KeywordBox>
+        {keywords.map(({ id, detail }) => (
+          <S.KeywordBox key={id}>{detail}</S.KeywordBox>
         ))}
       </S.KeywordContainer>
     </S.KeywordSection>
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx
index fe0f94355..8e4f477de 100644
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx
@@ -7,15 +7,18 @@ import LockToggle from '../LockToggle';
 import * as S from './styles';
 
 const PROJECT_IMAGE_SIZE = '6rem';
+const DATE_TITLE = '리뷰 작성일';
 
 interface ReviewDescriptionProps extends Omit<ProjectImgProps, '$size'>, Omit<ReviewDateProps, 'dateTitle'> {
   isPublic: boolean;
+  revieweeName: string;
   handleClickToggleButton: () => void;
 }
 
 const ReviewDescription = ({
   thumbnailUrl,
   projectName,
+  revieweeName,
   isPublic,
   date,
   handleClickToggleButton,
@@ -24,14 +27,19 @@ const ReviewDescription = ({
     <S.Description>
       <S.DescriptionSide>
         <ProjectImg thumbnailUrl={thumbnailUrl} projectName={projectName} $size={PROJECT_IMAGE_SIZE} />
-        <S.ProjectNameAndDateContainer>
+        <S.ProjectInfoContainer>
           <S.ProjectName>{projectName}</S.ProjectName>
-          <ReviewDate date={date} dateTitle="리뷰 작성일" />
-        </S.ProjectNameAndDateContainer>
+          <S.RevieweeNameAndDateContainer>
+            <S.RevieweeNameWrapper>
+              <S.RevieweeName>{revieweeName}</S.RevieweeName>에 대한 리뷰입니다!
+            </S.RevieweeNameWrapper>
+            <ReviewDate date={date} dateTitle={DATE_TITLE} />
+          </S.RevieweeNameAndDateContainer>
+        </S.ProjectInfoContainer>
       </S.DescriptionSide>
-      <S.DescriptionSide>
+      {/* 시현 때 숨김 <S.DescriptionSide>
         <LockToggle $isPublic={isPublic} handleClickToggleButton={handleClickToggleButton} />
-      </S.DescriptionSide>
+      </S.DescriptionSide> */}
     </S.Description>
   );
 };
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts
index 799be41d7..fa6daaa98 100644
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts
+++ b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts
@@ -12,11 +12,15 @@ export const Description = styled.section`
 `;
 export const DescriptionSide = styled.div`
   display: flex;
+  width: 100%;
 `;
-export const ProjectNameAndDateContainer = styled.div`
+//NOTE: 6rem :깃헙 로고 사이즈
+export const ProjectInfoContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+
+  width: calc(100% - 6rem);
   margin-left: 1rem;
 `;
 
@@ -25,3 +29,20 @@ export const ProjectName = styled.p`
   font-size: ${({ theme }) => theme.fontSize.medium};
   font-weight: ${({ theme }) => theme.fontWeight.bold};
 `;
+
+export const RevieweeNameAndDateContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+
+  font-size: ${({ theme }) => theme.fontSize.basic};
+`;
+
+export const RevieweeNameWrapper = styled.p`
+  margin-top: 0;
+`;
+export const RevieweeName = styled.span`
+  color: ${({ theme }) => theme.colors.primary};
+`;
diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx
index c730feeaf..9c5f44311 100644
--- a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx
@@ -3,6 +3,8 @@ import { MultilineTextViewer } from '@/components';
 import ReviewSectionHeader from '../ReviewSectionHeader';
 
 import * as S from './styles';
+
+const INDEX_OFFSET = 1;
 interface ReviewSectionProps {
   question: string;
   answer: string;
@@ -12,7 +14,7 @@ interface ReviewSectionProps {
 const ReviewSection = ({ question, answer, index }: ReviewSectionProps) => {
   return (
     <S.ReviewSection>
-      <ReviewSectionHeader number={index + 1} text={question} />
+      <ReviewSectionHeader number={index + INDEX_OFFSET} text={question} />
       <S.Answer>
         <MultilineTextViewer text={answer} />
       </S.Answer>
diff --git a/frontend/src/pages/DetailedReviewPage/components/index.tsx b/frontend/src/pages/DetailedReviewPage/components/index.tsx
new file mode 100644
index 000000000..b850fb6d2
--- /dev/null
+++ b/frontend/src/pages/DetailedReviewPage/components/index.tsx
@@ -0,0 +1,3 @@
+export { default as KeywordSection } from './KeywordSection';
+export { default as ReviewDescription } from './ReviewDescription';
+export { default as ReviewSection } from './ReviewSection';
diff --git a/frontend/src/pages/DetailedReviewPage/index.tsx b/frontend/src/pages/DetailedReviewPage/index.tsx
index f56c2b770..0bafb2ed1 100644
--- a/frontend/src/pages/DetailedReviewPage/index.tsx
+++ b/frontend/src/pages/DetailedReviewPage/index.tsx
@@ -1,63 +1,46 @@
-import { useState, useEffect } from 'react';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { useLocation, useParams } from 'react-router';
 
-import { ReviewComment } from '@/components';
+import { DETAILED_REVIEW_API_PARAMS } from '@/apis/endpoints';
+import { getDetailedReviewApi } from '@/apis/review';
+import { REVIEW_QUERY_KEYS } from '@/constants';
+import { ReviewDescription, ReviewSection, KeywordSection } from '@/pages/DetailedReviewPage/components';
 import { DetailReviewData } from '@/types';
 
-import { getDetailedReviewApi } from '../../apis/review';
-import LoadingPage from '../LoadingPage';
-
-import KeywordSection from './components/KeywordSection';
-import ReviewDescription from './components/ReviewDescription';
-import ReviewSection from './components/ReviewSection/index';
 import * as S from './styles';
 
 const DetailedReviewPage = () => {
   const { id } = useParams<{ id: string }>();
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
-  const memberId = queryParams.get('memberId');
-
-  const [detailedReview, setDetailReview] = useState<DetailReviewData>();
-  const [isLoading, setIsLoading] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string>('');
-
-  useEffect(() => {
-    const fetchReview = async () => {
-      try {
-        setIsLoading(true);
-
-        const result = await getDetailedReviewApi({ reviewId: Number(id), memberId: Number(memberId) });
-        setDetailReview(result);
-        setErrorMessage('');
-      } catch (error) {
-        setErrorMessage('리뷰를 불러오는 데 실패했습니다.');
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchReview();
-  }, [id]);
+  const memberId = queryParams.get(DETAILED_REVIEW_API_PARAMS.queryString.memberId);
 
-  if (isLoading) return <LoadingPage />;
+  const fetchDetailedReview = async (reviewId: number, memberId: number) => {
+    const result = await getDetailedReviewApi({ reviewId, memberId });
+    return result;
+  };
 
-  if (errorMessage) return <div>Error: {errorMessage}</div>;
-  if (!detailedReview) return <div>Error: 상세보기 리뷰 데이터를 가져올 수 없어요.</div>;
+  const { data: detailedReview } = useSuspenseQuery<DetailReviewData>({
+    queryKey: [REVIEW_QUERY_KEYS.detailedReview, id, memberId],
+    queryFn: () => fetchDetailedReview(Number(id), Number(memberId)),
+  });
 
+  if (!detailedReview) throw new Error(' 상세보기 리뷰 데이터를 가져올 수 없어요.');
+  // TODO: 리뷰 공개/비공개 토글 버튼 기능
   return (
     <S.DetailedReviewPage>
       <ReviewDescription
-        projectName={detailedReview.reviewerGroup.name}
+        projectName={detailedReview.projectName}
         date={new Date(detailedReview.createdAt)}
+        revieweeName={detailedReview.revieweeName}
         isPublic={true}
         handleClickToggleButton={() => console.log('click toggle ')}
       />
-      <ReviewComment comment={detailedReview.reviewerGroup.description} />
-      {detailedReview.reviews.map((item, index) => (
-        <ReviewSection question={item.question} answer={item.answer} key={index} index={index} />
+      {/* 시연 때 숨김 <RevieweeComments comment={detailedReview.reviewerGroup.description} /> */}
+      {detailedReview.contents.map(({ id, question, answer }, index) => (
+        <ReviewSection key={id} question={question} answer={answer} index={index} />
       ))}
-      <KeywordSection keywords={detailedReview.keywords} index={detailedReview.reviews.length} />
+      <KeywordSection keywords={detailedReview.keywords} index={detailedReview.contents.length} />
     </S.DetailedReviewPage>
   );
 };
diff --git a/frontend/src/pages/ErrorPage/index.tsx b/frontend/src/pages/ErrorPage/index.tsx
index 52d300c90..c773148c3 100644
--- a/frontend/src/pages/ErrorPage/index.tsx
+++ b/frontend/src/pages/ErrorPage/index.tsx
@@ -1,13 +1,9 @@
 import { useNavigate } from 'react-router';
 
-import { Main, PageLayout, SideModal, Sidebar, Topbar } from '@/components';
+import { Main, PageLayout, SideModal, Sidebar, Topbar, ErrorSection } from '@/components';
 import { useSidebar } from '@/hooks';
 
-import ErrorSection from './components/ErrorSection';
-
-const ERROR_MESSAGE = {
-  serverUnstable: '서버와의 통신이 불안정합니다.',
-};
+const ERROR_MESSAGE = '찾으시는 페이지가 없어요.';
 
 const ErrorPage = () => {
   const { isSidebarHidden, isSidebarModalOpen, closeSidebar, openSidebar } = useSidebar();
@@ -24,17 +20,13 @@ const ErrorPage = () => {
   return (
     <PageLayout>
       {isSidebarModalOpen && (
-        <SideModal isSidebarHidden={isSidebarHidden}>
+        <SideModal isSidebarHidden={isSidebarHidden} closeModal={closeSidebar}>
           <Sidebar closeSidebar={closeSidebar} />
         </SideModal>
       )}
       <Topbar openSidebar={openSidebar} />
       <Main>
-        <ErrorSection
-          errorMessage={ERROR_MESSAGE.serverUnstable}
-          handleReload={handleReload}
-          handleGoHome={handleGoHome}
-        />
+        <ErrorSection errorMessage={ERROR_MESSAGE} handleReload={handleReload} handleGoHome={handleGoHome} />
       </Main>
     </PageLayout>
   );
diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts
index 493bbf850..8ffdb9bcc 100644
--- a/frontend/src/styles/theme.ts
+++ b/frontend/src/styles/theme.ts
@@ -3,7 +3,7 @@ import { CSSProperties } from 'react';
 
 import { ThemeProperty } from '../types';
 
-export const formWidth = '86.7rem';
+export const formWidth = '65rem';
 export const sidebarWidth: ThemeProperty<string> = {
   desktop: '25rem',
   mobile: '100vw',
@@ -15,6 +15,7 @@ export const breakpoints: ThemeProperty<string> = {
 };
 // NOTE: 1rem = 10px
 export const fontSize: ThemeProperty<CSSProperties['fontSize']> = {
+  small: '1.4rem',
   basic: '1.6rem',
   medium: '2.4rem',
   large: '3.2rem',
diff --git a/frontend/src/types/review.ts b/frontend/src/types/review.ts
index cae033a13..a42d80417 100644
--- a/frontend/src/types/review.ts
+++ b/frontend/src/types/review.ts
@@ -9,21 +9,22 @@ export interface ReviewItem {
 }
 
 export interface DetailReviewContent {
+  id: number;
   question: string;
   answer: string;
 }
+// NOTE: 3차-1주차 시현 시 리뷰 상세페이지 API 데이터의 형식이 변경되었는데, keyword부분이 다를 데이터에서 어떻게 변경될 지 몰라서 리뷰 상세페이지의 키워드만을 위한 타입을 따로 만들었어요.
+export interface DetailReviewKeyword {
+  id: number;
+  detail: string;
+}
 export interface DetailReviewData {
   id: number;
   createdAt: Date;
-  isPublic: boolean;
-  reviewerGroup: {
-    id: number;
-    name: string;
-    description: string;
-    thumnailUrl: string;
-  };
-  reviews: DetailReviewContent[];
-  keywords: string[];
+  projectName: string;
+  revieweeName: string;
+  contents: DetailReviewContent[];
+  keywords: DetailReviewKeyword[];
 }
 
 // api
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 66d2ad309..710d2bb82 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1098,9 +1098,9 @@
     regenerator-runtime "^0.14.0"
 
 "@babel/runtime@^7.9.2":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e"
-  integrity sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
+  integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -1824,7 +1824,7 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
-"@testing-library/jest-dom@^6.4.7":
+"@testing-library/jest-dom@^6.4.8":
   version "6.4.8"
   resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.8.tgz#9c435742b20c6183d4e7034f2b329d562c079daa"
   integrity sha512-JD0G+Zc38f5MBHA4NgxQMR5XtO5Jx9g86jqturNTt2WUfRmLDIY7iKkWHDCCTiDuFMre6nxAD5wHw9W5kI4rGw==
@@ -6577,6 +6577,13 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-error-boundary@^4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.13.tgz#80386b7b27b1131c5fbb7368b8c0d983354c7947"
+  integrity sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"