Skip to content

Commit

Permalink
[feat] testpage 반응형
Browse files Browse the repository at this point in the history
  • Loading branch information
@leeeyez
leeeyez committed Feb 5, 2024
1 parent 5851397 commit f4184c5
Show file tree
Hide file tree
Showing 5 changed files with 330 additions and 16 deletions.
113 changes: 107 additions & 6 deletions src/components/Test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import one from '../images/3dicon_test/pencil.png';
Expand All @@ -11,6 +12,7 @@ import eight from '../images/3dicon_test/camera.png';
import nine from '../images/3dicon_test/store.png';
import ten from '../images/3dicon_test/pizza.png';
import eleven from '../images/3dicon_test/chair.png';
import { useMediaQuery } from "react-responsive";

const qnaList = [
{
Expand Down Expand Up @@ -114,6 +116,7 @@ const Test = () => {
const [question, setQuestion] = useState(null);
const [answers, setAnswers] = useState([]);
const [image, setImage] = useState([]);
const isDesktop = useMediaQuery({ minWidth: 750 });

const calResult = () => {
const randomIndex = Math.floor(Math.random() * select.length);
Expand Down Expand Up @@ -184,12 +187,23 @@ const Test = () => {
};

return (
<>
{isDesktop?
<TestButton
key={idx}
onClick={handleClick}
>
{answerText}
</TestButton>
:
<MTestButton
key={idx}
onClick={handleClick}
>
{answerText}
</MTestButton>
}
</>
);
};

Expand All @@ -216,6 +230,7 @@ const Test = () => {

return (
<>
{isDesktop?
<Container>
{/* 질문화면 section */}
<Number>{qIdx+1}</Number>
Expand All @@ -230,6 +245,22 @@ const Test = () => {
</ButtonContainer>
</section>
</Container>
:
<MContainer>
{/* 질문화면 section */}
<MNumber>{qIdx+1}</MNumber>
<MStatus className="status">
<MStatusBar className="statusBar"></MStatusBar>
</MStatus>
<section id="qna" >
<MText className="qBox">{question}</MText>
<MImage src={image}/>
<MButtonContainer>
{answers}
</MButtonContainer>
</section>
</MContainer>
}
</>
);
};
Expand All @@ -255,8 +286,10 @@ const TestButton = styled.button`
border: none;
padding: 20px 25px;
margin: 5px;
width: 500px;
width: 600px;
font-size: 25px;
cursor: pointer;
font-weight: 600;
&:hover {
background-color: #5880cf;
Expand All @@ -273,27 +306,95 @@ const Number = styled.div`
color: white;
margin: -50px 10px 30px 10px;
text-align: center;
text-size: 50px;
font-size: 50px;
font-weight: 900;
`

const Text = styled.div`
color: white;
margin: 10px;
margin-bottom: 0px;
text-align: center;
text-size: 30px;
font-size: 30px;
font-weight: 600;
`

const Status = styled.div`
height: 10px;
width: 600px;
background-color: #9A9797;
background: rgba(236, 236, 236, 0.39);
border-radius: 20px;
margin: 0 10px;
margin: 0 10px 30px 10px;
`

const StatusBar = styled.div`
height: 100%;
background: #FFFFFF;
border-radius: 20px;
`
`

const MContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const MImage = styled.img`
width: 100px;
display: block;
margin: 30px auto;
`;

const MTestButton = styled.button`
background-color: #6695F1;
color: white;
border-radius: 50px;
border: none;
padding: 20px 25px;
margin: 5px;
width: 300px;
font-size: 15px;
cursor: pointer;
font-weight: 600;
&:hover {
background-color: #5880cf;
}
`;

const MButtonContainer = styled.div`
display: grid;
place-items: center;
height: 10vh;
`;

const MNumber = styled.div`
color: white;
margin: -50px 10px 30px 10px;
text-align: center;
font-size: 40px;
font-weight: 900;
`

const MText = styled.div`
color: white;
margin: 10px;
margin-bottom: 0px;
text-align: center;
font-size: 20px;
font-weight: 600;
`

const MStatus = styled.div`
height: 10px;
width: 300px;
background: rgba(236, 236, 236, 0.39);
border-radius: 20px;
margin: 0 10px 30px 10px;
`

const MStatusBar = styled.div`
height: 100%;
background: #FFFFFF;
border-radius: 20px;
`
144 changes: 141 additions & 3 deletions src/components/TestResult.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import label_sun from '../images/label/sun.svg';
Expand All @@ -22,6 +23,7 @@ import circle from '../images/3dicon_test/circle.png';
import circle2 from '../images/3dicon_test/circle2.png';
import circle3 from '../images/3dicon_test/circle3.png';
import circle4 from '../images/3dicon_test/circle4.png';
import { useMediaQuery } from "react-responsive";

const infoList = [
{
Expand Down Expand Up @@ -104,6 +106,7 @@ const List = [

const TestResult = ({ result }) => {
const [showResult, setShowResult] = useState(false);
const isDesktop = useMediaQuery({ minWidth: 750 });

useEffect(() => {
const timer = setTimeout(() => {
Expand All @@ -120,6 +123,8 @@ const TestResult = ({ result }) => {
}
const GetResult = () => {
return (
<>
{isDesktop?
<>
<Circle src={circle}/>
<Name>@@@님의 여행 성향</Name>
Expand Down Expand Up @@ -161,6 +166,39 @@ const TestResult = ({ result }) => {
다양한 여행자를 만나러 가볼까?
</Button>
</ButtonContainer>
</>
:
<>
<MName>@@@님의 여행 성향</MName>
<MContainer>
<MImage src={infoList[result].img} />
</MContainer>
<Mdiv>
<MSubTitle>{infoList[result].sub_title}</MSubTitle>
<MType>{List[result]}형 여행자</MType>
<MLabelImage src={infoList[result].label} alt="레이블" />
<MDescription>{infoList[result].detail}</MDescription>
</Mdiv>
<MThirdChild>
<MInfoContainer>
<MInfoType>나와 잘 맞는 여행자</MInfoType>
<ImgDiv>
<MInfoImage src={infoList[infoList[result].positive].img} />
</ImgDiv>
<MInfoSubtitle>{infoList[infoList[result].positive].sub_title}</MInfoSubtitle>
<MInfoName>{List[infoList[result].positive]}형 여행자</MInfoName>
</MInfoContainer>
<MInfoContainer>
<MInfoType>나와 안 맞는 여행자</MInfoType>
<ImgDiv>
<MInfoImage src={infoList[infoList[result].negative].img} />
</ImgDiv>
<MInfoSubtitle>{infoList[infoList[result].negative].sub_title}</MInfoSubtitle>
<MInfoName>{List[infoList[result].negative]}형 여행자</MInfoName>
</MInfoContainer>
</MThirdChild>
</>
}
</>
);
}
Expand All @@ -183,6 +221,106 @@ const TestResult = ({ result }) => {

export default TestResult;

const MInfoName = styled.div`
color: white;
font-size: 16px;
font-weight: 700;
`

const MInfoSubtitle = styled.div`
color: white;
font-size: 13px;
font-weight: 500;
margin-bottom: 5px;
`

const ImgDiv = styled.div`
height: 15vw;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5px;
margin-bottom: 15px;
`

const MInfoImage = styled.img`
width: 15vw;
margin-top: 10px;
`

const MInfoType = styled.div`
color: white;
font-size: 12px;
font-weight: 600;
`

const MInfoContainer = styled.div`
text-align: center;
`

const MThirdChild = styled.div`
display: flex;
margin: 30px 50px;
justify-content: space-between;
`

const MDescription = styled.div`
color: white;
font-size: 12px;
font-weight: 500;
margin-top: 20px;
`

const MLabelImage = styled.img`
width: 80px;
margin-top: 8px;
`

const MType = styled.div`
color: #FFF;
font-size: 28px;
font-weight: 700;
margin-top: 5px;
`

const MSubTitle = styled.div`
color: #FFF;
font-size: 15px;
font-weight: 600;
`

const Mdiv = styled.div`
border-radius: 30px;
background: rgba(137, 148, 195, 0.13);
width: 260px;
margin: auto;
margin-top: 20px;
padding: 30px;
text-align: center;
`

const MContainer = styled.div`
width: 100vw;
display: flex;
justify-content: center;
`

const MImage = styled.img`
width: 50vw;
display: flex;
margin-top: 50px;
`

const MName = styled.div`
color: white;
font-size: 20px;
font-weight: 600;
display: flex;
justify-content: center;
padding-top: 50px;
`

const Loading = styled.div`
display: flex;
flex-direction: column;
Expand All @@ -193,11 +331,11 @@ const Load = styled.h3`
margin-bottom: 10px;
display: flex;
color: white;
font-size: 25px;
font-size: 15px;
`;

const LoadImage = styled.img`
width: 100px;
`;

const Circle = styled.img`
Expand Down Expand Up @@ -360,4 +498,4 @@ const Button = styled.button`
&:hover {
background-color: #4C5190;
}
`;
`;
Loading

0 comments on commit f4184c5

Please sign in to comment.