feat: add MainPage

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 (
+    <FooterWrapper>
+      <FooterItemWrapper>
+        <FooterItem>
+          <div>
+            <img src={Home} alt="home" />
+          </div>
+          <p>Home</p>
+        </FooterItem>
+        <FooterItem>
+          <div>
+            <img src={Category} alt="Category" />
+          </div>
+          <p>Category</p>
+        </FooterItem>
+        <FooterItem>
+          <div>
+            <img src={Sell} alt="Sell" />
+          </div>
+          <p>Sell</p>
+        </FooterItem>
+        <FooterItem>
+          <div>
+            <img src={Chats} alt="Chats" />
+          </div>
+          <p>Chats</p>
+        </FooterItem>
+        <FooterItem>
+          <div>
+            <img src={My} alt="My" />
+          </div>
+          <p>My</p>
+        </FooterItem>
+      </FooterItemWrapper>
+    </FooterWrapper>
+  );
+};
+
+export default Footer;

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;
+  }
+`;

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 (
+    <HeaderWrapper>
+      <HeaderContentWrapper>
+        <TitleWrapper>
+          <p>Woolston</p>
+          <img src={Chevron} alt="chevron" />
+        </TitleWrapper>
+        <ToolsWrapper>
+          <img src={Search} alt="search" />
+          <img src={Control} alt="control" />
+          <img src={Bell} alt="bell" />
+        </ToolsWrapper>
+      </HeaderContentWrapper>
+    </HeaderWrapper>
+  );
+};
+
+export default Header;

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;
+`;

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> = (props) => {
+  const { id, pictureSrc, title, author, madeAt, amount } = props;
+
+  const { push } = useFlow();
+
+  const handleLinkDetailPage = () => {
+    push('DetailPage', {
+      id,
+    });
+  };
+
+  return (
+    <ProductItemWrapper>
+      <button onClick={handleLinkDetailPage}>
+        <ProductImageWrapper>
+          <img src={pictureSrc} alt="title" />
+        </ProductImageWrapper>
+        <ProductDetailWrapper>
+          <p className="title">{title}</p>
+          <p className="detail">
+            {author} · {madeAt} day ago
+          </p>
+          <p className="amount">{amount}</p>
+        </ProductDetailWrapper>
+      </button>
+    </ProductItemWrapper>
+  );
+};
+
+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;
+    }
+  }
+`;

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 (
+    <AppScreen>
+      <Header />
+      <ItemsWrapper>
+        {PRODUCT_LIST_MOCK_DATA.map((data) => (
+          <ProductItem
+            key={data.id}
+            id={data.id}
+            pictureSrc={data.pictureSrc}
+            title={data.title}
+            author={data.author}
+            madeAt={data.madeAt}
+            amount={data.amount}
+          />
+        ))}
+      </ItemsWrapper>
+      <Footer />
+    </AppScreen>
+  );
+};
+
+export default MainPage;
+
+const ItemsWrapper = styled.section`
+  padding: 44px 0 60px;
+  height: calc(100vh - 104px);
+  overflow-y: auto;
+`;