mash-up-kr-web · rdd9223 · Apr 15, 2020 · Apr 15, 2020 · Apr 15, 2020 · Apr 15, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -1,20 +1,20 @@
-# github_star
-목표: Git Star 목표 github user(또는 org) 를 검색하여 해당 user의 총 Repo 수와 총 star 수 그리고 repo별 스타들을 보여주는 page를 제작한다.
+## Gitstar Ranking
+---
+React 환경
 
-## 제작 세부 방법
-1. Text Input을 통해 입력된 값을 사용하여 Github User 또는 Organization의 이름을 검색합니다.
+### 실행방법
+---
+npm install
+yarn start
 
-2. 검색된 데이터를 사용하여 각 결과값의 상세값을 구하기 위한 API를 호출 합니다.
+### 구현방법
+---
+상태 끌어올리기, hook, axios, ref, css
 
-3. 검색 결과는 List로 표현되며 다음과 같은 UI로 구성됩니다.
-
-![ui](./img/ui.png)
-
-## 기타
-
-1. 크로스 브라우징은 고려하지 않습니다.
-2. JS/ TS뿐 아니라 Style 및 모든 라이브러리는 개인이 선호하는 어떤 것을 사용해도 됩니다.
-3. 만약 위 이미지의 기획상 허점이 보인다면, 개인이 스스로 개선 및 변경하여 구현하여도 무방합니다. 
-4. 만약 구현이 힘든 부분이 있거나 더 나은 부분이 있다면 자유롭게 변경 가능합니다.(검색버튼 대신 입력 시 바로 자동검색 되게 한다던지) 
-5. 위 내용의 API는 github api를 이용하여 데이터를 가져옵니다. 
- https://developer.github.com/v3/ (어뷰징을 막기위해 하루에 너무 자주(한번에 수십 수백번) 요청하면 하루 API 제한이 걸릴 수 있습니다.)
+### 구현 하고 나서
+---
+- 상태끌어올리기를 너무 많이 사용해서 context api로 리팩토링 해보고 싶다.
+- css에 대한 지식이 너무 부족해 디자인이 만족스럽지 못하다.
+- TS로 다시 해보고싶다.
+- WebPack도 사용해보고 싶다....
+- 지각 제출 죄송합니다 ㅠㅠㅠㅠㅠㅠ
diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "github_star",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "axios": "0.19.2",
+    "node-sass": "4.13.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/components/atoms/button/Button.css b/src/components/atoms/button/Button.css
@@ -0,0 +1,7 @@
+.button {
+  background-color: lightgray;
+  height: 3rem;
+  width: 5rem;
+  font-size: 1rem;
+  color: black;
+}
diff --git a/src/components/atoms/button/Button.js b/src/components/atoms/button/Button.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import './Button.css'
+
+export default function Button(props) {
+  return (
+    <button className="button" onClick={props.onClick}>
+      {props.name}
+    </button>
+  )
+}
diff --git a/src/components/atoms/item/Item.css b/src/components/atoms/item/Item.css
@@ -0,0 +1,23 @@
+.item {
+  padding: 1rem;
+  display: flex;
+  transition: all 0.15s;
-  transition: all 0.15s;
+  transition: background 0.15s;
+
-  transition: all 0.15s;
+  transition: background 0.15s;
+
+  user-select: none;
+  justify-content: space-between;
+}
+
+.item:hover {
+  background: lightgray;
+}
+
+.item + .item {
+  border-top: 1px solid lightgray;
+}
+
+.star {
+  font-size: 2rem;
+}
+
+.name {
+  font-size: 2rem;
+}
diff --git a/src/components/atoms/item/Item.js b/src/components/atoms/item/Item.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import './Item.css'
+
+export default function Item(props) {
+  return (
+    <div className="item">
+      <a className="name">
+        {props.name}
+      </a>
+      <a className="star">
+        ★ {props.stars}
+      </a>
+    </div>
+  )
+}
diff --git a/src/components/atoms/textInput/InputText.css b/src/components/atoms/textInput/InputText.css
@@ -0,0 +1,6 @@
+.input {
+  height: 2.5rem;
+  width: 50rem;
+  margin-right: 2rem;
+  font-size: 1.5rem;
+}
diff --git a/src/components/atoms/textInput/InputText.js b/src/components/atoms/textInput/InputText.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import './InputText.css';
+
+export default function InputText(props) {
+  return (
+    <input className="input" type="text" placeholder={props.placeholder} ref={props.searchName}/>
-    <input className="input" type="text" placeholder={props.placeholder} ref={props.searchName}/>
+    <input
+      className="input"
+      type="text"
+      placeholder={props.placeholder}
+      ref={props.searchName}
+    />
+
-    <input className="input" type="text" placeholder={props.placeholder} ref={props.searchName}/>
+    <input
+      className="input"
+      type="text"
+      placeholder={props.placeholder}
+      ref={props.searchName}
+    />
+
+  );
+}
-export default function InputText(props) {
-  return (
-    <input className="input" type="text" placeholder={props.placeholder} ref={props.searchName}/>
-  );
-}
+export default function InputText(props) {
+  const { placeholder, onChange, value } = props;
+
+  return (
+    <input className="input" type="text" placeholder={placeholder} onChange={onChange} value={value} />   
+  );
+}
-export default function InputText(props) {
-  return (
-    <input className="input" type="text" placeholder={props.placeholder} ref={props.searchName}/>
-  );
-}
+export default function InputText(props) {
+  const { placeholder, onChange, value } = props;
+
+  return (
+    <input className="input" type="text" placeholder={placeholder} onChange={onChange} value={value} />   
+  );
+}
diff --git a/src/components/molecules/itemList/ItemList.css b/src/components/molecules/itemList/ItemList.css
@@ -0,0 +1,4 @@
+.itemList {
+  border: 1px solid lightgray;
+  margin: 1rem;
+}
diff --git a/src/components/molecules/itemList/ItemList.js b/src/components/molecules/itemList/ItemList.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import Item from '../../atoms/item/Item'
+import './ItemList.css'
+
+export default function ItemList(props) {
+
+  const repos = (props.repoList).map(
+    ({id, name, starCount}) => (
+      <Item
+        key={id}
+        id={id}
+        name={name}
+        stars={starCount}
+      />
+    )
+  )
+
+  return (
+    <div className="itemList">
+      {repos}
+    </div>
+  )
+}
diff --git a/src/components/molecules/searchBar/SearchBar.css b/src/components/molecules/searchBar/SearchBar.css
@@ -0,0 +1,3 @@
+.SearchBar {
+
+}
diff --git a/src/components/molecules/searchBar/SearchBar.js b/src/components/molecules/searchBar/SearchBar.js
@@ -0,0 +1,22 @@
+import React, {useRef} from 'react'
+import Button from '../../atoms/button/Button'
+import InputText from '../../atoms/textInput/InputText'
+import {getRepoList} from '../../../service/getRepoList'
+
+export default function SearchBar(props) {
+
+  const searchName = useRef();
+
+  const getRepoInfo = async(userName) => {
+    const result = await getRepoList(userName);
+    props.setRepoList(result);
+    props.setUserName(userName);
+  }
+
+  return (
+    <div className="SearchBar">
+      <InputText placeholder={"검색할 Github User 또는 Organization의 이름을 입력해주세요!"} searchName={searchName} />
+      <Button name="Search" onClick={() => getRepoInfo(searchName.current.value)}/>
+    </div>
-  const searchName = useRef();
-
-  const getRepoInfo = async(userName) => {
-    const result = await getRepoList(userName);
-    props.setRepoList(result);
-    props.setUserName(userName);
-  }
-  
-  return (
-    <div className="SearchBar">
-      <InputText placeholder={"검색할 Github User 또는 Organization의 이름을 입력해주세요!"} searchName={searchName} />
-      <Button name="Search" onClick={() => getRepoInfo(searchName.current.value)}/>
-    </div>
+const [searchName, setSearchName] = useState("");
+
+  const getRepoInfo = async(userName) => {
+    const result = await getRepoList(userName);
+    props.setRepoList(result);
+    props.setUserName(userName);
+  }
+  
+  const handleChange = useCallback((e)=> {
+    setUserName(e.target.value);
+  }, [setUserName]);
+  
+  return (
+    <div className="SearchBar">
+      <InputText
+          placeholder={"검색할 Github User 또는 Organization의 이름을 입력해주세요!"} 
+          onChange={handleChange} value={userName}}/>
+      <Button name="Search" onClick={() => getRepoInfo(userName)}/>
+    </div>
+
-  const searchName = useRef();
-
-  const getRepoInfo = async(userName) => {
-    const result = await getRepoList(userName);
-    props.setRepoList(result);
-    props.setUserName(userName);
-  }
-  
-  return (
-    <div className="SearchBar">
-      <InputText placeholder={"검색할 Github User 또는 Organization의 이름을 입력해주세요!"} searchName={searchName} />
-      <Button name="Search" onClick={() => getRepoInfo(searchName.current.value)}/>
-    </div>
+const [searchName, setSearchName] = useState("");
+
+  const getRepoInfo = async(userName) => {
+    const result = await getRepoList(userName);
+    props.setRepoList(result);
+    props.setUserName(userName);
+  }
+  
+  const handleChange = useCallback((e)=> {
+    setUserName(e.target.value);
+  }, [setUserName]);
+  
+  return (
+    <div className="SearchBar">
+      <InputText
+          placeholder={"검색할 Github User 또는 Organization의 이름을 입력해주세요!"} 
+          onChange={handleChange} value={userName}}/>
+      <Button name="Search" onClick={() => getRepoInfo(userName)}/>
+    </div>
+
+  )
-  const getRepoInfo = async(userName) => {
-    const result = await getRepoList(userName);
-    props.setRepoList(result);
-    props.setUserName(userName);
-  }
-  
-  return (
-    <div className="SearchBar">
-      <InputText placeholder={"검색할 Github User 또는 Organization의 이름을 입력해주세요!"} searchName={searchName} />
-      <Button name="Search" onClick={() => getRepoInfo(searchName.current.value)}/>
-    </div>
-  )
+  const getRepoInfo = useCallback(async () => {
+    const userName = searchName.current.value;
+    const result = await getRepoList(userName);
+    props.setRepoList(result);
+    props.setUserName(userName);
+  }, []);
+  
+  return (
+    <div className="SearchBar">
+      <InputText placeholder={"검색할 Github User 또는 Organization의 이름을 입력해주세요!"} searchName={searchName} />
+      <Button name="Search" onClick={getRepoInfo}/>
+    </div>
+  )
-  const getRepoInfo = async(userName) => {
-    const result = await getRepoList(userName);
-    props.setRepoList(result);
-    props.setUserName(userName);
-  }
-  
-  return (
-    <div className="SearchBar">
-      <InputText placeholder={"검색할 Github User 또는 Organization의 이름을 입력해주세요!"} searchName={searchName} />
-      <Button name="Search" onClick={() => getRepoInfo(searchName.current.value)}/>
-    </div>
-  )
+  const getRepoInfo = useCallback(async () => {
+    const userName = searchName.current.value;
+    const result = await getRepoList(userName);
+    props.setRepoList(result);
+    props.setUserName(userName);
+  }, []);
+  
+  return (
+    <div className="SearchBar">
+      <InputText placeholder={"검색할 Github User 또는 Organization의 이름을 입력해주세요!"} searchName={searchName} />
+      <Button name="Search" onClick={getRepoInfo}/>
+    </div>
+  )
+}
diff --git a/src/components/molecules/userInfo/UserInfo.css b/src/components/molecules/userInfo/UserInfo.css
@@ -0,0 +1,11 @@
+.userInfo {
+  margin-left: 2rem;
+}
+
+.nameinfo {
+  font-size: 3rem;
+}
+
+.repo {
+  font-size: 2rem;
+}
diff --git a/src/components/molecules/userInfo/UserInfo.js b/src/components/molecules/userInfo/UserInfo.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import './UserInfo.css'
+
+export default function UserInfo(props) {
+  return (
-export default function UserInfo(props) {
-  return (
+export default function UserInfo(props) {
+  const { userName, repoCount, starCount } = props;
+
+  return (
+
-export default function UserInfo(props) {
-  return (
+export default function UserInfo(props) {
+  const { userName, repoCount, starCount } = props;
+
+  return (
+
+    <div className="userInfo">
+      <a className="nameinfo">
+        {props.userName}
+      </a>
+      <br/>
+      <a className="repo">
+        {props.repoCount} Repositories | {props.starCount} stars
+      </a>
+    </div>
+  )
+}
diff --git a/src/components/organisms/header/Header.css b/src/components/organisms/header/Header.css
@@ -0,0 +1,14 @@
+.Header {
+  background-color: lightgray;
+  margin: 1rem;
+  padding: 1rem;
+
+}
+
+.Header h1 {
+  font-size: 3rem;
+}
+
+.Header p {
+  font-size: 1.5rem;
+}
diff --git a/src/components/organisms/header/Header.js b/src/components/organisms/header/Header.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import SearchBar from '../../molecules/searchBar/SearchBar';
+import './Header.css'
+
+export default function Header(props) {
+  return (
+    <div className="Header">
+      <h1>Gitstar Ranking</h1>
+      <p>Unofficial GitHub star ranking for users, organizations and repositories.</p>
+      <SearchBar userName={props.userName} setUserName={props.setUserName} setRepoList={props.setRepoList}/>
+    </div>
+  )
+}
diff --git a/src/components/organisms/searchResult/SearchResult.js b/src/components/organisms/searchResult/SearchResult.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import ItemList from '../../molecules/itemList/ItemList'
+import UserInfo from '../../molecules/userInfo/UserInfo'
+
+export default function SearchResult(props) {
+
+  const starCount = (ItemList) => {
+   return ItemList.reduce((acc, {starCount}) =>  acc += starCount, 0);
+  }
-  const starCount = (ItemList) => {
-   return ItemList.reduce((acc, {starCount}) =>  acc += starCount, 0);
-  }
+  const starCount = (ItemList) => ItemList.reduce((acc, {starCount}) =>  acc += starCount, 0)
-  const starCount = (ItemList) => {
-   return ItemList.reduce((acc, {starCount}) =>  acc += starCount, 0);
-  }
+  const starCount = (ItemList) => ItemList.reduce((acc, {starCount}) =>  acc += starCount, 0)
+
+  return (
+    <div>
+      <UserInfo repoCount={(props.repoList).length} starCount={starCount(props.repoList)} userName={props.userName}/>
+      <br/>
+      <ItemList repoList={props.repoList}/>
+    </div>
+  )
+}