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(
- + + + + + +
); }