{text}
;
7 | }
8 | }
9 |
10 | export default RCC;
11 |
--------------------------------------------------------------------------------
/src/13/AsyncRegisterPage.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AsyncComponent from './AsyncComponent';
3 |
4 | export default () => (
5 |
7 |
8 |
9 | );
10 | };
11 |
12 | RSCP.propTypes = {
13 |
14 | };
15 |
16 | export default RSCP;
17 |
--------------------------------------------------------------------------------
/pages/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import MainPage from '../src/08/components/main/MainPage';
3 |
4 | class IndexDocument extends PureComponent {
5 | render() {
6 | return
7 | 놀러가자
8 |
9 | );
10 | }
11 | }
12 |
13 | export default TodaysPlan;
14 |
--------------------------------------------------------------------------------
/src/07/reducers/collectionReducer01.js:
--------------------------------------------------------------------------------
1 | const initState = {
2 | ids: [],
3 | entities: {},
4 | };
5 |
6 | export default (state = initState, action) => {
7 | const { type, payload } = action;
8 |
9 | switch (type) {
10 | default:
11 | return state;
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/.storybook/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | module: {
5 | rules: [
6 | {
7 | test: /\.scss$/,
8 | loaders: ["sass-loader"],
9 | include: path.resolve(__dirname, "../")
10 | }
11 | ]
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
8 |
9 |
10 | );
11 | }
12 | }
13 |
14 | RCCP.propTypes = {
15 |
16 | };
17 |
18 | export default RCCP;
19 |
--------------------------------------------------------------------------------
/src/07/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore, combineReducers } from 'redux';
2 | import { composeWithDevTools } from 'redux-devtools-extension';
3 | import reducers from './reducers';
4 |
5 | export default initStates => createStore(
6 | combineReducers(reducers),
7 | initStates,
8 | composeWithDevTools(),
9 | );
10 |
--------------------------------------------------------------------------------
/src/stories/BooleanComponentStory.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import BooleanComponent from '../03/BooleanComponent';
5 |
6 | storiesOf('BooleanComponent', module)
7 | .add('기본 설정', () =>
8 |
9 |
10 | );
11 | }
12 | }
13 |
14 | RPC.propTypes = {
15 |
16 | };
17 |
18 | export default RPC;
19 |
--------------------------------------------------------------------------------
/src/07/actions/loadingActions.js:
--------------------------------------------------------------------------------
1 | export const SET_LOADING = 'loading/SET_LOADING';
2 | export const RESET_LOADING = 'loading/RESET_LOADING';
3 |
4 | export const setLoading = loading => ({
5 | type: SET_LOADING,
6 | payload: loading,
7 | });
8 |
9 | export const resetLoading = () => ({
10 | type: RESET_LOADING
11 | });
12 |
--------------------------------------------------------------------------------
/src/07/containers/DispatchContainer02.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import ActionComponent from '../ActionComponent';
3 | import { setAge } from '../actions/collectionActions';
4 |
5 | const mapDispatchToProps = {
6 | setAge,
7 | };
8 |
9 | export default connect(null, mapDispatchToProps)(ActionComponent);
10 |
--------------------------------------------------------------------------------
/src/03/PureComponent.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import shallowEqual from 'shallow-equal';
3 |
4 | export class PureComponent extends React.Component {
5 | shouldComponentUpdate(nextProps, nextState) {
6 | return !shallowEqual(this.props, nextProps) ||
7 | !shallowEqual(this.state, nextState)
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/11/api-redux-pack/actionTypes.js:
--------------------------------------------------------------------------------
1 | export const FETCH_LIST = 'api-redux-pack/FETCH_LIST';
2 | export const FETCH = 'api-redux-pack/FETCH';
3 | export const DELETE = 'api-redux-pack/DELETE';
4 | export const UPDATE = 'api-redux-pack/UPDATE';
5 | export const CREATE = 'api-redux-pack/CREATE';
6 | export const RESET = 'api-redux-pack/RESET';
7 |
--------------------------------------------------------------------------------
/mock/fake.js:
--------------------------------------------------------------------------------
1 | const jsonServer = require('json-server');
2 | const server = jsonServer.create();
3 | const middlewares = jsonServer.defaults();
4 | const port = 4000;
5 |
6 | server.use(middlewares);
7 | server.use((req, res) => {
8 | res.status(500).jsonp({
9 | errorMessage: '문제가 발생했습니다',
10 | });
11 | });
12 | server.listen(port);
13 |
--------------------------------------------------------------------------------
/src/03/ChildProperty.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class ChildProperty extends Component {
5 | render() {
6 | return {this.props.children}
;
7 | }
8 | }
9 | ChildProperty.propTypes = {
10 | children: PropTypes.node,
11 | };
12 | export default ChildProperty;
13 |
--------------------------------------------------------------------------------
/src/03/StateExampleApp.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import StateExample from './03/StateExample';
3 |
4 | class App extends React.Component {
5 | render() {
6 | return (
7 |
8 |
12 | );
13 | }
14 | }
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/sass/components/_transitions.scss:
--------------------------------------------------------------------------------
1 | // Scale transition
2 | .scale-transition {
3 | &.scale-out {
4 | transform: scale(0);
5 | transition: transform .2s !important;
6 | }
7 |
8 | &.scale-in {
9 | transform: scale(1);
10 | }
11 |
12 | transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
13 | }
--------------------------------------------------------------------------------
/src/02/quiz:
--------------------------------------------------------------------------------
1 |
2 | function getTotal(cart) {
3 | return cart.amount * cart.price;
4 | }
5 | var cart = {
6 | name: '도서',
7 | amount: 5,
8 | price: 300,
9 | };
10 | var product = {};
11 | var myCart = '장바구니에 ' + cart.name + '가 있습니다. 총 금액은 ' + getTotal(cart) + '입니다.';
12 |
13 | var myCart = `장바구니에 ${cart.name}가 있습니다. 총 금액은 ${getTotal(cart)}입니다.`;
14 | ---
15 |
--------------------------------------------------------------------------------
/src/03/LifecycleExampleApp.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import LifecycleExample from './03/LifecycleExample';
3 |
4 | class App extends React.Component {
5 | render() {
6 | return (
7 |
9 |
11 |
8 |
12 | );
13 | }
14 | }
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/07/actions/collectionActions.js:
--------------------------------------------------------------------------------
1 | export const SET_COLLECTION = 'collection/SET_COLLECTION';
2 | export const SET_AGE = 'collection/SET_AGE';
3 |
4 | export const setCollection = collection => ({
5 | type: SET_COLLECTION,
6 | payload: collection,
7 | });
8 |
9 | export const setAge = (id, age) => ({
10 | type: SET_AGE,
11 | payload: { id, age },
12 | });
13 |
--------------------------------------------------------------------------------
/src/03/PropsParentComponent.jsx:
--------------------------------------------------------------------------------
1 | // src폴더안에 App.js을 연 다음 기존 내용을 모두 지우고 아래의 내용으로 작성해 보세요
2 | import React from 'react';
3 | import PropComponent from './03/PropComponent';
4 |
5 | class App extends React.Component {
6 | render() {
7 | return (
8 |
9 |
11 |
8 |
12 | );
13 | }
14 | }
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/08/containers/NotificationContainer.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import Notification from '../components/Notification';
3 |
4 | const mapStateToProps = state => {
5 | const { showMessage, message, warning } = state.notification;
6 |
7 | return { showMessage, message, warning };
8 | };
9 |
10 | export default connect(mapStateToProps)(Notification);
11 |
--------------------------------------------------------------------------------
/src/08/containers/main/NotificationContainer.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import Notification from '../../components/main/Notification';
3 |
4 | const mapStateToProps = state => {
5 | const { hasError, errorMessage } = state.transactions;
6 |
7 | return { hasError, errorMessage };
8 | };
9 |
10 | export default connect(mapStateToProps)(Notification);
11 |
--------------------------------------------------------------------------------
/src/08/containers/main/TradeCoinPageContainer.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import TradeCoinPage from '../../components/main/TradeCoinPage';
3 | // import { createTransaction } from '../../actions/transactionActions';
4 | import { createTransaction } from '../../actions/transactionPackActions';
5 |
6 | export default connect(null, { createTransaction })(TradeCoinPage);
7 |
--------------------------------------------------------------------------------
/src/08/actions/searchFilterActions.js:
--------------------------------------------------------------------------------
1 | export const SET_FILTER = 'searchFilter/SET_FILTER';
2 | export const RESET_FILTER = 'searchFilter/RESET_FILTER';
3 |
4 | export function setFilter(params) {
5 | return {
6 | type: SET_FILTER,
7 | payload: { params },
8 | }
9 | }
10 |
11 | export function resetFilter() {
12 | return {
13 | type: RESET_FILTER,
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/07/reducers/userReducer.js:
--------------------------------------------------------------------------------
1 | import { SET_USER } from '../actions/userActions';
2 |
3 | export default function reducer(state = {}, action) {
4 | const { type, payload } = action;
5 |
6 | switch(type) {
7 | case SET_USER: {
8 | return {
9 | ...state,
10 | ...payload,
11 | };
12 | }
13 | default:
14 | return state;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/08/actions/userActions.js:
--------------------------------------------------------------------------------
1 | import createActions from '../../11/api-redux-pack/createActions';
2 |
3 | const { create } = createActions('users');
4 |
5 | export function createUser(data, onComplete) {
6 | return create(
7 | data,
8 | {},
9 | {
10 | notification: { success: '회원 가입이 성공적으로 완료되었습니다.' },
11 | onSuccess: onComplete,
12 | },
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/07/containers/ContainerComponent.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import PresentationComponent from '../PresentationComponent';
3 |
4 | const mapStateToProps = (state, props) => {
5 | return {
6 | userName: state.user.name,
7 | entity: state.collection.entities[props.id],
8 | };
9 | };
10 |
11 | export default connect(mapStateToProps)(PresentationComponent);
12 |
--------------------------------------------------------------------------------
/src/stories/DoitUIToastStory.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Toast from '../doit-ui/Toast';
5 |
6 | storiesOf('Doit-UI/Toast', module)
7 | .addWithJSX('Toast 예제', () => (
8 |
9 |
11 |
9 | 
10 |
12 | );
13 | }
14 | }
15 | export default App;
16 |
--------------------------------------------------------------------------------
/src/03/SFCTodaysPlan.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import TodaysPlan from './03/TodaysPlan';
3 |
4 | export default function SFCTodaysPlanApp(props) {
5 | const { onButtonClick, hasPlan } = props;
6 | return (
7 |
10 | 안녕하세요
11 |
8 | {hasPlan ?
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/07/containers/DispatchContainer01.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import ActionComponent from '../ActionComponent01';
3 |
4 | import { setAge } from '../actions/collectionActions';
5 |
6 | const mapDispatchToProps = dispatch => {
7 | return {
8 | setAge: (id, age) => dispatch(setAge(id, age)),
9 | };
10 | };
11 |
12 | export default connect(null, mapDispatchToProps)(ActionComponent);
13 |
--------------------------------------------------------------------------------
/src/07/reducers/index.js:
--------------------------------------------------------------------------------
1 | import loading from './loadingReducer';
2 | import user from './userReducer';
3 | // import collection from './collectionReducer01';
4 | // import collection from './collectionReducer02';
5 | import collection from './collectionReducer';
6 | import searchFilter from './searchFilterReducer';
7 |
8 | export default {
9 | collection,
10 | loading,
11 | user,
12 | searchFilter,
13 | };
14 |
--------------------------------------------------------------------------------
/src/03/ListExample.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class ListExample extends React.PureComponent {
4 | render() {
5 | const priceList = [1000, 2000, 3000, 4000];
6 | const prices = priceList.map((price) => 가격: {price}원
);
7 | return (
8 |
9 |
10 | {prices}
11 |
12 | );
13 | }
14 | }
15 |
16 | export default ListExample;
17 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
5 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/src/02/debounce.js:
--------------------------------------------------------------------------------
1 | export function debounce(func, delay) {
2 | let inDebounce;
3 | return function(...args) {
4 | if (inDebounce) {
5 | clearTimeout(inDebounce);
6 | }
7 | inDebounce = setTimeout(
8 | () => func(...args),
9 | delay);
10 | }
11 | }
12 |
13 | // const run = debounce(val => console.log(val), 100);
14 |
15 | // run('a');
16 | // run('b');
17 | // run('2');
18 | // .... 100ms이후
19 | // 2
20 |
--------------------------------------------------------------------------------
/src/03/PropsComponent.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class PropsComponent extends React.Component {
5 | render() {
6 | return (
7 |
8 | {this.props.name}
9 |
10 | );
11 | }
12 | }
13 |
14 | // 자료형을 선언하는 예제
15 | PropsComponent.propTypes = {
16 | name: PropTypes.string,
17 | };
18 |
19 | export default PropsComponent;
20 |
--------------------------------------------------------------------------------
/src/stories/WithLifecyleStory.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { storiesOf } from "@storybook/react";
3 |
4 | import { withLoadData } from "../05/lifecycle";
5 | import Counter from "../03/Counter";
6 |
7 | const CounterWithLoadData = withLoadData(Counter);
8 |
9 | storiesOf("WithLifecycle", module)
10 | .addWithJSX("CounterWithLoadData", () => (
11 |
8 |
15 | );
16 | }
17 | }
18 |
19 | export default App;
20 |
--------------------------------------------------------------------------------
/src/08/actions/notificationActions.js:
--------------------------------------------------------------------------------
1 | export const SHOW_NOTIFICATION = 'notification/SHOW_NOTIFICATION';
2 | export const HIDE_NOTIFICATION = 'notification/HIDE_NOTIFICATION';
3 |
4 | export function showMessage(message, warning = false) {
5 | return {
6 | type: SHOW_NOTIFICATION,
7 | payload: { message, warning },
8 | }
9 | }
10 |
11 | export function hideMessage() {
12 | return {
13 | type: HIDE_NOTIFICATION,
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/08/reducers/routerReducer.js:
--------------------------------------------------------------------------------
1 | import { SET_LOCATION } from '../actions/routerActions';
2 |
3 | const initState = {
4 | location: {},
5 | };
6 |
7 | export default (state = initState, action) => {
8 | const { type, payload } = action;
9 |
10 | switch (type) {
11 | case SET_LOCATION: {
12 | const { location } = payload;
13 | return { ...state, location };
14 | }
15 | default:
16 | return state;
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .firebase
25 | .next
26 | next
27 |
--------------------------------------------------------------------------------
/src/05/withHoC.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function withHoC(WrappedComponent) {
4 | const { displayName, name: componentName } = WrappedComponent;
5 | const wrappedComponentName = displayName || componentName;
6 | return class WithHoC extends React.Component {
7 | static displayName = `withHoC(${wrappedComponentName})`;
8 | render() {
9 | return
9 |
14 |
9 | {hasPlan ?
14 | );
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/08/containers/signup/RegisterPageContainer.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import RegisterPage from '../../components/signup/RegisterPage';
3 | import { createUser } from '../../actions/userActions';
4 | import { userCreateLoadingStateSelector } from '../../selectors/userSelectors';
5 |
6 | export default connect(
7 | state => ({
8 | loading: userCreateLoadingStateSelector(state),
9 | }),
10 | { createUser },
11 | )(RegisterPage);
12 |
--------------------------------------------------------------------------------
/src/__tests__/04/Text.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import Text from '../../04/Text';
5 |
6 | describe('
9 |
12 | );
13 | }
14 | }
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/07/reducers/loadingReducer.js:
--------------------------------------------------------------------------------
1 | import { SET_LOADING, RESET_LOADING } from '../actions/loadingActions';
2 |
3 | const initState = false;
4 |
5 | export default function reducer (state = initState, action) {
6 | const { type, payload } = action;
7 | switch(type) {
8 | case SET_LOADING: {
9 | return payload;
10 | }
11 | case RESET_LOADING: {
12 | return initState;
13 | }
14 | default:
15 | return state;
16 | }
17 | };
18 |
--------------------------------------------------------------------------------
/src/doit-ui/withStyles.js:
--------------------------------------------------------------------------------
1 | import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
2 | import aphroditeInterface from 'react-with-styles-interface-aphrodite';
3 | import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
4 | import Theme from './Theme';
5 |
6 | ThemedStyleSheet.registerInterface(aphroditeInterface);
7 | ThemedStyleSheet.registerTheme(Theme);
8 |
9 | export { css, withStyles, withStylesPropTypes, ThemedStyleSheet };
10 |
--------------------------------------------------------------------------------
/src/__tests__/03/Input.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Input from '../../03/Input';
4 |
5 | describe('', () => {
6 | it('renders without crashing', () => {
7 | const div = document.createElement('div');
8 | ReactDOM.render(, div);
9 | ReactDOM.unmountComponentAtNode(div);
10 | expect(React.isValidElement()).toBeTruthy();
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/src/03/non-jsx-sample.js:
--------------------------------------------------------------------------------
1 | // src폴더안에 index.js을 연 다음 기존 내용을 모두 지우고 아래의 내용으로 작성해 보세요
2 | var img = document.createElement('img');
3 | img.setAttribute('src', 'http://www.easyspub.co.kr/images/logo_footer.png');
4 | var divEl = document.createElement('div');
5 | divEl.innerText = '안녕하세요';
6 | var welcomeEl = document.createElement('div');
7 | welcomeEl.append(img);
8 | welcomeEl.append(divEl);
9 |
10 | var root = document.getElementById('root');
11 | root.append(welcomeEl);
12 |
--------------------------------------------------------------------------------
/src/03/TodoList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class TodoList extends React.PureComponent {
4 | render() {
5 | const todoList = [
6 | { taskName: '빨래하기', finished: false },
7 | { taskName: '공부하기', finished: true },
8 | ];
9 | return (
10 | 지루할 때:
10 | 즐거울 때:
11 |
11 | {todoList.map(todo => (
12 |
15 | );
16 | }
17 | }
18 |
19 | export default TodoList;
20 |
--------------------------------------------------------------------------------
/src/03/BooleanComponent.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class BooleanComponent extends React.Component {
5 | render() {
6 | // 불리언 타입을 조건문에 적용한 예제
7 | const message = this.props.bored ? '놀러 가자' : '하던 일 열심히 마무리하기';
8 | return {todo.taskName}
13 | ))}
14 | {message}
;
9 | }
10 | }
11 |
12 | // 자료형을 선언하는 예제
13 | BooleanComponent.propTypes = {
14 | bored: PropTypes.bool,
15 | };
16 |
17 | export default BooleanComponent;
18 |
--------------------------------------------------------------------------------
/src/04/withStyles.jsx:
--------------------------------------------------------------------------------
1 | import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
2 | import aphroditeInterface from 'react-with-styles-interface-aphrodite';
3 | import { css, withStyles, withStylesPropTypes } from 'react-with-styles';
4 | import Theme from './Theme';
5 |
6 | ThemedStyleSheet.registerTheme(Theme);
7 | ThemedStyleSheet.registerInterface(aphroditeInterface);
8 |
9 | export { css, withStyles, withStylesPropTypes, ThemedStyleSheet };
10 | export default withStyles;
11 |
--------------------------------------------------------------------------------
/src/stories/WithStateStory.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import { CounterWithCountState, CounterWithCountHandler } from '../05/withState';
5 | import Counter from '../03/Counter';
6 |
7 | storiesOf('WithState', module)
8 | .addWithJSX('CounterWithCountState', () => Hello, {somePropValue}
; 11 | } 12 | 13 | SFC.propTypes = { somePropValue: PropTypes.any }; 14 | SFC.defaultProps = { somePropValue: 'default value' }; 15 | 16 | export default SFC; 17 | -------------------------------------------------------------------------------- /mock/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "transactions": [ 3 | { 4 | "id": 1, 5 | "code": "BTX", 6 | "name": "비트코인(BTX)", 7 | "totalPrice": 12391230000, 8 | "currentPrice": 1020000, 9 | "amount": 0.23, 10 | "datetime": "2019/01/20 08:23:22" 11 | }, 12 | { 13 | "id": 2, 14 | "code": "RXP", 15 | "name": "리플(RXP)", 16 | "totalPrice": 1230000, 17 | "currentPrice": 20000, 18 | "amount": 10, 19 | "datetime": "2019/01/20 07:23:22" 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /src/07/ReduxApp01.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import { createStore } from 'redux'; 3 | import { Provider } from 'react-redux'; 4 | 5 | class ReduxApp extends PureComponent { 6 | store = createStore( 7 | state => state, 8 | { loading: false, name: '두잇 리액트' }, 9 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), 10 | ); 11 | 12 | render() { 13 | return
8 | 현재 카운트: {this.props.count}
9 |
14 |
15 | );
16 | }
17 | }
18 |
19 | Counter2.propTypes = {
20 | count: PropTypes.number,
21 | onAdd: PropTypes.func,
22 | };
23 |
24 | export default Counter2;
25 |
--------------------------------------------------------------------------------
/src/08/components/main/MainPage.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import CoinOverview from './CoinOverview';
3 | // import TransactionList from './TransactionList';
4 | import TransactionListContainer from '../../containers/main/TransactionListContainer';
5 |
6 | class MainPage extends PureComponent {
7 | render() {
8 | return (
9 |
11 |
18 | )}
19 |
12 |
13 | 새로운 모달 내용
14 |
15 |
16 |
17 |
15 |
19 | );
20 | }
21 | }
22 |
23 | export default App;
24 |
--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 | "hosting": {
3 | "public": "public",
4 | "headers": [
5 | {
6 | "source": "/service-worker.js",
7 | "headers": [{ "key": "Cache-Control", "value": "no-cache" }]
8 | }
9 | ],
10 | "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
11 | "rewrites": [
12 | {
13 | "source": "/api/**",
14 | "function": "apiserver"
15 | },
16 | {
17 | "source": "**",
18 | "function": "next"
19 | }
20 | ]
21 | },
22 | "functions": {
23 | "source": "functions"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/08/components/Notification.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import Toast from '../../doit-ui/Toast';
4 |
5 | class Notification extends PureComponent {
6 | render() {
7 | const { showMessage, message, warning } = this.props;
8 | return showMessage && (
9 |
16 | {this.state.hasDestroyed? null :
18 |
12 |
17 |
20 | );
21 | }
22 | }
23 |
24 | export default App;
25 |
--------------------------------------------------------------------------------
/src/08/containers/main/TransactionSearchFilterContainer.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import TransactionSearchFilter from '../../components/main/TransactionSearchFilter';
3 | // import { requestTransactionList } from '../../actions/transactionActions';
4 | import { requestTransactionList } from '../../actions/transactionPackActions';
5 | import { setFilter } from '../../actions/searchFilterActions';
6 |
7 | const mapStateToProps = state => ({
8 | initValues: state.searchFilter.params,
9 | });
10 |
11 | export default connect(mapStateToProps, { setFilter })(TransactionSearchFilter);
12 |
--------------------------------------------------------------------------------
/src/stories/InputWithStyleStory.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Input from '../04/InputWithStyle';
5 |
6 | storiesOf('InputWithStyle', module)
7 | .addWithJSX('기본 설정', () => )
8 | .addWithJSX('label 예제', () => )
9 | .addWithJSX('value 예제', () => )
10 | .addWithJSX('autoFocus 예제', () => )
11 | .addWithJSX('errorMessage 예제', () => );
12 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | import { configure } from 'enzyme';
2 | import Adapter from 'enzyme-adapter-react-16.3';
3 | import * as Aphrodite from 'aphrodite';
4 | import * as AphroditeNoImportant from 'aphrodite/no-important';
5 |
6 | Aphrodite.StyleSheetTestUtils.suppressStyleInjection();
7 | AphroditeNoImportant.StyleSheetTestUtils.suppressStyleInjection();
8 |
9 | configure({ adapter: new Adapter() });
10 |
11 | afterEach(() => {
12 | console.error.mockClear();
13 | });
14 |
15 | beforeEach(() => {
16 | jest.spyOn(console, 'error').mockImplementation((e) => {
17 | throw new Error(e);
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { configure, setAddon } from '@storybook/react';
2 | import interopRequireDefault from 'babel-runtime/helpers/interopRequireDefault';
3 | import JSXAddon from 'storybook-addon-jsx';
4 |
5 | // 04-2 스타일 적용할 때 사용된 파일
6 | import '../src/sass/materialize.scss';
7 | import '../src/doit-ui/app.css';
8 |
9 | function loadStories() {
10 | const context = require.context('../src/stories', true, /Story\.jsx$/);
11 |
12 | context.keys().forEach(srcFile => {
13 | interopRequireDefault(context(srcFile));
14 | });
15 | }
16 |
17 | setAddon(JSXAddon);
18 | configure(loadStories, module);
19 |
--------------------------------------------------------------------------------
/src/doit-ui/TableRow.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class TableRow extends PureComponent {
5 | render() {
6 | const { children, isHeader, baseline } = this.props;
7 |
8 | return (
9 | 머터리얼 CSS
18 |
11 |
19 | )}
20 |
12 |
13 | {name}을 정말로 삭제 하시겠습니까?
14 |
15 |
16 |
17 |
18 |
18 | 현재 카운트: {this.state.count}
19 |
20 |
21 | );
22 | }
23 | }
24 |
25 | export default Counter;
26 |
--------------------------------------------------------------------------------
/src/08/components/NotFound.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | // import { Link } from 'react-router-dom';
3 | import Link from 'next/link';
4 |
5 | import Text from '../../doit-ui/Text';
6 | import Spacing from '../../doit-ui/Spacing';
7 |
8 | class NotFound extends PureComponent {
9 | render() {
10 | const { url } = this.props.match || {};
11 | return (
12 |
9 | 이름: {userName}
10 | 선택된 항목: {entity && `name: ${entity.name}, age: ${entity.age}`}
11 |
12 | );
13 | }
14 | }
15 |
16 | PresentationComponent.propTypes = {
17 | userName: PropTypes.string,
18 | entity: PropTypes.shape({
19 | id: PropTypes.number,
20 | name: PropTypes.string,
21 | age: PropTypes.number,
22 | })
23 | };
24 |
25 | export default PresentationComponent;
26 |
--------------------------------------------------------------------------------
/src/stories/TextStory.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Text from '../04/Text';
5 |
6 | storiesOf('Text', module)
7 | .addWithJSX('기본 설정', () =>
14 | 안녕하세요
15 | 안녕하세요
16 |
17 | ))
18 | .addWithJSX('large 예제', () => (
19 |
20 | 안녕하세요
21 | 안녕하세요
22 |
23 | ));
24 |
--------------------------------------------------------------------------------
/src/03/ParentComponentWithConst.jsx:
--------------------------------------------------------------------------------
1 | // src폴더안에 App.js을 연 다음 기존 내용을 모두 지우고 아래의 내용으로 작성해 보세요
2 | import React from 'react';
3 | import ChildComponent from './03/ChildComponent';
4 |
5 | class App extends React.Component {
6 | render() {
7 | // 변수 선언
8 | const array = [1,2,3];
9 | const obj = { name: '제목', age: 30};
10 | const node = 노드
; 11 | const func = () => { console.log('메세지'); }; 12 | return ( 13 |
13 |
16 | );
17 | }
18 | }
19 |
20 | ChildComponent2.propTypes = {
21 | // 객체형 프로퍼티
22 | objValue: PropTypes.shape({
23 | name: PropTypes.string,
24 | age: PropTypes.number,
25 | }),
26 | // 필수 프로퍼티
27 | requiredStringValue: PropTypes.string.isRequired,
28 | }
29 |
30 | export default ChildComponent2;
31 |
--------------------------------------------------------------------------------
/src/05/compose.jsx:
--------------------------------------------------------------------------------
1 | import compose from 'recompose/compose';
2 | import withLoading from './withLoading';
3 | import withState from 'recompose/withState';
4 | const withLoadData = withState('isLoading', 'setIsLoading', true);
5 |
6 | function Component() {
7 | return '완료(컴포넌트 출력)';
8 | }
9 | const ComponentWithLoading = withLoading('로딩중')(Component);
10 | const ComponentWithLoadData = withLoadData(Component);
11 |
12 | const withLoadingAndLoadData = compose(withLoadData, withLoading('로딩중'));
13 | // 조합이 올바르지 못한 예: compose(withLoadData, withLoading)
14 | // 올바르지 못한 예: compose(withLoading('로딩중'), withLoadData)
15 | export const ComponentWithBoth = withLoadingAndLoadData(Component);
16 | // 혹은 compose(withLoadData, withLoading('로딩중'))(Component);
17 |
--------------------------------------------------------------------------------
/src/08/components/main/CoinOverview.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 |
3 | import Heading from '../../../doit-ui/Heading';
4 | import InlineList from '../../../doit-ui/InlineList';
5 |
6 | import CoinDashlet from './CoinDashlet';
7 |
8 | class CoinOverview extends PureComponent {
9 | render() {
10 | return (
11 | 객체값: {String(Object.entries(objValue))}
14 | 필수값: {requiredStringValue}
15 |
9 | 페이지 로딩이 완료되었습니다.
10 | {content}
11 |
12 | );
13 | }
14 |
15 | export const withLoadData = lifecycle({
16 | state: { isLoading: true, content: '' },
17 | componentDidMount: function() {
18 | if (this.props.loadData) {
19 | this.props.loadData().then(content => this.setState({ isLoading: false, content }));
20 | }
21 | },
22 | });
23 |
24 | export const PageWithLoadData = withLoadData(Page);
25 | export const PageWithLoadDataAndLoading = compose(
26 | withLoadData,
27 | withLoading('서버 요청중'),
28 | )(Page);
29 |
--------------------------------------------------------------------------------
/src/01/RCFC.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class RCFC extends Component {
5 | constructor(props) {
6 | super(props);
7 |
8 | }
9 |
10 | componentWillMount() {
11 |
12 | }
13 |
14 | componentDidMount() {
15 |
16 | }
17 |
18 | componentWillReceiveProps(nextProps) {
19 |
20 | }
21 |
22 | shouldComponentUpdate(nextProps, nextState) {
23 |
24 | }
25 |
26 | componentWillUpdate(nextProps, nextState) {
27 |
28 | }
29 |
30 | componentDidUpdate(prevProps, prevState) {
31 |
32 | }
33 |
34 | componentWillUnmount() {
35 |
36 | }
37 |
38 | render() {
39 | return (
40 |
41 |
42 |
43 | );
44 | }
45 | }
46 |
47 | RCFC.propTypes = {
48 |
49 | };
50 |
51 | export default RCFC;
52 |
--------------------------------------------------------------------------------
/src/07/containers/SearchResultTableContainer.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import SearchResultTable from '../SearchResultTable';
3 |
4 | const mapStateToProps = state => {
5 | const { collection, searchFilter } = state;
6 | const hasFilter = Object.values(searchFilter).reduce((result, value) => result || Boolean(value), false);
7 | const { ids, entities } = collection;
8 | const items = ids
9 | .map(id => entities[id])
10 | .filter(
11 | entity =>
12 | !hasFilter ||
13 | Object.entries(searchFilter).reduce(
14 | (result, [key, value]) => result && (!value || `${entity[key]}` === `${value}`),
15 | true,
16 | ),
17 | );
18 |
19 | return { items };
20 | };
21 |
22 | export default connect(mapStateToProps)(SearchResultTable);
23 |
--------------------------------------------------------------------------------
/src/08/middlewares/routerEffects.js:
--------------------------------------------------------------------------------
1 | import { SET_LOCATION } from '../actions/routerActions';
2 | import { setFilter } from '../actions/searchFilterActions';
3 |
4 | function parse(qs) {
5 | const queryString = qs.substr(1);
6 | const chunks = queryString.split('&');
7 | return chunks
8 | .map((chunk) => chunk.split('='))
9 | .reduce((result, [ key, value ]) => ({
10 | ...result,
11 | [key]: value,
12 | }), {});
13 | }
14 |
15 | export default store => nextRunner => action => {
16 | const { type, payload } = action;
17 | const result = nextRunner(action);
18 | if (type === SET_LOCATION) {
19 | const { pathname, search } = payload.location;
20 | if (pathname === '/') {
21 | store.dispatch(setFilter(parse(search)));
22 | }
23 | }
24 | return result;
25 | }
26 |
--------------------------------------------------------------------------------
/src/stories/DoitUICardStory.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Text from '../doit-ui/Text';
5 | import Card from '../doit-ui/Card';
6 | import Spacing from '../doit-ui/Spacing';
7 |
8 | storiesOf('Doit-UI/Card', module)
9 | .addWithJSX('Card 예제', () => (
10 | 14 |
23 |
14 | 안녕하세요
15 | 안녕하세요
16 |
17 | ))
18 | .addWithJSX('isLoading 예제', () => (
19 |
20 | 안녕하세요
21 | 안녕하세요
22 |
23 | ));
24 |
--------------------------------------------------------------------------------
/src/03/CounterExample.jsx:
--------------------------------------------------------------------------------
1 | // src폴더안에 App.js을 연 다음 기존 내용을 모두 지우고 아래의 내용으로 작성해 보세요
2 | import React from 'react';
3 | import Counter from './03/Counter';
4 | import NewCounter from './03/NewCounter';
5 |
6 | class App extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = { count: 10 };
10 | this.resetCount = this.resetCount.bind(this);
11 | }
12 | resetCount() {
13 | this.setState(({ count }) => ({ count: count + 10 }));
14 | }
15 | render() {
16 | return (
17 |
18 |
22 | );
23 | }
24 | }
25 |
26 | export default App;
27 |
--------------------------------------------------------------------------------
/src/08/reducers/notificationReducer.js:
--------------------------------------------------------------------------------
1 | import {
2 | SHOW_NOTIFICATION,
3 | HIDE_NOTIFICATION,
4 | } from '../actions/notificationActions';
5 |
6 | const initState = {
7 | message: '',
8 | warning: false,
9 | showMessage: false,
10 | };
11 |
12 | export default (state = initState, action) => {
13 | const { type, payload } = action;
14 |
15 | switch (type) {
16 | case SHOW_NOTIFICATION: {
17 | const { message, warning } = payload;
18 | return {
19 | ...state,
20 | showMessage: true,
21 | message,
22 | warning,
23 | };
24 | }
25 | case HIDE_NOTIFICATION: {
26 | return {
27 | ...state,
28 | message: '',
29 | showMessage: false,
30 | };
31 | }
32 | default:
33 | return state;
34 | }
35 | };
36 |
--------------------------------------------------------------------------------
/src/03/OrderForm.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Input from './Input';
3 |
4 | class OrderForm extends React.PureComponent {
5 | constructor(props) {
6 | super(props);
7 | this.state = {};
8 | this.setValue = this.setValue.bind(this);
9 | }
10 | setValue(name, value) {
11 | this.setState({ [name]: value });
12 | }
13 | render() {
14 | return (
15 |
21 | );
22 | }
23 | }
24 | export default OrderForm;
25 |
--------------------------------------------------------------------------------
/src/08/components/AppLayout.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles, css, withStylesPropTypes } from '../../doit-ui/withStyles';
4 | import AppNav, { HEIGHT } from './AppNav';
5 |
6 | class AppLayout extends PureComponent {
7 | render() {
8 | const { children, styles } = this.props;
9 | return (
10 |
11 |
14 | );
15 | }
16 | }
17 |
18 | AppLayout.propTypes = {
19 | ...withStylesPropTypes,
20 | children: PropTypes.node,
21 | };
22 |
23 | export default withStyles(({ unit }) => ({
24 | wrapper: {
25 | marginTop: HEIGHT,
26 | },
27 | body: {
28 | padding: unit * 4,
29 | },
30 | }))(AppLayout);
31 |
--------------------------------------------------------------------------------
/src/07/AdvReduxApp08.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { Provider } from 'react-redux';
3 | import configureStore from './configureStore';
4 |
5 | import ContainerComponent from './containers/ContainerComponent';
6 | import PresentationComponent from './PresentationComponent';
7 | import DispatchContainer03 from './containers/DispatchContainer03';
8 |
9 | class AdvReduxApp extends PureComponent {
10 | store = configureStore({ loading: false });
11 |
12 | render() {
13 | return (
14 | {children}
13 | 17 | 데이터 컴포넌트:
19 | 최종 액션 데이터 컴포넌트:
21 | 현재 카운트: {this.state.count}
22 |
28 | 버튼 밖으로 커서가 움직이면 0으로 초기화 됩니다.
29 |
30 | );
31 | }
32 | }
33 |
34 | export default Counter3;
35 |
--------------------------------------------------------------------------------
/src/08/containers/RouterStateContainer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { setLocation } from '../actions/routerActions';
5 | import { withRouter } from 'react-router';
6 | import compose from 'recompose/compose';
7 |
8 | class RouterState extends React.PureComponent {
9 | componentDidMount() {
10 | const { setLocation, location } = this.props;
11 | setLocation(location);
12 | }
13 | componentDidUpdate() {
14 | const { setLocation, location } = this.props;
15 | setLocation(location);
16 | }
17 | render() {
18 | return null;
19 | }
20 | }
21 |
22 | RouterState.propTypes = {
23 | setLocation: PropTypes.func,
24 | location: PropTypes.object,
25 | };
26 |
27 | export default compose(connect(null, { setLocation }), withRouter)(RouterState);
28 |
--------------------------------------------------------------------------------
/src/06/HomePageWithProvider.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import LoadingProvider from './LoadingProvider';
3 | import ButtonWithLoadingContext from './ButtonWithLoadingContext';
4 | import Button from '../04/Button';
5 |
6 | function RowBComponent() {
7 | return ;
8 | }
9 |
10 | function RowCComponent() {
11 | return
18 | 정말로 삭제 하시겠습니까?
19 |
20 |
21 |
22 |
16 | {message1}
17 | {message2}
18 |
19 | );
20 | }
21 | }
22 |
23 | DefaultPropsComponent.propTypes = {
24 | boolValue: PropTypes.bool,
25 | boolValueWithoutDefault: PropTypes.bool,
26 | };
27 |
28 | // 기본값을 선언하는 예제
29 | DefaultPropsComponent.defaultProps = {
30 | boolValue: false,
31 | };
32 |
33 | export default DefaultPropsComponent;
34 |
--------------------------------------------------------------------------------
/src/03/ForceUpdateExample.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class ForceUpdateExample extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | // 상태 정의
7 | this.loading = true;
8 | this.formData = 'no data';
9 | // 이후 콜백 함수를 다룰때 bind를 선언하는 부분에 대해 다룹니다
10 | this.handleData = this.handleData.bind(this);
11 | // 생성 후 4초 후에 handleData를 호출합니다.
12 | setTimeout(this.handleData, 4000);
13 | }
14 | handleData() {
15 | const data = 'new data';
16 | // 상태 변경
17 | this.loading = false;
18 | this.formData = data + this.formData;
19 | this.forceUpdate();
20 | }
21 | render() {
22 | return (
23 |
24 | {/* 상태 데이터는 this.state로 접근 가능합니다. */}
25 | 로딩중: {String(this.loading)}
26 | 결과: {this.formData}
27 |
28 | );
29 | }
30 | }
31 |
32 | export default ForceUpdateExample;
33 |
--------------------------------------------------------------------------------
/src/sass/components/_materialbox.scss:
--------------------------------------------------------------------------------
1 | .materialboxed {
2 | &:hover {
3 | &:not(.active) {
4 | opacity: .8;
5 | }
6 | }
7 |
8 | display: block;
9 | cursor: zoom-in;
10 | position: relative;
11 | transition: opacity .4s;
12 | -webkit-backface-visibility: hidden;
13 |
14 | &.active {
15 | cursor: zoom-out;
16 | }
17 | }
18 |
19 | #materialbox-overlay {
20 | position:fixed;
21 | top: 0;
22 | right: 0;
23 | bottom: 0;
24 | left: 0;
25 | background-color: #292929;
26 | z-index: 1000;
27 | will-change: opacity;
28 | }
29 |
30 | .materialbox-caption {
31 | position: fixed;
32 | display: none;
33 | color: #fff;
34 | line-height: 50px;
35 | bottom: 0;
36 | left: 0;
37 | width: 100%;
38 | text-align: center;
39 | padding: 0% 15%;
40 | height: 50px;
41 | z-index: 1000;
42 | -webkit-font-smoothing: antialiased;
43 | }
--------------------------------------------------------------------------------
/src/02/02-2.js:
--------------------------------------------------------------------------------
1 | // ES5 문법
2 | var string1 = '안녕하세요';
3 | var string2 = '반갑습니다';
4 | var greeting = string1 + ' ' + string2;
5 | var product = { name: '도서', price: '4200원' };
6 | var message = '제품' + product.name + '의 가격은' + product.price + '입니다';
7 | var multiLine = '문자열1\n문자열2';
8 | var value1 = 1;
9 | var value2 = 2;
10 | var boolValue = false;
11 | var operator1 = '곱셈값은 ' + value1 * value2 + '입니다. ';
12 | var operator2 = '불리언값은 ' + (boolValue ? '참' : '거짓') + '입니다. ';
13 |
14 | //ES6 문법
15 | var string1 = '안녕하세요';
16 | var string2 = '반갑습니다';
17 | var greeting = `${string1} ${string2}`;
18 |
19 | var product = { name: '도서', price: '4200원' };
20 | var message = `제품 ${product.name}의 가격은 ${product.price}입니다`;
21 | var multiLine = `문자열1
22 | 문자열2`;
23 | var value1 = 1;
24 | var value2 = 2;
25 | var boolValue = false;
26 | var operator1 = `곱셈값은 ${value1 * value2}입니다.`;
27 | var operator2 = `불리언값은 ${boolValue ? '참' : '거짓'}입니다.`;
28 |
--------------------------------------------------------------------------------
/src/07/reducers/collectionReducer.js:
--------------------------------------------------------------------------------
1 | import { SET_COLLECTION, SET_AGE } from '../actions/collectionActions';
2 |
3 | const initState = {
4 | ids: [],
5 | entities: {},
6 | };
7 |
8 | export default (state = initState, action) => {
9 | const { type, payload } = action;
10 |
11 | switch (type) {
12 | case SET_COLLECTION: {
13 | const ids = payload.map(entity => entity['id']);
14 | const entities = payload.reduce((finalEntities, entity) => ({
15 | ...finalEntities,
16 | [entity['id']]: entity,
17 | }), {});
18 | return { ...state, ids, entities };
19 | }
20 | case SET_AGE: {
21 | const { id, age } = payload;
22 | return {
23 | ...state,
24 | entities: {
25 | ...state.entities,
26 | [id]: { ...state.entities[id], age },
27 | },
28 | };
29 | }
30 | default:
31 | return state;
32 | }
33 | };
34 |
--------------------------------------------------------------------------------
/src/03/ScrollSpy.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default class ScrollSpy extends React.PureComponent {
4 | constructor(props) {
5 | super(props);
6 | this.setRef = this.setRef.bind(this);
7 | this.checkPosition = this.checkPosition.bind(this);
8 | }
9 | setRef(ref) {
10 | this.ref = ref;
11 | }
12 |
13 | checkPosition() {
14 | if (!this.ref) {
15 | return;
16 | }
17 |
18 | if (this.ref.getBoundingClientRect().top < window.innerHeight) {
19 | console.log('enter');
20 | } else {
21 | console.log('exit');
22 | }
23 | }
24 |
25 | componentDidMount() {
26 | window.addEventListener('scroll', this.checkPosition);
27 | this.checkPosition();
28 | }
29 |
30 | componentWillUnmount() {
31 | window.removeEventListener('scroll', this.checkPosition);
32 | }
33 |
34 | render() {
35 | return ;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/08/containers/main/TransactionPaginationContainer.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import TransactionPagination from '../../components/main/TransactionPagination';
3 | import { requestTransactionList } from '../../actions/transactionPackActions';
4 | import {
5 | paginationSelector,
6 | transactionListLoadingStateSelector,
7 | } from '../../selectors/transactionSelectors';
8 |
9 | const mapStateToProps = state => {
10 | const { pagination, loading, ids } = state.transactions;
11 | const { number, size } = pagination;
12 |
13 | return {
14 | searchParams: state.searchFilter.params,
15 | hasNext: ids.length === size,
16 | loading: transactionListLoadingStateSelector(state),
17 | pageNumber: paginationSelector(state).number || 1,
18 | };
19 | };
20 | const mapDispatchToProps = {
21 | requestTransactionList,
22 | };
23 |
24 | export default connect(mapStateToProps, mapDispatchToProps)(TransactionPagination);
25 |
--------------------------------------------------------------------------------
/src/stories/DoitUISpacingStory.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 | import Spacing from '../doit-ui/Spacing';
4 | import { css } from '../doit-ui/withStyles';
5 |
6 | function RedBox({ children }) {
7 | return {children}
;
8 | }
9 |
10 | storiesOf('Doit-UI/Spacing', module).addWithJSX('기본 설정', () => (
11 | | 아이디 | 11 |이름 | 12 |나이 | 13 |
| {id} | 17 |{name} | 18 |{age} | 19 |
11 |
12 | {children}
13 |
14 |
15 | );
16 | }
17 | }
18 |
19 | Card.propTypes = {
20 | ...spacingPropTypes,
21 | ...withStylesPropTypes,
22 | children: PropTypes.node,
23 | };
24 |
25 | export default withStyles(({ depth, unit, color }) => ({
26 | wrapper: {
27 | ...depth.level1,
28 | borderRadius: unit,
29 | backgroundColor: color.white,
30 | display: 'flex',
31 | overflow: 'hidden',
32 | marginBottom: unit * 4,
33 | },
34 | }))(Card);
35 |
--------------------------------------------------------------------------------
/src/sass/components/forms/_file-input.scss:
--------------------------------------------------------------------------------
1 | /* File Input
2 | ========================================================================== */
3 |
4 | .file-field {
5 | position: relative;
6 |
7 | .file-path-wrapper {
8 | overflow: hidden;
9 | padding-left: 10px;
10 | }
11 |
12 | input.file-path { width: 100%; }
13 |
14 | .btn {
15 | float: left;
16 | height: $input-height;
17 | line-height: $input-height;
18 | }
19 |
20 | span {
21 | cursor: pointer;
22 | }
23 |
24 | input[type=file] {
25 |
26 | // Needed to override webkit button
27 | &::-webkit-file-upload-button {
28 | display: none;
29 | }
30 |
31 | position: absolute;
32 | top: 0;
33 | right: 0;
34 | left: 0;
35 | bottom: 0;
36 | width: 100%;
37 | margin: 0;
38 | padding: 0;
39 | font-size: 20px;
40 | cursor: pointer;
41 | opacity: 0;
42 | filter: alpha(opacity=0);
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/03/NewCounter.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class NewCounter extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {};
7 | this.increaseCount = this.increaseCount.bind(this);
8 | }
9 |
10 | static getDerivedStateFromProps(props, state) {
11 | const { count } = props;
12 | return {
13 | // 프로퍼티에서 전달된 count값을 보관한다
14 | count,
15 | newCount:
16 | count === state.count
17 | ? // count 프로퍼티가 변경되지 않으면 기존 state값으로 설정한다.
18 | state.newCount
19 | : // 초기 카운트값을 변경된 프로퍼티에서 값으로 설정한다.
20 | count,
21 | };
22 | }
23 |
24 | increaseCount() {
25 | this.setState(({ newCount }) => ({ newCount: newCount + 1 }));
26 | }
27 | render() {
28 | return (
29 |
30 | 현재 카운트: {this.state.newCount}
31 |
32 |
33 | );
34 | }
35 | }
36 |
37 | export default NewCounter;
38 |
--------------------------------------------------------------------------------
/src/03/ChildComponent.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class ChildComponent extends React.Component {
5 | render() {
6 | const {
7 | boolValue,
8 | numValue,
9 | arrayValue,
10 | objValue,
11 | nodeValue,
12 | funcValue,
13 | } = this.props;
14 |
15 | return (
16 |
17 | 불리언값: {boolValue}
18 | 숫자값: {numValue}
19 | 배열값: {arrayValue}
20 | 객 체값: {String(objValue)}
21 | 노드값: {nodeValue}
22 | 함수값: {String(funcValue)}
23 |
24 | );
25 | }
26 | }
27 |
28 | ChildComponent.propTypes = {
29 | boolValue: PropTypes.bool,
30 | numValue: PropTypes.number,
31 | arrayValue: PropTypes.arrayOf(PropTypes.number),
32 | objValue: PropTypes.object,
33 | nodeValue: PropTypes.node,
34 | funcValue: PropTypes.func,
35 | }
36 |
37 | export default ChildComponent;
38 |
--------------------------------------------------------------------------------
/src/02/02-5.js:
--------------------------------------------------------------------------------
1 | function add(first, second) {
2 | return first + second;
3 | }
4 |
5 | var add = function(first, second) {
6 | return first + second;
7 | };
8 |
9 | var add = function add(first, second) {
10 | return first + second;
11 | };
12 |
13 | // this scope를 전달한 예
14 | var self = this;
15 | var addThis = function(first, second) {
16 | return self.value + first + second;
17 | };
18 |
19 | var addThis = (first, second) => first + second;
20 |
21 | function addNumber(num) {
22 | return function(value) {
23 | return num + value;
24 | };
25 | }
26 | // 화살표 함수로 변환한 예
27 | var addNumber = num => value => num + value;
28 |
29 | var addTwo = addNumber(2);
30 | var result = addTwo(4); // 6
31 |
32 | // bind함수를 통해 this scope를 전달한 예
33 | class MyClass {
34 | value = 10;
35 | constructor() {
36 | var addThis2 = function(first, second) {
37 | return this.value + first + second;
38 | }.bind(this);
39 | var addThis3 = (first, second) => this.value + first + second;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/02/throttle.js:
--------------------------------------------------------------------------------
1 | export function throttle(func, delay) {
2 | let lastFunc;
3 | let lastRan;
4 | return function(...args) {
5 | const context = this;
6 | if (!lastRan) {
7 | func.call(context, ...args);
8 | lastRan = Date.now();
9 | } else {
10 | if (lastFunc) clearTimeout(lastFunc);
11 | lastFunc = setTimeout(function() {
12 | if ((Date.now() - lastRan) >= delay) {
13 | func.call(context, ...args);
14 | lastRan = Date.now();
15 | }
16 | }, delay - (Date.now() - lastRan));
17 | }
18 | }
19 | }
20 |
21 | var checkPosition = () => {
22 | const offset = 500;
23 | const currentScrollPosition = window.pageYOffset;
24 | const pageBottomPosition = document.body.offsetHeight - window.innerHeight - offset;
25 | if (currentScrollPosition >= pageBottomPosition) {
26 | // fetch('/page/next');
27 | console.log('다음 페이지 로딩');
28 | }
29 | };
30 | var infiniteScroll = throttle(checkPosition, 300);
31 | window.addEventListener('scroll', infiniteScroll);
32 |
--------------------------------------------------------------------------------
/src/06/CreateMemberModalContent.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { Consumer } from './ModalContext';
3 | import Button from '../04/Button';
4 | import Text from '../04/Text';
5 | import Input from '../03/Input';
6 |
7 | class CreateMemberModalContent extends PureComponent {
8 | render() {
9 | return (
10 |
13 |
28 | )}
29 |
14 | 회원가입
15 |
25 |
26 |
27 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
10 |
16 | );
17 | }
18 | }
19 |
20 | Modal.propTypes = {
21 | children: PropTypes.node,
22 | };
23 |
24 | export default withStyles(({ color, unit }) => ({
25 | overlay: {
26 | position: 'fixed',
27 | zIndex: 9999,
28 | top: 0,
29 | left: 0,
30 | width: '100%',
31 | height: '100%',
32 | backgroundColor: 'rgba(0, 0, 0, .5)',
33 | },
34 | wrapper: {
35 | verticalAlign: 'middle',
36 | },
37 | container: {
38 | margin: '40px auto 0px',
39 | padding: unit * 4,
40 | backgroundColor: color.white,
41 | width: 400,
42 | },
43 | }))(Modal);
44 |
--------------------------------------------------------------------------------
/src/06/ButtonWithNewConsumer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Button from '../04/Button';
4 | import { Consumer } from './LoadingProviderWithNewContext';
5 |
6 | function ButtonWithNewConsumer({ label }) {
7 | return (
8 |
11 |
15 |
12 | {children}
13 |
14 |
11 |
19 | );
20 | }
21 | }
22 |
23 | Modal.propTypes = {
24 | children: PropTypes.node,
25 | };
26 |
27 | export default withStyles(() => ({
28 | overlay: {
29 | position: 'fixed',
30 | zIndex: 9999,
31 | top: 0,
32 | left: 0,
33 | width: '100%',
34 | height: '100%',
35 | backgroundColor: 'rgba(0, 0, 0, .5)',
36 | },
37 | wrapper: {
38 | verticalAlign: 'middle',
39 | },
40 | container: {
41 | margin: '40px auto 0px',
42 | width: 700,
43 | },
44 | }))(Modal);
45 |
--------------------------------------------------------------------------------
/src/05/withState.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import withState from 'recompose/withState';
3 | import withHandlers from 'recompose/withHandlers';
4 | import Button from '../04/Button';
5 |
6 | export const withCountState = withState('count', 'setCount', 0);
7 | export const withCountHandlers = withHandlers({
8 | increaseCount: ({ setCount }) => () => setCount(value => value + 1),
9 | decreaseCount: ({ setCount }) => () => setCount(value => value - 1),
10 | resetCount: ({ setCount }) => () => setCount(0),
11 | });
12 |
13 | function Counter({ count, setCount }) {
14 | const increaseCount = () => setCount(value => value + 1);
15 |
16 | return (
17 |
12 |
18 |
13 |
14 | {children}
15 |
16 |
17 |
18 | 현재 카운트: {count}
19 |
20 |
21 | );
22 | }
23 |
24 | function Counter2({ count, increaseCount }) {
25 | return (
26 |
27 | 현재 카운트: {count}
28 |
29 |
30 | );
31 | }
32 |
33 | export const CounterWithCountState = withCountState(Counter);
34 | export const CounterWithCountHandler = withCountState(withCountHandlers(Counter2));
35 |
--------------------------------------------------------------------------------
/src/04/Theme.js:
--------------------------------------------------------------------------------
1 | export const LARGE_AND_ABOVE = 'largeAndAbove';
2 | const BREAKPOINT_NAMES = {
3 | LARGE: 'large',
4 | MEDIUM: 'medium',
5 | SMALL: 'small',
6 | };
7 |
8 | const breakpoints = {
9 | [BREAKPOINT_NAMES.LARGE]: 1128,
10 | [BREAKPOINT_NAMES.MEDIUM]: 744,
11 | [BREAKPOINT_NAMES.SMALL]: 327,
12 | };
13 |
14 | const responsive = {
15 | [LARGE_AND_ABOVE]: `@media (min-width: ${breakpoints[BREAKPOINT_NAMES.LARGE]}px)`,
16 | [BREAKPOINT_NAMES.SMALL]: `@media (max-width: ${breakpoints[BREAKPOINT_NAMES.MEDIUM] - 1}px)`,
17 | print: '@media print',
18 | };
19 |
20 | export default {
21 | // 색상
22 | color: {
23 | primary: '#03a9f4', // 주 색상
24 | secondary: '#795548', // 부 색상
25 | white: '#FFFFFF',
26 | gray: '#CCCCCC',
27 | default: '#999999', // 기본 문자 색상
28 | error: '#FF0000', // 오류 색상
29 | },
30 | // 폰트 사이즈
31 | size: {
32 | xg: 24,
33 | lg: 18,
34 | md: 14,
35 | sm: 12,
36 | xs: 10,
37 | },
38 | lineHeight: {
39 | xg: '60px',
40 | lg: '54px',
41 | md: '36px',
42 | sm: '24px',
43 | xs: '18px',
44 | },
45 | // 길이 단위
46 | unit: 4,
47 | // 반응형 미디어 속성
48 | responsive,
49 | };
50 |
--------------------------------------------------------------------------------
/src/05/withError.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import withStyles, { css } from '../04/withStyles';
3 |
4 | // TODO: withError HoC만들기
5 | // hasError, errorMessage
6 | // hasError true => errorMessage 페인트
7 | // 만약 errorMessage가 없으면 defaultMessage를 뿌려주기 (defaultProps)
8 | // 컴포넌트 원래대로 그리고 대신 그 밑에 에러메세지를 찍어주기
9 |
10 | export default function(defaultMessage) {
11 | return WrappedComponent => {
12 | const { displayName, name: componentName } = WrappedComponent;
13 | const wrappedComponentName = displayName || componentName;
14 |
15 | function ComponentWithError({ hasError, errorMessage, styles, ...props }) {
16 | return (
17 | {errorMessage}
}
20 | 32 | 데이터 컴포넌트:
40 | {/* 상태 데이터는 this.state로 접근 가능합니다. */}
41 | 로딩중: {String(this.state.loading)}
42 | 결과: {this.state.formData}
43 |
44 | );
45 | }
46 | }
47 |
48 | export default StateExample;
49 |
--------------------------------------------------------------------------------
/src/doit-ui/Spacing.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { css } from './withStyles';
4 | import { unit } from './Theme';
5 |
6 | export const propTypes = {
7 | top: PropTypes.number,
8 | left: PropTypes.number,
9 | right: PropTypes.number,
10 | bottom: PropTypes.number,
11 | vertical: PropTypes.number,
12 | horizontal: PropTypes.number
13 | };
14 |
15 | class Spacing extends PureComponent {
16 | render() {
17 | const {
18 | children,
19 | top,
20 | left,
21 | right,
22 | bottom,
23 | vertical,
24 | horizontal
25 | } = this.props;
26 | const computedTop = top ? top : vertical;
27 | const computedBottom = bottom ? bottom : vertical;
28 | const computedLeft = left ? left : horizontal;
29 | const computedRight = right ? right : horizontal;
30 |
31 | const computedStyles = {
32 | flex: 1,
33 | ...(computedTop && { marginTop: computedTop * unit }),
34 | ...(computedBottom && { marginBottom: computedBottom * unit }),
35 | ...(computedLeft && { marginLeft: computedLeft * unit }),
36 | ...(computedRight && { marginRight: computedRight * unit })
37 | };
38 |
39 | return {children}
;
40 | }
41 | }
42 |
43 | Spacing.propTypes = propTypes;
44 |
45 | export default Spacing;
46 |
--------------------------------------------------------------------------------
/src/07/ReduxApp03.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { Provider } from 'react-redux';
3 | import { createStore } from 'redux';
4 |
5 | const reducer = (state, action) => {
6 | const { type, payload } = action;
7 | switch(type) {
8 | case 'SET_LOADING': {
9 | return {
10 | ...state,
11 | loading: payload,
12 | };
13 | }
14 | case 'RESET_LOADING': {
15 | return { ...state, loading: false };
16 | }
17 | case 'SET_USER': {
18 | return {
19 | ...state,
20 | user: payload,
21 | };
22 | }
23 | default:
24 | return state;
25 | }
26 | };
27 |
28 | class ReduxApp extends PureComponent {
29 | store = createStore(
30 | reducer,
31 | { loading: false, name: '두잇 리액트' },
32 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
33 | );
34 |
35 | componentDidMount() {
36 | this.store.dispatch({
37 | type: 'SET_LOADING',
38 | payload: true,
39 | });
40 | this.store.dispatch({
41 | type: 'RESET_LOADING'
42 | });
43 | this.store.dispatch({
44 | type: 'SET_USER',
45 | payload: { name: 'Park', age: 20 },
46 | });
47 | }
48 |
49 | render() {
50 | return (
51 |
13 |
21 | );
22 | }
23 | }
24 |
25 | Toast.propTypes = {
26 | ...withStylesPropTypes,
27 | warning: PropTypes.bool,
28 | message: PropTypes.string,
29 | };
30 |
31 | export default withStyles(({ depth, unit, color }) => ({
32 | overlay: {
33 | position: 'fixed',
34 | bottom: 0,
35 | right: 0,
36 | margin: unit * 4,
37 | },
38 | wrapper: {
39 | ...depth.level1,
40 | borderRadius: unit,
41 | backgroundColor: color.secondary,
42 | paddingTop: unit * 2,
43 | paddingBottom: unit * 2,
44 | paddingRight: unit * 4,
45 | paddingLeft: unit * 4,
46 | marginBottom: unit * 4,
47 | },
48 | warning: {
49 | backgroundColor: color.error,
50 | },
51 | }))(Toast);
52 |
--------------------------------------------------------------------------------
/src/06/createModalProvider.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import Modal from './Modal';
3 | import { Provider } from './ModalContext';
4 |
5 | export default function createModalProvider(ContentMap = {}) {
6 | return class ModalProvider extends PureComponent {
7 | constructor(props) {
8 | super(props);
9 |
10 | this.state = { showModal: false };
11 | this.handleClose = this.handleClose.bind(this);
12 | this.handleOpen = this.handleOpen.bind(this);
13 | }
14 |
15 | handleOpen(contentId, modalProps) {
16 | this.contentId = contentId;
17 | this.modalProps = modalProps;
18 | this.setState({ showModal: true });
19 | }
20 |
21 | handleClose() {
22 | this.setState({ showModal: false });
23 | }
24 |
25 | render() {
26 | const { children } = this.props;
27 | const { showModal } = this.state;
28 | const ModalContent = ContentMap[this.contentId];
29 |
30 | return (
31 |
14 |
15 |
16 | {message}
17 |
18 |
19 |
20 | 33 | 데이터 컴포넌트:
35 | 액션 데이터 컴포넌트:
8 | Xlarge
9 | Xlarge primary
10 | Xlarge secondary
11 | Xlarge bold
12 | Xlarge light
13 |
14 |Large
15 | Large primary
16 | Large secondary
17 | Large bold
18 | Large light
19 |
20 |default
21 | default primary
22 | default secondary
23 | default bold
24 | default light
25 |
26 |small
27 | small primary
28 | small secondary
29 | Large bold
30 | Large light
31 |
32 |xsmall
33 | small primary
34 | small secondary
35 | Large bold
36 | Large light
37 |
38 |
39 | ));
40 |
--------------------------------------------------------------------------------
/src/stories/DoitUIInlineListStory.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 | import InlineList from '../doit-ui/InlineList';
4 | import { css } from '../doit-ui/withStyles';
5 |
6 | function RedBox({ children }) {
7 | return (
8 | 14 |
20 |
26 |
32 |
38 |
9 | {children}
10 |
11 | )
12 | }
13 |
14 | storiesOf('Doit-UI/InlineList', module)
15 | .addWithJSX('기본 설정', () => (
16 |
44 | 정말로 삭제 하시겠습니까?
45 |
46 |
47 |
48 |
50 |
53 | );
54 | }
55 | }
56 |
57 | HomePageComponent.childContextTypes = {
58 | loading: PropTypes.bool,
59 | setLoading: PropTypes.func,
60 | };
61 |
62 | export default HomePageComponent;
63 |
--------------------------------------------------------------------------------
/src/07/SearchFilterReduxApp.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { Provider } from 'react-redux';
3 | import configureStore from './configureStore';
4 | import ContainerComponent from './containers/ContainerComponent';
5 | import PresentationComponent from './PresentationComponent';
6 | import DispatchContainer from './containers/DispatchContainer03';
7 | import SearchFilterInputContainer from './containers/SearchFilterInputContainer';
8 | import SearchResetButtonContainer from './containers/SearchResetButtonContainer';
9 | import SearchResultTableContainer from './containers/SearchResultTableContainer';
10 |
11 | class SearchFilterReduxApp extends PureComponent {
12 | store = configureStore({ loading: false });
13 |
14 | render() {
15 | return (
16 | 27 | 데이터용 컴포넌트:
29 |
10 |
11 |
12 |
14 |
15 |
16 |
18 |
19 |
20 |
22 |
23 |
24 |
26 |
27 |
28 |
30 |
31 |
32 |
34 |
35 |
36 |
38 |
39 | ))
40 | .addWithJSX('large 예제', () => )
41 | .addWithJSX('xlarge 예제', () => )
42 | .addWithJSX('small 예제', () => )
43 | .addWithJSX('xsmall 예제', () => )
44 | .addWithJSX('primary 예제', () => )
45 | .addWithJSX('secondary 예제', () => )
46 | .addWithJSX('primary와 large 함께 쓰는 예제', () => );
47 |
--------------------------------------------------------------------------------
/src/08/components/main/TransactionPagination.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import Button from '../../../doit-ui/Button';
4 | import InlineList from '../../../doit-ui/InlineList';
5 |
6 | class TransactionPagination extends PureComponent {
7 | constructor(props) {
8 | super(props);
9 | this.handleNextPress = this.handleNextPress.bind(this);
10 | this.handlePrevPress = this.handlePrevPress.bind(this);
11 | }
12 | handleNextPress() {
13 | const { requestTransactionList, searchParams, pageNumber } = this.props;
14 | requestTransactionList(searchParams, pageNumber + 1);
15 | }
16 | handlePrevPress() {
17 | const { requestTransactionList, searchParams, pageNumber } = this.props;
18 | requestTransactionList(searchParams, pageNumber - 1);
19 | }
20 | render() {
21 | const { loading, pageNumber, hasNext } = this.props;
22 | const prevDisabled = loading || pageNumber <= 1;
23 | const nextDisabled = loading || !hasNext;
24 | return (
25 |
11 |
12 | 기본 버튼
13 |
14 |
15 |
16 | xlarge 버튼
17 |
18 |
19 |
20 | large 버튼
21 |
22 |
23 |
24 | small 버튼
25 |
26 |
27 |
28 | xsmall 버튼
29 |
30 |
31 |
32 | primary 버튼
33 |
34 |
35 |
36 | secondary 버튼
37 |
38 |
16 |
29 | );
30 | }
31 | }
32 |
33 | AppNav.propTypes = {
34 | ...withStylesPropTypes,
35 | };
36 |
37 | export default withStyles(({ color, depth, unit }) => ({
38 | wrapper: {
39 | ...depth.level1,
40 | display: 'flex',
41 | flexDirection: 'column',
42 | justifyContent: 'center',
43 | position: 'fixed',
44 | top: 0,
45 | left: 0,
46 | width: '100%',
47 | height: HEIGHT - 4,
48 | backgroundColor: color.primary,
49 | },
50 | container: {
51 | display: 'flex',
52 | justifyContent: 'space-between',
53 | alignItems: 'center',
54 | paddingLeft: unit * 2,
55 | paddingRight: unit * 2,
56 | },
57 | }))(AppNav);
58 |
--------------------------------------------------------------------------------
/src/08/components/main/CoinDashlet.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import Heading from '../../../doit-ui/Heading';
4 | import Button from '../../../doit-ui/Button';
5 | import Card from '../../../doit-ui/Card';
6 | import InlineList from '../../../doit-ui/InlineList';
7 | import Text from '../../../doit-ui/Text';
8 | import { Consumer as Modal } from '../../../doit-ui/Modal/context';
9 | import { TRADE_COIN_MODAL } from '../../constants/modals';
10 |
11 | class CoinDashlet extends PureComponent {
12 | render() {
13 | const { name, priceLabel } = this.props;
14 | return (
15 |
17 |
18 | 두잇 코인 거래소
19 |
20 |
21 | {({ openModal }) => (
22 |
25 | )}
26 |
27 |
28 |
10 | //
11 | //
12 | //
14 | //
15 | //
16 | //
18 | //
19 | //
20 | //
22 | //
23 | //
24 | //
26 | //
27 | //
28 | //
30 | //
31 | //
32 | //
34 | //
35 | //
36 | //
38 | //
39 | // ))
40 | .addWithJSX('기본 설정', () => )
41 | .addWithJSX('large 예제', () => )
42 | .addWithJSX('xlarge 예제', () => )
43 | .addWithJSX('small 예제', () => )
44 | .addWithJSX('xsmall 예제', () => )
45 | .addWithJSX('primary 예제', () => )
46 | .addWithJSX('secondary 예제', () => )
47 | .addWithJSX('primary와 large 함께 쓰는 예제', () => (
48 |
51 | ));
52 |
--------------------------------------------------------------------------------
/src/04/CheckBox.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import withStyles, { css } from './withStyles';
4 |
5 | class CheckBox extends PureComponent {
6 | constructor(props) {
7 | super(props);
8 | this.setRef = this.setRef.bind(this);
9 | this.handleClick = this.handleClick.bind(this);
10 | }
11 | componentDidMount() {
12 | if (this.props.autoFocus) {
13 | this.ref.focus();
14 | }
15 | }
16 | handleClick(e) {
17 | const { name, onChange } = this.props;
18 | onChange(name, e.target.checked);
19 | }
20 | setRef(ref) {
21 | this.ref = ref;
22 | }
23 | render() {
24 | const {
25 | errorMessage,
26 | label,
27 | children,
28 | styles,
29 | checked,
30 | } = this.props;
31 | return (
32 |
49 | );
50 | }
51 | }
52 |
53 | CheckBox.propTypes = {
54 | name: PropTypes.string.isRequired,
55 | autoFocus: PropTypes.bool,
56 | checked: PropTypes.bool,
57 | onChange: PropTypes.func,
58 | };
59 | CheckBox.defaultProps = {
60 | autoFocus: false,
61 | checked: false,
62 | onChange: () => {},
63 | };
64 |
65 | export default withStyles(({ color, size }) => ({
66 | errorText: {
67 | fontSize: size.sm,
68 | color: color.error,
69 | },
70 | }))(CheckBox);
71 |
--------------------------------------------------------------------------------
/src/03/Input.jsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class Input extends PureComponent {
5 | constructor(props) {
6 | super(props);
7 | this.setRef = this.setRef.bind(this);
8 | this.handleChange = this.handleChange.bind(this);
9 | }
10 | handleChange(e) {
11 | const { name, onChange } = this.props;
12 | if (onChange) {
13 | onChange(name, e.target.value)
14 | }
15 | }
16 | componentDidMount() {
17 | if (this.props.autoFocus) {
18 | this.ref.focus();
19 | }
20 | }
21 | componentDidUpdate() {
22 | if (this.props.autoFocus) {
23 | this.ref.focus();
24 | }
25 | }
26 | setRef(ref) {
27 | this.ref = ref;
28 | }
29 | render() {
30 | const { errorMessage, label, name, value, type, onFocus } = this.props;
31 | return (
32 |
44 | );
45 | }
46 | }
47 |
48 | Input.propTypes = {
49 | type: PropTypes.oneOf(['text', 'number', 'price']),
50 | name: PropTypes.string.isRequired,
51 | value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
52 | errorMessage: PropTypes.string,
53 | label: PropTypes.string,
54 | onChange: PropTypes.func,
55 | onFocus: PropTypes.func,
56 | autoFocus: PropTypes.bool,
57 | };
58 | Input.defaultProps = {
59 | onChange: () => {},
60 | onFocus: () => {},
61 | autoFocus: false,
62 | type: 'text',
63 | };
64 |
65 | export default Input;
66 |
--------------------------------------------------------------------------------
/src/doit-ui/Theme.js:
--------------------------------------------------------------------------------
1 | export const LARGE_AND_ABOVE = 'largeAndAbove';
2 | const BREAKPOINT_NAMES = {
3 | LARGE: 'large',
4 | MEDIUM: 'medium',
5 | SMALL: 'small',
6 | };
7 |
8 | const breakpoints = {
9 | [BREAKPOINT_NAMES.LARGE]: 1128,
10 | [BREAKPOINT_NAMES.MEDIUM]: 744,
11 | [BREAKPOINT_NAMES.SMALL]: 327,
12 | };
13 |
14 | const responsive = {
15 | [LARGE_AND_ABOVE]: `@media (min-width: ${breakpoints[BREAKPOINT_NAMES.LARGE]}px)`,
16 | [BREAKPOINT_NAMES.SMALL]: `@media (max-width: ${breakpoints[BREAKPOINT_NAMES.MEDIUM] - 1}px)`,
17 | print: '@media print',
18 | };
19 | export const unit = 4;
20 |
21 | export default {
22 | // 색상
23 | color: {
24 | primary: '#2196F3', // 주 색상
25 | primaryDark: '#1976D2',
26 | secondary: '#009688', // 부 색상
27 | secondaryDark: '#00796b',
28 | white: '#FFFFFF',
29 | gray: '#9e9e9e',
30 | grayLight: '#eeeeee',
31 | grayDark: '#616161',
32 | border: 'rgba(0, 0, 0, .15)',
33 | default: '#333333', // 기본 문자 색상
34 | error: '#e51c23', // 오류 색상
35 | },
36 | // 폰트 사이즈
37 | size: {
38 | h1: 48,
39 | h2: 36,
40 | h3: 28,
41 | xg: 24,
42 | lg: 18,
43 | md: 14,
44 | sm: 12,
45 | xs: 10,
46 | },
47 | lineHeight: {
48 | xg: 1.6,
49 | lg: 1.6,
50 | md: 1.5,
51 | sm: 1.4,
52 | xs: 1.4,
53 | },
54 | fontWeight: {
55 | bold: 'bold',
56 | normal: 'normal',
57 | light: 300,
58 | },
59 | depth: {
60 | level1: {
61 | boxShadow: '0 2px 2px 0 rgba(0, 0, 0, 0.14)',
62 | },
63 | level2: {
64 | boxShadow: '0 4px 5px 0 rgba(0, 0, 0, 0.14)',
65 | },
66 | level3: {
67 | boxShadow: '0 8px 17px 12px rgba(0, 0, 0, 0.14)',
68 | },
69 | },
70 | // 길이 단위
71 | unit,
72 | // 반응형 미디어 속성
73 | responsive,
74 | };
75 |
--------------------------------------------------------------------------------
/src/08/middlewares/notificationEffects.js:
--------------------------------------------------------------------------------
1 | // import { SET_ERROR } from '../actions/transactionActions';
2 | import { KEY, LIFECYCLE } from 'redux-pack';
3 | // import { FETCH_TRANSACTION_LIST } from '../actions/transactionPackActions';
4 | import { SHOW_NOTIFICATION, showMessage, hideMessage } from '../actions/notificationActions';
5 | import { debounce } from '../../02/debounce';
6 |
7 | const debounceRunner = debounce(action => action(), 4000);
8 |
9 | // let prevHideCaller;
10 | export default store => nextRunner => action => {
11 | const { type, payload, meta } = action;
12 | const result = nextRunner(action);
13 | if (meta && meta.notification) {
14 | const { success, error } = meta.notification;
15 | if (success && meta[KEY.LIFECYCLE] === LIFECYCLE.SUCCESS) {
16 | store.dispatch(showMessage(success));
17 | } else if (error && meta[KEY.LIFECYCLE] === LIFECYCLE.FAILURE) {
18 | const { errorMessage } = payload.response ? payload.response.data : {};
19 | store.dispatch(showMessage(errorMessage || error, true));
20 | }
21 | // } else if (type === SET_ERROR) {
22 | // const { errorMessage } = payload;
23 | // store.dispatch(showMessage(errorMessage, true));
24 | // } else if (type === FETCH_TRANSACTION_LIST && meta[KEY.LIFECYCLE] === LIFECYCLE.FAILURE) {
25 | // const { errorMessage } = payload.response.data;
26 | // store.dispatch(showMessage(errorMessage, true));
27 | // } else if (type === FETCH_TRANSACTION_LIST && meta[KEY.LIFECYCLE] === LIFECYCLE.SUCCESS) {
28 | // const message = '거래 목록을 최신 정보로 업데이트하였습니다.';
29 | // store.dispatch(showMessage(message));
30 | } else if (type === SHOW_NOTIFICATION) {
31 | const hide = () => store.dispatch(hideMessage());
32 | // setTimeout(hide, 4000);
33 | debounceRunner(hide);
34 | }
35 | return result;
36 | };
37 |
--------------------------------------------------------------------------------
/src/sass/components/_modal.scss:
--------------------------------------------------------------------------------
1 | .modal {
2 | &:focus {
3 | outline: none;
4 | }
5 |
6 | @extend .z-depth-5;
7 |
8 | display: none;
9 | position: fixed;
10 | left: 0;
11 | right: 0;
12 | background-color: #fafafa;
13 | padding: 0;
14 | max-height: 70%;
15 | width: 55%;
16 | margin: auto;
17 | overflow-y: auto;
18 |
19 | border-radius: 2px;
20 | will-change: top, opacity;
21 |
22 | @media #{$medium-and-down} {
23 | width: 80%;
24 | }
25 |
26 | h1,h2,h3,h4 {
27 | margin-top: 0;
28 | }
29 |
30 | .modal-content {
31 | padding: 24px;
32 | }
33 | .modal-close {
34 | cursor: pointer;
35 | }
36 |
37 | .modal-footer {
38 | border-radius: 0 0 2px 2px;
39 | background-color: #fafafa;
40 | padding: 4px 6px;
41 | height: 56px;
42 | width: 100%;
43 | text-align: right;
44 |
45 | .btn, .btn-flat {
46 | margin: 6px 0;
47 | }
48 | }
49 | }
50 | .modal-overlay {
51 | position: fixed;
52 | z-index: 999;
53 | top: -25%;
54 | left: 0;
55 | bottom: 0;
56 | right: 0;
57 | height: 125%;
58 | width: 100%;
59 | background: #000;
60 | display: none;
61 |
62 | will-change: opacity;
63 | }
64 |
65 | // Modal with fixed action footer
66 | .modal.modal-fixed-footer {
67 | padding: 0;
68 | height: 70%;
69 |
70 | .modal-content {
71 | position: absolute;
72 | height: calc(100% - 56px);
73 | max-height: 100%;
74 | width: 100%;
75 | overflow-y: auto;
76 | }
77 |
78 | .modal-footer {
79 | border-top: 1px solid rgba(0,0,0,.1);
80 | position: absolute;
81 | bottom: 0;
82 | }
83 | }
84 |
85 | // Modal Bottom Sheet Style
86 | .modal.bottom-sheet {
87 | top: auto;
88 | bottom: -100%;
89 | margin: 0;
90 | width: 100%;
91 | max-height: 45%;
92 | border-radius: 0;
93 | will-change: bottom, opacity;
94 | }
95 |
--------------------------------------------------------------------------------