From 5f4bc1cd38cf856cc027c984a9e8172165edf61b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=98=88=EC=A7=80?= Date: Thu, 9 Nov 2023 09:58:29 +0900 Subject: [PATCH] =?UTF-8?q?Chore=20:=20guide=20page=20components=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes : #23 --- src/app/guide/page.tsx | 185 +++++------------------- src/components/guide/GoPage.tsx | 62 ++++++++ src/components/guide/ServiceContent.tsx | 93 ++++++++++++ 3 files changed, 189 insertions(+), 151 deletions(-) create mode 100644 src/components/guide/GoPage.tsx create mode 100644 src/components/guide/ServiceContent.tsx diff --git a/src/app/guide/page.tsx b/src/app/guide/page.tsx index 6236fd4..190cdab 100644 --- a/src/app/guide/page.tsx +++ b/src/app/guide/page.tsx @@ -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(); @@ -70,16 +72,7 @@ function page() { ); }); - const [selectedPage, setSelectedPage] = - useRecoilState(selectedNavPage); - const goProduct = () => { - setSelectedPage('제품 보기'); - router.push('/product'); - }; - const goWardrobe = () => { - setSelectedPage('옷장 정리'); - router.push('/wardrobe'); - }; + return ( {/* @@ -204,28 +197,22 @@ function page() { - - Small Logo - Repick Service - - - 빠르고 편리하게

나의 옷들을 판매해보세요! - - - 정리하고싶은 옷들을 문 밖에 두기만 하면

- 수거, 촬영, 살균 후 판매까지 리픽이 모두 알아서 처리해요! - + - - 옷장 정리하러 가기 - + + + {/* */} - - Small Logo - Shopping - - 리픽에 다양한 제품들이 기다리고 있어요! + @@ -410,9 +393,12 @@ function page() { - - 리픽 제품 구매하러 가기 - + + @@ -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; @@ -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}; @@ -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; @@ -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; @@ -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); diff --git a/src/components/guide/GoPage.tsx b/src/components/guide/GoPage.tsx new file mode 100644 index 0000000..9343e17 --- /dev/null +++ b/src/components/guide/GoPage.tsx @@ -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(selectedNavPage); + + const go = ({ page, routerPath }: { page: string; routerPath: string }) => { + setSelectedPage(page); + router.push(routerPath); + }; + + return ( + <> + go({ page, routerPath })}> + {content} + + + ); +} + +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; diff --git a/src/components/guide/ServiceContent.tsx b/src/components/guide/ServiceContent.tsx new file mode 100644 index 0000000..6b6e5eb --- /dev/null +++ b/src/components/guide/ServiceContent.tsx @@ -0,0 +1,93 @@ +import React from 'react'; +import { styled, css, keyframes } from 'styled-components'; +import small_logo from '@/assets/images/guide/small_logo.svg'; +import Image from 'next/image'; + +function ServiceContent({ + titleText, + contentPosition, + content, + description, +}: { + titleText: string; + contentPosition: string; + content: string; + description: string; +}) { + const createMarkup = (text: string) => ({ __html: text }); + return ( + <> + + Small Logo + {titleText} + + + + + ); +} + +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<{ $contentPosition?: string }>` + ${(props) => + (props.$contentPosition == 'left' && + css` + text-align: left; + `) || + (props.$contentPosition == 'right' && + css` + 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; + `, + + 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; + `, +}; + +export default ServiceContent;