diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..89eb593
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,17 @@
+{
+ "extends": ["react-app", "eslint:recommended"],
+ "ignorePatterns": ["node_modules"],
+ "rules": {
+ "no-use-before-define": ["error"],
+ "no-unused-vars": [
+ "error",
+ {
+ "vars": "all",
+ "varsIgnorePattern": "^_",
+ "argsIgnorePattern": "^_",
+ "args": "all",
+ "ignoreRestSiblings": false
+ }
+ ]
+ }
+}
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..a99a6c4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+ "semi": false,
+ "singleQuote": true,
+ "arrowParens": "avoid",
+ "endOfLine": "auto",
+ "jsxSingleQuote": false,
+ "jsxBracketSameLine": true
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..9a2c86c
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+ "editor.formatOnSave": true,
+ "editor.tabSize": 2,
+ "files.insertFinalNewline": true,
+ "files.trimFinalNewlines": true,
+ "files.trimTrailingWhitespace": true,
+ "javascript.validate.enable": false,
+ "prettier.configPath": ".prettierrc",
+ "prettier.prettierPath": "node_modules/prettier",
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "eslint.alwaysShowStatus": true
+}
diff --git a/package-lock.json b/package-lock.json
index 0e56e07..3d33762 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1278,9 +1278,9 @@
},
"dependencies": {
"globals": {
- "version": "13.10.0",
- "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
- "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
+ "version": "13.11.0",
+ "resolved": "https://registry.npmjs.org/globals/-/globals-13.11.0.tgz",
+ "integrity": "sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==",
"requires": {
"type-fest": "^0.20.2"
}
@@ -5335,9 +5335,9 @@
}
},
"globals": {
- "version": "13.10.0",
- "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
- "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
+ "version": "13.11.0",
+ "resolved": "https://registry.npmjs.org/globals/-/globals-13.11.0.tgz",
+ "integrity": "sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==",
"requires": {
"type-fest": "^0.20.2"
}
@@ -6796,6 +6796,19 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
},
+ "history": {
+ "version": "4.10.1",
+ "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+ "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+ "requires": {
+ "@babel/runtime": "^7.1.2",
+ "loose-envify": "^1.2.0",
+ "resolve-pathname": "^3.0.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0",
+ "value-equal": "^1.0.1"
+ }
+ },
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6806,6 +6819,21 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
+ "hoist-non-react-statics": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+ "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+ "requires": {
+ "react-is": "^16.7.0"
+ },
+ "dependencies": {
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ }
+ }
+ },
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -9080,6 +9108,15 @@
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
},
+ "mini-create-react-context": {
+ "version": "0.4.1",
+ "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+ "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+ "requires": {
+ "@babel/runtime": "^7.12.1",
+ "tiny-warning": "^1.0.3"
+ }
+ },
"mini-css-extract-plugin": {
"version": "0.11.3",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@@ -11107,6 +11144,12 @@
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
},
+ "prettier": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+ "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
+ "dev": true
+ },
"pretty-bytes": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -11591,6 +11634,57 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
"integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
},
+ "react-router": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
+ "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
+ "requires": {
+ "@babel/runtime": "^7.12.13",
+ "history": "^4.9.0",
+ "hoist-non-react-statics": "^3.1.0",
+ "loose-envify": "^1.3.1",
+ "mini-create-react-context": "^0.4.0",
+ "path-to-regexp": "^1.7.0",
+ "prop-types": "^15.6.2",
+ "react-is": "^16.6.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0"
+ },
+ "dependencies": {
+ "isarray": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+ "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+ },
+ "path-to-regexp": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+ "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+ "requires": {
+ "isarray": "0.0.1"
+ }
+ },
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ }
+ }
+ },
+ "react-router-dom": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.1.tgz",
+ "integrity": "sha512-xhFFkBGVcIVPbWM2KEYzED+nuHQPmulVa7sqIs3ESxzYd1pYg8N8rxPnQ4T2o1zu/2QeDUWcaqST131SO1LR3w==",
+ "requires": {
+ "@babel/runtime": "^7.12.13",
+ "history": "^4.9.0",
+ "loose-envify": "^1.3.1",
+ "prop-types": "^15.6.2",
+ "react-router": "5.2.1",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0"
+ }
+ },
"react-scripts": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz",
@@ -12009,6 +12103,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
},
+ "resolve-pathname": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+ "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+ },
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -13595,6 +13694,16 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
+ "tiny-invariant": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+ "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+ },
+ "tiny-warning": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+ "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+ },
"tmpl": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -14044,6 +14153,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
+ "value-equal": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+ "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+ },
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index 8183248..6731272 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"axios": "^0.21.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
+ "react-router-dom": "^5.2.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
@@ -35,5 +36,9 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "eslint": "^7.32.0",
+ "prettier": "^2.3.2"
}
}
diff --git a/src/App.js b/src/App.js
index 7e98ce3..b08134a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,18 @@
-import axios from 'axios';
-import { useEffect, useState } from 'react';
-
-function App() {
- const [history, setHistory] = useState([]);
-
- useEffect(() => {
- fetchChatHistory();
- }, []);
-
- const fetchChatHistory = async () => {
- const res = await axios('https://programming.coffee/history');
- setHistory(res.data);
- };
+import Intro from './pages/Intro';
+import Dashboard from './pages/Dashboard';
+import {BrowserRouter,Route, Switch} from 'react-router-dom';
+export default function App(){
return (
-
- {history.map((history, index) =>
[{history.date}] {history.user}: {history.message}
)}
-
+
+
+
+
+
+
+
);
}
-
-export default App;
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render(
+ 채팅 랭킹
+
+ )
+};
+
+export default CardHeader;
\ No newline at end of file
diff --git a/src/components/chatMembersIntro/ChatMembersIntro.css b/src/components/chatMembersIntro/ChatMembersIntro.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/chatMembersIntro/ChatMembersIntro.jsx b/src/components/chatMembersIntro/ChatMembersIntro.jsx
new file mode 100644
index 0000000..70954ff
--- /dev/null
+++ b/src/components/chatMembersIntro/ChatMembersIntro.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import './ChatMembersIntro.css'
+
+const ChatMembersIntro = (props) => {
+ return(
+
+ 안녕하세요.
+ )
+};
+
+export default ChatMembersIntro;
\ No newline at end of file
diff --git a/src/components/chattingCount/ChattingCount.css b/src/components/chattingCount/ChattingCount.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/chattingCount/ChattingCount.jsx b/src/components/chattingCount/ChattingCount.jsx
new file mode 100644
index 0000000..60a03c1
--- /dev/null
+++ b/src/components/chattingCount/ChattingCount.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import './ChattingCount.css';
+
+const ChattingCount = (props) => {
+ return(
+
+ 전체 채팅 횟수 :
+
+ )
+};
+
+export default ChattingCount;
\ No newline at end of file
diff --git a/src/components/circleGraph/CircleGraph.css b/src/components/circleGraph/CircleGraph.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/circleGraph/CircleGraph.jsx b/src/components/circleGraph/CircleGraph.jsx
new file mode 100644
index 0000000..b9b974a
--- /dev/null
+++ b/src/components/circleGraph/CircleGraph.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import './CircleGraph.css'
+
+const CircleGraph = (props) => {
+ return(
+
+ )
+};
+
+export default CircleGraph;
\ No newline at end of file
diff --git a/src/components/header/Header.css b/src/components/header/Header.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
new file mode 100644
index 0000000..82ca335
--- /dev/null
+++ b/src/components/header/Header.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Header.css'
+
+const Header = () => {
+ return (
+
+ Kafuncha
+
+ );
+};
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/members/Members.css b/src/components/members/Members.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/members/Members.jsx b/src/components/members/Members.jsx
new file mode 100644
index 0000000..352446c
--- /dev/null
+++ b/src/components/members/Members.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Members.css'
+
+const Members = (props) => {
+ return(
+
+ 김코순님
+
+ )
+};
+
+export default Members;
\ No newline at end of file
diff --git a/src/components/rankMember/RankMember.css b/src/components/rankMember/RankMember.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/rankMember/RankMember.jsx b/src/components/rankMember/RankMember.jsx
new file mode 100644
index 0000000..3399635
--- /dev/null
+++ b/src/components/rankMember/RankMember.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import './RankMember.css'
+
+const RankMember = (props) => {
+ return(
+ 1위
+ )
+};
+
+export default RankMember;
\ No newline at end of file
diff --git a/src/components/rowGraph/RowGraph.css b/src/components/rowGraph/RowGraph.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/rowGraph/RowGraph.jsx b/src/components/rowGraph/RowGraph.jsx
new file mode 100644
index 0000000..fdbb540
--- /dev/null
+++ b/src/components/rowGraph/RowGraph.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import './RowGraph/css'
+
+const RowGraph = (props) => {
+ return(
+ 김코순
+ )
+};
+
+export default RowGraph;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 7998135..ef2edf8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
+import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
new file mode 100644
index 0000000..2358de5
--- /dev/null
+++ b/src/pages/Dashboard.js
@@ -0,0 +1,10 @@
+import { Link } from 'react-router-dom';
+
+export default function Dashboard(){
+ return(
+
+
업로드 후 '대시보드 화면'입니다.
+
+
업로드 전 '인트로 화면'입니다.
+
+ {history.map((history, index) =>
[{history.date}] {history.user}: {history.message}
)}
+