diff --git a/src/apis/axios/intercepter.ts b/src/apis/axios/intercepter.ts
index 6f33e3c..38c5c1a 100644
--- a/src/apis/axios/intercepter.ts
+++ b/src/apis/axios/intercepter.ts
@@ -1,5 +1,5 @@
-import axiosConfig from './instance';
-axiosConfig.interceptors.request.use(config => {
+import api from './instance';
+api.interceptors.request.use(config => {
   //요청 성공 직전 호출
   //헤더에 인가 토큰 부착
   //로컬스토리지에 저장한다고 가정한다면
@@ -10,10 +10,14 @@ axiosConfig.interceptors.request.use(config => {
 
   return config;
 });
-axiosConfig.interceptors.response.use(
+api.interceptors.response.use(
   //http status가 200번대인 경우 호출
-  response => response,
+  response => {
+    console.log(response);
+    return response;
+  },
   error => {
+    console.log(error);
     //http status가 에러 코드인경우 실행
   }
 );
diff --git a/src/apis/usersApis.ts b/src/apis/usersApis.ts
index 761a64a..c8efc61 100644
--- a/src/apis/usersApis.ts
+++ b/src/apis/usersApis.ts
@@ -1,3 +1,4 @@
+import Quiz from '@/types/Quiz';
 import Experience from '../types/Experience';
 import User from '../types/User';
 import api from './axios/instance';
@@ -24,5 +25,22 @@ const usersApis = {
     const { id, experience } = params;
     await api.patch(`/users/${id}/experience`, { experience });
   },
+  getQuizzes: async (params: {
+    id: User['id'];
+    partId: Quiz['partId'];
+  }): Promise<Quiz[]> => {
+    const { id, partId } = params;
+    const response = await api.get(`/quizzes/users/${id}/incorrect`, {
+      params: { partId },
+    });
+    return response.data;
+  },
+  patchPoint: async (params: {
+    id: User['id'];
+    point: number;
+  }): Promise<void> => {
+    const { id, point } = params;
+    await api.patch(`/users/${id}/point`, { point });
+  },
 };
 export default usersApis;
diff --git a/src/common/layout/Header.tsx b/src/common/layout/Header.tsx
index d23fed0..204df17 100644
--- a/src/common/layout/Header.tsx
+++ b/src/common/layout/Header.tsx
@@ -4,24 +4,29 @@ import { HeaderBox } from './style';
 import Login from '@features/login/ui/Login';
 import { ProfileWrapper, ProfileIcon, HeaderIcon } from '../ui/style';
 import useModal from '@hooks/useModal';
+import useUserStore from '@/store/useUserStore';
 
 export default function Header() {
   const points: number = 2999999999;
   const lifePoints: number = 5;
   const { isShow, openModal, closeModal, Modal } = useModal();
-
+  const { user } = useUserStore();
   return (
     <HeaderBox>
-      <HeaderItem
-        icon={getImageUrl('포인트.svg')}
-        point={points}
-        color={'#FFCD35'}
-      />
-      <HeaderItem
-        icon={getImageUrl('과일바구니.svg')}
-        point={lifePoints}
-        color={'#FE0F0F'}
-      />
+      {user && (
+        <>
+          <HeaderItem
+            icon={getImageUrl('포인트.svg')}
+            point={points}
+            color={'#FFCD35'}
+          />
+          <HeaderItem
+            icon={getImageUrl('과일바구니.svg')}
+            point={lifePoints}
+            color={'#FE0F0F'}
+          />
+        </>
+      )}
       <ProfileWrapper onClick={openModal}>
         <ProfileIcon src={getImageUrl('테두리.svg')} alt="프로필 테두리" />
         <HeaderIcon src={getImageUrl('코코-프로필.svg')} alt="코코 프로필" />
diff --git a/src/features/login/styles.ts b/src/features/login/styles.ts
index 64b2815..060f7f8 100644
--- a/src/features/login/styles.ts
+++ b/src/features/login/styles.ts
@@ -78,3 +78,32 @@ export const SocialLoginButton = styled.button<SocialLoginLinkProps>`
     height: 24px;
   }
 `;
+export const LoginPromptSection = styled.section`
+  animation: ${fadeInScaleUp} 0.7s ease-out;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 306px;
+  height: 370.47px;
+  border-radius: 40px;
+  background: #bfd683;
+  box-shadow: 0 10.53px #85705f;
+  > h2 {
+    margin-top: 20px;
+    color: #85705f;
+  }
+`;
+export const LoginPromptImg = styled.img`
+  width: 187.944px;
+  height: 219.219px;
+  margin-top: 7px;
+`;
+
+export const GoToLoginButton = styled.button`
+  width: 145.444px;
+  height: 38.291px;
+  border-radius: 6px;
+  background: #000;
+  color: #bfd683;
+  font-size: 14px;
+`;
diff --git a/src/features/login/ui/LoginPrompt.tsx b/src/features/login/ui/LoginPrompt.tsx
new file mode 100644
index 0000000..c043256
--- /dev/null
+++ b/src/features/login/ui/LoginPrompt.tsx
@@ -0,0 +1,25 @@
+import {
+  DashLineHr,
+  FlexContainer,
+  GoToLoginButton,
+  LoginPromptSection,
+  LoginPromptImg,
+} from '../styles';
+import { getImageUrl } from '@/utils/getImageUrl';
+interface GoToLoginProps {
+  onNext: () => void;
+}
+export default function LoginPrompt({ onNext }: GoToLoginProps) {
+  return (
+    <>
+      <FlexContainer>
+        <LoginPromptSection>
+          <h2>문제 더 풀려면 로그인해 !</h2>
+          <LoginPromptImg src={getImageUrl('로그인키키.svg')} />
+          <DashLineHr />
+          <GoToLoginButton onClick={onNext}>로그인 창으로</GoToLoginButton>
+        </LoginPromptSection>
+      </FlexContainer>
+    </>
+  );
+}
diff --git a/src/features/quiz/styles.ts b/src/features/quiz/styles.ts
index 798c8d8..6769d82 100644
--- a/src/features/quiz/styles.ts
+++ b/src/features/quiz/styles.ts
@@ -239,7 +239,7 @@ const fadeInScaleUp = keyframes`
     transform: translate(-50%, -50%) scale(1); 
   }
 `;
-export const TotalResultSection = styled.section`
+export const CompensationSection = styled.section`
   animation: ${fadeInScaleUp} 0.7s ease-out;
   position: fixed;
   display: flex;
@@ -377,7 +377,7 @@ export const SectionWrapper = styled.div`
 `;
 
 // 섹션 제목(이름)
-export const SectionTitle = styled.p`
+export const SectionTitle = styled.h4`
   width: 693px;
   font-size: 17px;
   color: #ffffff;
diff --git a/src/features/quiz/ui/PartClear.tsx b/src/features/quiz/ui/PartClear.tsx
new file mode 100644
index 0000000..86615e0
--- /dev/null
+++ b/src/features/quiz/ui/PartClear.tsx
@@ -0,0 +1,33 @@
+import { useNavigate } from 'react-router-dom';
+import { CompensationSection } from '../styles';
+import { pointQuery } from '@queries/usersQuery';
+import { useTimeout } from '@modern-kit/react';
+import useUserStore from '@store/useUserStore';
+export default function PartClear() {
+  const navigate = useNavigate();
+  const { mutate: updatePoint } = pointQuery.patch();
+  const { user } = useUserStore();
+  const point = 1500;
+  useTimeout(
+    () => {
+      if (user) {
+        updatePoint({ id: user.id, point });
+      }
+    },
+    { delay: 500 }
+  );
+  return (
+    <>
+      <CompensationSection>
+        <h1>와 파트클리어 축하해</h1>
+        <button
+          onClick={() => {
+            navigate('/learn');
+          }}
+        >
+          넘어가기
+        </button>
+      </CompensationSection>
+    </>
+  );
+}
diff --git a/src/features/quiz/ui/Result.tsx b/src/features/quiz/ui/Result.tsx
index 1cfebe5..1838dfe 100644
--- a/src/features/quiz/ui/Result.tsx
+++ b/src/features/quiz/ui/Result.tsx
@@ -2,27 +2,21 @@ import { progressQuery } from '../../../queries/usersQuery';
 import { useClientQuizStore } from '../../../store/useClientQuizStore';
 import useUserStore from '../../../store/useUserStore';
 import Quiz from '../../../types/Quiz';
-import handlePage from '../../../utils/handlePage';
-import { noop } from '@modern-kit/utils';
 import { AnswerDiv, NextPageButton, ScoreSection } from '../styles';
+import { getImageUrl } from '@utils/getImageUrl';
 
 interface ResultProps {
   quizId: Quiz['id'];
   answer: Quiz['answer'];
   result: boolean;
-  lastPage: number;
   closeModal: () => void;
-  openModal: () => void;
 }
 export default function Result({
   quizId,
   answer,
   result,
-  lastPage,
   closeModal,
-  openModal,
 }: ResultProps) {
-  const imgUrl = import.meta.env.VITE_IMG_BASE_URL;
   const { nextPage, resetUserResponseAnswer, pushTotalResults, currentPage } =
     useClientQuizStore();
   //임시 유저 가져오기
@@ -33,18 +27,15 @@ export default function Result({
   return (
     <>
       <ScoreSection
-        $backGroundImage={
-          result ? `${imgUrl}정답모달.svg` : `${imgUrl}오답모달.svg`
-        }
+        $backGroundImage={getImageUrl(result ? `정답모달.svg` : `오답모달.svg`)}
       >
         <AnswerDiv>{!result && '정답 : ' + answer}</AnswerDiv>
         <NextPageButton
           $isAnswer={result}
           onClick={() => {
             resetUserResponseAnswer();
-            pushTotalResults(result);
             closeModal();
-            handlePage(currentPage, lastPage, nextPage, noop, openModal);
+            nextPage();
             userId &&
               addProgress.mutate({
                 userId,
diff --git a/src/features/quiz/ui/TotalResults.tsx b/src/features/quiz/ui/TotalResults.tsx
index b0e4b85..0af3a36 100644
--- a/src/features/quiz/ui/TotalResults.tsx
+++ b/src/features/quiz/ui/TotalResults.tsx
@@ -1,33 +1,37 @@
 import { experienceQuery } from '@queries/usersQuery';
 import { useClientQuizStore } from '@store/useClientQuizStore';
-import useUserStore from '@store/useUserStore';
-import type Quiz from '@/types/Quiz';
-import User from '@/types/User';
 import {
   DashLineHr,
   ImageDescriptionDiv,
   Img,
   RedirectToLearnButton,
   TotalResultProgressDiv,
-  TotalResultSection,
+  CompensationSection,
   TotalResultsRewardDiv,
   TotalResultsTextDiv,
 } from '../styles';
 import { getImageUrl } from '@utils/getImageUrl';
 import { useTimeout } from '@modern-kit/react';
 import { useNavigate } from 'react-router-dom';
-import ProgressBar from '@/features/progress/ui/ProgressBar';
-interface TotalResultsProps {
-  quizzes: Quiz[];
-  totalResults: boolean[];
+import ProgressBar from '@features/progress/ui/ProgressBar';
+import useUserStore from '@store/useUserStore';
+import User from '@type/User';
+interface TotalResultProps {
+  onNext: () => void;
+  quizzesLength: number;
 }
-export default function TotalResults({ totalResults }: TotalResultsProps) {
-  const totalResultCount = totalResults.filter(result => result).length;
+export default function TotalResults({
+  onNext,
+  quizzesLength,
+}: TotalResultProps) {
+  const { totalResults } = useClientQuizStore();
+  const quizCorrectAnswers = totalResults.filter(result => result).length;
+  const isPartClear = quizzesLength === quizCorrectAnswers;
   const { user } = useUserStore() as { user: User };
-  const experience = totalResultCount * 10;
+  const experience = quizCorrectAnswers * 10;
   const { mutate: experienceUpdate, isIdle } = experienceQuery.patch();
-  const { data: userExperience, isSuccess } = experienceQuery.get(user.id);
-  const { reset } = useClientQuizStore();
+  const { data: userExperience, isSuccess } = experienceQuery.get(user?.id);
+
   const navigate = useNavigate();
   useTimeout(
     () => {
@@ -36,66 +40,62 @@ export default function TotalResults({ totalResults }: TotalResultsProps) {
     { delay: 1000, enabled: isSuccess }
   );
   if (!userExperience) {
-    return <div>404...</div>;
+    return <></>;
   }
-
   return (
-    <>
-      <TotalResultSection>
-        <TotalResultsTextDiv>
-          총<p>&nbsp; {totalResultCount}&nbsp;</p>
-          문제를 맞혔고 <p>&nbsp;{experience} 경험치</p>를 얻었어!
-        </TotalResultsTextDiv>
-        <DashLineHr />
-        <TotalResultsRewardDiv>
-          <ImageDescriptionDiv>
-            <Img
-              $width="201px"
-              $height="159px"
-              src={getImageUrl('레벨1코코.svg')}
-              alt="레벨업 이미지"
-            />
-            <p>Level.{userExperience.level}</p>
-          </ImageDescriptionDiv>
-          <TotalResultProgressDiv>
-            <Img
-              src={getImageUrl('반짝이.svg')}
-              $width="45px"
-              $height="60px"
-              alt="반짝이"
-            />
-            <div>
-              <p>경험치</p>
-              <ProgressBar
-                $height="16px"
-                $maxWidth="242px"
-                $boxBgColor="#85705F"
-                $innerBgColor="#BFD683"
-                $progress={userExperience?.experience}
-                $maxProgress={userExperience?.experienceForNextLevel}
-                style={{ width: '242px' }}
-              />
-            </div>
-            <Img
-              src={getImageUrl('반짝이.svg')}
-              $width="45px"
-              $height="60px"
-              alt="반짝이"
+    <CompensationSection>
+      <TotalResultsTextDiv>
+        총<p>&nbsp; {quizCorrectAnswers}&nbsp;</p>
+        문제를 맞혔고 <p>&nbsp;{experience} 경험치</p>를 얻었어!
+      </TotalResultsTextDiv>
+      <DashLineHr />
+      <TotalResultsRewardDiv>
+        <ImageDescriptionDiv>
+          <Img
+            $width="201px"
+            $height="159px"
+            src={getImageUrl('레벨1코코.svg')}
+            alt="레벨업 이미지"
+          />
+          <p>Level.{userExperience.level}</p>
+        </ImageDescriptionDiv>
+        <TotalResultProgressDiv>
+          <Img
+            src={getImageUrl('반짝이.svg')}
+            $width="45px"
+            $height="60px"
+            alt="반짝이"
+          />
+          <div>
+            <p>경험치</p>
+            <ProgressBar
+              $height="16px"
+              $maxWidth="242px"
+              $boxBgColor="#85705F"
+              $innerBgColor="#BFD683"
+              $progress={userExperience?.experience}
+              $maxProgress={userExperience?.experienceForNextLevel}
+              style={{ width: '242px' }}
             />
-          </TotalResultProgressDiv>
-        </TotalResultsRewardDiv>
-        <DashLineHr />
-        <RedirectToLearnButton
-          disabled={isIdle}
-          $isActive={isIdle}
-          onClick={() => {
-            reset();
-            navigate('/learn');
-          }}
-        >
-          메인으로
-        </RedirectToLearnButton>
-      </TotalResultSection>
-    </>
+          </div>
+          <Img
+            src={getImageUrl('반짝이.svg')}
+            $width="45px"
+            $height="60px"
+            alt="반짝이"
+          />
+        </TotalResultProgressDiv>
+      </TotalResultsRewardDiv>
+      <DashLineHr />
+      <RedirectToLearnButton
+        disabled={isIdle}
+        $isActive={isIdle}
+        onClick={() => {
+          isPartClear ? onNext() : navigate('/learn');
+        }}
+      >
+        메인으로
+      </RedirectToLearnButton>
+    </CompensationSection>
   );
 }
diff --git a/src/hooks/useFunnel.tsx b/src/hooks/useFunnel.tsx
new file mode 100644
index 0000000..b598cb3
--- /dev/null
+++ b/src/hooks/useFunnel.tsx
@@ -0,0 +1,77 @@
+import { ReactNode, isValidElement, FC, useState } from 'react';
+//Step 컴포넌트의 프롭스 타입
+//name과 children을 받는다
+type StepProps = {
+  name: string;
+  children: ReactNode;
+};
+
+//Funnel 컴포넌트의 Props 타입
+//ReactNode [] 타입을 받는다.
+interface FunnelProps {
+  children: ReactNode[];
+}
+
+//FunnelComponent  FC<FunnelProps> 타입을 상속받음으로써
+// 함수형 컴포넌트임을 알리고 props를  children: ReactNode[]타입 으로 지정
+interface FunnelComponent extends FC<FunnelProps> {
+  Step: FC<StepProps>;
+}
+
+type UseFunnelReturn<T> = {
+  setStep: (step: T) => void;
+  Funnel: FunnelComponent;
+};
+/**
+ * `useFunnel` 훅
+ *
+ * 이 훅은 상태를 기반으로 여러 단계(스텝) 중 하나만 활성화 상태로 렌더링하는 로직을 제공합니다.
+ *
+ * @template T
+ * @param {T} defaultStep - 초기 활성화 스텝.
+ * @returns {UseFunnelReturn<T>} 현재 활성화된 스텝을 설정하거나 렌더링하는 로직 제공.
+ * @example 
+         const { Funnel, setStep } = useFunnel('로그인 유도');
+         <Funnel>
+          <Funnel.Step name="로그인 유도">
+            <GoToLogin setStep={setStep} />
+          </Funnel.Step>
+          <Funnel.Step name="로그인">
+            <Login closeModal={closeModal} openModal={noop} />
+          </Funnel.Step>
+        </Funnel>
+ */
+const useFunnel = <T,>(defaultStep: T): UseFunnelReturn<T> => {
+  const [step, setStep] = useState<T>(defaultStep);
+
+  /**
+   * `Step` 컴포넌트
+   *
+   * 각 스텝의 내용을 정의하는 컴포넌트입니다.
+   *
+   * @param {StepProps} props - 스텝의 이름과 내용을 받습니다.
+   * @returns {ReactNode} 스텝의 내용을 렌더링합니다.
+   */
+  const Step: FC<StepProps> = ({ children }) => {
+    return children;
+  };
+
+  /**
+   * `Funnel` 컴포넌트
+   *
+   * 현재 활성화된 스텝만 렌더링합니다.
+   *
+   * @param {FunnelProps} props - `Step` 컴포넌트 배열을 받습니다.
+   * @returns {ReactNode | null} 현재 활성화된 스텝의 내용을 렌더링하거나 없으면 null 반환.
+   */
+  const Funnel: FunnelComponent = ({ children }) => {
+    const currentStep = children.find(
+      (child: ReactNode) => isValidElement(child) && child.props.name === step
+    );
+    return currentStep || null;
+  };
+
+  Funnel.Step = Step;
+  return { setStep, Funnel };
+};
+export default useFunnel;
diff --git a/src/hooks/useModal.ts b/src/hooks/useModal.ts
index 83e1105..925115c 100644
--- a/src/hooks/useModal.ts
+++ b/src/hooks/useModal.ts
@@ -9,8 +9,11 @@ import Modal from '../common/layout/Modal';
  * <button onClick={openModal}/>
  *  <Modal isShow={isShow}><ChildrenComponent closeModal={closeModal}></Modal>
  * */
-const useModal = () => {
-  const [isShow, setIsShow] = useState<boolean>(false);
+interface useModalProps {
+  enable?: boolean;
+}
+const useModal = ({ enable = false }: useModalProps = {}) => {
+  const [isShow, setIsShow] = useState<boolean>(enable);
   const openModal = () => setIsShow(true);
   const closeModal = () => setIsShow(false);
   return { isShow, openModal, closeModal, Modal };
diff --git a/src/pages/learn/Learn.tsx b/src/pages/learn/Learn.tsx
index 4bb0561..82e8064 100644
--- a/src/pages/learn/Learn.tsx
+++ b/src/pages/learn/Learn.tsx
@@ -11,10 +11,17 @@ import QuizSection from '@features/quiz/ui/QuizSection';
 import KeycapAdventureIntro from '@features/learn/ui/KeycapAdventureIntro';
 import PartNavContainer from '@features/quiz/ui/PartNavContainer';
 import usePreloadImages from '@hooks/usePreloadImages';
+import useUserStore from '@store/useUserStore';
+import { useEffect } from 'react';
 
 export default function Learn() {
+  const { setUser } = useUserStore();
+  //임시 유저 설정
+  useEffect(() => {
+    setUser({ id: 3, nickname: 'admin', level: 1 });
+  }, []);
+  //----------------------------
   const showComponents = useScrollVisibility();
-
   const isImageLoading = usePreloadImages({
     imageUrls: [
       '코코-멘트1.svg',
diff --git a/src/pages/quiz/Quiz.tsx b/src/pages/quiz/Quiz.tsx
index 3dd27f5..52cfcc3 100644
--- a/src/pages/quiz/Quiz.tsx
+++ b/src/pages/quiz/Quiz.tsx
@@ -17,7 +17,7 @@ import useBeforeUnload from '@/hooks/useBeforeUnload';
 import Result from '@features/quiz/ui/Result';
 import TotalResults from '@features/quiz/ui/TotalResults';
 import isEqualArray from '@utils/isEqualArray';
-import QuizzesQuery from '@queries/quizzesQuery';
+import quizzesQuery from '@queries/quizzesQuery';
 import useModal from '@hooks/useModal';
 import usePreloadImages from '@hooks/usePreloadImages';
 import { useEffect, useState } from 'react';
@@ -25,29 +25,15 @@ import Header from '@common/layout/Header';
 import useUserStore from '@store/useUserStore';
 import ProgressBar from '@features/progress/ui/ProgressBar';
 import { useLocation } from 'react-router-dom';
-
+import { userQuizzesQuery } from '@queries/usersQuery';
+import LoginPrompt from '@features/login/ui/LoginPrompt';
+import useFunnel from '@hooks/useFunnel';
+import PartClear from '@features/quiz/ui/PartClear';
+import { noop } from '@modern-kit/utils';
+import Login from '@features/login/ui/Login';
+import { useUnmount } from '@modern-kit/react';
 //퀴즈페이지
 export default function Quiz() {
-  const { currentPage, totalResults, userResponseAnswer } =
-    useClientQuizStore();
-  const { setUser } = useUserStore();
-  //임시 유저 설정
-  useEffect(() => {
-    setUser({ id: 2, nickname: 'admin', level: 1 });
-  }, []);
-  //----------------------------
-  const [result, setResult] = useState<boolean>(false);
-  const { Modal, closeModal, openModal, isShow } = useModal();
-  const { partId } = useLocation().state as { partId: number };
-  if (!partId) {
-    return <div>404</div>;
-  }
-
-  const { data: quizzes, isLoading } = QuizzesQuery.get({
-    partId: Number(partId),
-  });
-  useBeforeUnload({ enabled: quizzes?.length !== totalResults.length });
-
   const isImageLoading = usePreloadImages({
     imageUrls: [
       'O버튼.svg',
@@ -64,14 +50,53 @@ export default function Quiz() {
       '과일바구니-아이템.svg',
     ],
   });
-  //추후 loading 페이지로 교체
+  const {
+    currentPage,
+    totalResults,
+    userResponseAnswer,
+    reset,
+    pushTotalResults,
+  } = useClientQuizStore();
+  const { user } = useUserStore();
+  const [result, setResult] = useState<boolean>(false);
+  const { Modal, closeModal, openModal, isShow } = useModal();
+  const { partId, state } = useLocation().state as {
+    partId: number;
+    state?: 'start' | 'pending' | 'end';
+  };
+  const { data: quizzes, isLoading } =
+    user && state === 'pending'
+      ? userQuizzesQuery.get({
+          userId: user!.id,
+          partId,
+        })
+      : quizzesQuery.get({
+          partId,
+        });
+  const isQuizAnswered = userResponseAnswer[0] === '';
+  const isQuizFinished = totalResults.length === quizzes?.length;
+  const { Funnel, setStep } = useFunnel('결과');
+  useEffect(() => {
+    if (totalResults.length === 2 && !user) {
+      setStep('로그인 유도');
+    }
+    if (isQuizFinished) {
+      setStep('총결과');
+    }
+    if (totalResults.length !== 0) {
+      openModal();
+    }
+  }, [totalResults, result]);
+  useUnmount(() => reset());
+  useBeforeUnload({
+    enabled: !isQuizFinished,
+  });
+
   if (isLoading || isImageLoading) return <div>Loading</div>;
-  //------------------------
   if (!quizzes) return <div>404</div>;
-
   const { id, title, question, category, answerChoice, answer } =
     quizzes[currentPage];
-  //
+
   const getComponentMappingByChoiceType = componentMapping<
     Pick<Quiz, 'answerChoice'> | Pick<Quiz, 'answer'>
   >({
@@ -100,36 +125,47 @@ export default function Quiz() {
       <SubmitSection>
         <ResponseButton
           onClick={() => {
-            setResult(false);
-            openModal();
+            pushTotalResults(false);
           }}
         >
           SKIP
         </ResponseButton>
         <ResponseButton
-          disabled={userResponseAnswer[0] === ''}
-          $disabled={userResponseAnswer[0] === ''}
+          disabled={isQuizAnswered}
+          $disabled={isQuizAnswered}
           onClick={() => {
-            setResult(isEqualArray(userResponseAnswer, answer));
-            openModal();
+            pushTotalResults(isEqualArray(userResponseAnswer, answer));
           }}
         >
           제출
         </ResponseButton>
       </SubmitSection>
       <Modal isShow={isShow}>
-        {quizzes.length === totalResults.length ? (
-          <TotalResults quizzes={quizzes} totalResults={totalResults} />
-        ) : (
-          <Result
-            quizId={id}
-            result={result}
-            answer={answer}
-            lastPage={quizzes.length - 1}
-            openModal={openModal}
-            closeModal={closeModal}
-          />
-        )}
+        <Funnel>
+          <Funnel.Step name="결과">
+            <Result
+              quizId={id}
+              result={totalResults[currentPage]}
+              answer={answer}
+              closeModal={closeModal}
+            />
+          </Funnel.Step>
+          <Funnel.Step name="로그인 유도">
+            <LoginPrompt onNext={() => setStep('로그인')} />
+          </Funnel.Step>
+          <Funnel.Step name="로그인">
+            <Login closeModal={closeModal} openModal={noop} />
+          </Funnel.Step>
+          <Funnel.Step name="총결과">
+            <TotalResults
+              onNext={() => setStep('파트 클리어')}
+              quizzesLength={quizzes.length}
+            />
+          </Funnel.Step>
+          <Funnel.Step name="파트 클리어">
+            <PartClear />
+          </Funnel.Step>
+        </Funnel>
       </Modal>
     </AlignCenter>
   );
diff --git a/src/queries/quizzesQuery.ts b/src/queries/quizzesQuery.ts
index d07c0bb..2282dc5 100644
--- a/src/queries/quizzesQuery.ts
+++ b/src/queries/quizzesQuery.ts
@@ -11,6 +11,7 @@ const QuizzesQuery = {
     return useQuery({
       queryKey: quizKeys.part(partId),
       queryFn: () => quizzesApis.getQuizzes({ partId }),
+      //유저가 있으면 요청 x 또는 partId가 없으면
     });
   },
 };
diff --git a/src/queries/usersQuery.ts b/src/queries/usersQuery.ts
index 71766f1..21c9145 100644
--- a/src/queries/usersQuery.ts
+++ b/src/queries/usersQuery.ts
@@ -8,6 +8,11 @@ const userKeys = {
   detail: (id: number) => [...userKeys.details(), id] as const,
   experience: (userId: number) =>
     [...userKeys.detail(userId), 'experience'] as const,
+  quizzes: (userId: number) => [...userKeys.detail(userId), 'quizzes'],
+  partQuizzes: (userId: number, partId: number) => [
+    ...userKeys.quizzes(userId),
+    partId,
+  ],
 };
 
 const progressQuery = {
@@ -15,7 +20,16 @@ const progressQuery = {
     return useMutation({ mutationFn: usersApis.putQuizzesProgress });
   },
 };
-
+const userQuizzesQuery = {
+  get: ({ userId, partId }: { userId: number; partId: number }) => {
+    return useQuery({
+      queryKey: userKeys.partQuizzes(userId, partId),
+      queryFn: () => usersApis.getQuizzes({ id: userId, partId }),
+      gcTime: 0,
+      staleTime: 0,
+    });
+  },
+};
 const experienceQuery = {
   get: (id: User['id']) => {
     return useQuery({
@@ -23,6 +37,7 @@ const experienceQuery = {
       queryFn: () => usersApis.getExperience(id),
       gcTime: 0,
       staleTime: 0,
+      enabled: !!id,
     });
   },
   patch: () => {
@@ -72,4 +87,11 @@ const experienceQuery = {
     });
   },
 };
-export { progressQuery, experienceQuery };
+const pointQuery = {
+  patch: () => {
+    return useMutation({
+      mutationFn: usersApis.patchPoint,
+    });
+  },
+};
+export { progressQuery, experienceQuery, userQuizzesQuery, pointQuery };