2022-04-24

components/coinDetail/CoinDetail.tsx

@@ -9,6 +9,7 @@ import {
 import transformMoney from "../../util/transformMoney";
 import CoinDetailChart from "./CoinDetailChart";
 import CoinDetailQuote from "./coinDetailQuote/CoinDetailTable";
+import CoinDetailTrade from "./coinDetailTrade/CoinDetailTrade";
 
 import {
   CoinDetailHLine,
@@ -111,7 +112,9 @@ const CoinDetail = ({
             <CoinDetailQuote coinTickersData={coinTickersData} />
           )}
         </CoinDetailMiddleLeftWrap>
-        <CoinDetailMiddleRightWrap></CoinDetailMiddleRightWrap>
+        <CoinDetailMiddleRightWrap>
+          <CoinDetailTrade coinTradesData={coinTradesData} />
+        </CoinDetailMiddleRightWrap>
       </CoinDetailMiddleWrap>
     </>
   );

components/coinDetail/coinDetailQuote/CoinDetailTable.tsx

@@ -1,5 +1,6 @@
 import { CoinTicker } from "../../../types/common/common.type";
 import transformMoney from "../../../util/transformMoney";
+import ValuePoint from "../../common/valuePoint/ValuePoint";
 import {
   CoinDetailQuoteTable,
   CoinDetailQuoteTd,
@@ -36,7 +37,16 @@ const CoinDetailQuote = ({ coinTickersData }: Props) => {
             <CoinDetailQuoteTd>{quote.high_price}</CoinDetailQuoteTd>
             <CoinDetailQuoteTd>{quote.low_price}</CoinDetailQuoteTd>
             <CoinDetailQuoteTd change={quote.change_price}>
-              {quote.prev_closing_price}
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "end",
+                }}
+              >
+                <ValuePoint change_price={quote.change_price} />
+                {quote.prev_closing_price}
+              </div>
             </CoinDetailQuoteTd>
           </tr>
         ))}

components/coinDetail/coinDetailQuote/style.ts

@@ -7,7 +7,7 @@ export const CoinDetailQuoteTable = styled.table`
   letter-spacing: -0.4px;
   margin-top: 6px;
 
-  background-color: ${({ theme }) => theme.coinCardBg};
+  background-color: ${({ theme }) => theme.subBackgroundColor};
 `;
 
 export const CoinDetailQuoteTh = styled.th`
@@ -30,7 +30,7 @@ export const CoinDetailQuoteTd = styled.td<{
   ${({ change }) =>
     change! > 0 &&
     css`
-      color: ${palette.red[300]};
+      color: ${palette.red[500]};
     `};
 
   ${({ change }) =>

components/coinDetail/coinDetailTrade/CoinDetailTrade.tsx

@@ -0,0 +1,42 @@
+import { CoinTrade } from "../../../types/common/common.type";
+import ValuePoint from "../../common/valuePoint/ValuePoint";
+import {
+  CoinDetailTradeInfoWrap,
+  CoinDetailTradeItem,
+  CoinDetailTradeTitle,
+  CoinDetailTradeValueWrap,
+  CoinDetailTradeWrap,
+} from "./style";
+
+type Props = {
+  coinTradesData: CoinTrade[] | null;
+};
+
+const CoinDetailTrade = ({ coinTradesData }: Props) => {
+  return (
+    <CoinDetailTradeWrap>
+      <CoinDetailTradeTitle>최근 체결 내역</CoinDetailTradeTitle>
+      {coinTradesData?.map((trade) => (
+        <CoinDetailTradeItem
+          key={`${trade.trade_date_utc} ${trade.trade_time_utc} trade`}
+        >
+          <CoinDetailTradeInfoWrap>
+            <h1>{trade.market}</h1>
+            <span>
+              {trade.trade_date_utc} {trade.trade_time_utc}
+            </span>
+          </CoinDetailTradeInfoWrap>
+          <CoinDetailTradeValueWrap change={trade.change_price}>
+            <p>{trade.trade_price}</p>
+            <span>
+              <ValuePoint change_price={trade.change_price} />
+              {trade.change_price}
+            </span>
+          </CoinDetailTradeValueWrap>
+        </CoinDetailTradeItem>
+      ))}
+    </CoinDetailTradeWrap>
+  );
+};
+
+export default CoinDetailTrade;

components/coinDetail/coinDetailTrade/style.ts

@@ -0,0 +1,78 @@
+import styled, { css } from "styled-components";
+import { palette } from "../../../styles/palette";
+
+export const CoinDetailTradeWrap = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${palette.gray[200]};
+  border-radius: 4px;
+  background-color: ${({ theme }) => theme.subBackgroundColor};
+  padding-bottom: 14px;
+`;
+
+export const CoinDetailTradeTitle = styled.div`
+  font-size: 13px;
+  margin: 15px 13px;
+  color: ${({ theme }) => theme.contrast};
+  font-weight: bold;
+`;
+
+export const CoinDetailTradeItem = styled.div`
+  padding: 4px 16px 5px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const CoinDetailTradeInfoWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  h1 {
+    font-size: 13px;
+    color: ${({ theme }) => theme.contrast};
+    line-height: 17px;
+  }
+
+  span {
+    font-size: 12px;
+    margin-top: 2px;
+    color: ${({ theme }) => theme.subText};
+    line-height: 16px;
+  }
+`;
+
+export const CoinDetailTradeValueWrap = styled.div<{ change: number }>`
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  text-align: end;
+
+  ${({ change }) =>
+    change! > 0 &&
+    css`
+      color: ${palette.red[500]};
+    `};
+
+  ${({ change }) =>
+    change! < 0 &&
+    css`
+      color: ${palette.blue[700]};
+    `}
+  ${({ change }) =>
+    change! === 0 &&
+    css`
+      color: ${({ theme }) => theme.contrast};
+    `}
+
+  p {
+    line-height: 16px;
+  }
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    margin-top: 1px;
+    line-height: 16px;
+  }
+`;

components/coinDetail/style.ts

@@ -69,7 +69,7 @@ export const CoinDetailTopChangePoint = styled.span<{
     change === "RISE" &&
     css`
       transform: rotate(-180deg);
-      border-color: ${palette.red[300]} transparent transparent transparent;
+      border-color: ${palette.red[500]} transparent transparent transparent;
     `};
 
   ${({ change }) =>

components/common/valuePoint/ValuePoint.tsx

@@ -0,0 +1,37 @@
+import styled, { css } from "styled-components";
+import { palette } from "../../../styles/palette";
+
+type Props = {
+  change_price: number;
+};
+
+const ValuePoint = ({ change_price }: Props) => {
+  return <ValuePointItem change={change_price} />;
+};
+
+export default ValuePoint;
+
+export const ValuePointItem = styled.span<{ change: number }>`
+  border-style: solid;
+  border-width: 7px 4.5px 0 4.5px;
+  margin-right: 5px;
+
+  ${({ change }) =>
+    change! > 0 &&
+    css`
+      transform: rotate(180deg);
+      border-color: ${palette.red[500]} transparent transparent transparent;
+    `};
+
+  ${({ change }) =>
+    change! === 0 &&
+    css`
+      border-color: ${palette.gray[200]} transparent transparent transparent;
+    `};
+
+  ${({ change }) =>
+    change! < 0 &&
+    css`
+      border-color: ${palette.blue[700]} transparent transparent transparent;
+    `};
+`;

constants/product.constants.ts

@@ -7,4 +7,4 @@ export const COIN_DETAIL_CATEGORY = [
 
 export const COIN_TICKERS_START_DATE = "14" as const;
 
-export const COIN_TRADES_MAX_NUM = "7" as const;
+export const COIN_TRADES_MAX_NUM = "10" as const;

styles/styled.d.ts

@@ -3,6 +3,7 @@ import "styled-components";
 declare module "styled-components" {
   export interface DefaultTheme {
     backgroundColor: string;
+    subBackgroundColor: string;
     coinCardBg: string;
     contrast: string;
     subText: string;

styles/theme.ts

@@ -5,6 +5,7 @@ export const lightTheme: DefaultTheme = {
   ...palette,
 
   backgroundColor: "#ffffff",
+  subBackgroundColor: "#ffffff",
   coinCardBg: "#f9fafb",
   contrast: "#000000",
   subText: "#dbdbdb",
@@ -13,6 +14,7 @@ export const lightTheme: DefaultTheme = {
 export const darkTheme: DefaultTheme = {
   ...palette,
   backgroundColor: "#000000",
+  subBackgroundColor: "#262626",
   coinCardBg: "#262626",
   contrast: "#ffffff",
   subText: "#dbdbdb",