-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
292 additions
and
199 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React from 'react'; | ||
| import TableExample from './Table'; | ||
|
|
||
| function ExamplePage() { | ||
| return ( | ||
| <div> | ||
| <TableExample /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default ExamplePage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
|
|
||
| import { useSelector, useDispatch } from 'react-redux'; | ||
| import { Avatar, Table } from 'antd'; | ||
| import { examplePagination } from '../../../state/actions-creators/examplePagination'; | ||
| const { Column } = Table; | ||
|
|
||
| function TableExample() { | ||
| const dispatch = useDispatch(); | ||
| const { data, pending } = useSelector(state => state.examplePagination); | ||
| const [page, setPage] = useState(1); | ||
|
|
||
| const onPageChange = e => { | ||
| // 페이지네이션 번호 바뀔때 뜸. | ||
| console.log(e); | ||
| setPage(e); | ||
| dispatch( | ||
| examplePagination({ | ||
| requestPage: e | ||
| }) | ||
| ); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| dispatch( | ||
| examplePagination({ | ||
| page: 0 | ||
| }) | ||
| ); | ||
| }, [dispatch]); | ||
|
|
||
| // 받을 수 있는 정보 목록 | ||
| // { | ||
| // "albumId": 1, | ||
| // "id": 11, | ||
| // "title": "nihil at amet non hic quia qui", | ||
| // "url": "https://via.placeholder.com/600/1ee8a4", | ||
| // "thumbnailUrl": "https://via.placeholder.com/150/1ee8a4" | ||
| // }, | ||
|
|
||
| return ( | ||
| <> | ||
| <Table | ||
| loading={pending} | ||
| pagination={{ | ||
| current: page, | ||
| pageSize: 10, | ||
| total: data ? data.total : 0, | ||
| showSizeChanger: false, | ||
| onChange: onPageChange | ||
| }} | ||
| key="id" | ||
| rowKey="id" | ||
| // onRow={(record, rowIndex) => { | ||
| // return { | ||
| // onClick: event => { | ||
| // console.log(event, record); | ||
| // onStopClickHandler(record); | ||
| // } // click row | ||
| // }; | ||
| // }} | ||
| pageSize={10} | ||
| dataSource={data ? data.photoList : []} | ||
| > | ||
| <Column | ||
| title="썸네일" | ||
| dataIndex="thumbnailUrl" | ||
| key="id" | ||
| render={element => { | ||
| return <Avatar src={element} />; | ||
| }} | ||
| /> | ||
| <Column title="앨범 아이디" dataIndex="id" key="id" /> | ||
| <Column title="제목" dataIndex="title" key="id" /> | ||
|
|
||
| <Column | ||
| title="관리" | ||
| // dataindex 정보를 안주면 render 의 element 가 행 하나의 값이 들어가게됨 | ||
| dataIndex="" | ||
| key="id" | ||
| render={element => { | ||
| return ( | ||
| <button | ||
| key={element.id} | ||
| style={{ | ||
| backgroundColor: 'inherit', | ||
| border: 'none', | ||
| fontWeight: 700 | ||
| }} | ||
| onClick={() => console.log(element)} | ||
| > | ||
| 클릭 이벤트 콘솔 창 확인 | ||
| </button> | ||
| ); | ||
| }} | ||
| /> | ||
| </Table> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default TableExample; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| //유저 조회 디스패치 관련 | ||
| export const EXAMPLE_PAGINATION_PENDING = 'EXAMPLE_PAGINATION_PENDING'; | ||
| export const EXAMPLE_PAGINATION_SUCCESS = 'EXAMPLE_PAGINATION_SUCCESS'; | ||
| export const EXAMPLE_PAGINATION_ERROR = 'EXAMPLE_PAGINATION_ERROR'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| export * from "./slackMessage"; | ||
| export * from "./slackValidation"; | ||
| export * from "./logout"; | ||
| export * from './slackMessage'; | ||
| export * from './slackValidation'; | ||
| export * from './logout'; | ||
| export * from './examplePagination'; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import axios from 'axios'; | ||
| import { | ||
| EXAMPLE_PAGINATION_PENDING, | ||
| EXAMPLE_PAGINATION_SUCCESS, | ||
| EXAMPLE_PAGINATION_ERROR | ||
| } from '../action-types'; | ||
|
|
||
| export const examplePagination = | ||
| ({ requestPage }, callback) => | ||
| async dispatch => { | ||
| try { | ||
| dispatch({ type: EXAMPLE_PAGINATION_PENDING }); | ||
|
|
||
| const response = await axios.get( | ||
| 'https://jsonplaceholder.typicode.com/photos', | ||
| { | ||
| params: { | ||
| _page: requestPage, | ||
| _limit: 10 | ||
| } | ||
| } | ||
| ); | ||
| console.log('포토 조회액션', response); | ||
|
|
||
| const data = { | ||
| total: 5000, | ||
| currentPage: requestPage, | ||
| photoList: response.data | ||
| }; | ||
|
|
||
| dispatch({ type: EXAMPLE_PAGINATION_SUCCESS, payload: data }); | ||
|
|
||
| // 자동으로 피쳐로 넘어가게끔 | ||
| // callback(); | ||
| } catch (e) { | ||
| //400 ~ | ||
| dispatch({ type: EXAMPLE_PAGINATION_ERROR, payload: '조회 실패' }); | ||
| } | ||
| }; |
Oops, something went wrong.