Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inyoung #114

Merged
merged 2 commits into from
Jan 30, 2024
Merged

Inyoung #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd7589e
Feat: Slide 카테고리 마크업 #110
rmdnps10 Jan 30, 2024
9828c93
Fix: navigate 홈으로 #110
rmdnps10 Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Common/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from 'styled-components';
import { Button } from './Button';
import { Black, Green, Grey6, LightGreen, Red, White } from 'styles/color';
import { Black, Green, Grey6, LightGreen, White } from 'styles/color';
import { Button2, Caption2, Subtitle } from 'styles/font';
import { ReactComponent as InfoIcon } from 'assets/icons/info.svg';
import { ReactComponent as ReciptIcon } from 'assets/icons/recipt.svg';
Expand Down
149 changes: 144 additions & 5 deletions src/pages/Common/Service.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ import Procedure1 from 'assets/icons/procedure1.png';
import Procedure2 from 'assets/icons/procedure2.png';
import { Button } from 'components/Common/Button';
import { ReactComponent as HeartIcon } from 'assets/icons/icon-heart2.svg';
import { HeartRate } from 'utils/HeartRate';
import { LoadingSpinner } from 'utils/LoadingSpinner';
import { Characters } from 'utils/Characters';
import { consultStyleToCharNum } from 'utils/convertStringToCharNum';
function Service() {
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(true);
Expand All @@ -33,7 +34,7 @@ function Service() {
<HeaderWrapper>
<BackIcon
onClick={() => {
navigate('/minder');
navigate('/');
}}
/>
<Heading>서비스 소개</Heading>
Expand Down Expand Up @@ -116,7 +117,113 @@ function Service() {
</div>
</div>

<div className="slide-category"></div>
<div className="slide-category">
<div className="slide1">
<SlideList>
<SliderItem>
<div className="char">
<Characters number={1} />
</div>
<Heading>연애갈등</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={2} />
</div>
<Heading>이별/재회</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={3} />
</div>
<Heading>여자심리</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={4} />
</div>
<Heading>남자심리</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={5} />
</div>
<Heading>썸/연애시작</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={6} />
</div>
<Heading>짝사랑</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={7} />
</div>
<Heading>권태기</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={8} />
</div>
<Heading>기타</Heading>
</SliderItem>
</SlideList>
</div>
<div className="slide2">
<SlideList>
<SliderItem>
<div className="char">
<Characters number={5} />
</div>
<Heading>썸/연애시작</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={6} />
</div>
<Heading>짝사랑</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={7} />
</div>
<Heading>권태기</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={8} />
</div>
<Heading>기타</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={1} />
</div>
<Heading>연애갈등</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={2} />
</div>
<Heading>이별/재회</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={3} />
</div>
<Heading>여자심리</Heading>
</SliderItem>
<SliderItem>
<div className="char">
<Characters number={4} />
</div>
<Heading>남자심리</Heading>
</SliderItem>
</SlideList>
</div>
</div>

<div className="service-point">
<Caption1 color={Grey3}>Service Point1</Caption1>
<Space height="0.4rem" />
Expand Down Expand Up @@ -155,7 +262,7 @@ function Service() {
<Space height="6rem" />
<div className="main-gray">
<Space height="3.8rem" />
<img src={Figure6} style={{ width: '60%' }} />
<img src={Figure6} style={{ width: '60%' }} alt="figure" />
</div>
<div className="service-point">
<Caption1 color={Grey3}>Service Point3</Caption1>
Expand Down Expand Up @@ -211,7 +318,7 @@ function Service() {
width="calc(100% - 4rem)"
height="5.2rem"
onClick={() => {
navigate('/minder');
navigate('/');
}}
/>
</FinalBox>
Expand Down Expand Up @@ -265,6 +372,10 @@ const ServicePageContainer = styled.div`
.slide-category {
background-color: ${Grey6};
height: 21.7rem;
display: flex;
flex-direction: column;
gap: 1.4rem;
justify-content: center;
}
.service-point {
padding: 2rem;
Expand All @@ -291,6 +402,17 @@ const ServicePageContainer = styled.div`
display: flex;
align-items: center;
}
.slide1 {
width: 100%;
overflow: scroll;
}
.slide2 {
width: 100%;
overflow: scroll;
}
.char {
width: 8rem;
}
`;

const SharemindLogoIcon = styled.img`
Expand Down Expand Up @@ -326,6 +448,23 @@ const ProcedureImg2 = styled.img`
width: 31rem;
`;

const SlideList = styled.div`
display: flex;
gap: 1rem;
width: 200rem;
`;

const SliderItem = styled.div`
width: 19rem;
height: 8rem;
background-color: white;
border-radius: 2rem;
display: flex;
justify-content: center;
align-items: center;
gap: 0.9rem;
`;

const FinalBox = styled.div`
display: flex;
background-color: white;
Expand Down
Loading