feat:ENTP 짱구 완성

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() {
     <BrowserRouter>
       <Routes>
         <Route path="/result" element={<Result />} /> 
+        <Route path="/entp" element={<PageENTP />} /> 
       </Routes>
     </BrowserRouter>
   );

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(
+        <div>
+            <img src={image} style={imgStyle} />
+        </div>
+    ); 
+}
+
+export default DeveloperImg; 

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(
+        <div style={friendBack}>
+            <PersonalLangauage language={"swift"}/>
+            <div style={line}/>
+            <PersonalDeveloper/>
+        </div>
+    ); 
+}
+
+export default FriendResult; 

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(
+        <div style={pdStyle}>
+             <div style={pdText}>당신과 어울리는 개발자 유형</div>
+             <div style={pdLanguage}>
+                <Developerlmg image={SmallINFJ}/>
+                <Developerlmg image={SmallINTJ}/>
+            </div>
+        </div>
+    ); 
+}
+
+export default PersonalDeveloper; 
+

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(
+        <div style={plStyle}>
+            <div style={plText}>당신과 어울리는 기초 언어</div>
+            <div style={plLanguage}>{language}</div>
+        </div>
+    ); 
+}
+
+export default PersonalLanguage; 

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(
+        <div style={btnContainerStyle}>
+            <button style={btnStyle}>
+                프로필 보러가기
+            </button>
+        </div>
+    ); 
+}
+
+export default Profilebtn; 

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 (
+        <div style={backgroundStyle}>
+            <ul>
+                <li>{detail1}</li>
+                <li>{detail2}</li>
+                <li>{detail3}</li>
+            </ul>
+        </div>
+    ); 
+}
+
+export default ResultExplain;

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 (
+        <div style={explainStyle}>
+            <div>{explain}<span style={nameStyle}>{name}</span>{feel}</div>
+        </div>
+    ); 
+}
+
+export default ResultExplain;

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(
+        <div style={imageStyle}>
+           <img src={img.image}/>
+        </div>
+    ); 
+}
+
+export default ResultImg; 

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(
+        <div style={nameStyle}>
+          {name}
+        </div>
+    ); 
+}
+
+export default ResultName; 

frontend/src/components/ResultTitle.jsx → 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(

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(
+        <div style={backgroundStyle}>
+            <ResultTitle/>
+            <ResultImg image={ENTP}/> 
+            <ResultName name={"짱구"}/>
+            <ResultExplain 
+                explain="즉흥적이고 기발한 아이디어의 당신은 "
+                name="짱구"
+                feel = "!"
+            />
+            <ResultDetail
+                detail1="직설적이고 솔직한 피드백을 해요."
+                detail2="상상력이 풍부해서 개발에 큰 도움을 줘요."
+                detail3="주관이 뚜렷해 팀원들을 잘 이끌어요."
+             />
+             <FriendResult/>
+             <Profilebtn/>
+        </div>
+    ); 
+}
+
+export default PageENTP;