Skip to content

Commit

Permalink
[#3] feat: 테마 추천 질문 화면 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@MyungJiwoo
MyungJiwoo committed Jun 27, 2024
1 parent 80ad1fc commit 2d8b46d
Show file tree
Hide file tree
Showing 6 changed files with 284 additions and 2 deletions.
5 changes: 5 additions & 0 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,18 @@ import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import MainPage from "./pages/MainPage";
import ThemeRecs from "./pages/ThemeRecs";
import ThemeRecsQuestions from "./pages/ThemeRecsQuestions";

const App: React.FC = () => {
return (
<Router>
<Routes>
<Route path="/" Component={MainPage} />
<Route path="/themeRecs" Component={ThemeRecs} />
<Route
path="/ThemeRecsQuestions"
Component={ThemeRecsQuestions}
/>
</Routes>
</Router>
);
Expand Down
4 changes: 4 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,7 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

p {
margin: 0;
}
5 changes: 4 additions & 1 deletion src/pages/ThemeRecs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import Cube from "./Cube";
import { Container } from "../styles/ThemeRecsStyled";
import { IoIosArrowForward } from "react-icons/io";

const ThemeRecs = () => {
return (
Expand All @@ -14,7 +15,9 @@ const ThemeRecs = () => {
</div>
<div className="startBtn">
<p className="start">시작하기</p>
<div className="icon">&gt;</div>
<div className="icon">
<IoIosArrowForward />
</div>
</div>
</Container>
);
Expand Down
133 changes: 133 additions & 0 deletions src/pages/ThemeRecsQuestions.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import React, { useEffect, useState } from "react";
import Cube from "./Cube";
import {
Container,
StartBtn,
Select,
} from "../styles/ThemeRecsQuestionsStyled";
import { IoIosArrowForward } from "react-icons/io";

const ThemeRecsQuestions = () => {
const [isVisible, setIsVisible] = useState(false);

const handleScroll = () => {
const bottom =
window.innerHeight + window.scrollY >=
document.documentElement.scrollHeight - 10; // Slight buffer to ensure visibility
setIsVisible(bottom);
};

useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);

return (
<>
<Container>
<div className="textBox">
<div className="subTitle">당신을 위한 방,</div>
<div className="title">어느 지역을 원하시나요?</div>
<div className="selectBox">
<Select>
<p>서울 전체</p>
</Select>
<Select>
<p>홍대</p>
</Select>
<Select>
<p>강남</p>
</Select>
<Select>
<p>건대</p>
</Select>
<Select>
<p>대학로</p>
</Select>
<Select>
<p>신촌</p>
</Select>
<Select>
<p>잠실</p>
</Select>
<Select>
<p>신림</p>
</Select>
<Select>
<p>노원</p>
</Select>
<Select>
<p>서울 (기타)</p>
</Select>
</div>
</div>
<div className="cubeBox">
<Cube />
</div>
</Container>
<Container>
<div className="cubeBox">
<Cube />
</div>
<div className="textBox">
<div className="subTitle">당신을 위한 방,</div>
<div className="title">어떤 장르를 원하시나요?</div>
<div className="selectBox">
<Select>
<p>랜덤</p>
</Select>
<Select>
<p>감성</p>
</Select>
<Select>
<p>공포 / 스릴러</p>
</Select>
<Select>
<p>코믹</p>
</Select>
<Select>
<p>추리</p>
</Select>
<Select>
<p>모험</p>
</Select>
</div>
</div>
</Container>
<Container>
<div className="textBox">
<div className="subTitle">당신을 위한 방,</div>
<div className="title">어떤 난이도를 원하시나요?</div>
<div className="selectBox">
<Select>
<p>어려움</p>
</Select>
<Select>
<p>보통</p>
</Select>
<Select>
<p>쉬움</p>
</Select>
</div>
</div>

<div className="cubeBox">
<Cube />
</div>
</Container>

<StartBtn isVisible={isVisible}>
<div className="startBtn">
<p className="start">추천 받기</p>
<div className="icon">
<IoIosArrowForward />
</div>
</div>
</StartBtn>
</>
);
};

export default ThemeRecsQuestions;
129 changes: 129 additions & 0 deletions src/styles/ThemeRecsQuestionsStyled.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import styled from "styled-components";
import { Link } from "react-router-dom";

export const Container = styled.div`
width: 100vw;
height: 90vh;
/* margin: 0; */
/* margin-top: 10vh; */
background: radial-gradient(50% 50% at 50% 50%, #3b3b3b 0%, #080101 100%);
display: flex;
.textBox {
/* width: 60vw; */
height: inherit;
padding: 0 10vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.subTitle {
color: white;
font-size: 2.1rem;
}
.title {
margin-top: 1rem;
color: white;
font-size: 3.7rem;
font-weight: bold;
}
.cubeBox {
width: 40vw;
height: inherit;
}
.selectBox {
width: 43vw;
margin-top: 2rem;
flex-wrap: wrap;
display: flex;
}
`;

export const StartBtn = styled.div<{ isVisible: boolean }>`
// 화면 맨 끝에 도착해야만 보이게
transition: opacity 0.7s ease-in-out;
opacity: ${(props) => (props.isVisible ? 1 : 0)};
transform: ${(props) =>
props.isVisible ? "translateY(0)" : "translateY(20px)"};
visibility: ${(props) => (props.isVisible ? "visible" : "hidden")};
.startBtn {
position: fixed;
bottom: 10vh;
right: 10vw;
display: flex;
justify-content: center;
align-items: center;
width: 10rem;
height: 2rem;
padding: 0.7rem 1rem;
border-radius: 1rem;
border: 3px solid white;
color: white;
background-color: #080101;
cursor: pointer;
filter: drop-shadow(0px 0px 10px #ffffff62);
transition: 0.2s all ease-in-out;
}
.startBtn:hover {
filter: drop-shadow(0px 0px 10px #ffffff);
}
.start {
font-size: 1.5rem;
margin-right: 0.3rem;
}
.icon {
width: 1.5rem;
font-size: 2rem;
display: flex;
justify-content: flex-end;
align-items: center;
}
`;

export const Select = styled.div`
margin-top: 1rem;
margin-right: 1rem;
padding: 0.5rem 1.3rem;
font-size: 1.2rem;
color: white;
border-radius: 1rem;
border: 1px solid white;
&:hover {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.2);
border-color: #ccc;
}
&:active {
background-color: rgba(255, 255, 255, 0.2);
border-color: #ccc;
}
`;

export const StyledLink = styled(Link)`
text-decoration: none;
&:focus,
&:hover,
&:visited,
&:link,
&:active {
text-decoration: none;
}
`;
10 changes: 9 additions & 1 deletion src/styles/ThemeRecsStyled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,15 @@ export const Container = styled.div`
.start {
font-size: 1.5rem;
margin-right: 1rem;
margin-right: 0.3rem;
}
.icon {
width: 1.5rem;
font-size: 2rem;
display: flex;
justify-content: flex-end;
align-items: center;
}
`;

Expand Down

0 comments on commit 2d8b46d

Please sign in to comment.