From 3a8e92455298523e7c2552d8075c60c6cc5b3168 Mon Sep 17 00:00:00 2001 From: Climier-code Date: Fri, 25 Nov 2022 18:27:14 +0900 Subject: [PATCH] feat: add MainPage --- src/assets/bell.svg | 3 + src/assets/category.svg | 5 ++ src/assets/chats.svg | 3 + src/assets/chevron.svg | 3 + src/assets/control.svg | 4 + src/assets/home.svg | 3 + src/assets/my.svg | 4 + src/assets/search.svg | 3 + src/assets/sell.svg | 5 ++ src/components/common/Footer/index.tsx | 48 ++++++++++ src/components/common/Footer/styled.ts | 31 +++++++ src/components/common/Header/index.tsx | 26 ++++++ src/components/common/Header/styled.ts | 41 +++++++++ src/components/common/ProductItem/index.tsx | 89 +++++++++++++++++++ .../pages/DetailPage/index.tsx | 0 src/components/pages/MainPage/index.tsx | 38 ++++++++ src/constants/productList.ts | 83 +++++++++++++++++ src/index.css | 19 ++-- src/pages/MainPage/index.tsx | 25 ------ src/utils/stackflow.ts | 5 +- 20 files changed, 406 insertions(+), 32 deletions(-) create mode 100644 src/assets/bell.svg create mode 100644 src/assets/category.svg create mode 100644 src/assets/chats.svg create mode 100644 src/assets/chevron.svg create mode 100644 src/assets/control.svg create mode 100644 src/assets/home.svg create mode 100644 src/assets/my.svg create mode 100644 src/assets/search.svg create mode 100644 src/assets/sell.svg create mode 100644 src/components/common/Footer/index.tsx create mode 100644 src/components/common/Footer/styled.ts create mode 100644 src/components/common/Header/index.tsx create mode 100644 src/components/common/Header/styled.ts create mode 100644 src/components/common/ProductItem/index.tsx rename src/{ => components}/pages/DetailPage/index.tsx (100%) create mode 100644 src/components/pages/MainPage/index.tsx create mode 100644 src/constants/productList.ts delete mode 100644 src/pages/MainPage/index.tsx diff --git a/src/assets/bell.svg b/src/assets/bell.svg new file mode 100644 index 0000000..a859392 --- /dev/null +++ b/src/assets/bell.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/category.svg b/src/assets/category.svg new file mode 100644 index 0000000..6bfedc5 --- /dev/null +++ b/src/assets/category.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/chats.svg b/src/assets/chats.svg new file mode 100644 index 0000000..0bdb1c5 --- /dev/null +++ b/src/assets/chats.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/chevron.svg b/src/assets/chevron.svg new file mode 100644 index 0000000..e1e3933 --- /dev/null +++ b/src/assets/chevron.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/control.svg b/src/assets/control.svg new file mode 100644 index 0000000..e171416 --- /dev/null +++ b/src/assets/control.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/home.svg b/src/assets/home.svg new file mode 100644 index 0000000..0785257 --- /dev/null +++ b/src/assets/home.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/my.svg b/src/assets/my.svg new file mode 100644 index 0000000..82b4093 --- /dev/null +++ b/src/assets/my.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/search.svg b/src/assets/search.svg new file mode 100644 index 0000000..473173b --- /dev/null +++ b/src/assets/search.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/sell.svg b/src/assets/sell.svg new file mode 100644 index 0000000..e042986 --- /dev/null +++ b/src/assets/sell.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx new file mode 100644 index 0000000..92e5a61 --- /dev/null +++ b/src/components/common/Footer/index.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import Home from 'src/assets/home.svg'; +import Category from 'src/assets/category.svg'; +import Sell from 'src/assets/sell.svg'; +import Chats from 'src/assets/chats.svg'; +import My from 'src/assets/my.svg'; +import { FooterWrapper, FooterItemWrapper, FooterItem } from './styled'; + +const Footer: React.FC = () => { + return ( + + + +
+ home +
+

Home

+ + +
+ Category +
+

Category

+ + +
+ Sell +
+

Sell

+ + +
+ Chats +
+

Chats

+ + +
+ My +
+

My

+ + + + ); +}; + +export default Footer; diff --git a/src/components/common/Footer/styled.ts b/src/components/common/Footer/styled.ts new file mode 100644 index 0000000..6723031 --- /dev/null +++ b/src/components/common/Footer/styled.ts @@ -0,0 +1,31 @@ +import styled from 'styled-components'; + +export const FooterWrapper = styled.div` + width: 100%; + position: absolute; + bottom: 0; + background-color: #212124; +`; + +export const FooterItemWrapper = styled.div` + display: flex; + grid-template-columns: 1.5rem 1.5rem 1.5rem 1.5rem 1.5rem; + justify-content: space-between; + box-shadow: 0 -1px 0 0 #43474f; + padding: 0.5rem 0; +`; + +export const FooterItem = styled.button` + flex: 1; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #212124; + & > div { + margin-bottom: 0.375rem; + } + + p { + font-size: 0.75rem; + } +`; diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx new file mode 100644 index 0000000..e1f7bc0 --- /dev/null +++ b/src/components/common/Header/index.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import Search from 'src/assets/search.svg'; +import Control from 'src/assets/control.svg'; +import Bell from 'src/assets/bell.svg'; +import Chevron from 'src/assets/chevron.svg'; +import { HeaderWrapper, HeaderContentWrapper, TitleWrapper, ToolsWrapper } from './styled'; + +const Header: React.FC = () => { + return ( + + + +

Woolston

+ chevron + + + search + control + bell + + + + ); +}; + +export default Header; diff --git a/src/components/common/Header/styled.ts b/src/components/common/Header/styled.ts new file mode 100644 index 0000000..fce50a0 --- /dev/null +++ b/src/components/common/Header/styled.ts @@ -0,0 +1,41 @@ +import styled from 'styled-components'; + +export const HeaderWrapper = styled.div` + position: absolute; + top: 0; + width: 100%; + background-color: #212124; +`; + +export const HeaderContentWrapper = styled.section` + display: flex; + justify-content: space-between; + align-items: center; + + height: 44px; + + border-bottom: 1px solid #43474f; +`; + +export const TitleWrapper = styled.div` + padding: 0 0.5rem; + display: flex; + align-items: center; + + p { + font-size: 1.125rem; + font-weight: 700; + } + + img { + margin-left: 0.5rem; + } +`; + +export const ToolsWrapper = styled.div` + display: grid; + grid-template-columns: 1.5rem 1.5rem 1.5rem; + grid-gap: 1rem; + gap: 1rem; + margin-right: 0.5rem; +`; diff --git a/src/components/common/ProductItem/index.tsx b/src/components/common/ProductItem/index.tsx new file mode 100644 index 0000000..c756358 --- /dev/null +++ b/src/components/common/ProductItem/index.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import { useFlow } from 'src/utils/stackflow'; +import styled from 'styled-components'; + +interface Props { + id: number; + pictureSrc: string; + title: string; + author: string; + madeAt: number; + amount: number; +} + +const ProductItem: React.FC = (props) => { + const { id, pictureSrc, title, author, madeAt, amount } = props; + + const { push } = useFlow(); + + const handleLinkDetailPage = () => { + push('DetailPage', { + id, + }); + }; + + return ( + + + + ); +}; + +export default ProductItem; + +export const ProductItemWrapper = styled.div` + display: flex; + padding: 1rem 1rem 0; + + button { + box-shadow: 0 1px 0 0 hsla(0, 0%, 100%, 0.05); + padding-bottom: 1rem; + width: 100%; + background-color: #212124; + } +`; + +export const ProductImageWrapper = styled.div` + width: 6.75rem; + height: 6.75rem; + border-radius: 0.375rem; + margin-right: 1rem; + background-size: cover; + background-position: 50% 50%; + + img { + height: 108px; + width: 108px; + } +`; + +export const ProductDetailWrapper = styled.div` + p { + text-align: left; + &.title { + font-size: 1rem; + line-height: 1.375rem; + } + &.detail { + line-height: 1.25rem; + font-size: 0.8125rem; + color: #868b94; + } + &.amount { + font-size: 0.875rem; + font-weight: 700; + line-height: 1.25rem; + } + } +`; diff --git a/src/pages/DetailPage/index.tsx b/src/components/pages/DetailPage/index.tsx similarity index 100% rename from src/pages/DetailPage/index.tsx rename to src/components/pages/DetailPage/index.tsx diff --git a/src/components/pages/MainPage/index.tsx b/src/components/pages/MainPage/index.tsx new file mode 100644 index 0000000..b440f84 --- /dev/null +++ b/src/components/pages/MainPage/index.tsx @@ -0,0 +1,38 @@ +import { AppScreen } from '@stackflow/plugin-basic-ui'; +import { ActivityComponentType } from '@stackflow/react'; +import React from 'react'; +import Footer from 'src/components/common/Footer'; +import Header from 'src/components/common/Header'; +import ProductItem from 'src/components/common/ProductItem'; +import { PRODUCT_LIST_MOCK_DATA } from 'src/constants/productList'; +import styled from 'styled-components'; + +const MainPage: ActivityComponentType = () => { + return ( + +
+ + {PRODUCT_LIST_MOCK_DATA.map((data) => ( + + ))} + +