18 |
19 | - CryptoGraph는 Upbit Open API, CoinMarketCap API를 이용하여 암호화폐 데이터들을 차트로 시각화하는 서비스입니다.30 | 31 | ### J006 강재민 32 | 33 |
34 |
35 | ### 뱃살과 실력이 비례하고 싶은 프론트엔드 개발자
36 |
37 | [이력서 바로가기](https://www.notion.so/010dc5a42f8b4c08a2f2592682eba48c)
38 |
39 | [깃헙 바로가기 💻](http://github.com/rkdwoals159)
40 |
41 | 
47 |
48 | ### 항상 즐겁게 개발하는 개발자
49 |
50 | [이력서 바로가기](https://kongyb.notion.site/d9ecf75afb6245b9b558e3e7db6dc1dd)51 | 52 | [깃헙 바로가기 💻](https://github.com/kongyb) 53 | 54 |
56 | 57 | ### J038 김상훈 58 | 59 |
60 |
61 | ### 불편함을 불편해할 줄 아는 프론트엔드 개발자
62 |
63 | [이력서 바로가기](https://www.notion.so/009309ae05974be68be9ad7beded7285)
64 |
65 | [깃헙 바로가기 💻](https://github.com/baldwinIV)
66 |
67 | 70 | 71 | ### J054 김준태 72 | 73 |
74 |
75 | ### 같이의 가치를 아는 프론트엔드 개발자
76 |
77 | [이력서 바로가기](https://www.notion.so/438ec182c25847df84ef53186a387fde)
78 |
79 | [깃헙 바로가기 💻](https://github.com/sronger)
107 |
108 | - 1분봉/5분봉/../1시간봉/일봉/주봉 등 캔들 기간을 변경할 수 있습니다.
117 |
118 | - coinmarketcap API 정보를 전달하는 백엔드 서버 및 업비트 서버에 데이터를 요청하여, 실시간으로 데이터가 렌더링됩니다.
126 |
127 | - coinmarketcap API 정보를 전달하는 백엔드 서버 및 업비트 서버에 데이터를 요청하여, 실시간으로 데이터가 렌더링됩니다.
134 | 
135 | 
146 |
147 | # 📚 기술 스택
148 |
149 | ---
150 |
151 | 
152 |
153 | ## Environment setup
154 |
155 | 1. ```git clone https://github.com/boostcampwm-2022/Web35-CryptoGraph.git CryptoGraph```
156 | 2. ```cd CryptoGraph```
157 | 3. ```npm i api_server```
158 | 4. ```npm i client```
159 | 5. ```touch client/.env```
160 | 6. ```NEXT_PUBLIC_SERVER_URL=http://localhost:{클라이언트 포트번호}```
161 | 7. ```touch api_server/.env```
162 |
163 | 8. ```COINMARKETCAP_API_KEY={코인마켓캡 API 키}``` (https://coinmarketcap.com/api/)
164 | 9. ```CLIENT_URL=http://localhost:{서버 포트번호}```
165 | 10. ```npm run client/build```
166 |
167 | ## 실행방법
168 | ### Web Server Run
169 | 터미널 1
170 | ```
171 | cd CryptoGraph
172 | npm run start api_server
173 | ```
174 | ### Web Client Server Run
175 | 터미널 2
176 | ```
177 | cd CryptoGraph
178 | npm run start client
179 | ```
180 |
--------------------------------------------------------------------------------
/api_server/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | #custom
4 | package-lock.json
5 |
6 | # dependencies
7 | /node_modules
8 | /.pnp
9 | .pnp.js
10 |
11 | # testing
12 | /coverage
13 |
14 | # next.js
15 | /.next/
16 | /out/
17 |
18 | # production
19 | /build
20 |
21 | # misc
22 | .DS_Store
23 | *.pem
24 |
25 | # debug
26 | npm-debug.log*
27 | yarn-debug.log*
28 | yarn-error.log*
29 | .pnpm-debug.log*
30 |
31 | # local env files
32 | .env*.local
33 | .env
34 |
35 | # vercel
36 | .vercel
37 |
--------------------------------------------------------------------------------
/api_server/README.md:
--------------------------------------------------------------------------------
1 | # CryptoGraph API 서버
--------------------------------------------------------------------------------
/api_server/app.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const cors = require("cors");
3 | require("dotenv").config();
4 | const { getCoinInfo, getMarketCapInfos, getPriceData } = require("./data/configData");
5 |
6 | const PORT = 8080;
7 | let coinInfos = null;
8 |
9 | getCoinInfo().then((result) => {
10 | coinInfos = result;
11 | });
12 |
13 | setInterval(() => {
14 | getCoinInfo().then((result) => {
15 | coinInfos = result;
16 | });
17 | }, 60 * 60 * 1000);
18 |
19 | const app = express();
20 | app.use(
21 | cors({
22 | origin: process.env.CLIENT_URL,
23 | method: "GET",
24 | })
25 | );
26 |
27 | app.get("/coin-info/:code", (req, res) => {
28 | const code = req.params.code;
29 | if (coinInfos === null) {
30 | res.status(503).end();
31 | return;
32 | }
33 | if (!code || !coinInfos[code]) {
34 | res.status(404).end();
35 | return;
36 | }
37 | res.status(200).send(coinInfos[code]);
38 | });
39 |
40 | app.get("/market-cap-info", async (req, res) => {
41 | const marketCapInfos = await getMarketCapInfos(coinInfos);
42 | if (marketCapInfos === null) {
43 | res.status(503).end();
44 | return;
45 | }
46 | res.status(200).send(marketCapInfos);
47 | });
48 |
49 | app.get("/market-price-info", async (req, res) => {
50 | const priceData = await getPriceData(coinInfos);
51 | if (priceData === null) {
52 | res.status(503).end();
53 | return;
54 | }
55 | res.status(200).send(priceData);
56 | });
57 |
58 | app.listen(PORT, () => {
59 | console.log(`server listening port ${PORT}`);
60 | });
61 |
--------------------------------------------------------------------------------
/api_server/data/configData.js:
--------------------------------------------------------------------------------
1 | const {
2 | getCoinData,
3 | getCoinMetaData,
4 | getUpbitMarketCode,
5 | getUpbitMarketDatas,
6 | } = require("./getData");
7 |
8 | // 코인정보 반환하는 함수
9 | // 업비트API를 이용하여 코인종류 확인하고 해당 코인들 정보 코인마켓캡에서 받아와 조합
10 | async function getCoinInfo() {
11 | const time = getTime();
12 | const upbitMarketCodes = await getUpbitMarketCode();
13 | const result = {};
14 | const coinIds = [];
15 | // listing/latest에서 얻는 정보들 정리 result에 1차로 저장
16 | const coinDatas = await getCoinData();
17 | for (const { code, name, name_kr } of upbitMarketCodes) {
18 | const coinInfo = {};
19 | // coinData를 순회하며 알맞은 info를 찾아 저장한다.
20 | for (const data of coinDatas) {
21 | // MFT => HIFI 예외처리 (수정필요)
22 | if (data.symbol === "MFT" && code === "HIFI") {
23 | coinInfo.id = data.id;
24 | coinInfo.symbol = code;
25 | coinInfo.name = data.name;
26 | coinInfo.name_kr = name_kr;
27 | coinInfo.slug = data.slug;
28 | coinInfo.market_cap_dominance = data.quote.KRW.market_cap_dominance;
29 | coinInfo.market_cap = data.quote.KRW.market_cap;
30 | coinInfo.percent_change_24h = data.quote.KRW.percent_change_24h;
31 | coinInfo.market_cap_kr = transPrice(data.quote.KRW.market_cap);
32 | coinInfo.max_supply = data.max_supply;
33 | coinInfo.circulating_supply = data.circulating_supply;
34 | coinInfo.total_supply = data.total_supply;
35 | coinInfo.cmc_rank = data.cmc_rank;
36 | coinInfo.time = time;
37 | coinInfo.volume_24h = transPrice(data.quote.KRW.volume_24h);
38 | coinIds.push(data.id);
39 | break;
40 | }
41 |
42 | // FCT2 예외처리
43 | if (data.symbol === code || data.name === name) {
44 | coinInfo.id = data.id;
45 | coinInfo.symbol = code;
46 | coinInfo.name = data.name;
47 | coinInfo.name_kr = name_kr;
48 | coinInfo.slug = data.slug;
49 | coinInfo.market_cap_dominance = data.quote.KRW.market_cap_dominance;
50 | coinInfo.market_cap = data.quote.KRW.market_cap;
51 | coinInfo.percent_change_24h = data.quote.KRW.percent_change_24h;
52 | coinInfo.market_cap_kr = transPrice(data.quote.KRW.market_cap);
53 | coinInfo.max_supply = data.max_supply;
54 | coinInfo.circulating_supply = data.circulating_supply;
55 | coinInfo.total_supply = data.total_supply;
56 | coinInfo.cmc_rank = data.cmc_rank;
57 | coinInfo.time = time;
58 | coinInfo.volume_24h = transPrice(data.quote.KRW.volume_24h);
59 | coinIds.push(data.id);
60 | break;
61 | }
62 | }
63 | result[code] = coinInfo;
64 | }
65 | // info에서 얻는 메타데이터 추가 result에 2차로 저장
66 | const coinMetaDatas = await getCoinMetaData(coinIds.join(","));
67 | for (const { code } of upbitMarketCodes) {
68 | const coinInfo = result[code];
69 | const id = coinInfo.id;
70 | const metaData = coinMetaDatas[id];
71 | coinInfo.website = metaData.urls.website.length === 0 ? "" : metaData.urls.website[0];
72 | coinInfo.logo = metaData.logo;
73 | coinInfo.description = metaData.description;
74 | }
75 | return result;
76 | }
77 |
78 | // 업데이트 당시 시간 구하는 함수
79 | function getTime() {
80 | const curr = new Date();
81 | const utcCurr = curr.getTime() + curr.getTimezoneOffset() * 60 * 1000;
82 | const diffFromKst = 9 * 60 * 60 * 1000;
83 | const kstCurr = new Date(utcCurr + diffFromKst);
84 | const dateString = `${kstCurr.getMonth() + 1}/${kstCurr.getDate()} ${kstCurr.getHours()}시`;
85 | return dateString;
86 | }
87 |
88 | const priceUnit = { 10000: "만", 100000000: "억", 1000000000000: "조" };
89 |
90 | // 시가총액 변환하는 함수
91 | function transPrice(price) {
92 | let unit = 10000;
93 | if (price < unit) {
94 | return Math.floor(price * 100) / 100 + "";
95 | }
96 | while (unit < Number.MAX_SAFE_INTEGER) {
97 | if (price >= unit && price < unit * 10000) {
98 | return Math.floor((price * 100) / unit) / 100 + priceUnit[unit];
99 | }
100 | unit *= 10000;
101 | }
102 | return price;
103 | }
104 |
105 | // 메인페이지에 전달할 데이터 조합
106 | // 기존 coinInfo의 키에 저장된 코인종류를 이용하여 업비트 API로 현재 가격 변동률받아와 조합
107 | async function getMarketCapInfos(coinInfos) {
108 | if (!coinInfos) {
109 | return null;
110 | }
111 | const upbitMarketDatas = await getUpbitMarketDatas(
112 | Object.keys(coinInfos)
113 | .map((code) => `KRW-${code}`)
114 | .join(",")
115 | );
116 | const result = upbitMarketDatas.map((marketData) => {
117 | const code = marketData.market.split("-")[1];
118 | return {
119 | name: code,
120 | name_kr: coinInfos[code].name_kr,
121 | name_es: coinInfos[code].name,
122 | cmc_rank: coinInfos[code].cmc_rank,
123 | logo: coinInfos[code].logo,
124 | market_cap: coinInfos[code].market_cap,
125 | acc_trade_price_24h: marketData.acc_trade_price_24h,
126 | signed_change_rate: marketData.signed_change_rate,
127 | };
128 | });
129 | return result;
130 | }
131 |
132 | // detail페이지 전달할 데이터 조합
133 | async function getPriceData(coinInfos) {
134 | if (!coinInfos) {
135 | return null;
136 | }
137 | const marketCodes = await getUpbitMarketCode();
138 | const priceData = await getUpbitMarketDatas(
139 | marketCodes.map(({ code }) => `KRW-${code}`).join(",")
140 | );
141 | const result = {};
142 | priceData.forEach((data, index) => {
143 | const info = {};
144 | const code = data.market.split("-")[1];
145 | info.logo = coinInfos[code].logo;
146 | info.name_kr = coinInfos[code].name_kr;
147 | info.name = coinInfos[code].symbol;
148 | info.price = priceData[index].trade_price;
149 | info.signed_change_price = priceData[index].signed_change_price;
150 | info.signed_change_rate = priceData[index].signed_change_rate;
151 | info.acc_trade_price_24h = priceData[index].acc_trade_price_24h;
152 | result[code] = info;
153 | });
154 | return result;
155 | }
156 | module.exports = { getCoinInfo, getPriceData, getMarketCapInfos };
157 |
--------------------------------------------------------------------------------
/api_server/data/getData.js:
--------------------------------------------------------------------------------
1 | const axios = require("axios");
2 | require("dotenv").config();
3 |
4 | // 업비트에서 marketCode받는 함수
5 | async function getUpbitMarketCode() {
6 | const marketCodes = await axios({
7 | method: "get",
8 | baseURL: "https://api.upbit.com",
9 | url: "/v1/market/all",
10 | }).then((response) => response.data);
11 | return marketCodes.reduce((acc, curr) => {
12 | const [moneyType, coinCode] = curr.market.split("-");
13 | if (moneyType === "KRW") {
14 | acc.push({
15 | code: coinCode,
16 | name: curr.english_name,
17 | name_kr: curr.korean_name,
18 | });
19 | }
20 | return acc;
21 | }, []);
22 | }
23 |
24 | // 업비트에서 실시간 시세정보 가져오는 함수
25 | async function getUpbitMarketDatas(marketCodes) {
26 | const responseBody = await axios({
27 | method: "get",
28 | baseURL: "https://api.upbit.com",
29 | url: `v1/ticker?markets=${marketCodes}`,
30 | }).then((response) => response.data);
31 | return responseBody;
32 | }
33 |
34 | // 코인마켓캡에서 코인정보 가져오는 함수 (시가총액, 최대발급량, 현재발급량 필요)
35 | async function getCoinData() {
36 | const responseBody = await axios({
37 | method: "get",
38 | baseURL: "https://pro-api.coinmarketcap.com",
39 | url: "v1/cryptocurrency/listings/latest?start=1&limit=2000&convert=KRW",
40 | headers: {
41 | Accept: "application/json",
42 | "X-CMC_PRO_API_KEY": process.env.COINMARKETCAP_API_KEY,
43 | },
44 | }).then((response) => response.data);
45 | return responseBody.data;
46 | }
47 |
48 | // 코인마켓캡에서 코인의 메타데이터 가져오는 함수 (코인 이미지, 코인 사이트주소, 코인설명 필요)
49 | /**
50 | *
51 | * @param {string} coinIds 조회할 코인ID들을 ,로 연결한 문자열
52 | * @returns
53 | */
54 | async function getCoinMetaData(coinIds) {
55 | const responseBody = await axios({
56 | method: "get",
57 | baseURL: "https://pro-api.coinmarketcap.com",
58 | url: `/v2/cryptocurrency/info?id=${coinIds}`,
59 | headers: {
60 | Accept: "application/json",
61 | "X-CMC_PRO_API_KEY": process.env.COINMARKETCAP_API_KEY,
62 | },
63 | }).then((response) => response.data);
64 | return responseBody.data;
65 | }
66 |
67 | module.exports = {
68 | getUpbitMarketCode,
69 | getCoinData,
70 | getCoinMetaData,
71 | getUpbitMarketDatas,
72 | };
73 |
--------------------------------------------------------------------------------
/api_server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "api-server",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "node ./app.js",
7 | "test": "node ./dataSample/test.js"
8 | },
9 | "dependencies": {
10 | "axios": "^0.27.2",
11 | "cors": "^2.8.5",
12 | "debug": "~2.6.9",
13 | "dotenv": "^16.0.3",
14 | "express": "~4.16.1",
15 | "http-errors": "~1.6.3"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/client/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true
5 | },
6 | "extends": [
7 | "next",
8 | "next/core-web-vitals",
9 | "plugin:prettier/recommended",
10 | "plugin:@typescript-eslint/recommended"
11 | ],
12 | "parser": "@typescript-eslint/parser",
13 | "parserOptions": {
14 | "ecmaFeatures": {
15 | "jsx": true
16 | },
17 | "ecmaVersion": 12,
18 | "sourceType": "module"
19 | },
20 | "plugins": ["react", "@typescript-eslint"],
21 | "rules": {}
22 | }
23 |
--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | #custom
4 | package-lock.json
5 |
6 | # dependencies
7 | /node_modules
8 | /.pnp
9 | .pnp.js
10 |
11 | # testing
12 | /coverage
13 |
14 | # next.js
15 | /.next/
16 | /out/
17 |
18 | # production
19 | /build
20 |
21 | # misc
22 | .DS_Store
23 | *.pem
24 |
25 | # debug
26 | npm-debug.log*
27 | yarn-debug.log*
28 | yarn-error.log*
29 | .pnpm-debug.log*
30 |
31 | # local env files
32 | .env*.local
33 | .env
34 |
35 | # vercel
36 | .vercel
37 |
38 | # typescript
39 | *.tsbuildinfo
40 | next-env.d.ts
41 |
--------------------------------------------------------------------------------
/client/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "none",
3 | "tabWidth": 2,
4 | "useTabs": false,
5 | "semi": false,
6 | "singleQuote": true,
7 | "endOfLine": "auto",
8 | "arrowParens": "avoid"
9 | }
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/client/components/Candlechart/chartController.ts:
--------------------------------------------------------------------------------
1 | import {
2 | CHART_Y_AXIS_MARGIN,
3 | CHART_X_AXIS_MARGIN,
4 | CANDLE_CHART_GRID_COLOR,
5 | CANDLE_COLOR_RED,
6 | CANDLE_COLOR_BLUE,
7 | DEFAULT_POINTER_DATA
8 | } from '@/constants/ChartConstants'
9 | import { RefElementSize } from '@/hooks/useRefElementSize'
10 | import {
11 | CandleData,
12 | ChartPeriod,
13 | CandleChartRenderOption,
14 | PointerData
15 | } from '@/types/ChartTypes'
16 | import {
17 | getYAxisScale,
18 | getXAxisScale,
19 | updateCurrentPrice,
20 | handleMouseEvent,
21 | getVolumeHeightScale
22 | } from '@/utils/chartManager'
23 | import * as d3 from 'd3'
24 | import { throttle } from 'lodash'
25 | import { RefObject, Dispatch, SetStateAction } from 'react'
26 | import { mobileEventClosure } from './mobileTouchEventClosure'
27 |
28 | export function initCandleChart(
29 | svgRef: RefObject