diff --git a/frontend/src/App.js b/frontend/src/App.js
index 7281789..136e808 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,5 +1,6 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Result from "./pages/Result";
+import PageENTP from "./pages/MBTI/PageENTP";
import React,{useEffect, useState} from 'react';
import './style/App.css';
@@ -16,6 +17,7 @@ function App() {
} />
+ } />
);
diff --git a/frontend/src/components/ResultImg.jsx b/frontend/src/components/ResultImg.jsx
deleted file mode 100644
index 7c657aa..0000000
--- a/frontend/src/components/ResultImg.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-function ResultImg(){
-
- return(
-
-
-
- );
-}
-
-export default ResultImg;
\ No newline at end of file
diff --git a/frontend/src/components/result/DeveloperImg.jsx b/frontend/src/components/result/DeveloperImg.jsx
new file mode 100644
index 0000000..697e880
--- /dev/null
+++ b/frontend/src/components/result/DeveloperImg.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+function DeveloperImg(props){
+ const { image } = props;
+ const imgStyle = {
+ marginRight: '0.5rem'
+ }
+
+ return(
+
+
+
+ );
+}
+
+export default DeveloperImg;
diff --git a/frontend/src/components/result/FriendResult.jsx b/frontend/src/components/result/FriendResult.jsx
new file mode 100644
index 0000000..dedfbb0
--- /dev/null
+++ b/frontend/src/components/result/FriendResult.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import PersonalLangauage from '../result/PersonalLanguage';
+import PersonalDeveloper from '../result/PersonalDeveloper';
+
+function FriendResult(){
+ const friendBack = {
+ width: '21.875rem',
+ height: '8.1875rem',
+ flexShrink: '0',
+ borderRadius: '0.625rem',
+ background: 'linear-gradient(144deg, #FFF 0%, rgba(242, 242, 242, 0.80) 100%)',
+ boxShadow: '10px 10px 25px 0px #F5EEA7',
+ textAlign:"center",
+ margin: '0 auto',
+ marginTop:"3%",
+ display:"flex",
+ justifyContent: "center",
+ alignItems: "center"
+ }
+ const line = {
+ width:' 0.0625rem',
+ height: '5.625rem',
+ background: '#000',
+ marginLeft:"2%",
+ marginRight:"2%"
+ }
+
+ return(
+
+
+
+ );
+}
+
+export default FriendResult;
diff --git a/frontend/src/components/result/PersonalDeveloper.jsx b/frontend/src/components/result/PersonalDeveloper.jsx
new file mode 100644
index 0000000..15a5107
--- /dev/null
+++ b/frontend/src/components/result/PersonalDeveloper.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import Developerlmg from '../result/DeveloperImg';
+import SmallINFJ from '../../img/MBTI/INFJsmall.png';
+import SmallINTJ from '../../img/MBTI/INTJsmall.png';
+
+function PersonalDeveloper(){
+ const pdStyle = {
+ marginLeft:"7%",
+ marginRight:"7%"
+ }
+ const pdText = {
+ color: '#000',
+ textAlign: 'center',
+ fontFamily: 'GmarketSansMedium',
+ fontSize: '0.9375rem',
+ fontStyle: 'normal',
+ fontWeight: 'bolder',
+ lineHeight: 'normal'
+ }
+ const pdLanguage = {
+ color: '#000',
+ textAlign: 'center',
+ fontFamily: 'GmarketSansMedium',
+ fontSize: '0.9375rem',
+ fontStyle: 'normal',
+ fontWeight: '100',
+ lineHeight: 'normal',
+ display:'flex'
+ }
+
+ return(
+
+
당신과 어울리는 개발자 유형
+
+
+
+
+
+ );
+}
+
+export default PersonalDeveloper;
+
diff --git a/frontend/src/components/result/PersonalLanguage.jsx b/frontend/src/components/result/PersonalLanguage.jsx
new file mode 100644
index 0000000..b0522ef
--- /dev/null
+++ b/frontend/src/components/result/PersonalLanguage.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+function PersonalLanguage(props){
+ const { language } = props;
+ const plStyle = {
+ marginLeft:"10%",
+ marginRight:"7%",
+ marginTop:"-6.5%"
+ }
+ const plText = {
+ color: '#000',
+ textAlign: 'center',
+ fontFamily: 'GmarketSansMedium',
+ fontSize: '0.9375rem',
+ fontStyle: 'normal',
+ fontWeight: 'bolder',
+ lineHeight: 'normal'
+ }
+ const plLanguage = {
+ color: '#000',
+ textAlign: 'center',
+ fontFamily: 'GmarketSansMedium',
+ fontSize: '0.9375rem',
+ fontStyle: 'normal',
+ fontWeight: '100',
+ lineHeight: 'normal',
+ marginTop:"10%"
+ }
+
+ return(
+
+
당신과 어울리는 기초 언어
+
{language}
+
+ );
+}
+
+export default PersonalLanguage;
diff --git a/frontend/src/components/result/Profilebtn.jsx b/frontend/src/components/result/Profilebtn.jsx
new file mode 100644
index 0000000..4ec8d59
--- /dev/null
+++ b/frontend/src/components/result/Profilebtn.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+function Profilebtn(){
+ const btnContainerStyle = {
+ textAlign: 'center'
+ };
+
+ const btnStyle = {
+ border:'none',
+ width: '21.875rem',
+ height: '3.375rem',
+ flexShrink: '0',
+ borderRadius: '0.625rem',
+ background: 'linear-gradient(266deg, #43AA70 -2.67%, #3C9764 100%)',
+ color: '#FFF',
+ textAlign: 'center',
+ fontFamily: 'GmarketSansMedium',
+ fontSize: '1.375rem',
+ fontStyle: 'normal',
+ fontWeight: '700',
+ lineHeight: 'normal',
+ display: 'inline-block',
+ marginTop:"5%"
+ };
+
+ return(
+
+
+
+ );
+}
+
+export default Profilebtn;
diff --git a/frontend/src/components/result/ResultDetail.jsx b/frontend/src/components/result/ResultDetail.jsx
new file mode 100644
index 0000000..af880b0
--- /dev/null
+++ b/frontend/src/components/result/ResultDetail.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+function ResultExplain(props) {
+ const { detail1, detail2, detail3 } = props;
+ const backgroundStyle = {
+ color: '#000',
+ fontFamily: 'GmarketSansMedium',
+ fontSize: '1.125rem',
+ fontStyle: 'normal',
+ fontWeight: '300',
+ lineHeight: '1.875rem'
+ };
+
+ return (
+
+
+ - {detail1}
+ - {detail2}
+ - {detail3}
+
+
+ );
+}
+
+export default ResultExplain;
diff --git a/frontend/src/components/result/ResultExplain.jsx b/frontend/src/components/result/ResultExplain.jsx
new file mode 100644
index 0000000..cc1b642
--- /dev/null
+++ b/frontend/src/components/result/ResultExplain.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+function ResultExplain(props) {
+ const { explain, name, feel } = props;
+
+ const explainStyle = {
+ color: '#000',
+ textAlign: 'center',
+ fontFamily: 'GmarketSansMedium',
+ fontSize: '1.25rem',
+ fontStyle: 'normal',
+ fontWeight: '300',
+ lineHeight: '1.875rem',
+ marginTop: "5%"
+ };
+ const nameStyle = {
+ color: '#000',
+ textAlign: 'center',
+ fontFamily: 'GmarketSansMedium',
+ fontSize: '1.25rem',
+ fontStyle: 'normal',
+ fontWeight: 'bold',
+ lineHeight: '1.875rem',
+ marginTop: "5%"
+ }
+
+ return (
+
+
{explain}{name}{feel}
+
+ );
+}
+
+export default ResultExplain;
diff --git a/frontend/src/components/result/ResultImg.jsx b/frontend/src/components/result/ResultImg.jsx
new file mode 100644
index 0000000..671a701
--- /dev/null
+++ b/frontend/src/components/result/ResultImg.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+function ResultImg(img){
+ const imageStyle = {
+ width: '100%',
+ height: 'auto',
+ display: 'flex',
+ justifyContent: 'center',
+ marginTop:'5%'
+ };
+
+ return(
+
+
+
+ );
+}
+
+export default ResultImg;
\ No newline at end of file
diff --git a/frontend/src/components/result/ResultName.jsx b/frontend/src/components/result/ResultName.jsx
new file mode 100644
index 0000000..3e017bd
--- /dev/null
+++ b/frontend/src/components/result/ResultName.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+function ResultName(nameProps){
+ const { name } = nameProps;
+ const nameStyle = {
+ color: '#000',
+ textAlign: 'center',
+ fontFamily: 'GmarketSansMedium',
+ fontSize: '1.5rem',
+ fontStyle: 'normal',
+ fontWeight: '700',
+ lineHeight: 'normal',
+ marginTop:"5%"
+ };
+
+ return(
+
+ {name}
+
+ );
+}
+
+export default ResultName;
diff --git a/frontend/src/components/ResultTitle.jsx b/frontend/src/components/result/ResultTitle.jsx
similarity index 90%
rename from frontend/src/components/ResultTitle.jsx
rename to frontend/src/components/result/ResultTitle.jsx
index 5f4027a..3264c5d 100644
--- a/frontend/src/components/ResultTitle.jsx
+++ b/frontend/src/components/result/ResultTitle.jsx
@@ -1,6 +1,5 @@
import React from 'react';
-
function ResultTitle(){
const titleStyle= {
color: "#000",
@@ -11,8 +10,8 @@ function ResultTitle(){
fontWeight: "700",
lineHeight: "normal",
paddingTop:"25%",
- marginLeft:"17%",
- marginRight:"17%"
+ marginLeft:"16%",
+ marginRight:"16%"
};
return(
diff --git a/frontend/src/img/MBTI/ENTP.png b/frontend/src/img/MBTI/ENTP.png
new file mode 100644
index 0000000..448f279
Binary files /dev/null and b/frontend/src/img/MBTI/ENTP.png differ
diff --git a/frontend/src/img/MBTI/INFJsmall.png b/frontend/src/img/MBTI/INFJsmall.png
new file mode 100644
index 0000000..3e4d82d
Binary files /dev/null and b/frontend/src/img/MBTI/INFJsmall.png differ
diff --git a/frontend/src/img/MBTI/INTJsmall.png b/frontend/src/img/MBTI/INTJsmall.png
new file mode 100644
index 0000000..0877365
Binary files /dev/null and b/frontend/src/img/MBTI/INTJsmall.png differ
diff --git a/frontend/src/pages/MBTI/PageENTP.jsx b/frontend/src/pages/MBTI/PageENTP.jsx
new file mode 100644
index 0000000..554a6d9
--- /dev/null
+++ b/frontend/src/pages/MBTI/PageENTP.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import resultBack from '../../img/resultBack.png';
+import ResultTitle from '../../components/result/ResultTitle';
+import ResultImg from '../../components/result/ResultImg';
+import ENTP from "../../img/MBTI/ENTP.png";
+import ResultName from "../../components/result/ResultName";
+import ResultExplain from "../../components/result/ResultExplain";
+import ResultDetail from "../../components/result/ResultDetail";
+import Profilebtn from "../../components/result/Profilebtn";
+import FriendResult from "../../components/result/FriendResult";
+
+function PageENTP(){
+ const backgroundStyle = {
+ backgroundImage: `url(${resultBack})`,
+ backgroundSize: 'cover',
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ width: '100vw',
+ objectFit: 'cover',
+ height: '100vh'
+ };
+
+ return(
+
+ );
+}
+
+export default PageENTP;
\ No newline at end of file
diff --git a/frontend/src/pages/Result.jsx b/frontend/src/pages/Result.jsx
index c626a66..24ed29c 100644
--- a/frontend/src/pages/Result.jsx
+++ b/frontend/src/pages/Result.jsx
@@ -1,20 +1,42 @@
import React from 'react';
import resultBack from '../img/resultBack.png';
-import ResultTitle from '../components/ResultTitle';
-import ResultImg from '../components/ResultImg';
+import ResultTitle from '../components/result/ResultTitle';
+import ResultImg from '../components/result/ResultImg';
+import ENTP from "../img/MBTI/ENTP.png";
+import ResultName from "../components/result/ResultName";
+import ResultExplain from "../components/result/ResultExplain";
+import ResultDetail from "../components/result/ResultDetail";
+import Profilebtn from "../components/result/Profilebtn";
+import FriendResult from "../components/result/FriendResult";
function Result(){
const backgroundStyle = {
backgroundImage: `url(${resultBack})`,
backgroundSize: 'cover',
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
width: '100vw',
- height: 'calc(var(--vh, 1vh) * 100)'
+ objectFit: 'cover',
+ height: '100vh'
};
return(
);
}