diff --git a/src/Router.js b/src/Router.js
index 069d4f3..be572d7 100644
--- a/src/Router.js
+++ b/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>
   );
diff --git a/src/components/BlueBox/BoxLarge.js b/src/components/BlueBox/BoxLarge.js
deleted file mode 100644
index edf2d37..0000000
--- a/src/components/BlueBox/BoxLarge.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from "styled-components";
-
-const Shadow = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 98.26%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 1.74%;
-  border-radius: var(--br-3xs);
-  background-color: var(--color-gray-200);
-`;
-const Boxin = styled.div`
-  position: absolute;
-  height: 96.55%;
-  width: 98.26%;
-  top: 0%;
-  right: 1.74%;
-  bottom: 3.45%;
-  left: 0%;
-  border-radius: var(--br-3xs);
-  background-color: #CDDCFF;
-`;
-const BoxlargeRoot = styled.div`
-  position: absolute;
-  top: 480px;
-  left: 54px;
-  left: calc(50% - 145px);
-  width: 287px;
-  height: 174px;
-  top: ${(p) => p.propTop};
-`;
-
-const BoxLarge = ({ propTop }) => {
-  return (
-    <BoxlargeRoot propTop={propTop}>
-      <Shadow />
-      <Boxin />
-    </BoxlargeRoot>
-  );
-};
-
-export default BoxLarge;
\ No newline at end of file
diff --git a/src/components/BoxLarge copy/BoxLarge.js b/src/components/BoxLarge copy/BoxLarge.js
deleted file mode 100644
index 664bb5c..0000000
--- a/src/components/BoxLarge copy/BoxLarge.js	
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from "styled-components";
-
-const Shadow = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 98.26%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 1.74%;
-  border-radius: var(--br-3xs);
-  background-color: var(--color-gray-200);
-`;
-const Boxin = styled.div`
-  position: absolute;
-  height: 96.55%;
-  width: 98.26%;
-  top: 0%;
-  right: 1.74%;
-  bottom: 3.45%;
-  left: 0%;
-  border-radius: var(--br-3xs);
-  background-color: var(--color-pink);
-`;
-const BoxlargeRoot = styled.div`
-  position: absolute;
-  top: 480px;
-  left: 54px;
-  left: calc(50% - 145px);
-  width: 287px;
-  height: 174px;
-  top: ${(p) => p.propTop};
-`;
-
-const BoxLarge = ({ propTop }) => {
-  return (
-    <BoxlargeRoot propTop={propTop}>
-      <Shadow />
-      <Boxin />
-    </BoxlargeRoot>
-  );
-};
-
-export default BoxLarge;
\ No newline at end of file
diff --git a/src/components/BoxLarge/BoxLarge.js b/src/components/BoxLarge/BoxLarge.js
deleted file mode 100644
index 664bb5c..0000000
--- a/src/components/BoxLarge/BoxLarge.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from "styled-components";
-
-const Shadow = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 98.26%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 1.74%;
-  border-radius: var(--br-3xs);
-  background-color: var(--color-gray-200);
-`;
-const Boxin = styled.div`
-  position: absolute;
-  height: 96.55%;
-  width: 98.26%;
-  top: 0%;
-  right: 1.74%;
-  bottom: 3.45%;
-  left: 0%;
-  border-radius: var(--br-3xs);
-  background-color: var(--color-pink);
-`;
-const BoxlargeRoot = styled.div`
-  position: absolute;
-  top: 480px;
-  left: 54px;
-  left: calc(50% - 145px);
-  width: 287px;
-  height: 174px;
-  top: ${(p) => p.propTop};
-`;
-
-const BoxLarge = ({ propTop }) => {
-  return (
-    <BoxlargeRoot propTop={propTop}>
-      <Shadow />
-      <Boxin />
-    </BoxlargeRoot>
-  );
-};
-
-export default BoxLarge;
\ No newline at end of file
diff --git a/src/components/BoxLarge/index.jsx b/src/components/BoxLarge/index.jsx
new file mode 100644
index 0000000..65d510d
--- /dev/null
+++ b/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;
diff --git a/src/components/BrownBox/BoxLarge.js b/src/components/BoxLarge/styled.js
similarity index 60%
rename from src/components/BrownBox/BoxLarge.js
rename to src/components/BoxLarge/styled.js
index af291cd..8c8e996 100644
--- a/src/components/BrownBox/BoxLarge.js
+++ b/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;
\ No newline at end of file
diff --git a/src/components/BrownBox/BrownBox.js b/src/components/BrownBox/BrownBox.js
deleted file mode 100644
index dd1011a..0000000
--- a/src/components/BrownBox/BrownBox.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from "styled-components";
-
-const Longbox = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 0%;
-  border-radius: 8px;
-background: #AC8276;
-
-filter: blur(1px);
-`;
-const B = styled.b`
-  position: absolute;
-  top: -1px;
-  left: 0px;
-  display: inline-block;
-  width: 275px;
-  height: 21px;
-  color: #ffffff;
-`;
-const PinkboxRoot = styled.div`
-  position: absolute;
-  top: 448px;
-  left: calc(50% - 145px);
-  width: 275px;
-  height: 20px;
-  text-align: center;
-  font-size: var(--font-size-mini-5);
-  color: var(--color-darkslategray-100);
-  font-family: var(--font-noto-sans-kr);
-  top: ${(p) => p.propTop};
-`;
-
-const BrownBox = ({ eyePersonalityEyeSynergyT, propTop }) => {
-  return (
-    <PinkboxRoot propTop={propTop}>
-      <Longbox />
-      <B>{eyePersonalityEyeSynergyT}</B>
-    </PinkboxRoot>
-  );
-};
-
-export default BrownBox;
diff --git a/src/components/ColorBox/index.jsx b/src/components/ColorBox/index.jsx
new file mode 100644
index 0000000..b83bbc9
--- /dev/null
+++ b/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;
diff --git a/src/components/BlueBox/BlueBox.js b/src/components/ColorBox/styled.js
similarity index 58%
rename from src/components/BlueBox/BlueBox.js
rename to src/components/ColorBox/styled.js
index 877e2bd..8572aa5 100644
--- a/src/components/BlueBox/BlueBox.js
+++ b/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,11 +9,10 @@ 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;
@@ -21,7 +20,7 @@ const B = styled.b`
   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;
diff --git a/src/components/DarkBox/BoxLarge.jsx b/src/components/DarkBox/BoxLarge.jsx
deleted file mode 100644
index 348739a..0000000
--- a/src/components/DarkBox/BoxLarge.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from "styled-components";
-
-const Shadow = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 98.26%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 1.74%;
-  border-radius: var(--br-3xs);
-  background-color: var(--color-gray-200);
-`;
-const Boxin = styled.div`
-  position: absolute;
-  height: 96.55%;
-  width: 98.26%;
-  top: 0%;
-  right: 1.74%;
-  bottom: 3.45%;
-  left: 0%;
-  border-radius: var(--br-3xs);
-  background-color: #96ACB4;
-`;
-const BoxlargeRoot = styled.div`
-  position: absolute;
-  top: 480px;
-  left: 54px;
-  left: calc(50% - 145px);
-  width: 287px;
-  height: 174px;
-  top: ${(p) => p.propTop};
-`;
-
-const BoxLarge = ({ propTop }) => {
-  return (
-    <BoxlargeRoot propTop={propTop}>
-      <Shadow />
-      <Boxin />
-    </BoxlargeRoot>
-  );
-};
-
-export default BoxLarge;
\ No newline at end of file
diff --git a/src/components/DarkBox/DarkBox.jsx b/src/components/DarkBox/DarkBox.jsx
deleted file mode 100644
index 8b4791d..0000000
--- a/src/components/DarkBox/DarkBox.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import styled from "styled-components";
-
-const Longbox = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 0%;
-  border-radius: 8px;
-background: #84A7B8;
-
-filter: blur(1px);
-`;
-const B = styled.b`
-  position: absolute;
-  top: -1px;
-  left: 0px;
-  display: inline-block;
-  width: 275px;
-  height: 21px;
-  color: #FFFFFF;
-`;
-const PinkboxRoot = styled.div`
-  position: absolute;
-  top: 448px;
-  left: calc(50% - 145px);
-  width: 275px;
-  height: 20px;
-  text-align: center;
-  font-size: var(--font-size-mini-5);
-  color: var(--color-darkslategray-100);
-  font-family: var(--font-noto-sans-kr);
-
-  top: ${(p) => p.propTop};
-`;
-
-const DarkBox = ({ eyePersonalityEyeSynergyT, propTop }) => {
-  return (
-    <PinkboxRoot propTop={propTop}>
-      <Longbox />
-      <B>{eyePersonalityEyeSynergyT}</B>
-    </PinkboxRoot>
-  );
-};
-
-export default DarkBox;
diff --git a/src/components/GreenBox/BoxLarge.jsx b/src/components/GreenBox/BoxLarge.jsx
deleted file mode 100644
index 090f364..0000000
--- a/src/components/GreenBox/BoxLarge.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from "styled-components";
-
-const Shadow = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 98.26%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 1.74%;
-  border-radius: var(--br-3xs);
-  background-color: var(--color-gray-200);
-`;
-const Boxin = styled.div`
-  position: absolute;
-  height: 96.55%;
-  width: 98.26%;
-  top: 0%;
-  right: 1.74%;
-  bottom: 3.45%;
-  left: 0%;
-  border-radius: var(--br-3xs);
-  background-color: #A7C6AA;
-`;
-const BoxlargeRoot = styled.div`
-  position: absolute;
-  top: 480px;
-  left: 54px;
-  left: calc(50% - 145px);
-  width: 287px;
-  height: 174px;
-  top: ${(p) => p.propTop};
-`;
-
-const BoxLarge = ({ propTop }) => {
-  return (
-    <BoxlargeRoot propTop={propTop}>
-      <Shadow />
-      <Boxin />
-    </BoxlargeRoot>
-  );
-};
-
-export default BoxLarge;
\ No newline at end of file
diff --git a/src/components/GreenBox/GreenBox.jsx b/src/components/GreenBox/GreenBox.jsx
deleted file mode 100644
index a5a78a6..0000000
--- a/src/components/GreenBox/GreenBox.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import styled from "styled-components";
-
-const Longbox = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 0%;
-  border-radius: 8px;
-background: #3E721D;
-
-filter: blur(1px);
-`;
-const B = styled.b`
-  position: absolute;
-  top: -1px;
-  left: 0px;
-  display: inline-block;
-  width: 275px;
-  height: 21px;
-  color: #FFFFFF;
-`;
-const PinkboxRoot = styled.div`
-  position: absolute;
-  top: 448px;
-  left: calc(50% - 145px);
-  width: 275px;
-  height: 20px;
-  text-align: center;
-  font-size: var(--font-size-mini-5);
-  color: var(--color-darkslategray-100);
-  font-family: var(--font-noto-sans-kr);
-
-  top: ${(p) => p.propTop};
-`;
-
-const GreenBox = ({ eyePersonalityEyeSynergyT, propTop }) => {
-  return (
-    <PinkboxRoot propTop={propTop}>
-      <Longbox />
-      <B>{eyePersonalityEyeSynergyT}</B>
-    </PinkboxRoot>
-  );
-};
-
-export default GreenBox;
diff --git a/src/components/OrangeBox/BoxLarge.jsx b/src/components/OrangeBox/BoxLarge.jsx
deleted file mode 100644
index a853963..0000000
--- a/src/components/OrangeBox/BoxLarge.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from "styled-components";
-
-const Shadow = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 98.26%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 1.74%;
-  border-radius: var(--br-3xs);
-  background-color: var(--color-gray-200);
-`;
-const Boxin = styled.div`
-  position: absolute;
-  height: 96.55%;
-  width: 98.26%;
-  top: 0%;
-  right: 1.74%;
-  bottom: 3.45%;
-  left: 0%;
-  border-radius: var(--br-3xs);
-  background-color: #D7C773;
-`;
-const BoxlargeRoot = styled.div`
-  position: absolute;
-  top: 480px;
-  left: 54px;
-  left: calc(50% - 145px);
-  width: 287px;
-  height: 174px;
-  top: ${(p) => p.propTop};
-`;
-
-const BoxLarge = ({ propTop }) => {
-  return (
-    <BoxlargeRoot propTop={propTop}>
-      <Shadow />
-      <Boxin />
-    </BoxlargeRoot>
-  );
-};
-
-export default BoxLarge;
\ No newline at end of file
diff --git a/src/components/OrangeBox/OrangeBox.jsx b/src/components/OrangeBox/OrangeBox.jsx
deleted file mode 100644
index 8ac610e..0000000
--- a/src/components/OrangeBox/OrangeBox.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from "styled-components";
-
-const Longbox = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 0%;
-  border-radius: 8px;
-background: #D7C773;
-
-filter: blur(1px);
-`;
-const B = styled.b`
-  position: absolute;
-  top: -1px;
-  left: 0px;
-  display: inline-block;
-  width: 275px;
-  height: 21px;
-`;
-const PinkboxRoot = styled.div`
-  position: absolute;
-  top: 448px;
-  left: calc(50% - 145px);
-  width: 275px;
-  height: 20px;
-  text-align: center;
-  font-size: var(--font-size-mini-5);
-  color: var(--color-darkslategray-100);
-  font-family: var(--font-noto-sans-kr);
-
-  top: ${(p) => p.propTop};
-`;
-
-const YellowBox = ({ eyePersonalityEyeSynergyT, propTop }) => {
-  return (
-    <PinkboxRoot propTop={propTop}>
-      <Longbox />
-      <B>{eyePersonalityEyeSynergyT}</B>
-    </PinkboxRoot>
-  );
-};
-
-export default YellowBox;
diff --git a/src/components/PinkBox/PinkBox.js b/src/components/PinkBox/PinkBox.js
deleted file mode 100644
index 1a1cadc..0000000
--- a/src/components/PinkBox/PinkBox.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import styled from "styled-components";
-
-const Longbox = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 0%;
-  border-radius: 8px;
-background: rgba(235, 190, 191, 0.70);
-
-filter: blur(1px);
-`;
-const B = styled.b`
-  position: absolute;
-  top: -1px;
-  left: 0px;
-  display: inline-block;
-  width: 275px;
-  height: 21px;
-`;
-const PinkboxRoot = styled.div`
-  position: absolute;
-  top: 448px;
-  left: calc(50% - 145px);
-  width: 275px;
-  height: 20px;
-  text-align: center;
-  font-size: var(--font-size-mini-5);
-  color: var(--color-darkslategray-100);
-  font-family: var(--font-noto-sans-kr);
-  top: ${(p) => p.propTop};
-`;
-
-const PinkBox = ({ eyePersonalityEyeSynergyT, propTop }) => {
-  return (
-    <PinkboxRoot propTop={propTop}>
-      <Longbox />
-      <B>{eyePersonalityEyeSynergyT}</B>
-    </PinkboxRoot>
-  );
-};
-
-export default PinkBox;
diff --git a/src/components/PurpleBox/BoxLarge.jsx b/src/components/PurpleBox/BoxLarge.jsx
deleted file mode 100644
index 193bfb3..0000000
--- a/src/components/PurpleBox/BoxLarge.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from "styled-components";
-
-const Shadow = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 98.26%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 1.74%;
-  border-radius: var(--br-3xs);
-  background-color: var(--color-gray-200);
-`;
-const Boxin = styled.div`
-  position: absolute;
-  height: 96.55%;
-  width: 98.26%;
-  top: 0%;
-  right: 1.74%;
-  bottom: 3.45%;
-  left: 0%;
-  border-radius: var(--br-3xs);
-  background-color: #B8A7C6;
-`;
-const BoxlargeRoot = styled.div`
-  position: absolute;
-  top: 480px;
-  left: 54px;
-  left: calc(50% - 145px);
-  width: 287px;
-  height: 174px;
-  top: ${(p) => p.propTop};
-`;
-
-const BoxLarge = ({ propTop }) => {
-  return (
-    <BoxlargeRoot propTop={propTop}>
-      <Shadow />
-      <Boxin />
-    </BoxlargeRoot>
-  );
-};
-
-export default BoxLarge;
\ No newline at end of file
diff --git a/src/components/PurpleBox/PurpleBox.jsx b/src/components/PurpleBox/PurpleBox.jsx
deleted file mode 100644
index 4620af9..0000000
--- a/src/components/PurpleBox/PurpleBox.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import styled from "styled-components";
-
-const Longbox = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 0%;
-  border-radius: 8px;
-background: #9A7FA8;
-
-filter: blur(1px);
-`;
-const B = styled.b`
-  position: absolute;
-  top: -1px;
-  left: 0px;
-  display: inline-block;
-  width: 275px;
-  height: 21px;
-  color: #FFFFFF;
-`;
-const PinkboxRoot = styled.div`
-  position: absolute;
-  top: 448px;
-  left: calc(50% - 145px);
-  width: 275px;
-  height: 20px;
-  text-align: center;
-  font-size: var(--font-size-mini-5);
-  color: var(--color-darkslategray-100);
-  font-family: var(--font-noto-sans-kr);
-
-  top: ${(p) => p.propTop};
-`;
-
-const PurlpleBox = ({ eyePersonalityEyeSynergyT, propTop }) => {
-  return (
-    <PinkboxRoot propTop={propTop}>
-      <Longbox />
-      <B>{eyePersonalityEyeSynergyT}</B>
-    </PinkboxRoot>
-  );
-};
-
-export default PurlpleBox;
diff --git a/src/components/Tag/index.jsx b/src/components/Tag/index.jsx
new file mode 100644
index 0000000..efd63c2
--- /dev/null
+++ b/src/components/Tag/index.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import {
+  Component1Root,
+  WrapperBrowncirclebox,
+  BrowncircleboxIcon,
+  Div,
+} from "./styled";
+
+const Tag = ({ description, propLeft }) => {
+  return (
+    <Component1Root propLeft={propLeft}>
+      <WrapperBrowncirclebox>
+        <BrowncircleboxIcon alt="" src="/browncirclebox@2x.png" />
+      </WrapperBrowncirclebox>
+      <Div>{description}</Div>
+    </Component1Root>
+  );
+};
+
+export default Tag;
diff --git a/src/components/Component1/Component1.js b/src/components/Tag/styled.js
similarity index 62%
rename from src/components/Component1/Component1.js
rename to src/components/Tag/styled.js
index 9ad2737..1d9317b 100644
--- a/src/components/Component1/Component1.js
+++ b/src/components/Tag/styled.js
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-const BrowncircleboxIcon = styled.img`
+export const BrowncircleboxIcon = styled.img`
   height: 100%;
   width: 100%;
   max-width: 100%;
@@ -12,7 +12,7 @@ const BrowncircleboxIcon = styled.img`
   top: 6%;
   transform: scale(1.348);
 `;
-const WrapperBrowncirclebox = styled.div`
+export const WrapperBrowncirclebox = styled.div`
   position: absolute;
   height: 100%;
   width: 100%;
@@ -25,7 +25,7 @@ const WrapperBrowncirclebox = styled.div`
   align-items: center;
   justify-content: center;
 `;
-const Div = styled.div`
+export const Div = styled.div`
   position: absolute;
   height: 91.3%;
   width: 77.5%;
@@ -36,28 +36,15 @@ const Div = styled.div`
   font-weight: 500;
   display: inline-block;
 `;
-const Component1Root = styled.div`
+export const Component1Root = styled.div`
   position: absolute;
   top: 490px;
   left: calc(50% - 50px);
-  width: 25vw;;
+  width: 25vw;
   height: 23px;
   text-align: center;
   font-size: var(--font-size-xs);
   color: var(--color-darkslategray-100);
   font-family: var(--font-noto-sans-kr);
-  left: ${(p) => p.propLeft};
+  left: ${p => p.propLeft};
 `;
-
-const Component1 = ({ description, propLeft }) => {
-  return (
-    <Component1Root propLeft={propLeft}>
-      <WrapperBrowncirclebox>
-        <BrowncircleboxIcon alt="" src="/browncirclebox@2x.png" />
-      </WrapperBrowncirclebox>
-      <Div>{description}</Div>
-    </Component1Root>
-  );
-};
-
-export default Component1;
diff --git a/src/components/YellowBox/BoxLarge.jsx b/src/components/YellowBox/BoxLarge.jsx
deleted file mode 100644
index ff97277..0000000
--- a/src/components/YellowBox/BoxLarge.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from "styled-components";
-
-const Shadow = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 98.26%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 1.74%;
-  border-radius: var(--br-3xs);
-  background-color: var(--color-gray-200);
-`;
-const Boxin = styled.div`
-  position: absolute;
-  height: 96.55%;
-  width: 98.26%;
-  top: 0%;
-  right: 1.74%;
-  bottom: 3.45%;
-  left: 0%;
-  border-radius: var(--br-3xs);
-  background-color: #F4DFA9;
-`;
-const BoxlargeRoot = styled.div`
-  position: absolute;
-  top: 480px;
-  left: 54px;
-  left: calc(50% - 145px);
-  width: 287px;
-  height: 174px;
-  top: ${(p) => p.propTop};
-`;
-
-const BoxLarge = ({ propTop }) => {
-  return (
-    <BoxlargeRoot propTop={propTop}>
-      <Shadow />
-      <Boxin />
-    </BoxlargeRoot>
-  );
-};
-
-export default BoxLarge;
\ No newline at end of file
diff --git a/src/components/YellowBox/YellowBox.jsx b/src/components/YellowBox/YellowBox.jsx
deleted file mode 100644
index c33e9fa..0000000
--- a/src/components/YellowBox/YellowBox.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from "styled-components";
-
-const Longbox = styled.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 0%;
-  border-radius: 8px;
-background: #F4DFA9;
-
-filter: blur(1px);
-`;
-const B = styled.b`
-  position: absolute;
-  top: -1px;
-  left: 0px;
-  display: inline-block;
-  width: 275px;
-  height: 21px;
-`;
-const PinkboxRoot = styled.div`
-  position: absolute;
-  top: 448px;
-  left: calc(50% - 145px);
-  width: 275px;
-  height: 20px;
-  text-align: center;
-  font-size: var(--font-size-mini-5);
-  color: var(--color-darkslategray-100);
-  font-family: var(--font-noto-sans-kr);
-
-  top: ${(p) => p.propTop};
-`;
-
-const YellowBox = ({ eyePersonalityEyeSynergyT, propTop }) => {
-  return (
-    <PinkboxRoot propTop={propTop}>
-      <Longbox />
-      <B>{eyePersonalityEyeSynergyT}</B>
-    </PinkboxRoot>
-  );
-};
-
-export default YellowBox;
diff --git a/src/components/index.js b/src/components/index.js
index 7c8d4bc..6c96726 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,12 +4,6 @@ export { default as TestBox } from "./TestBox";
 export { default as SnowAnimation } from "./SnowAnimation";
 export { default as SideMenu } from "./SideMenu";
 export { default as LoginModal } from "./LoginModal";
-
-export { default as BlueBox } from "./BlueBox";
-export { default as BoxLarge } from "./BlueBox";
+export { default as ColorBox } from "./ColorBox";
 export { default as BoxLarge } from "./BoxLarge";
-export { default as Component1 } from "./Component1";
-export { default as GreenBox } from "./GreenBox";
-export { default as GreenBox } from "./BoxLarge";
-export { default as LoginModal } from "./LoginModal";
-
+export { default as Tag } from "./Tag";
diff --git a/src/components/modal/Modal.jsx b/src/components/modal/Modal.jsx
deleted file mode 100644
index 0fca8b2..0000000
--- a/src/components/modal/Modal.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-useEffect(() => {
-    const script = document.createElement("script");
-    script.src = "https://developers.kakao.com/sdk/js/kakao.js";
-    script.async = true;
-    document.body.appendChild(script);
-    return () => document.body.removeChild(script);
-  }, []);
\ No newline at end of file
diff --git a/src/pages/TestResult1/TestResult1.jsx b/src/pages/TestResult1/TestResult1.jsx
index e8d16b3..ee240af 100644
--- a/src/pages/TestResult1/TestResult1.jsx
+++ b/src/pages/TestResult1/TestResult1.jsx
@@ -1,6 +1,4 @@
-import BoxLarge from "../../components/BoxLarge/BoxLarge";
-import Component1 from "../../components/Component1/Component1";
-import BlueBox from "../../components/BlueBox/BlueBox";
+import { BoxLarge, ColorBox, Tag } from "../../components";
 import {
   ButtonsCtaSecondary1,
   ButtonsCtaSecondary,
@@ -36,8 +34,7 @@ import {
   CircleLeft1,
   CircleLeft2,
   CircleLeft3,
-}from "./styled"
-
+} from "./styled";
 
 export const TestResult1 = () => {
   return (
@@ -51,45 +48,45 @@ export const TestResult1 = () => {
         <Div2>테스트 결과지</Div2>
       </Div>
       <Dotline />
-      <BoxLarge propTop="480px" />
-      <BoxLarge propTop="736px" />
-      <Component1 description="#겉바속바 " propLeft="65px" />
-      <Component1 description="#에너제틱 " propLeft="154px" />
-      <Component1 description="#만능파티러" propLeft="243px" />
+      <BoxLarge propTop="480px" boxColor="#CDDCFF" />
+      <BoxLarge propTop="736px" boxColor="#CDDCFF" />
+      <Tag description="#겉바속바 " propLeft="65px" />
+      <Tag description="#에너제틱 " propLeft="154px" />
+      <Tag description="#만능파티러" propLeft="243px" />
       <Div3>스포티한 눈썰매형</Div3>
       <B>
         <Ul>
           <Li>{`언제나 활기차고 에너제틱한 스포티한 느낌의 눈사람이에요. `}</Li>
           <Li>{`어떤 활동이든 즉흥적으로 참여하고, 무엇보다 동적인 활동을 통해 스트레스를 해소하는 스타일이에요. `}</Li>
           <Li>{`이성친구들 앞에서도 낯을 가리지않고, 다함께 어울리는 것을 좋아하며 털털하고 쿨한 성격으로 인하여 주위에 많은 친구들이 모이는 편이에요.  `}</Li>
-          <Li2>
-            이성친구는 이성친구 일 뿐! 더 의미부여를 하지 않아요.
-          </Li2>
+          <Li2>이성친구는 이성친구 일 뿐! 더 의미부여를 하지 않아요.</Li2>
         </Ul>
       </B>
       <Div4>눈사람 여사친/남사친 성향 테스트</Div4>
       <Div5>
-        <P>{`다만, 약속이 많은 편이라 기존의 친했던 친구에게`}</P>
-        <P>
-        소홀해질 수도 있으니 관계를 유지하는 노력도 필요해보여요.
-        </P>
+        <P>`다만, 약속이 많은 편이라 기존의 친했던 친구에게`</P>
+        <P>소홀해질 수도 있으니 관계를 유지하는 노력도 필요해보여요.</P>
       </Div5>
       <WarningIcon alt="" src="/warning.png" />
-      <BlueBox
+      <ColorBox
         eyePersonalityEyeSynergyT="내 눈사람의 성향은 ?"
         propTop="448px"
+        boxColor="#CDDCFF"
       />
-      <BlueBox
+      <ColorBox
         eyePersonalityEyeSynergyT="나랑 시너지를 내는 눈사람 유형은 ?"
         propTop="701px"
+        boxColor="#CDDCFF"
       />
-      <BlueBox
+      <ColorBox
         eyePersonalityEyeSynergyT="Snowman Village에 눈사람 등록하기"
         propTop="924px"
+        boxColor="#CDDCFF"
       />
-      <BlueBox
+      <ColorBox
         eyePersonalityEyeSynergyT="SNS에 나만의 눈사람 공유하기"
         propTop="1051px"
+        boxColor="#CDDCFF"
       />
       <Div6>얼음이 들어간 핫초코형</Div6>
       <ButtonsCtaSecondary2>
@@ -111,11 +108,11 @@ export const TestResult1 = () => {
       <CircleLeft1 alt="" src="ellipse-2@2x.png" />
       <CircleLeft2 alt="" src="ellipse-6@2x.png" />
       <CircleLeft3 alt="" src="ellipse-2@2x.png" />
-      
+
       <ButtonsCtaSecondary4>
         <ButtonsCtaSecondary1 />
         <B1>눈사람 등록</B1>
-      </ButtonsCtaSecondary4>    
+      </ButtonsCtaSecondary4>
       <ButtonsCtaSecondary6>
         <ButtonsCtaSecondary1 />
         <B1>ReTest</B1>
@@ -127,5 +124,3 @@ export const TestResult1 = () => {
     </Testresult1Root>
   );
 };
-
-
diff --git a/src/pages/TestResult2/TestResult2.jsx b/src/pages/TestResult2/TestResult2.jsx
index c769d92..1c1d063 100644
--- a/src/pages/TestResult2/TestResult2.jsx
+++ b/src/pages/TestResult2/TestResult2.jsx
@@ -1,6 +1,4 @@
-import BoxLarge from "../../components/BoxLarge/BoxLarge";
-import Component1 from "../../components/Component1/Component1";
-import PinkBox from "../../components/PinkBox/PinkBox";
+import { BoxLarge, ColorBox, Tag } from "../../components";
 import {
   ButtonsCtaSecondary1,
   ButtonsCtaSecondary,
@@ -36,8 +34,7 @@ import {
   CircleLeft1,
   CircleLeft2,
   CircleLeft3,
-}from "./styled"
-
+} from "./styled";
 
 export const TestResult2 = () => {
   return (
@@ -51,11 +48,11 @@ export const TestResult2 = () => {
         <Div2>테스트 결과지</Div2>
       </Div>
       <Dotline />
-      <BoxLarge propTop="480px" />
-      <BoxLarge propTop="736px" />
-      <Component1 description="#겉촉속촉 " propLeft="65px" />
-      <Component1 description="#차분과수줍 " propLeft="154px" />
-      <Component1 description="#부드러운" propLeft="243px" />
+      <BoxLarge propTop="480px" boxColor="var(--color-pink)" />
+      <BoxLarge propTop="736px" boxColor="var(--color-pink)" />
+      <Tag description="#겉촉속촉 " propLeft="65px" />
+      <Tag description="#차분과수줍 " propLeft="154px" />
+      <Tag description="#부드러운" propLeft="243px" />
       <Div3>소라게의 베레모형</Div3>
       <B>
         <Ul>
@@ -76,21 +73,25 @@ export const TestResult2 = () => {
         </P>
       </Div5>
       <WarningIcon alt="" src="/warning.png" />
-      <PinkBox
+      <ColorBox
         eyePersonalityEyeSynergyT="내 눈사람의 성향은 ?"
         propTop="448px"
+        boxColor="rgba(235, 190, 191, 0.70)"
       />
-      <PinkBox
+      <ColorBox
         eyePersonalityEyeSynergyT="나랑 시너지를 내는 눈사람 유형은 ?"
         propTop="701px"
+        boxColor="rgba(235, 190, 191, 0.70)"
       />
-      <PinkBox
+      <ColorBox
         eyePersonalityEyeSynergyT="Snowman Village에 눈사람 등록하기"
         propTop="924px"
+        boxColor="rgba(235, 190, 191, 0.70)"
       />
-      <PinkBox
+      <ColorBox
         eyePersonalityEyeSynergyT="SNS에 나만의 눈사람 공유하기"
         propTop="1051px"
+        boxColor="rgba(235, 190, 191, 0.70)"
       />
       <Div6>차가운 색감의 벨벳 머플러형</Div6>
       <ButtonsCtaSecondary2>
@@ -112,11 +113,11 @@ export const TestResult2 = () => {
       <CircleLeft1 alt="" src="ellipse-2@2x.png" />
       <CircleLeft2 alt="" src="ellipse-6@2x.png" />
       <CircleLeft3 alt="" src="ellipse-2@2x.png" />
-      
+
       <ButtonsCtaSecondary4>
         <ButtonsCtaSecondary1 />
         <B1>눈사람 등록</B1>
-      </ButtonsCtaSecondary4>    
+      </ButtonsCtaSecondary4>
       <ButtonsCtaSecondary6>
         <ButtonsCtaSecondary1 />
         <B1>ReTest</B1>
@@ -128,5 +129,3 @@ export const TestResult2 = () => {
     </Testresult1Root>
   );
 };
-
-
diff --git a/src/pages/TestResult3/TestResult3.jsx b/src/pages/TestResult3/TestResult3.jsx
index 5e8cece..60b3c7a 100644
--- a/src/pages/TestResult3/TestResult3.jsx
+++ b/src/pages/TestResult3/TestResult3.jsx
@@ -1,6 +1,4 @@
-import BoxLarge from "../../components/GreenBox/BoxLarge";
-import Component1 from "../../components/Component1/Component1";
-import GreenBox from "../../components/GreenBox/GreenBox";
+import { BoxLarge, ColorBox, Tag } from "../../components";
 import {
   ButtonsCtaSecondary1,
   ButtonsCtaSecondary,
@@ -36,8 +34,7 @@ import {
   CircleLeft1,
   CircleLeft2,
   CircleLeft3,
-}from "./styled"
-
+} from "./styled";
 
 export const TestResult3 = () => {
   return (
@@ -51,44 +48,47 @@ export const TestResult3 = () => {
         <Div2>테스트 결과지</Div2>
       </Div>
       <Dotline />
-      <BoxLarge propTop="480px" />
-      <BoxLarge propTop="736px" />
-      <Component1 description="#겉촉속바 " propLeft="65px" />
-      <Component1 description="#속을알수없 " propLeft="154px" />
-      <Component1 description="#미스테리" propLeft="243px" />
+      <BoxLarge propTop="480px" boxColor="#A7C6AA" />
+      <BoxLarge propTop="736px" boxColor="#A7C6AA" />
+      <Tag description="#겉촉속바 " propLeft="65px" />
+      <Tag description="#속을알수없 " propLeft="154px" />
+      <Tag description="#미스테리" propLeft="243px" />
       <Div3>눈송이의 벙어리장갑형</Div3>
       <B>
         <Ul>
           <Li>{`속을 알기 어려운 특성으로 찬구들에게는 항상 새로운 흥미를 제공하며, 함께 시간을 보낼 때 미스터리한 매력을 선사하는 눈사람입니다.  `}</Li>
           <Li>{`의미심장한 행동과 말로 둘러싸여 있어, 이성친구들은 그 속에 어떤 이야기가 담겨있는지 알아내기 어려울 것입니다.  `}</Li>
           <Li2>
-          잔잔하지만 어디로 튈 지 모르는 생각으로 주변을 궁금하게 만들며, 즐거운 시간을 보내기도 해요.
+            잔잔하지만 어디로 튈 지 모르는 생각으로 주변을 궁금하게 만들며,
+            즐거운 시간을 보내기도 해요.
           </Li2>
         </Ul>
       </B>
       <Div4>눈사람 여사친/남사친 성향 테스트</Div4>
       <Div5>
-        <P>{`다만, 과도한 신비로움으로 인해 의사소통에 어려움이`}</P>
-        <P>
-        있을 수 있습니다. 상대방과의 관계에서 명확한 소통이 필요해요.
-        </P>
+        <P>`다만, 과도한 신비로움으로 인해 의사소통에 어려움이`</P>
+        <P>있을 수 있습니다. 상대방과의 관계에서 명확한 소통이 필요해요.</P>
       </Div5>
       <WarningIcon alt="" src="/warning.png" />
-      <GreenBox
+      <ColorBox
         eyePersonalityEyeSynergyT="내 눈사람의 성향은 ?"
         propTop="448px"
+        boxColor="#3E721D"
       />
-      <GreenBox
+      <ColorBox
         eyePersonalityEyeSynergyT="나랑 시너지를 내는 눈사람 유형은 ?"
         propTop="701px"
+        boxColor="#3E721D"
       />
-      <GreenBox
+      <ColorBox
         eyePersonalityEyeSynergyT="Snowman Village에 눈사람 등록하기"
         propTop="924px"
+        boxColor="#3E721D"
       />
-      <GreenBox
+      <ColorBox
         eyePersonalityEyeSynergyT="SNS에 나만의 눈사람 공유하기"
         propTop="1051px"
+        boxColor="#3E721D"
       />
       <Div6>날이 선 얼음 덩어리형</Div6>
       <ButtonsCtaSecondary2>
@@ -110,11 +110,11 @@ export const TestResult3 = () => {
       <CircleLeft1 alt="" src="ellipse-2@2x.png" />
       <CircleLeft2 alt="" src="ellipse-6@2x.png" />
       <CircleLeft3 alt="" src="ellipse-2@2x.png" />
-      
+
       <ButtonsCtaSecondary4>
         <ButtonsCtaSecondary1 />
         <B1>눈사람 등록</B1>
-      </ButtonsCtaSecondary4>    
+      </ButtonsCtaSecondary4>
       <ButtonsCtaSecondary6>
         <ButtonsCtaSecondary1 />
         <B1>ReTest</B1>
@@ -126,5 +126,3 @@ export const TestResult3 = () => {
     </Testresult1Root>
   );
 };
-
-
diff --git a/src/pages/TestResult4/TestResult4.jsx b/src/pages/TestResult4/TestResult4.jsx
index acf423d..9fda74d 100644
--- a/src/pages/TestResult4/TestResult4.jsx
+++ b/src/pages/TestResult4/TestResult4.jsx
@@ -1,6 +1,4 @@
-import BoxLarge from "../../components/BrownBox/BoxLarge";
-import Component1 from "../../components/Component1/Component1";
-import BrownBox from "../../components/BrownBox/BrownBox";
+import { BoxLarge, ColorBox, Tag } from "../../components";
 import {
   ButtonsCtaSecondary1,
   ButtonsCtaSecondary,
@@ -36,8 +34,7 @@ import {
   CircleLeft1,
   CircleLeft2,
   CircleLeft3,
-}from "./styled"
-
+} from "./styled";
 
 export const TestResult4 = () => {
   return (
@@ -51,18 +48,19 @@ export const TestResult4 = () => {
         <Div2>테스트 결과지</Div2>
       </Div>
       <Dotline />
-      <BoxLarge propTop="480px" />
-      <BoxLarge propTop="736px" />
-      <Component1 description="#겉촉속바 " propLeft="65px" />
-      <Component1 description="#쌍면성" propLeft="154px" />
-      <Component1 description="#선넘지마" propLeft="243px" />
+      <BoxLarge propTop="480px" boxColor="#CBB0A1" />
+      <BoxLarge propTop="736px" boxColor="#CBB0A1" />
+      <Tag description="#겉촉속바 " propLeft="65px" />
+      <Tag description="#쌍면성" propLeft="154px" />
+      <Tag description="#선넘지마" propLeft="243px" />
       <Div3>얼음이 들어간 핫초코형</Div3>
       <B>
         <Ul>
           <Li>{`겉으로는 다정하고 외향적으로 보이지만, 실제로 친해지면 무뚝뚝하고 쿨한 면이 있는 눈사람입니다.  `}</Li>
           <Li>{`주변에는 밝고 다정한 행동으로 친근한 이미지를 유지하여 이성친구는 많은 편이지만, 실제로는 이성친구에게 감정을 표현하는 것을 어려워하며 친밀한 관계에서도 거리를 두는 경향이 있어요. `}</Li>
           <Li2>
-          이성친구로서 지켜야할 것들은 지키며, 선을 넘지않는 경계를 잘 아는 편이에요.
+            이성친구로서 지켜야할 것들은 지키며, 선을 넘지않는 경계를 잘 아는
+            편이에요.
           </Li2>
         </Ul>
       </B>
@@ -70,25 +68,29 @@ export const TestResult4 = () => {
       <Div5>
         <P>{`다만, 속으로부터의 거리감 때문에 가끔은 오해를 받을 수 있으니, `}</P>
         <P>
-        친분을 유지하면서 상대방에게 충분한 공간을 주는 것이 중요할 수 있어요.
+          친분을 유지하면서 상대방에게 충분한 공간을 주는 것이 중요할 수 있어요.
         </P>
       </Div5>
       <WarningIcon alt="" src="/warning.png" />
-      <BrownBox
+      <ColorBox
         eyePersonalityEyeSynergyT="내 눈사람의 성향은 ?"
         propTop="448px"
+        boxColor="#AC8276"
       />
-      <BrownBox
+      <ColorBox
         eyePersonalityEyeSynergyT="나랑 시너지를 내는 눈사람 유형은 ?"
         propTop="701px"
+        boxColor="#AC8276"
       />
-      <BrownBox
+      <ColorBox
         eyePersonalityEyeSynergyT="Snowman Village에 눈사람 등록하기"
         propTop="924px"
+        boxColor="#AC8276"
       />
-      <BrownBox
+      <ColorBox
         eyePersonalityEyeSynergyT="SNS에 나만의 눈사람 공유하기"
         propTop="1051px"
+        boxColor="#AC8276"
       />
       <Div6>스포티한 눈썰매형</Div6>
       <ButtonsCtaSecondary2>
@@ -110,11 +112,11 @@ export const TestResult4 = () => {
       <CircleLeft1 alt="" src="ellipse-2@2x.png" />
       <CircleLeft2 alt="" src="ellipse-6@2x.png" />
       <CircleLeft3 alt="" src="ellipse-2@2x.png" />
-      
+
       <ButtonsCtaSecondary4>
         <ButtonsCtaSecondary1 />
         <B1>눈사람 등록</B1>
-      </ButtonsCtaSecondary4>    
+      </ButtonsCtaSecondary4>
       <ButtonsCtaSecondary6>
         <ButtonsCtaSecondary1 />
         <B1>ReTest</B1>
@@ -126,5 +128,3 @@ export const TestResult4 = () => {
     </Testresult1Root>
   );
 };
-
-
diff --git a/src/pages/TestResult5/TestResult5.jsx b/src/pages/TestResult5/TestResult5.jsx
index bb09ecc..06cd4fd 100644
--- a/src/pages/TestResult5/TestResult5.jsx
+++ b/src/pages/TestResult5/TestResult5.jsx
@@ -1,6 +1,4 @@
-import BoxLarge from "../../components/PurpleBox/BoxLarge";
-import Component1 from "../../components/Component1/Component1";
-import PurpleBox from "../../components/PurpleBox/PurpleBox";
+import { BoxLarge, ColorBox, Tag } from "../../components";
 import {
   ButtonsCtaSecondary1,
   ButtonsCtaSecondary,
@@ -36,8 +34,7 @@ import {
   CircleLeft1,
   CircleLeft2,
   CircleLeft3,
-}from "./styled"
-
+} from "./styled";
 
 export const TestResult5 = () => {
   return (
@@ -51,18 +48,25 @@ export const TestResult5 = () => {
         <Div2>테스트 결과지</Div2>
       </Div>
       <Dotline />
-      <BoxLarge propTop="480px" />
-      <BoxLarge propTop="736px" />
-      <Component1 description="#겉바촉속 " propLeft="65px" />
-      <Component1 description="#은밀한따뜻" propLeft="154px" />
-      <Component1 description="#친친진국" propLeft="243px" />
+      <BoxLarge propTop="480px" boxColor="#B8A7C6" />
+      <BoxLarge propTop="736px" boxColor="#B8A7C6" />
+      <Tag description="#겉바촉속 " propLeft="65px" />
+      <Tag description="#은밀한따뜻" propLeft="154px" />
+      <Tag description="#친친진국" propLeft="243px" />
       <Div3>차가운 색감의 벨벳 머플러형</Div3>
       <B>
         <Ul>
-          <Li>{`겉은 벨벳으로 감싸져 있어 차갑고 닿기 전까지는 다소 거리감을 느낄 수 있지만, 속은 따뜻하고 포근한 마음을 품고 있는 눈사람입니다. `}</Li>
-          <Li>{`겉과 속의 대조적인 느낌이 이성친구들에게 호기심을 자극할 수 있어요.`}</Li>
+          <Li>
+            `겉은 벨벳으로 감싸져 있어 차갑고 닿기 전까지는 다소 거리감을 느낄
+            수 있지만, 속은 따뜻하고 포근한 마음을 품고 있는 눈사람입니다. `
+          </Li>
+          <Li>
+            `겉과 속의 대조적인 느낌이 이성친구들에게 호기심을 자극할 수
+            있어요.`
+          </Li>
           <Li2>
-          새로운 친구들을 새로 사귀기 보다는 기존의 친한 이성친구들과 시간을 보내며 이들과는 긴밀한 이야기를 나누곤해요.
+            새로운 친구들을 새로 사귀기 보다는 기존의 친한 이성친구들과 시간을
+            보내며 이들과는 긴밀한 이야기를 나누곤해요.
           </Li2>
         </Ul>
       </B>
@@ -70,25 +74,30 @@ export const TestResult5 = () => {
       <Div5>
         <P>{`다만, 겉으로는 차가운 인상을 주기 때문에,  `}</P>
         <P>
-        친해지고 싶은 이성친구에게는 감정을 표현해주는 노력이 필요할 수 있어요.
+          친해지고 싶은 이성친구에게는 감정을 표현해주는 노력이 필요할 수
+          있어요.
         </P>
       </Div5>
       <WarningIcon alt="" src="/warning.png" />
-      <PurpleBox
+      <ColorBox
         eyePersonalityEyeSynergyT="내 눈사람의 성향은 ?"
         propTop="448px"
+        boxColor="#9A7FA8"
       />
-      <PurpleBox
+      <ColorBox
         eyePersonalityEyeSynergyT="나랑 시너지를 내는 눈사람 유형은 ?"
         propTop="701px"
+        boxColor="#9A7FA8"
       />
-      <PurpleBox
+      <ColorBox
         eyePersonalityEyeSynergyT="Snowman Village에 눈사람 등록하기"
         propTop="924px"
+        boxColor="#9A7FA8"
       />
-      <PurpleBox
+      <ColorBox
         eyePersonalityEyeSynergyT="SNS에 나만의 눈사람 공유하기"
         propTop="1051px"
+        boxColor="#9A7FA8"
       />
       <Div6>소라게의 베레모형</Div6>
       <ButtonsCtaSecondary2>
@@ -110,11 +119,11 @@ export const TestResult5 = () => {
       <CircleLeft1 alt="" src="ellipse-2@2x.png" />
       <CircleLeft2 alt="" src="ellipse-6@2x.png" />
       <CircleLeft3 alt="" src="ellipse-2@2x.png" />
-      
+
       <ButtonsCtaSecondary4>
         <ButtonsCtaSecondary1 />
         <B1>눈사람 등록</B1>
-      </ButtonsCtaSecondary4>    
+      </ButtonsCtaSecondary4>
       <ButtonsCtaSecondary6>
         <ButtonsCtaSecondary1 />
         <B1>ReTest</B1>
@@ -126,5 +135,3 @@ export const TestResult5 = () => {
     </Testresult1Root>
   );
 };
-
-
diff --git a/src/pages/TestResult6/TestResult6.jsx b/src/pages/TestResult6/TestResult6.jsx
index 5306063..aec9377 100644
--- a/src/pages/TestResult6/TestResult6.jsx
+++ b/src/pages/TestResult6/TestResult6.jsx
@@ -1,6 +1,4 @@
-import BoxLarge from "../../components/DarkBox/BoxLarge";
-import Component1 from "../../components/Component1/Component1";
-import DarkBox from "../../components/DarkBox/DarkBox";
+import { BoxLarge, ColorBox, Tag } from "../../components";
 import {
   ButtonsCtaSecondary1,
   ButtonsCtaSecondary,
@@ -36,8 +34,7 @@ import {
   CircleLeft1,
   CircleLeft2,
   CircleLeft3,
-}from "./styled"
-
+} from "./styled";
 
 export const TestResult6 = () => {
   return (
@@ -51,44 +48,54 @@ export const TestResult6 = () => {
         <Div2>테스트 결과지</Div2>
       </Div>
       <Dotline />
-      <BoxLarge propTop="480px" />
-      <BoxLarge propTop="736px" />
-      <Component1 description="#겉바속바 " propLeft="65px" />
-      <Component1 description="#쿨하고차갑" propLeft="154px" />
-      <Component1 description="#거리감있는" propLeft="243px" />
+      <BoxLarge propTop="480px" boxColor="#96ACB4" />
+      <BoxLarge propTop="736px" boxColor="#96ACB4" />
+      <Tag description="#겉바속바 " propLeft="65px" />
+      <Tag description="#쿨하고차갑" propLeft="154px" />
+      <Tag description="#거리감있는" propLeft="243px" />
       <Div3>날이 선 얼음 덩어리형</Div3>
       <B>
         <Ul>
-          <Li>{`겉으로는 차가운 얼음덩어리처럼 보이며, 속으로도 감정을 쉽게 드러내지 않는 눈사람입니다. `}</Li>
-          <Li>{`무관심한 표정과 거리를 두는 태도로 주변에 일정한 거리를 유지하며, 감정을 표현하는 것을 꺼리는 편입니다.`}</Li>
+          <Li>
+            `겉으로는 차가운 얼음덩어리처럼 보이며, 속으로도 감정을 쉽게
+            드러내지 않는 눈사람입니다. `
+          </Li>
+          <Li>
+            `무관심한 표정과 거리를 두는 태도로 주변에 일정한 거리를 유지하며,
+            감정을 표현하는 것을 꺼리는 편입니다.`
+          </Li>
           <Li2>
-          이성친구들에게는 쿨한 친구로 인식되지만, 간혹 마음을 터놓을 수 있는 이성친구가 생기면, 그 안에 감춰진 따뜻한 마음을 알아채게 될 수도 있어요!
+            이성친구들에게는 쿨한 친구로 인식되지만, 간혹 마음을 터놓을 수 있는
+            이성친구가 생기면, 그 안에 감춰진 따뜻한 마음을 알아채게 될 수도
+            있어요!
           </Li2>
         </Ul>
       </B>
       <Div4>눈사람 여사친/남사친 성향 테스트</Div4>
       <Div5>
         <P>{`다만, 주변에서 자신의 무관심을 오해할 수 있으니, `}</P>
-        <P>
-        적절한 시기에 감정을 표현하는 연습이 필요할 수 있어요.
-        </P>
+        <P>적절한 시기에 감정을 표현하는 연습이 필요할 수 있어요.</P>
       </Div5>
       <WarningIcon alt="" src="/warning.png" />
-      <DarkBox
+      <ColorBox
         eyePersonalityEyeSynergyT="내 눈사람의 성향은 ?"
         propTop="448px"
+        boxColor="#84A7B8"
       />
-      <DarkBox
+      <ColorBox
         eyePersonalityEyeSynergyT="나랑 시너지를 내는 눈사람 유형은 ?"
         propTop="701px"
+        boxColor="#84A7B8"
       />
-      <DarkBox
+      <ColorBox
         eyePersonalityEyeSynergyT="Snowman Village에 눈사람 등록하기"
         propTop="924px"
+        boxColor="#84A7B8"
       />
-      <DarkBox
+      <ColorBox
         eyePersonalityEyeSynergyT="SNS에 나만의 눈사람 공유하기"
         propTop="1051px"
+        boxColor="#84A7B8"
       />
       <Div6>눈송이의 벙어리장갑형</Div6>
       <ButtonsCtaSecondary2>
@@ -110,11 +117,11 @@ export const TestResult6 = () => {
       <CircleLeft1 alt="" src="ellipse-2@2x.png" />
       <CircleLeft2 alt="" src="ellipse-6@2x.png" />
       <CircleLeft3 alt="" src="ellipse-2@2x.png" />
-      
+
       <ButtonsCtaSecondary4>
         <ButtonsCtaSecondary1 />
         <B1>눈사람 등록</B1>
-      </ButtonsCtaSecondary4>    
+      </ButtonsCtaSecondary4>
       <ButtonsCtaSecondary6>
         <ButtonsCtaSecondary1 />
         <B1>ReTest</B1>
@@ -126,5 +133,3 @@ export const TestResult6 = () => {
     </Testresult1Root>
   );
 };
-
-
diff --git a/src/pages/TestResult7/TestResult7.jsx b/src/pages/TestResult7/TestResult7.jsx
index b13a8b1..1b72a56 100644
--- a/src/pages/TestResult7/TestResult7.jsx
+++ b/src/pages/TestResult7/TestResult7.jsx
@@ -1,6 +1,4 @@
-import BoxLarge from "../../components/YellowBox/BoxLarge";
-import Component1 from "../../components/Component1/Component1";
-import YellowBox from "../../components/YellowBox/YellowBox";
+import { BoxLarge, ColorBox, Tag } from "../../components";
 import {
   ButtonsCtaSecondary1,
   ButtonsCtaSecondary,
@@ -36,8 +34,7 @@ import {
   CircleLeft1,
   CircleLeft2,
   CircleLeft3,
-}from "./styled"
-
+} from "./styled";
 
 export const TestResult7 = () => {
   return (
@@ -51,45 +48,55 @@ export const TestResult7 = () => {
         <Div2>테스트 결과지</Div2>
       </Div>
       <Dotline />
-      <BoxLarge propTop="480px" />
-      <BoxLarge propTop="736px" />
-      <Component1 description="#겉촉속촉 " propLeft="65px" />
-      <Component1 description="#따뜻한" propLeft="154px" />
-      <Component1 description="#부드러운" propLeft="243px" />
+      <BoxLarge propTop="480px" boxColor="#F4DFA9" />
+      <BoxLarge propTop="736px" boxColor="#F4DFA9" />
+      <Tag description="#겉촉속촉 " propLeft="65px" />
+      <Tag description="#따뜻한" propLeft="154px" />
+      <Tag description="#부드러운" propLeft="243px" />
       <Div3>포근한 극세사 담요형 </Div3>
       <B>
         <Ul>
-          <Li>{`부드럽고 따뜻하여, 누구에게나 포근한 성격의 눈사람입니다.`}</Li>
-          <Li>{`상대방의 입장을 이해하고 공감하는 능력이 뛰어나기 때문에, 이성친구들이 언제든지 자신을 편하게 털어놓을 수 있는 
-       안전지대로 여기곤해요.`}</Li>
+          <Li>`부드럽고 따뜻하여, 누구에게나 포근한 성격의 눈사람입니다.`</Li>
+          <Li>
+            `상대방의 입장을 이해하고 공감하는 능력이 뛰어나기 때문에,
+            이성친구들이 언제든지 자신을 편하게 털어놓을 수 있는 안전지대로
+            여기곤해요.`
+          </Li>
           <Li2>
-          남을 배려하고 따뜻한 마음을 가진 당신은 상대방의 기분을 살필 줄 아는 능력으로, 주변에서도 다정한 눈사람으로 불리곤해요.
+            남을 배려하고 따뜻한 마음을 가진 당신은 상대방의 기분을 살필 줄 아는
+            능력으로, 주변에서도 다정한 눈사람으로 불리곤해요.
           </Li2>
         </Ul>
       </B>
       <Div4>눈사람 여사친/남사친 성향 테스트</Div4>
       <Div5>
-        <P>{`다만, 매사에 다정하다 보면 이성친구가  틈틈이 기회를 노릴 수 있으니`}</P>
         <P>
-        주의해주세요. 서로에게 적절한 경계를 지키는 것이 중요할 수도 있어요!
+          `다만, 매사에 다정하다 보면 이성친구가 틈틈이 기회를 노릴 수 있으니`
+        </P>
+        <P>
+          주의해주세요. 서로에게 적절한 경계를 지키는 것이 중요할 수도 있어요!
         </P>
       </Div5>
       <WarningIcon alt="" src="/warning.png" />
-      <YellowBox
+      <ColorBox
         eyePersonalityEyeSynergyT="내 눈사람의 성향은 ?"
         propTop="448px"
+        boxColor="#F4DFA9"
       />
-      <YellowBox
+      <ColorBox
         eyePersonalityEyeSynergyT="나랑 시너지를 내는 눈사람 유형은 ?"
         propTop="701px"
+        boxColor="#F4DFA9"
       />
-      <YellowBox
+      <ColorBox
         eyePersonalityEyeSynergyT="Snowman Village에 눈사람 등록하기"
         propTop="924px"
+        boxColor="#F4DFA9"
       />
-      <YellowBox
+      <ColorBox
         eyePersonalityEyeSynergyT="SNS에 나만의 눈사람 공유하기"
         propTop="1051px"
+        boxColor="#F4DFA9"
       />
       <Div6>베이지톤의 트렌치코트형</Div6>
       <ButtonsCtaSecondary2>
@@ -111,11 +118,11 @@ export const TestResult7 = () => {
       <CircleLeft1 alt="" src="ellipse-2@2x.png" />
       <CircleLeft2 alt="" src="ellipse-6@2x.png" />
       <CircleLeft3 alt="" src="ellipse-2@2x.png" />
-      
+
       <ButtonsCtaSecondary4>
         <ButtonsCtaSecondary1 />
         <B1>눈사람 등록</B1>
-      </ButtonsCtaSecondary4>    
+      </ButtonsCtaSecondary4>
       <ButtonsCtaSecondary6>
         <ButtonsCtaSecondary1 />
         <B1>ReTest</B1>
@@ -127,5 +134,3 @@ export const TestResult7 = () => {
     </Testresult1Root>
   );
 };
-
-
diff --git a/src/pages/TestResult8/TestResult8.jsx b/src/pages/TestResult8/TestResult8.jsx
index ed5a74f..716afc2 100644
--- a/src/pages/TestResult8/TestResult8.jsx
+++ b/src/pages/TestResult8/TestResult8.jsx
@@ -1,6 +1,4 @@
-import BoxLarge from "../../components/OrangeBox/BoxLarge";
-import Component1 from "../../components/Component1/Component1";
-import OrangeBox from "../../components/OrangeBox/OrangeBox";
+import { BoxLarge, ColorBox, Tag } from "../../components";
 import {
   ButtonsCtaSecondary1,
   ButtonsCtaSecondary,
@@ -36,8 +34,7 @@ import {
   CircleLeft1,
   CircleLeft2,
   CircleLeft3,
-}from "./styled"
-
+} from "./styled";
 
 export const TestResult8 = () => {
   return (
@@ -51,44 +48,56 @@ export const TestResult8 = () => {
         <Div2>테스트 결과지</Div2>
       </Div>
       <Dotline />
-      <BoxLarge propTop="480px" />
-      <BoxLarge propTop="736px" />
-      <Component1 description="#겉바속촉 " propLeft="65px" />
-      <Component1 description="#겉만시크" propLeft="154px" />
-      <Component1 description="#마음은진득" propLeft="243px" />
-      <Div3>베이지톤의 트렌치코트형   </Div3>
+      <BoxLarge propTop="480px" boxColor="#D7C773" />
+      <BoxLarge propTop="736px" boxColor="#D7C773" />
+      <Tag description="#겉바속촉 " propLeft="65px" />
+      <Tag description="#겉만시크" propLeft="154px" />
+      <Tag description="#마음은진득" propLeft="243px" />
+      <Div3>베이지톤의 트렌치코트형 </Div3>
       <B>
         <Ul>
-          <Li>{`겉으로는 쓸쓸하고 시크한 이미지를 갖춘 눈사람이지만, 이는 그저 겉치레일 뿐입니다. `}</Li>
-          <Li>{`속은 고요함과 동시에 따듯한 매력이 있어, 소소한 일상 속에서 특별한 순간을 찾아 즐기는 것을 즐겨해요. `}</Li>
+          <Li>
+            `겉으로는 쓸쓸하고 시크한 이미지를 갖춘 눈사람이지만, 이는 그저
+            겉치레일 뿐입니다.`
+          </Li>
+          <Li>
+            `속은 고요함과 동시에 따듯한 매력이 있어, 소소한 일상 속에서 특별한
+            순간을 찾아 즐기는 것을 즐겨해요.`
+          </Li>
           <Li2>
-          실제 성격은 조용하면서도 깊은 감수성을 품고 있어, 이성친구들과의 대화에서는 심오한 이야기부터 가벼운 소소한 이야기까지 다양한 주제를 공유하곤 해요.
+            실제 성격은 조용하면서도 깊은 감수성을 품고 있어, 이성친구들과의
+            대화에서는 심오한 이야기부터 가벼운 소소한 이야기까지 다양한 주제를
+            공유하곤 해요.
           </Li2>
         </Ul>
       </B>
       <Div4>눈사람 여사친/남사친 성향 테스트</Div4>
       <Div5>
-        <P>{`다만, 시크한 이미지로 인해 처음에는 소심해 보일 수 있어,`}</P>
+        <P>`다만, 시크한 이미지로 인해 처음에는 소심해 보일 수 있어,`</P>
         <P>
-        이성친구와 친밀한 관계를 형성하고싶다면 마음을 열어보는 것이 좋아요
+          이성친구와 친밀한 관계를 형성하고싶다면 마음을 열어보는 것이 좋아요
         </P>
       </Div5>
       <WarningIcon alt="" src="/warning.png" />
-      <OrangeBox
+      <ColorBox
         eyePersonalityEyeSynergyT="내 눈사람의 성향은 ?"
         propTop="448px"
+        boxColor="#D7C773"
       />
-      <OrangeBox
+      <ColorBox
         eyePersonalityEyeSynergyT="나랑 시너지를 내는 눈사람 유형은 ?"
         propTop="701px"
+        boxColor="#D7C773"
       />
-      <OrangeBox
+      <ColorBox
         eyePersonalityEyeSynergyT="Snowman Village에 눈사람 등록하기"
         propTop="924px"
+        boxColor="#D7C773"
       />
-      <OrangeBox
+      <ColorBox
         eyePersonalityEyeSynergyT="SNS에 나만의 눈사람 공유하기"
         propTop="1051px"
+        boxColor="#D7C773"
       />
       <Div6>포근한 극세사 담요형</Div6>
       <ButtonsCtaSecondary2>
@@ -110,11 +119,11 @@ export const TestResult8 = () => {
       <CircleLeft1 alt="" src="ellipse-2@2x.png" />
       <CircleLeft2 alt="" src="ellipse-6@2x.png" />
       <CircleLeft3 alt="" src="ellipse-2@2x.png" />
-      
+
       <ButtonsCtaSecondary4>
         <ButtonsCtaSecondary1 />
         <B1>눈사람 등록</B1>
-      </ButtonsCtaSecondary4>    
+      </ButtonsCtaSecondary4>
       <ButtonsCtaSecondary6>
         <ButtonsCtaSecondary1 />
         <B1>ReTest</B1>
@@ -126,5 +135,3 @@ export const TestResult8 = () => {
     </Testresult1Root>
   );
 };
-
-