리스트 및 검색기능 처리

package.json

@@ -22,6 +22,7 @@
     "craco-antd": "^1.18.1",
     "craco-less": "^1.17.0",
     "less": "^3.12.0",
+    "query-string": "^6.13.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-images-upload": "^1.2.8",

src/api/AxiosInstance/index.ts

@@ -1,12 +1,9 @@
 import axios from 'axios'
 import createAuthRefreshInterceptor from 'axios-auth-refresh';
+import meta from 'api/meta';
 
 
-const axiosInstance = axios.create({
-  baseURL: 'http://localhost:8000/',
-  timeout: 2500,
-  headers: {'Content-Type': 'application/json'}
-});
+const axiosInstance = axios.create(meta);
 
 const getAccessToken = () => localStorage.getItem('libi_token');
 

src/api/index.ts

@@ -1,2 +1,2 @@
-import AxiosInstance from './AxiosInstance'
-export default AxiosInstance
+export { default as AxiosInstance } from './AxiosInstance'
+export { default as meta } from './meta'

src/api/meta/index.ts

@@ -0,0 +1,2 @@
+import meta from './meta'
+export default meta

src/api/meta/meta.ts

@@ -0,0 +1,7 @@
+const config = {
+  baseURL: 'http://175.193.43.53:9999',
+  timeout: 2500,
+  headers: {'Content-Type': 'application/json'}
+}
+
+export default config

src/components/DefaultLayout/DefaultLayoutLast.tsx

@@ -25,12 +25,15 @@ import ImageLogo from "components/ImageLogo";
 import styled, { CSSProperties } from "styled-components";
 import FlexCenter from "components/FlexCenter";
 import LoginModalButton from "components/LoginModalButton";
+import searchstate from "state/search";
+import { useRecoilState } from "recoil";
 
 const { SubMenu } = Menu;
 const { Header, Content, Sider } = Layout;
 
 interface IDefaultLayoutProps {
   haveSearch?: boolean
+  onSearch?: Function
 }
 
 const defaultStyle = {
@@ -106,10 +109,12 @@ const MockButtons: any = ({ index }: any) => (
 );
 
 const DefaultLayout: FunctionComponent<IDefaultLayoutProps> = (props) => {
-  const { children, haveSearch } = props;
+  const { children, haveSearch, onSearch } = props;
   const { formatMessage: fm } = useIntl();
   const { pathname } = useLocation();
   const history = useHistory();
+
+  const [search, setSearch] = useRecoilState(searchstate);
 
   const pathDom = useMemo(() => {
     const pathArray = pathname.split("/");
@@ -219,9 +224,20 @@ const DefaultLayout: FunctionComponent<IDefaultLayoutProps> = (props) => {
           <Search
             style={{ maxWidth: 450 }}
             placeholder="나무젓가락"
+            value={search}
             enterButton={<SearchOutlined />}
             size="large"
-            onSearch={(value: string) => console.log(value)}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              console.log('value', e.target.value)
+              setSearch(e.target.value)
+            }}
+            onSearch={(value: string) => {
+              console.log('value', value)
+              // setSearch(value)
+              if (onSearch) {
+                onSearch(value)
+              }
+            }}
           />
           {/* </FlexCenter> */}
         </FlexCenter>}

src/components/ItemCard/ItemCard.tsx

@@ -5,13 +5,16 @@ import FlexCenter from "components/FlexCenter";
 import styled from "styled-components";
 import { propsToStyle, formatNumber } from "utils";
 import { useHistory } from "react-router-dom";
+import { configConsumerProps } from "antd/lib/config-provider";
 
 const { Meta } = Card;
 
 interface IItemCardProps {
+  id: number;
   title: string;
   image: string;
-  data: any;
+  type: number;
+  data: DataType[];
 }
 
 interface Props {
@@ -61,13 +64,47 @@ const tagStyle: any = {
   stackdiscount: { backgroundColor: '#339999', color: 'white' }
 }
 
+interface DataType {
+  title: string,
+  content: string,
+  is_focused: boolean
+}
+
 const ItemCard: FunctionComponent<IItemCardProps> = ({
+  id,
   image,
   title,
+  type: shareingType,
   data,
-}) => {
-  const { type = 'groupbuying', id = '1' } = data
+}: IItemCardProps) => {
+  const type = shareingType === 1 ? 'groupbuying' : 'stackdiscount'
+  // const { type = 'groupbuying', id = '1' } = data
   const history = useHistory()
+
+  const attrDom: any[] = data.map(({ title, content, is_focused }) => {
+    return <FlexCenter style={{ flex: "1", flexFlow: "column", padding: '4px' }}>
+      <span>{title}</span>
+      <span style={{ fontSize: "14px", fontWeight: (is_focused ? "bold" : undefined) }}>
+        {content}
+      </span>
+    </FlexCenter>
+  })
+
+  if (shareingType === 1) {
+    attrDom.splice(
+      1,
+      0,
+      <div
+        style={{
+          width: "1px",
+          height: "30px",
+          backgroundColor: "#666",
+        }}
+      />
+    );
+    console.log('attrDom', attrDom)
+  }
+
   return (
     <CardWrapper onClick={() => history.push(`/about/${id}`)}>
       <Card
@@ -87,7 +124,8 @@ const ItemCard: FunctionComponent<IItemCardProps> = ({
         </Tag>
         <Meta style={{ padding: 16 }} title={title || "Europe Street beat"} />
         <FlexCenter style={{ backgroundColor: "#eee", padding: 8 }}>
-          {Object.keys(data).includes("hopeMondey") ? (
+          {attrDom}
+          {/* {Object.keys(data).includes("hopeMondey") ? (
             <FlexCenter style={{ flex: "1", flexFlow: "column", padding: '4px' }}>
               <span>희망 금액</span>
               <span style={{ fontSize: "14px", fontWeight: "bold" }}>
@@ -114,7 +152,7 @@ const ItemCard: FunctionComponent<IItemCardProps> = ({
                 <span>{`${data?.percent} %`}</span>
               </FlexCenter>
             </>
-          )}
+          )} */}
         </FlexCenter>
       </Card>
     </CardWrapper>

src/containers/CardView/CardViewV2.tsx

@@ -60,7 +60,7 @@ const CardView: FunctionComponent<ICardViewProps> = (props) => {
               <b>모든 목록을 조회했습니다</b>
             </p>
           }>
-          <Row gutter={[16, 16]} style={{ margin: 0 }}>
+          {/* <Row gutter={[16, 16]} style={{ margin: 0 }}>
             {items.map((v: any, i: number) => (
               <Col key={i} {...breakPoint}>
                 <ItemCard title={'test'} image={'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png'} data={{
@@ -69,7 +69,7 @@ const CardView: FunctionComponent<ICardViewProps> = (props) => {
                 }} />
               </Col>
             ))}
-          </Row>
+          </Row> */}
         </InfiniteScroll>
       </FlexCenter>
     </DefaultLayout>