From 99b6c56632453a75ca3e8b668050639c8838c286 Mon Sep 17 00:00:00 2001
From: s0zzang <dlth8888@gmail.com>
Date: Tue, 22 Oct 2024 11:22:02 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Style:=20=EC=B2=99=EB=8F=84=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/scale/Questions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/scale/Questions.tsx b/src/pages/scale/Questions.tsx
index c721596..6b7a212 100644
--- a/src/pages/scale/Questions.tsx
+++ b/src/pages/scale/Questions.tsx
@@ -174,7 +174,7 @@ const Questions = ({ onSubmit, page }: { onSubmit: SubmitHandler<TestingFormData
           </div>
         </InputBox>
       ))}
-      <Button text={page !== 5 ? '다음' : '제출'} type="submit" size="large" disabled={false} />
+      <Button text={page !== 5 ? '다음' : '제출'} type="submit" size="large" disabled={false} fixed={true} />
     </form>
   );
 };

From 82b80510a979a8a5f24195511bccaaaf8f041215 Mon Sep 17 00:00:00 2001
From: s0zzang <dlth8888@gmail.com>
Date: Tue, 22 Oct 2024 11:22:53 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=EA=B7=B8=EB=A0=88=EC=8A=A4=EB=B0=94=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/scale/Testing.tsx | 56 ++++++++++++++++++++++++++++++-------
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/pages/scale/Testing.tsx b/src/pages/scale/Testing.tsx
index ec7074f..36cd11c 100644
--- a/src/pages/scale/Testing.tsx
+++ b/src/pages/scale/Testing.tsx
@@ -1,9 +1,9 @@
-import SignupProgressBar from '@components/Auth/SignupProgressBar';
+import GenericProgressBar from '@components/common/GenericProgressBar';
+import styled from '@emotion/styled';
 import { useFunnel } from '@hooks/useFunnel';
+import variables from '@styles/Variables';
 import { useCallback, useState } from 'react';
 import Questions from './Questions';
-import styled from '@emotion/styled';
-import variables from '@styles/Variables';
 
 export interface TestingFormData {
   [key: string]: string;
@@ -17,6 +17,7 @@ export interface TestingFormData {
 
 const Testing = () => {
   const steps = ['1', '2', '3', '4', '5'];
+  const [accData, setAccData] = useState({});
   const [result, setResult] = useState<TestingFormData>({
     total: '0',
     social: '0',
@@ -33,6 +34,7 @@ const Testing = () => {
 
   const onSubmit = useCallback(
     async (formData: TestingFormData) => {
+      setAccData({ ...accData, ...formData });
       setResult((prev) => {
         const newResult = { ...prev };
         for (const key in formData) {
@@ -53,6 +55,30 @@ const Testing = () => {
     [currentStep]
   );
 
+  const toPrevPage = () => setStep(`${Number(currentStep) - 1}`);
+
+  const ProgressBox = styled.div`
+    display: flex;
+    margin-top: -1.6rem;
+    margin-bottom: 2rem;
+    color: ${variables.colors.gray100};
+    font-size: ${variables.size.big};
+    display: none;
+
+    .left {
+      visibility: ${(props) => (props.theme === '1' ? 'hidden' : 'visible')};
+      button {
+        background: url(/img/icon-page-prev.svg) no-repeat center left / 0.8rem;
+        padding-left: 2rem;
+      }
+    }
+    .right {
+      margin-left: auto;
+      p {
+        font-size: ${variables.size.medium};
+      }
+    }
+  `;
   const TopBox = styled.div`
     .info {
       text-align: center;
@@ -66,19 +92,29 @@ const Testing = () => {
       margin: 4rem auto 7rem;
       max-width: 29.6rem;
       img {
-        max-width: 100%;
         height: 18rem;
         aspect-ratio: 295/179;
       }
     }
-  `;
-  const BottomBox = styled.div`
-    padding-bottom: 5.6rem;
+    & + div {
+      padding-bottom: calc(5.6rem + 3rem);
+    }
   `;
 
   return (
     <>
-      <SignupProgressBar progress={progressPercentage} />
+      <GenericProgressBar progress={progressPercentage} />
+      <ProgressBox theme={currentStep}>
+        <div className="left" style={{}}>
+          <button onClick={() => toPrevPage()}>이전 문항</button>
+        </div>
+        <div className="right">
+          <p>
+            {Number(currentStep) - 1}
+            {currentStep === '1' ? '' : '0'} / 46
+          </p>
+        </div>
+      </ProgressBox>
       <TopBox className="top-box">
         <p className="info">숫자가 높을수록 강한 긍정을 의미해요</p>
         <div className="img-box">
@@ -86,7 +122,7 @@ const Testing = () => {
         </div>
       </TopBox>
 
-      <BottomBox>
+      <div>
         <Funnel>
           <Step name="1">
             <Questions onSubmit={onSubmit} page={1} />
@@ -104,7 +140,7 @@ const Testing = () => {
             <Questions onSubmit={onSubmit} page={5} />
           </Step>
         </Funnel>
-      </BottomBox>
+      </div>
     </>
   );
 };