조수연 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
조수연
c4fa3a89 2 parents 008724db a2d16282

Merge branch 'test1' into 'master' 

Home.js 링크 이동 구현



See merge request !10
Expand all
Inline Side-by-side
Showing 8 changed files with 46 additions and 35 deletions
This diff is collapsed. Click to expand it.
......@@ -19,10 +19,10 @@ class App extends Component {
<Route path="/test" exact component={Test} />
<Route path="/test2" exact component={Test2} />
<Route path="/test3" exact component={Test3} />
<Route path="/spring?ver=<%=version%>" exact component={Spring} />
<Route path="/summer?ver=0" exact component={Summer} />
<Route path="/autumn?ver=0" exact component={Autumn} />
<Route path="/winter?ver=0" exact component={Winter} />
<Route path="/spring" exact component={Spring} />
<Route path="/summer" exact component={Summer} />
<Route path="/autumn" exact component={Autumn} />
<Route path="/winter" exact component={Winter} />
</BrowserRouter>
</div>
)
......
......@@ -3,13 +3,14 @@ import './Home.css';
const Home = ( { history } ) =>
{
return (
<div>
<div className='home_display'>
<center id='home'>
findyourcolor
</center>
<div id="btn_group">
<button id="soo_btn1" onClick={ () => {history.push("/image")}}>image</button>
<button id="soo_btn1" onClick={()=>{window.open('https://stackoverflow.com/questions/51057153/how-to-use-window-open-onclick-reactjs', "Popup", "toolbar=no, location=no, statusbar=no, menubar=no, scrollbars=1, resizable=0, width=580, height=600, top=30")}}>image</button>
<button id="soo_btn2" onClick={ () => {history.push("/test")}}>test</button>
</div>
</div>
......
import React from 'react';
import './spring.css?ver=1.4';
import autumn from './season/autumn.png';
const Autumn = ( { history } ) =>
{
return (
<div className='autumn_class'>
<img src = {autumn} width='1300' height='600' alt = "autumn"/>
<div id="btn_back">
<button id="back_btn" onClick={ () => {history.push("/")}}>back</button>
</div>
</div>
);
}
export default Autumn;
\ No newline at end of file
......
body
body
{
background-image : url('./main.png');
background-repeat : no-repeat;
background-size : cover;
}
#spring_class
{
background-image : url('./season/spring.jpg');
background-repeat : no-repeat;
background-size : cover;
text-align: center;
}
.img
{
width: 100px;
height: 150px;
object-fit: cover;
}
@font-face
{
......@@ -17,27 +26,7 @@ body
}
#back_btn
{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
font-family: "button";
position: relative;
top: -50px;
left: 550px;
}
#btn_back
{
border: 1px;
color:rgb(255, 255, 255);
padding: 30px;
align-items: center;
text-align: center;
font-size: 40px;
background-color: rgba(255,255,255,0.5);
}
#btn_back:hover
{
background-color: rgb(167, 255, 246);
}
\ No newline at end of file
......
import React from 'react';
import './spring.css?ver=1.3';
import './spring.css?ver=1.4';
import spring from './season/spring.jpg';
const Spring = ( { history } ) =>
{
return (
<div className='spring_class'>
<img src = {spring} width='1300' height='600' alt = "spring"/>
<div id="btn_back">
<button id="back_btn" onClick={ () => {history.push("/")}}>back</button>
<button id="back_btn" onClick={ () => {history.push("/")}}>back</button>
</div>
</div>
);
}
......
......@@ -75,7 +75,7 @@ const Test = ( { history } ) =>
}; //함수2 끝.
return (
<div className='app'>
<div className='test'>
{showScore ? (
<span className='score-section'>
You scored {score} out of {questions.length}
......
......@@ -79,7 +79,7 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수3_여쿨, 겨
<span className='score-section'>
You scored {score} out of {questions_warm.length}
<button onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button>
{score === "spring warm" ? <button onClick={ () => {history.push("/spring?ver=<%=version%>")}}>next</button>
{score === "spring warm" ? <button onClick={ () => {history.push("/spring")}}>next</button>
: <button onClick={ () => {history.push("/autumn")}}>next</button>}
</span>
) : (
......