전반적 스타일 커밋

Angelhack-LIBI · Jul 18, 2020 · 1e37322 · 1e37322
1 parent 76f9f1e
commit 1e37322
Show file tree

Hide file tree

Showing 12 changed files with 187 additions and 56 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="사이에 오신것을 환영합니다"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>사이</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/DefaultLayout/DefaultLayoutLast.tsx b/src/components/DefaultLayout/DefaultLayoutLast.tsx
@@ -20,7 +20,7 @@ import { useLocation, useHistory } from "react-router-dom";
 import LanguageSelector from "components/LanguageSelector";
 import { assignRouteProps, propsToStyle, range } from "utils";
 
-import LibiLogo from "images/libi-logo.png";
+import Logo from "images/logo.png";
 import ImageLogo from "components/ImageLogo";
 import styled, { CSSProperties } from "styled-components";
 import FlexCenter from "components/FlexCenter";
@@ -131,40 +131,54 @@ const DefaultLayout: FunctionComponent<IDefaultLayoutProps> = (props) => {
       <Header
         className="header"
         style={{
-          display: "flex",
-          flexFlow: "column",
+          // display: "flex",
+          // flexFlow: "column",
           backgroundColor: "white",
           padding: 0,
+          borderBottom: '1px solid #eee'
           // height: 300
         }}
       >
-        <HeaderWrapper>
-          <ImageLogo
+        {/* <HeaderWrapper> */}
+          {/* <ImageLogo
+            className={'logo'}
             onClick={() => handleRouteClick({ key: "/" })}
-            className="logo"
-            image={LibiLogo}
+            image={Logo}
             style={{ width: 78, margin: "8px 8px" }}
-          />
+          /> */}
+          <div
+            className="logo"
+            onClick={() => handleRouteClick({ key: "/" })}
+            style={{
+              backgroundImage:`url(${Logo})`,
+              width: 120,
+              height: 31,
+              margin: '16px 24px 16px 0',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: 'contain',
+              float: 'left'
+            }} />
           <Menu
             // theme={"dark"}
             mode="horizontal"
             style={menuStyle}
             selectedKeys={[pathname]}
             onClick={handleRouteClick}
           >
-            {defaultMenus.map(({ componentKey, path }) => (
+            {/* {defaultMenus.map(({ componentKey, path }) => (
               <Menu.Item key={path}>{componentKey}</Menu.Item>
-            ))}
+            ))} */}
 
-            <Menu.Item key="language-selector" disabled style={{ opacity: 1 }}>
+            {/* <Menu.Item key="language-selector" disabled style={{ opacity: 1 }}>
               <LanguageSelector />
-            </Menu.Item>
+            </Menu.Item> */}
 
-            <Menu.Item key="sign-in" disabled style={{ opacity: 1 }}>
+            <Menu.Item key="sign-in" disabled style={{ opacity: 1, marginLeft: 'auto' }}>
               <LoginModalButton />
             </Menu.Item>
           </Menu>
-        </HeaderWrapper>
+        {/* </HeaderWrapper> */}
         {/* <FlexCenter style={{ position: 'relative', top: '-40px', lineHeight: 'inherit' }}>
           <FlexCenter style={{ backgroundColor: '#f0f2f5', padding: '20px 20px', borderRadius: '20px 20px 0px' }}>
             {range(0, 10).map(v => {
@@ -186,8 +200,7 @@ const DefaultLayout: FunctionComponent<IDefaultLayoutProps> = (props) => {
             flex: "1",
             flexFlow: "column",
             lineHeight: "initial",
-            marginBottom: "20px",
-            padding: '50px 0'
+            padding: '50px 20px'
           }}
         >
           <div
@@ -196,7 +209,7 @@ const DefaultLayout: FunctionComponent<IDefaultLayoutProps> = (props) => {
               fontSize: "35px",
               fontWeight: "bold",
               marginBottom: "20px",
-              textAlign: "center",
+              textAlign: "center"
             }}
           >
             당신의 가게에는
@@ -213,7 +226,7 @@ const DefaultLayout: FunctionComponent<IDefaultLayoutProps> = (props) => {
           {/* </FlexCenter> */}
         </FlexCenter>}
         {/* <Layout style={{ padding: "0 24px 24px" }}> */}
-        <Breadcrumb style={{ margin: "16px 0" }}>{pathDom}</Breadcrumb>
+        {/* <Breadcrumb style={{ margin: "16px 0" }}>{pathDom}</Breadcrumb> */}
         <Content
           className="site-layout-background"
           style={{

diff --git a/src/components/ItemCard/ItemCard.tsx b/src/components/ItemCard/ItemCard.tsx
@@ -4,6 +4,7 @@ import { Card } from "antd";
 import FlexCenter from "components/FlexCenter";
 import styled from "styled-components";
 import { propsToStyle, formatNumber } from "utils";
+import { useHistory } from "react-router-dom";
 
 const { Meta } = Card;
 
@@ -18,6 +19,8 @@ interface Props {
 }
 
 const CardWrapper: any = styled.div`
+  border: 1px solid #eee;
+
   & .ant-card-cover {
     position: relative;
     width: 100%;
@@ -63,9 +66,10 @@ const ItemCard: FunctionComponent<IItemCardProps> = ({
   title,
   data,
 }) => {
-  const { type = 'groupbuying' } = data
+  const { type = 'groupbuying', id = '1' } = data
+  const history = useHistory()
   return (
-    <CardWrapper>
+    <CardWrapper onClick={() => history.push(`/about/${id}`)}>
       <Card
         hoverable
         // style={{ width: 240 }}
@@ -82,20 +86,20 @@ const ItemCard: FunctionComponent<IItemCardProps> = ({
           {type === 'groupbuying' ? '공동구매' : '재고할인'}
         </Tag>
         <Meta style={{ padding: 16 }} title={title || "Europe Street beat"} />
-        <FlexCenter style={{ backgroundColor: "#999", padding: 8 }}>
+        <FlexCenter style={{ backgroundColor: "#eee", padding: 8 }}>
           {Object.keys(data).includes("hopeMondey") ? (
-            <FlexCenter style={{ flex: "1", flexFlow: "column" }}>
+            <FlexCenter style={{ flex: "1", flexFlow: "column", padding: '4px' }}>
               <span>희망 금액</span>
               <span style={{ fontSize: "14px", fontWeight: "bold" }}>
-                {formatNumber(data?.hopeMoney)} 원
+                {`${formatNumber(data?.hopeMoney)} 원`}
               </span>
             </FlexCenter>
           ) : (
             <>
-              <FlexCenter style={{ flex: "1", flexFlow: "column" }}>
+              <FlexCenter style={{ flex: "1", flexFlow: "column", padding: '4px' }}>
                 <span>최소 주문금액</span>
                 <span style={{ fontSize: "14px", fontWeight: "bold" }}>
-                  <span>{`${formatNumber(data?.minMoney)}`}</span>
+                  <span>{`${formatNumber(data?.minMoney)} 원`}</span>
                 </span>
               </FlexCenter>
               <div
@@ -105,7 +109,7 @@ const ItemCard: FunctionComponent<IItemCardProps> = ({
                   backgroundColor: "#666",
                 }}
               />
-              <FlexCenter style={{ flex: "1", flexFlow: "column" }}>
+              <FlexCenter style={{ flex: "1", flexFlow: "column", padding: '4px' }}>
                 <span>목표달성률</span>
                 <span>{`${data?.percent} %`}</span>
               </FlexCenter>

diff --git a/src/components/LoginModalButton/LoginModalButton.tsx b/src/components/LoginModalButton/LoginModalButton.tsx
@@ -44,14 +44,12 @@ const LoginModalButton: FunctionComponent<ILoginModalProps> = (props) => {
     }
   }, [token, setAccount])
 
-  console.log('token', token)
-
   return <>
     {
       (token || '').length > 0 ? <FlexCenter>
         {`${account?.name}님 안녕하세요`}
-        <Button type="primary" onClick={() => { onDrop() }} size={'small'}>
-          <CloseOutlined />
+        <Button type="primary" style={{ marginLeft: '4px' }} onClick={() => { onDrop() }} size={'small'}>
+          로그아웃
         </Button>
       </FlexCenter> : (
         <Button type="primary" onClick={showModal}>

diff --git a/src/components/RegisterForm/RegisterForm.tsx b/src/components/RegisterForm/RegisterForm.tsx
@@ -10,11 +10,18 @@ import {
   Checkbox,
   Button,
   AutoComplete,
+  Modal,
 } from "antd";
 import { QuestionCircleOutlined } from "@ant-design/icons";
 import axiosInstance from "api/AxiosInstance";
 // import axiosInstance from "api";
 
+const success = () => {
+  Modal.success({
+    content: '회원가입을 축하드립니다',
+  });
+}
+
 const formItemLayout = {
   labelCol: {
     xs: { span: 24 },
@@ -26,13 +33,19 @@ const formItemLayout = {
   },
 };
 
-const RegistrationForm: FunctionComponent<any> = () => {
+const RegistrationForm: FunctionComponent<any> = ({ handleOk }) => {
   const [form] = Form.useForm();
 
   const onFinish = async (values: any) => {
     console.log("Received values of form: ", values);
     const data = await axiosInstance.post("/account/", values)
     console.log('data', data)
+
+    success()
+    if (handleOk) {
+      handleOk()
+    }
+
   };
 
   return (

diff --git a/src/containers/Add/Add.tsx b/src/containers/Add/Add.tsx
@@ -2,16 +2,19 @@ import React, { FunctionComponent } from 'react';
 import AddForm from 'components/AddForm';
 import DefaultLayout from 'components/DefaultLayout';
 import FlexCenter from 'components/FlexCenter';
+import { useParams } from 'react-router-dom';
 
 interface ILoginProps {
 }
 
 const Add: FunctionComponent<ILoginProps> = (props) => {
+  let { type = 'groupbuying' } = useParams();
+
   return <DefaultLayout>
-    <FlexCenter>
-
+    <FlexCenter style={{ fontSize: '20px', fontWeight: 'bold', color: '#666' }}>
+      {type === 'groupbuying' ? '공동구매를 진행해 보세요' : '재고상품을 할인 판매해보세요'}!
     </FlexCenter>
-    <AddForm />
+    <AddForm  />
   </DefaultLayout>;
 };
 

diff --git a/src/containers/CardView/CardViewV2.tsx b/src/containers/CardView/CardViewV2.tsx
@@ -41,7 +41,7 @@ const CardView: FunctionComponent<ICardViewProps> = (props) => {
         setTimeout(() => {
           actuallyLoadMore(resolve);
           setLoading(false);
-        }, 500);
+        }, 1000000);
       });
     }
   }, [items, setItems, loading, setLoading]);
@@ -54,10 +54,10 @@ const CardView: FunctionComponent<ICardViewProps> = (props) => {
           dataLength={items.length} //This is important field to render the next data
           next={onLoad}
           hasMore={true}
-          loader={<Spin />}
+          loader={<FlexCenter style={{ width: '100%' }}><Spin /></FlexCenter>}
           endMessage={
             <p style={{textAlign: 'center'}}>
-              <b>Yay! You have seen it all</b>
+              <b>모든 목록을 조회했습니다</b>
             </p>
           }>
           <Row gutter={[16, 16]} style={{ margin: 0 }}>