Skip to content

Commit

Permalink
Chore : guide page components 분리
Browse files Browse the repository at this point in the history 
Fixes : #23
  • Loading branch information
@oyatplum
oyatplum committed Nov 9, 2023
1 parent fd5f8fa commit 5f4bc1c
Show file tree
Hide file tree
Showing 3 changed files with 189 additions and 151 deletions.
185 changes: 34 additions & 151 deletions src/app/guide/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { useRecoilState } from 'recoil';
import { useInView } from 'react-intersection-observer';
import { flexCenter, flexColumn } from '@/styles/theme';
import { Product, SlideInDivProps } from '@/interface/interface';
import GoPage from '@/components/guide/goPage';
import ServiceContent from '@/components/guide/ServiceContent';

function page() {
const router = useRouter();
Expand Down Expand Up @@ -70,16 +72,7 @@ function page() {
</div>
);
});
const [selectedPage, setSelectedPage] =
useRecoilState<string>(selectedNavPage);
const goProduct = () => {
setSelectedPage('제품 보기');
router.push('/product');
};
const goWardrobe = () => {
setSelectedPage('옷장 정리');
router.push('/wardrobe');
};

return (
<Contents>
{/* <BannerWrapper>
Expand Down Expand Up @@ -204,28 +197,22 @@ function page() {
</Character._2>
</LogoWrapper>
<ContentWrapper.right>
<Content.Title>
<Image
src={small_logo}
alt="Small Logo"
style={{ width: '31px', height: '31px' }}
// placeholder ="blur"
/>
<Content.TitleText>Repick Service</Content.TitleText>
</Content.Title>
<Content.SubRight>
빠르고 편리하게<br></br>나의 옷들을 판매해보세요!
</Content.SubRight>
<Content.Description>
정리하고싶은 옷들을 문 밖에 두기만 하면<br></br>
수거, 촬영, 살균 후 판매까지 리픽이 모두 알아서 처리해요!
</Content.Description>
<ServiceContent
titleText="Repick Service"
contentPosition="right"
content="빠르고 편리하게<br/>나의 옷들을 판매해보세요!"
description="정리하고싶은 옷들을 문 밖에 두기만 하면<br/>수거, 촬영, 살균 후 판매까지 리픽이 모두 알아서 처리해요!"
/>
</ContentWrapper.right>
</ContentWrapper.SpaceBetween>
</Section2>
<WardrobeBtn onClick={goWardrobe}>
<WardrobeP>옷장 정리하러 가기</WardrobeP>
</WardrobeBtn>

<GoPage
page="옷장 정리"
routerPath="/wardrobe"
content="옷장 정리하러 가기"
/>

{/* <BannerWrapper2>
<Image
src={slogan_1}
Expand Down Expand Up @@ -384,16 +371,12 @@ function page() {
</Section4> */}
<Section5>
<ContentWrapper.center>
<Content.Title>
<Image
src={small_logo}
alt="Small Logo"
style={{ width: '31px', height: '31px' }}
// placeholder ="blur"
/>
<Content.TitleText>Shopping</Content.TitleText>
</Content.Title>
<Content.Sub>리픽에 다양한 제품들이 기다리고 있어요!</Content.Sub>
<ServiceContent
titleText="Shopping"
contentPosition="left"
content="리픽에 다양한 제품들이 기다리고 있어요!"
description=""
/>
<ContentWaiting>
<ContentWaitingInfoWrapper>
<ContentWaitingInfoItemWrapper>
Expand All @@ -410,9 +393,12 @@ function page() {
</ContentWaitingInfoItemWrapper>
</ContentWaitingInfoWrapper>
</ContentWaiting>
<PurchaseButton onClick={goProduct}>
<PurchaseP>리픽 제품 구매하러 가기</PurchaseP>
</PurchaseButton>

<GoPage
page="제품 보기"
routerPath="/product"
content="리픽 제품 구매하러 가기"
/>
</ContentWrapper.center>
</Section5>
</Contents>
Expand All @@ -421,31 +407,6 @@ function page() {

export default page;

const WardrobeBtn = styled.div`
${flexCenter}
width: 495.5px;
height: 20px;
overflow: hidden;
padding: 45.406px 75.677px;
border-radius: 28.379px;
background: ${(props) => props.theme.colors.black};
flex-direction: column;
gap: 18.919px;
cursor: pointer;
margin-top: 20px;
`;
const WardrobeP = styled.div`
color: ${(props) => props.theme.colors.lightgray};
font-family: Pretendard;
font-size: 30.271px;
font-style: normal;
font-weight: 600;
line-height: 140%;
text-align: center;
font-feature-settings:
'clig' off,
'liga' off;
`;
const Contents = styled.div`
${flexColumn}
align-items: center;
Expand Down Expand Up @@ -523,35 +484,6 @@ const Section1 = styled.div`
`;

const Content = {
Title: styled.div`
display: flex;
gap: 8px;
margin-bottom: 16px;
`,
TitleText: styled.p`
color: ${(props) => props.theme.colors.main};
font-feature-settings:
'clig' off,
'liga' off;
/* Header3 24pt sb */
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 36px */
`,
Sub: styled.p`
text-align: left;
color: ${(props) => props.theme.colors.black};
font-family: Pretendard;
font-size: 48px;
font-style: normal;
font-weight: 600;
line-height: 140%;
font-feature-settings:
'clig' off,
'liga' off;
`,
Sub_White: styled.p`
text-align: left;
color: ${(props) => props.theme.colors.white};
Expand All @@ -564,22 +496,11 @@ const Content = {
'clig' off,
'liga' off;
`,
SubRight: styled.p`
text-align: right;
color: ${(props) => props.theme.colors.black};
font-family: Pretendard;
font-size: 48px;
font-style: normal;
font-weight: 600;
line-height: 140%;
font-feature-settings:
'clig' off,
'liga' off;
`,
NumberWrapper: styled.div`
${flexCenter}
gap: 48px;
`,

// NumberWrapper: styled.div`
// ${flexCenter}
// gap: 48px;
// `,
Number: styled.p`
color: #000;
font-family: Pretendard;
Expand Down Expand Up @@ -616,19 +537,7 @@ const Content = {
'clig' off,
'liga' off;
`,
Description: styled.p`
margin-top: 18px;
text-align: right;
color: ${(props) => props.theme.colors.black};
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 155.5%;
font-feature-settings:
'clig' off,
'liga' off;
`,

Description_Center: styled.p`
margin-top: 18px;
text-align: center;
Expand Down Expand Up @@ -816,32 +725,6 @@ const Section5 = styled.div`
${flexCenter}
`;

const PurchaseButton = styled.div`
${flexCenter}
width: 495.5px;
height: 20px;
overflow: hidden;
padding: 45.406px 75.677px;
border-radius: 28.379px;
background: ${(props) => props.theme.colors.black};
flex-direction: column;
gap: 18.919px;
cursor: pointer;
`;

const PurchaseP = styled.p`
color: ${(props) => props.theme.colors.lightgray};
font-family: Pretendard;
font-size: 30.271px;
font-style: normal;
font-weight: 600;
line-height: 140%;
text-align: center;
font-feature-settings:
'clig' off,
'liga' off;
`;

const slideFromLeftToRight = keyframes`
0% {
transform: translateX(-100vw);
Expand Down
62 changes: 62 additions & 0 deletions src/components/guide/GoPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React from 'react';
import { selectedNavPage } from '@/atom/states';
import { styled } from 'styled-components';
import { flexCenter, flexColumn } from '@/styles/theme';
import { useRecoilState } from 'recoil';
import { useRouter } from 'next/navigation';

function GoPage({
page,
routerPath,
content,
}: {
page: string;
routerPath: string;
content: string;
}) {
const router = useRouter();

const [selectedPage, setSelectedPage] =
useRecoilState<string>(selectedNavPage);

const go = ({ page, routerPath }: { page: string; routerPath: string }) => {
setSelectedPage(page);
router.push(routerPath);
};

return (
<>
<WardrobeBtn onClick={() => go({ page, routerPath })}>
<WardrobeP>{content}</WardrobeP>
</WardrobeBtn>
</>
);
}

const WardrobeBtn = styled.div`
${flexCenter}
width: 495.5px;
height: 20px;
overflow: hidden;
padding: 45.406px 75.677px;
border-radius: 28.379px;
background: ${(props) => props.theme.colors.black};
flex-direction: column;
gap: 18.919px;
cursor: pointer;
margin-top: 20px;
`;
const WardrobeP = styled.div`
color: ${(props) => props.theme.colors.lightgray};
font-family: Pretendard;
font-size: 30.271px;
font-style: normal;
font-weight: 600;
line-height: 140%;
text-align: center;
font-feature-settings:
'clig' off,
'liga' off;
`;

export default GoPage;
Loading

0 comments on commit 5f4bc1c

Please sign in to comment.