[#7] refactor : test result page

src/Router.js

@@ -1,15 +1,15 @@
 import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { TestResult1 } from "./pages/TestResult1/TestResult1";
-import { TestResult2 } from "./pages/TestResult2/TestResult2";
-import { TestResult3 } from "./pages/TestResult3/TestResult3";
-import { TestResult4 } from "./pages/TestResult4/TestResult4";
-import { TestResult5 } from "./pages/TestResult5/TestResult5";
-import { TestResult6 } from "./pages/TestResult6/TestResult6";
-import { TestResult7} from "./pages/TestResult7/TestResult7";
-import { TestResult8} from "./pages/TestResult8/TestResult8";
 import Main from "./pages/Main";
 import TestPage from "./pages/TestPage";
+import { TestResult1 } from "./pages/TestResult1";
+import { TestResult2 } from "./pages/TestResult2";
+import { TestResult3 } from "./pages/TestResult3";
+import { TestResult4 } from "./pages/TestResult4";
+import { TestResult5 } from "./pages/TestResult5";
+import { TestResult6 } from "./pages/TestResult6";
+import { TestResult7 } from "./pages/TestResult7";
+import { TestResult8 } from "./pages/TestResult8";
 
 const Router = () => {
   return (
@@ -18,13 +18,13 @@ const Router = () => {
         <Route path="/" element={<Main />} />
         <Route path="/test/:step" element={<TestPage />} />
         <Route path="/one" element={<TestResult1 />} />
-      <Route path="/two" element={<TestResult2 />} />
-      <Route path="/three" element={<TestResult3 />} /> 
-      <Route path="/four" element={<TestResult4 />}/>
-      <Route path="/five" element={<TestResult5 />}/>
-      <Route path="/six" element={<TestResult6 />}/>
-      <Route path="/seven" element={<TestResult7 />}/>
-      <Route path="/eight" element={<TestResult8 />}/>
+        <Route path="/two" element={<TestResult2 />} />
+        <Route path="/three" element={<TestResult3 />} />
+        <Route path="/four" element={<TestResult4 />} />
+        <Route path="/five" element={<TestResult5 />} />
+        <Route path="/six" element={<TestResult6 />} />
+        <Route path="/seven" element={<TestResult7 />} />
+        <Route path="/eight" element={<TestResult8 />} />
       </Routes>
     </BrowserRouter>
   );

src/components/BoxLarge/index.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Shadow, Boxin, BoxlargeRoot } from "./styled";
+
+const BoxLarge = ({ propTop, boxColor }) => {
+  return (
+    <BoxlargeRoot propTop={propTop}>
+      <Shadow />
+      <Boxin boxColor={boxColor} />
+    </BoxlargeRoot>
+  );
+};
+
+export default BoxLarge;

src/components/BrownBox/BoxLarge.js → src/components/BoxLarge/styled.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-const Shadow = styled.div`
+export const Shadow = styled.div`
   position: absolute;
   height: 100%;
   width: 98.26%;
@@ -11,7 +11,7 @@ const Shadow = styled.div`
   border-radius: var(--br-3xs);
   background-color: var(--color-gray-200);
 `;
-const Boxin = styled.div`
+export const Boxin = styled.div`
   position: absolute;
   height: 96.55%;
   width: 98.26%;
@@ -20,25 +20,14 @@ const Boxin = styled.div`
   bottom: 3.45%;
   left: 0%;
   border-radius: var(--br-3xs);
-  background-color: #CBB0A1;
+  background-color: ${p => p.boxColor};
 `;
-const BoxlargeRoot = styled.div`
+export const BoxlargeRoot = styled.div`
   position: absolute;
   top: 480px;
   left: 54px;
   left: calc(50% - 145px);
   width: 287px;
   height: 174px;
-  top: ${(p) => p.propTop};
+  top: ${p => p.propTop};
 `;
-
-const BoxLarge = ({ propTop }) => {
-  return (
-    <BoxlargeRoot propTop={propTop}>
-      <Shadow />
-      <Boxin />
-    </BoxlargeRoot>
-  );
-};
-
-export default BoxLarge;

src/components/ColorBox/index.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { BoxContainer, Longbox, B } from "./styled";
+
+const BlueBox = ({ eyePersonalityEyeSynergyT, propTop, boxColor }) => {
+  return (
+    <BoxContainer propTop={propTop}>
+      <Longbox boxColor={boxColor} />
+      <B>{eyePersonalityEyeSynergyT}</B>
+    </BoxContainer>
+  );
+};
+
+export default BlueBox;

src/components/BlueBox/BlueBox.js → src/components/ColorBox/styled.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-const Longbox = styled.div`
+export const Longbox = styled.div`
   position: absolute;
   height: 100%;
   width: 100%;
@@ -9,19 +9,18 @@ const Longbox = styled.div`
   bottom: 0%;
   left: 0%;
   border-radius: 8px;
-background: #CDDCFF;
-
-filter: blur(1px);
+  background-color: ${p => p.boxColor};
+  filter: blur(1px);
 `;
-const B = styled.b`
+export const B = styled.b`
   position: absolute;
   top: -1px;
   left: 0px;
   display: inline-block;
   width: 275px;
   height: 21px;
 `;
-const PinkboxRoot = styled.div`
+export const BoxContainer = styled.div`
   position: absolute;
   top: 448px;
   left: calc(50% - 145px);
@@ -31,16 +30,5 @@ const PinkboxRoot = styled.div`
   font-size: var(--font-size-mini-5);
   color: var(--color-darkslategray-100);
   font-family: var(--font-noto-sans-kr);
-  top: ${(p) => p.propTop};
+  top: ${p => p.propTop};
 `;
-
-const BlueBox = ({ eyePersonalityEyeSynergyT, propTop }) => {
-  return (
-    <PinkboxRoot propTop={propTop}>
-      <Longbox />
-      <B>{eyePersonalityEyeSynergyT}</B>
-    </PinkboxRoot>
-  );
-};
-
-export default BlueBox;