세부 스타일 조정

Angelhack-LIBI · Jul 19, 2020 · 6510665 · 6510665
1 parent 74745b3
commit 6510665
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/components/LoginModalButton/LoginModalButton.tsx b/src/components/LoginModalButton/LoginModalButton.tsx
@@ -46,9 +46,9 @@ const LoginModalButton: FunctionComponent<ILoginModalProps> = (props) => {
 
   return <>
     {
-      (token || '').length > 0 ? <FlexCenter>
+      (token || '').length > 0 ? <FlexCenter style={{ color: '#222' }}>
         {`${account?.name}님 안녕하세요`}
-        <Button type="primary" style={{ marginLeft: '4px' }} onClick={() => { onDrop() }} size={'small'}>
+        <Button type="primary" style={{ marginLeft: '8px' }} onClick={() => { onDrop() }} size={'small'}>
           로그아웃
         </Button>
       </FlexCenter> : (

diff --git a/src/containers/Home/Home.tsx b/src/containers/Home/Home.tsx
@@ -10,7 +10,7 @@ import axiosInstance from "api/AxiosInstance";
 import apiMeta from "api/meta";
 import queryString from 'query-string'
 import searchState from "state/search";
-import { useRecoilValue } from "recoil";
+import { useRecoilValue, useRecoilState } from "recoil";
 import { propsToStyle } from "utils";
 import styled from "styled-components";
 import accountState from "state/account";
@@ -82,7 +82,13 @@ const Home: FunctionComponent<ICardViewProps> = (props) => {
   const [loading, setLoading] = useState<boolean>(false);
   const [isLast, setIsLast] = useState<boolean>(false)
   // const [isSearch, setIsSearch] = useState<boolean>(false);
-  const search = useRecoilValue(searchState)
+  const [search, setSearch] = useRecoilState(searchState)
+
+  useEffect(() => {
+    return () => {
+      setSearch('')
+    }
+  }, [])
 
   useEffect(() => {
     onLoad(search, true);
@@ -149,7 +155,7 @@ const Home: FunctionComponent<ICardViewProps> = (props) => {
     <DefaultLayout haveSearch={true} onSearch={(value: string) => {
       setSavedKeyword(value)
     }}>
-      <InfinityScrollWrapper style={{ maxWidth: "1080px", width: '100%' }}>
+      <InfinityScrollWrapper style={{ maxWidth: "1080px", width: '100%', borderTop: '1px solid #eee', paddingTop: '20px' }}>
         <InfiniteScroll
           scrollableTarget={"list"}
           dataLength={items.length} //This is important field to render the next data