Merge pull request #331 from connect-foundation/develop

1.0.2 release
connect-foundation · Dec 20, 2019 · aeda564 · aeda564
2 parents f66a91f + 0841c70
commit aeda564
Show file tree

Hide file tree

Showing 27 changed files with 315 additions and 228 deletions.
diff --git a/client/src/components/Atoms/Card/index.jsx b/client/src/components/Atoms/Card/index.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { Link } from "react-router-dom";
 
-import { convert2UnitPrice } from "../../../utils/converter";
+import { convert2Price, convert2UnitPrice } from "../../../utils/converter";
 
 import ticketIcon from "../../../assets/tickets.svg";
 import { getDiffDateTime } from "../../../utils/dateUtil";
@@ -13,7 +13,7 @@ const CardStyle = styled.div`
   border-radius: 1rem;
   margin: 1rem;
   background: white;
-  width: 13rem;
+  width: 13.5rem;
   height: 17rem;
   padding: 0;
   cursor: pointer;
@@ -44,8 +44,10 @@ const InfoContainer = styled.div`
 `;
 
 const StyledLink = styled(Link)`
+  height: fit-content;
   text-decoration: none;
   color: black;
+  height: 17rem;
 `;
 
 const BidsStyle = styled.div`
@@ -167,6 +169,7 @@ const Card = ({ item }) => {
 };
 
 const Bids = ({ bids }) => {
+  if (bids >= 1000) bids = `${Number(bids / 1000)}K`;
   return (
     <BidsStyle>
       <img src={ticketIcon} alt={"profile Image"} />
@@ -207,7 +210,9 @@ const BuyNowPrice = ({ buyNowPrice }) => {
   return (
     <BuyNowPriceStyle>
       <label>즉시 구매가</label>
-      {convert2UnitPrice(buyNowPrice)}
+      {Number(buyNowPrice) < 10000
+        ? convert2Price(buyNowPrice)
+        : convert2UnitPrice(buyNowPrice)}
     </BuyNowPriceStyle>
   );
 };
@@ -216,7 +221,9 @@ const TopBid = ({ topBid }) => {
   return (
     <TopBidStyle>
       <label>현재 입찰가</label>
-      {convert2UnitPrice(topBid)}
+      {Number(topBid) < 10000
+        ? convert2Price(topBid)
+        : convert2UnitPrice(topBid)}
     </TopBidStyle>
   );
 };

diff --git a/client/src/components/Atoms/InputWithLimit/index.jsx b/client/src/components/Atoms/InputWithLimit/index.jsx
@@ -1,5 +1,5 @@
-import React, { useState } from "react"
-import styled from "styled-components"
+import React, { useState } from "react";
+import styled from "styled-components";
 
 const Container = styled.div`
   width: 100%;
@@ -16,37 +16,39 @@ const Container = styled.div`
     border-color: ${props =>
       props.exceed ? "var(--color-danger)" : "var(--color-primary-minus0)"};
   }
-`
+`;
 
 const NonBorder = styled.input`
   font-family: "BMJUA";
   width: 90%;
   height: fit-content;
   font-size: var(--font-size-xl);
   outline: none;
-`
+`;
 
 const Counter = styled.div`
   width: fit-content;
   font-size: var(--font-size-xs);
   color: ${props => (props.exceed ? "var(--color-danger)" : "var(--color-gray)")};
-`
+`;
 
 const Component = ({ limit, hint, onChange, value, isBlockMode }) => {
-  const [focus, setFocus] = useState(false)
-  const [length, setLength] = useState(value.length)
+  const [focus, setFocus] = useState(false);
+  const [length, setLength] = useState(value.length);
 
   const handleOnChange = e => {
-    const content = e.target.value
+    const content = e.target.value;
     const validContent =
-      isBlockMode && content.length > limit ? content.substring(0, limit) : content
-    onChange(validContent)
-    setLength(validContent.length)
-  }
+      isBlockMode && content.length > limit ? content.substring(0, limit) : content;
+    onChange(validContent);
+    setLength(validContent.length);
+  };
 
   const handleBlock = e => {
-    if (e.target.value.length >= limit) e.preventDefault()
-  }
+    const keyCode = e.keyCode;
+    const value = e.target.value;
+    if (keyCode !== 8 && keyCode !== 46 && value.length >= limit) e.preventDefault();
+  };
 
   return (
     <Container foucs={focus} exceed={length > limit}>
@@ -60,7 +62,7 @@ const Component = ({ limit, hint, onChange, value, isBlockMode }) => {
       />
       <Counter exceed={length > limit}>{`${length} / ${limit}`}</Counter>
     </Container>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/client/src/components/Atoms/SmallCard/index.jsx b/client/src/components/Atoms/SmallCard/index.jsx
@@ -1,10 +1,12 @@
 import React from "react";
 import styled from "styled-components";
 
+const smallCardSize = "9em";
+
 const SmallCardStyle = styled.div`
   display: flex;
-  height: 9em;
-  width: 9em;
+  height: ${smallCardSize};
+  width: ${smallCardSize};
   margin: 1rem;
   border-radius: 1rem;
   overflow: hidden;
@@ -22,16 +24,19 @@ const SmallCardStyle = styled.div`
     transform: scale(1.05);
   }
 `;
+const Link = styled.a`
+  height: ${smallCardSize};
+`;
 
 const SmallCard = ({ item }) => {
   const { id, thumbnailUrl } = item;
   const link = `/products/${id}`;
   return (
-    <a href={link}>
+    <Link href={link}>
       <SmallCardStyle>
         <img src={thumbnailUrl} alt={"thumbnail"} />
       </SmallCardStyle>
-    </a>
+    </Link>
   );
 };
 

diff --git a/client/src/components/Atoms/TextareaWithLength/index.jsx b/client/src/components/Atoms/TextareaWithLength/index.jsx
@@ -1,28 +1,28 @@
-import React, { useState } from "react"
-import styled from "styled-components"
+import React, { useState } from "react";
+import styled from "styled-components";
 
 const Container = styled.div`
   width: 100%;
   border: none;
   outline: none;
-`
+`;
 
 const Header = styled.div`
   width: 100%;
   display: flex;
   justify-content: space-between;
   margin-bottom: 5px;
-`
+`;
 
 const Title = styled.span`
   font-weight: bold;
-`
+`;
 
 const Counter = styled.span`
   color: ${props => (props.isOver ? "var(--color-danger)" : "var(--color-gary)")};
   font-weight: ${props => (props.isOver ? "700" : "400")};
   font-size: 0.9rem;
-`
+`;
 
 const Content = styled.textarea`
   font-family: D2Coding, "D2 coding", monosapce;
@@ -35,22 +35,24 @@ const Content = styled.textarea`
   outline: none;
   font-size: 1.2rem;
   padding: 1rem;
-`
+`;
 
 const Component = ({ title, limit, content, handler, isBlockMode }) => {
-  const [len, setLen] = useState(content ? content.length : 0)
+  const [len, setLen] = useState(content ? content.length : 0);
 
   const handleContent = event => {
-    const content = event.target.value
+    const content = event.target.value;
     const validContent =
-      isBlockMode && content.length > limit ? content.substring(0, limit) : content
-    handler(validContent)
-    setLen(validContent.length)
-  }
+      isBlockMode && content.length > limit ? content.substring(0, limit) : content;
+    handler(validContent);
+    setLen(validContent.length);
+  };
 
   const handleBlock = e => {
-    if (e.target.value.length >= limit) e.preventDefault()
-  }
+    const keyCode = e.keyCode;
+    const value = e.target.value;
+    if (keyCode !== 8 && keyCode !== 46 && value.length >= limit) e.preventDefault();
+  };
 
   return (
     <Container>
@@ -65,7 +67,7 @@ const Component = ({ title, limit, content, handler, isBlockMode }) => {
         value={content}
       />
     </Container>
-  )
-}
+  );
+};
 
-export default Component
+export default Component;
diff --git a/client/src/components/Messenger/Container/ChatContainer/ChatMessage.jsx b/client/src/components/Messenger/Container/ChatContainer/ChatMessage.jsx
@@ -1,6 +1,6 @@
-import styled from "styled-components"
-import React from "react"
-import { dateDiff2Str, sec2date } from "../../../../utils/converter"
+import styled from "styled-components";
+import React from "react";
+import { dateDiff2Str, sec2date } from "../../../../utils/converter";
 const Wrap = styled.div`
   width: 19rem;
 
@@ -9,12 +9,12 @@ const Wrap = styled.div`
   justify-content: ${props => (props.isSend ? "flex-end" : "flex-end")};
   padding: 0.25rem 0.25rem;
   margin: 0 0.5rem 0 0;
-`
+`;
 
 const MessageText = styled.span`
   display: inline-block;
   text-align: left;
-  word-break: break-all;
+  word-break: break-word;
 
   font-size: var(--font-size-xs);
 
@@ -23,18 +23,18 @@ const MessageText = styled.span`
   border: solid 0.1rem;
   border-color: ${props => (props.isSend ? "var(--color-primary-minus0)" : "var(--color-primary)")};
   border-radius: 1rem;
-`
+`;
 const TimeText = styled.div`
   font-size: var(--font-size-xxs);
-`
+`;
 
 function ChatMessage(props) {
   return (
     <Wrap isSend={props.isSend}>
       <TimeText>{dateDiff2Str(sec2date(props.Time))}</TimeText>
       <MessageText isSend={props.isSend}>{props.Text}</MessageText>
     </Wrap>
-  )
+  );
 }
 
-export default ChatMessage
+export default ChatMessage;
diff --git a/client/src/components/Molecules/CardContainer/index.jsx b/client/src/components/Molecules/CardContainer/index.jsx
@@ -7,7 +7,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding-left: 8rem;
+  padding-left: 7rem;
 `;
 
 const Title = styled.label`

diff --git a/client/src/components/Molecules/CustomModal/LoginModal.jsx b/client/src/components/Molecules/CustomModal/LoginModal.jsx
@@ -141,9 +141,15 @@ const LoginModal = ({ close }) => {
     } else alert("구글 로그인에 실패하였습니다.");
   };
   const handleKeyUpId = e => {
+    if (e.keyCode === 13) {
+      handleSubmit(e);
+    }
     setId(e.target.value);
   };
   const handleKeyUpPwd = e => {
+    if (e.keyCode === 13) {
+      handleSubmit(e);
+    }
     setPwd(e.target.value);
   };
 

diff --git a/client/src/components/Molecules/SmallCardContainer/index.jsx b/client/src/components/Molecules/SmallCardContainer/index.jsx
@@ -20,7 +20,7 @@ const Title = styled.label`
 
 const SmallCardContainerStyle = styled.div`
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   width: 100%;
   height: ${props => (props.isWrap ? "35rem" : "17rem")};
   margin-bottom: 2rem;

diff --git a/client/src/components/Organism/CategoryBar/ExpandList/index.jsx b/client/src/components/Organism/CategoryBar/ExpandList/index.jsx
@@ -7,7 +7,7 @@ import NotifyList from "../../../Molecules/NotifyList";
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  width: ${props => (props.idx === "999" ? 20 : 15)}rem;
+  width: ${props => (props.idx === 999 ? "21" : "15")}rem;
   height: 100%;
   overflow-y: auto;
   background-color: var(--color-secondary-minus1);
@@ -45,11 +45,7 @@ const Components = ({ idx, open, details, onClick }) => {
         <NotifyList />
       ) : (
         details.map((category, index) => (
-          <StyledLink
-            to={`/category/${idx * 1000 + index + 1}`}
-            onClick={onClick}
-            key={category}
-          >
+          <StyledLink to={`/category/${idx * 1000 + index + 1}`} onClick={onClick} key={category}>
             <DetailCategory>
               <label>{category}</label>
             </DetailCategory>

diff --git a/client/src/components/Organism/CategoryBar/index.jsx b/client/src/components/Organism/CategoryBar/index.jsx
@@ -31,7 +31,7 @@ const OriginWrapper = styled.div`
 
 const ListWrapper = styled.div`
   position: absolute;
-  width: ${props => (props.open ? (props.idx === "999" ? 20 : 15) : 0)}rem;
+  width: ${props => (props.open ? (props.idx === 999 ? "21" : "15") : 0)}rem;
   height: 100%;
   left: 5em;
   z-index: 999;
@@ -186,11 +186,7 @@ const Components = () => {
           <ExpandList
             open={open}
             idx={selectIdx}
-            details={
-              selectIdx === 0 || selectIdx === 999
-                ? []
-                : categoryList[selectIdx - 1].sub
-            }
+            details={selectIdx === 0 || selectIdx === 999 ? [] : categoryList[selectIdx - 1].sub}
             onClick={close}
           />
         )}