diff --git a/src/assets/images/test_0.png b/src/assets/images/test_0.png
new file mode 100644
index 0000000..85c1601
Binary files /dev/null and b/src/assets/images/test_0.png differ
diff --git a/src/assets/images/test_1.png b/src/assets/images/test_1.png
new file mode 100644
index 0000000..04d23ec
Binary files /dev/null and b/src/assets/images/test_1.png differ
diff --git a/src/assets/images/test_2.png b/src/assets/images/test_2.png
new file mode 100644
index 0000000..fd9ce1c
Binary files /dev/null and b/src/assets/images/test_2.png differ
diff --git a/src/assets/images/test_3.png b/src/assets/images/test_3.png
new file mode 100644
index 0000000..43b78f5
Binary files /dev/null and b/src/assets/images/test_3.png differ
diff --git a/src/assets/images/test_4.png b/src/assets/images/test_4.png
new file mode 100644
index 0000000..0bf8913
Binary files /dev/null and b/src/assets/images/test_4.png differ
diff --git a/src/assets/images/test_5.png b/src/assets/images/test_5.png
new file mode 100644
index 0000000..2355968
Binary files /dev/null and b/src/assets/images/test_5.png differ
diff --git a/src/assets/images/test_6.png b/src/assets/images/test_6.png
new file mode 100644
index 0000000..f3bab7c
Binary files /dev/null and b/src/assets/images/test_6.png differ
diff --git a/src/assets/images/test_7.png b/src/assets/images/test_7.png
new file mode 100644
index 0000000..909dff5
Binary files /dev/null and b/src/assets/images/test_7.png differ
diff --git a/src/assets/images/test_8.png b/src/assets/images/test_8.png
new file mode 100644
index 0000000..79a9c97
Binary files /dev/null and b/src/assets/images/test_8.png differ
diff --git a/src/assets/images/test_9.png b/src/assets/images/test_9.png
new file mode 100644
index 0000000..398260e
Binary files /dev/null and b/src/assets/images/test_9.png differ
diff --git a/src/components/TestBox/index.jsx b/src/components/TestBox/index.jsx
new file mode 100644
index 0000000..786853f
--- /dev/null
+++ b/src/components/TestBox/index.jsx
@@ -0,0 +1,106 @@
+import React from "react";
+import { useRecoilValue } from "recoil";
+import { testState } from "../../store/atoms";
+import { Container, Text, Image } from "./styled";
+
+const TestBox = ({ step }) => {
+ const getTextByStep = () => {
+ const gender = useRecoilValue(testState).gender;
+
+ switch (step) {
+ case "0":
+ return <>본인의 성별을 선택해주세요;
+ case "1":
+ return (
+ <>
+ {gender === "man" ? "여사친" : "남사친"}이 전 날 밤에
직접
+ 만든 눈사람이
낮에 녹아서 속상해한다.
+
+ 이때 나의 답변은?
+
+ );
+ case "2":
+ return (
+ <>
+ {gender === "man" ? "여사친" : "남사친"}이 내일 삿포로에 가서
+
첫 눈을 보고싶다고 한다.
+
이때 나의 답변은?
+
+ );
+ case "3":
+ return (
+ <>
+ {gender === "man" ? "여사친" : "남사친"}이 붕어빵을 굽다가
+
손이 데였다고 한다.
+
+ 이때 나의 답변은?
+
+ );
+ case "4":
+ return (
+ <>
+ {gender === "man" ? "여사친" : "남사친"}이 동아리
+ 종강 총회 뒷풀이를
갈 것이냐고 묻는다.
+ 이때 나의 답변은?
+
+ );
+ case "5":
+ return (
+ <>
+ {gender === "man" ? "여사친" : "남사친"}이 크리스마스 다음 날에
+
친구들과 다함께
+ 파티룸에서 놀자고한다.
+
+ 이때 나의 답변은?
+
+ );
+ case "6":
+ return (
+ <>
+ {gender === "man" ? "여사친" : "남사친"}이 새해 기념 집들이를
+
하려고 하는데 친구들을
+ 어느정도 부를 지 묻는다.
+ 이때 나의 답변은?
+
+ );
+ case "7":
+ return (
+ <>
+ {gender === "man" ? "여사친" : "남사친"}이 술을 마시다가
+
취했다고 연락이 왔다.
+
이때 나의 답변은?
+
+ );
+ case "8":
+ return (
+ <>
+ 단지 이성으로서가 아닌,
+
+ 친구로서의 호감이 있어
+
친하게 지낸 {gender === "man" ? "여사친" : "남사친"}이
+
한 때 나를 좋아했다고 말한다.
+
이때 나의 생각은?
+
+ );
+ case "9":
+ return (
+ <>
+ {gender === "man" ? "여사친" : "남사친"}이 개인톡으로
+
밖에 눈이 쌓였다고 말해준다.
+
이때 나의 생각은?
+
+ );
+ default:
+ return "잘못된 접근입니다.";
+ }
+ };
+
+ return (
+
+ {getTextByStep()}
+
+
+ );
+};
+
+export default TestBox;
diff --git a/src/components/TestBox/styled.js b/src/components/TestBox/styled.js
new file mode 100644
index 0000000..ccb9c1f
--- /dev/null
+++ b/src/components/TestBox/styled.js
@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 8vh 0;
+ justify-content: space-around;
+ width: 90vw;
+ height: 34vh;
+ border-radius: 30px;
+ box-shadow: inset 0px 0px 10px 5px rgba(255, 255, 255, 0.75);
+`;
+
+export const Text = styled.p`
+ color: white;
+ font-size: 1.4rem;
+ text-align: center;
+ line-height: 1.3;
+`;
+
+export const Image = styled.img``;
diff --git a/src/components/index.js b/src/components/index.js
index 1fdf438..240e72c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1 +1,3 @@
export { default as Button } from "./Button";
+export { default as TestHeader } from "./TestHeader";
+export { default as TestBox } from "./TestBox";