Category: Clone

Trello 클론 프로젝트 만들기 - 0

시작하기

프로젝트 일정관리 웹어플리케이션인 trello를 클론코딩 하도록 하겠습니다. 이 클론 코딩으로 styled-components, react, redux 그리고 dnd 등을 구현해볼수 있습니다.

프로젝트 설정

1
create-react-app trello-clone --typescript

프로젝트에 타입스크립트를 이용할 예정입니다.

1
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome @types/react-redux @types/react-router-dom @types/redux @types/styled-components @types/uuid immer react-redux react-router-dom redux redux-persist styled-components typesafe-actions typescript uuid

이후 상단의 패키지들을 설치합니다.
fontawesome 아이콘 svg 파일을 제공해줍니다
redux redux-persist 데이터 상태를 관리합니다.
react-router-dom 페이지네이션을 제공합니다.
uuid 고유아이디를 생성합니다.

tsconfig.json 파일내부에 "baseUrl": "src"을 추가해줍니다.

1
2
3
4
5
6
7
{
  "compilerOptions": {
    //...
    "baseUrl": "src"
  },
//...
}

Redux 설정

상태를 저장해줄 redux 설정을 하겠습니다.

참고
예를들면 src/store/reducers/index.tsx 이라면
src폴더 > store폴더 > reduccers > index.tsx파일의 코드를 나타냅니다.
src가 중복되서 사용되기 때문에 설명에서는 생략해서 작성하겠습니다.

store/reducers/index.ts
1
2
3
4
5
6
import { combineReducers } from "redux";

const rootReducer = combineReducers({ });

export type RootState = ReturnType<typeof rootReducer>
export default rootReducer;
store/index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { createStore, Store } from 'redux';
import rootReducer from './reducers';

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
    key: 'root',
    storage
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default () => {
    const isDev = process.env.NODE_ENV === 'development';
    const reduxDevTools = isDev && (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__();
    const store:Store = createStore(persistedReducer, reduxDevTools);
    const persistor = persistStore(store);
    return {store, persistor}
}

process.env.NODE_ENV는 환경변수로 이전의 환경변수 포스트를 통해서 자세하게 알아볼 수있습니다.
persisted 및 reducer설정을 해주도록합니다.

index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import Store from 'store/index';

const { persistor, store } = Store();

ReactDOM.render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

리덕스 설정을 적용시켜줍니다.

Router 설정

페이지이동이 가능하게 할 수 있도록 router를 설정하도록 하겠습니다.

index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//...
import { BrowserRouter } from 'react-router-dom';
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import Store from 'store/index';

const { persistor, store } = Store();

ReactDOM.render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </PersistGate>
//...

이것으로 설정이 완료되었습니다.

페이지 생성

trello 보드를 입력하는 페이지 및 각각의 보드로 들어가서 보이는 리스트 페이지로 페이지를 만들도록 하겠습니다.
그리고 각각에 해당하는 컴포넌트를 생성하겠습니다.

pages/BoardPage.tsx
1
2
3
4
5
6
7
8
9
import React from 'react';

const BoardPage:React.FC = () => {
    return <div>
        BoardPage
    </div>
}

export default BoardPage;

보드 컴포넌트를 생성시킬 페이지입니다.

pages/ListPage.tsx
1
2
3
4
5
6
7
8
9
import React from 'react';

const ListPage:React.FC = () => {
    return <div>
        ListPage
    </div>
}

export default ListPage;

리스트 컴포넌트를 생성시킬 페이지입니다.

pages/NotFound.tsx
1
2
3
4
5
6
7
import React from 'react';

const NotFound = () => {
    return <div>NotFound</div>
}

export default NotFound;

잘못된 url로 이동시 보일 페이지입니다.

App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import BoardPage from 'pages/BoardPage';
import ListPage from 'pages/ListPage';
import NotFound from 'pages/NotFound';

const App: React.FC = () => {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={BoardPage} />
        <Route exact path="/board/:id" component={ListPage} />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
}

export default App;

각각의 페이지 라우터를 설정해주도록 합니다.

Header 컴포넌트 생성

components/Header.tsx
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
    return <header>
        <Link to="/">
            <span>TRELLO CLONE</span>
        </Link>
    </header>
}
export default Header;
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import BoardPage from 'pages/BoardPage';
import ListPage from 'pages/ListPage';
import NotFound from 'pages/NotFound';
import Header from 'components/Header';

const App: React.FC = () => {
  return (
    <div>
      <Header />
      <Switch>
        <Route exact path="/" component={BoardPage} />
        <Route exact path="/board/:id" component={ListPage} />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
}

export default App;

Board 페이지 컴포넌트 생성

보드 생성과 보드리스트를 보여줄 컴포넌트를 생성합니다.

components/Boards/CreateBoardCard.tsx
1
2
3
4
5
6
7
8
import React from 'react';

const CreateBoardCard: React.FC = () => {
    return <div>
        <input type="text" placeholder="Create new board"/>
    </div>
}
export default CreateBoardCard;
components/Boards/BoardCard.tsx
1
2
3
4
5
6
7
8
import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';

const BoardCard: React.FC = () => {
    return <div><Link to={`/board/1234`}>보드</Link></div>
}
export default BoardCard;
pages/BoardPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import CreateBoardCard from 'components/Boards/CreateBoardCard';
import BoardCard from 'components/Boards/BoardCard';

const BoardPage:React.FC = () => {
    return <div>
        {[1,2,3,4].map((board: number) => <BoardCard key={board} />)}
        <CreateBoardCard />
    </div>
}

export default BoardPage;

List 페이지 컴포넌트 생성

보드를 선택하면 나오는 페이지의 리스트 및 리스트 내부 카드컴포넌트를 생성합니다.

components/Lists/CreateCard.tsx
1
2
3
4
5
6
7
8
9
import React from 'react';

const CreateCard: React.FC = () => {
    return <div>
        <input placeholder="Add create card" />
    </div>
}

export default CreateCard;
components/Lists/ListCard.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
import React from "react";

const ListCard: React.FC = () => {
  return (
    <li>
      <div>
        <input type="text" />
      </div>
    </li>
  );
};

export default ListCard;
components/Lists/CreateLists.tsx
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';

const CreateLists: React.FC = () => {
    return <div>
        <div>
            <input type="text" placeholder="Create lists" />
        </div>
    </div>
}

export default CreateLists;
components/Lists/Lists.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import ListCard from './ListCard';
import CreateCard from './CreateCard';

const Lists: React.FC = () => {
    return <div>
        <div>
            <div>
                <input type="text" />
            </div>
            <ul>
                {[1,2,3,4].map((card: number, i: number) => <ListCard key={number} />)}
            </ul>
            <CreateCard />
        </div>
    </div>
}

export default Lists;
pages/ListPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import Lists from 'components/Lists/Lists';
import CreateLists from 'components/Lists/CreateLists';

const ListPage:React.FC = () => {
    return (<section>
        <div>
            {[1,2,3,4].map((list: number) =>
                <Lists key={list} />)}
            <CreateLists />
        </div>
    </section>)
}

export default ListPage;

스타일 적용하기

아이콘 및 스타일을 적용하도록 하겠습니다.

App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import BoardPage from 'pages/BoardPage';
import ListPage from 'pages/ListPage';
import NotFound from 'pages/NotFound';
import Header from 'components/Header';
import styled from 'styled-components';

const AppStyle = styled.div`
  display:flex;
  flex-direction: column;
  height: 100vh;
`

const App: React.FC = () => {
  return (
    <AppStyle>
      <Header />
      <Switch>
        <Route exact path="/" component={BoardPage} />
        <Route exact path="/board/:id" component={ListPage} />
        <Route component={NotFound} />
      </Switch>
    </AppStyle>
  );
}

export default App;

Header 스타일 적용

components/Header.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React from 'react';
import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrello } from '@fortawesome/free-brands-svg-icons';
import { Link } from 'react-router-dom';

const HeaderStyle = styled.header`
    height: 60px;
    width: 100%;
    background-color: #026aa7;
    display: flex;
    align-items: center;
    justify-content: center;
`
const LinkStyle = styled(Link)`
    color: rgba(255,255,255,0.7);
    font-weight: bold;
    text-decoration: none;
    font-size: 24px;
    &:hover{
        color: rgba(255,255,255);
    }
    span{
        margin-left:10px;
    }
`
const Header = () => {
    return <HeaderStyle>
        <LinkStyle to="/">
            <FontAwesomeIcon icon={faTrello} size="lg" />
            <span>TRELLO CLONE</span>
        </LinkStyle>
    </HeaderStyle>
}
export default Header;

Board 스타일 적용하기

components/Boards/BoardStyle.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import styled from "styled-components";

export const BoardStyle = styled.div`
    width: calc(25% - 20px);
    height: 100px;
    margin: 10px;
    background-color: #026aa7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    transition: 0.2s;
    &:hover{
        transform: scale(1.05);
    }
`

CreateBoardCard와 BoardCard에 동일한 스타일을 하나의 파일로 만들고 import를 합니다

components/Boards/BoardCard.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { BoardStyle } from './BoardStyle';

const LinkStyle = styled(Link)`
    text-decoration: none;
    color: rgba(255,255,255,0.9);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
`

const BoardCard: React.FC = () => {
    return <BoardStyle><LinkStyle to={`/board/1234`}>보드</LinkStyle></BoardStyle>
}
export default BoardCard;
components/Boards/CreateBoardCard.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';
import styled from 'styled-components';
import { BoardStyle } from './BoardStyle';

const CreateBoardCardStyle = styled(BoardStyle)`
    background-color: rgba(9,30,66,.04);
    color: #333;
    font-weight: normal;
    &:hover{
        background-color: rgba(9,30,66,.1);
    }
`
const Input = styled.input`
    background-color: rgba(0,0,0,0);
    border: none;
    font-size: 14px;
    outline: none;
`

const CreateBoardCard: React.FC = () => {
    return <CreateBoardCardStyle>
        <Input type="text" placeholder="Create new board" />
    </CreateBoardCardStyle>
}
export default CreateBoardCard;
pages/BoardPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import styled from 'styled-components';
import CreateBoardCard from 'components/Boards/CreateBoardCard';
import BoardCard from 'components/Boards/BoardCard';

const BoardWrap = styled.section`
    width: 100%;
    display: flex;
    flex-wrap: wrap;
`

const BoardPage:React.FC = () => {
    return <BoardWrap>
        {[1,2,3,4].map((board: number) => <BoardCard key={board} />)}
        <CreateBoardCard />
    </BoardWrap>
}

export default BoardPage;

List 스타일 적용하기

components/Lists/CreateCard.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React from 'react';
import styled from 'styled-components';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";

const CreateCardWrapper = styled.div`
    position: relative;
    padding: 5px;
    box-sizing: border-box;
`

const Icon = styled.div`
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover{
        background-color: rgba(0,0,0,0.1);
    }
`

const Input = styled.input`
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    outline: none;
    border-radius: 4px;
    border: none;
`

const CreateCard: React.FC = () => {
    return <CreateCardWrapper>
        <Input type="text" placeholder="Add create card"/>
        <Icon>
            <FontAwesomeIcon icon={faPlus} size="sm" color="rgba(0,0,0,0.5)"/>
        </Icon>
    </CreateCardWrapper>
}

export default CreateCard;
components/Lists/ListCard.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React from "react";
import styled from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPen } from "@fortawesome/free-solid-svg-icons";

const ListCardStyle = styled.li`
    list-style: none;
    flex: 1 1 auto;
    margin-bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 4px;
    padding: 0 4px;
    z-index: 1;
    min-height: 0;
`;

const Icon = styled.div`
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    &:hover{
      background-color: rgba(0, 0, 0, 0.1);
    }
`;

const ListCardContent = styled.div`
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
    cursor: pointer;
    display: block;
    margin-bottom: 8px;
    max-width: 300px;
    min-height: 20px;
    position: relative;
    text-decoration: none;
    z-index: 0;
    padding: 8px;
    box-sizing: border-box;

    &:hover {
      background: rgba(0,0,0,0.02);
      ${Icon} {
        display: flex;
      };
    }
`;

const ListCardInput = styled.input`
  border: none;
  background: none;
  font-size: 14px;
  outline: none;
`

const ListCard: React.FC = () => {
  return (
    <ListCardStyle>
      <ListCardContent>
        <ListCardInput type="text"/>
        <Icon>
          <FontAwesomeIcon icon={faPen} size="sm" color="rgba(0,0,0,0.5)" />
        </Icon>
      </ListCardContent>
    </ListCardStyle>
  );
};

export default ListCard;
components/Lists/Lists.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React from 'react';
import styled from 'styled-components';
import ListCard from './ListCard';
import CreateCard from './CreateCard';

const ListsWrapper = styled.div`
    width: 272px;
    margin: 0 4px;
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
`

const ListsContent = styled.div`
    background-color: #ebecf0;
    border-radius: 3px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    position: relative;
    white-space: normal;
`

const ListsStyle = styled.ul`
   list-style: none;
   margin: 0;
   padding: 0;
`

const ListHeader = styled.input`
    background-color: rgba(255,255,255,0);
    border: 0 none;
    user-select: none;
    font-size: 14px;
    line-height: 18px;
    height: 18px;
    padding-left: 10px;
    font-weight: bold;
    outline: none;
`

const ListHeaderWrapper = styled.div`
    height: 40px;
    display: flex;
    align-items: center;
`

const Lists: React.FC = () => {
    return <ListsWrapper>
        <ListsContent>
            <ListHeaderWrapper>
                <ListHeader type="text" />
            </ListHeaderWrapper>
            <ListsStyle>
                {[1,2,3,4].map((card: number, i: number) => <ListCard key={number} />)}
            </ListsStyle>
            <CreateCard />
        </ListsContent>
    </ListsWrapper>
}

export default Lists;
components/Lists/CreateLists.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React from 'react';
import styled from 'styled-components';
import { useParams } from 'react-router-dom';

const ListsWrapper = styled.div`
    width: 272px;
    margin: 0 4px;
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
`

const ListsContent = styled.div`
    background-color: rgba(0,0,0,0.3);
    border-radius: 3px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    position: relative;
    white-space: normal;
    &:hover {
        background-color: rgba(0,0,0,0.2);
    }
`

const ListHeader = styled.input`
    background-color: rgba(255,255,255,0);
    color: #fff;
    border: 0 none;
    user-select: none;
    font-size: 14px;
    line-height: 40px;
    height: 40px;
    padding-left: 10px;
    font-weight: bold;
    &::placeholder{
        color: #fff;
    }
`

const CreateLists: React.FC = () => {
    return <ListsWrapper>
        <ListsContent>
            <ListHeader type="text" placeholder="Create lists" />
        </ListsContent>
    </ListsWrapper>
}

export default CreateLists;
pages/ListPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React from 'react';
import styled from 'styled-components';
import Lists from 'components/Lists/Lists';
import CreateLists from 'components/Lists/CreateLists';
import { useSelector } from 'react-redux';
import { RootState } from 'store/reducers';
import { ListsType } from 'store/reducers/lists';

const BoardStyle = styled.section`
    height: 100%;
    overflow-y: auto;
    position: relative;
`

const BoardListWrapper = styled.div`
    white-space: nowrap;
    user-select: none;
    position: relative;
    margin-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
`

const ListPage = () => {
    const listsState = useSelector((state:RootState) => state.lists);
    return (<BoardStyle>
        <BoardListWrapper>
            {listsState.lists.map((list:ListsType) => <Lists key={list.id} list={list}/>)}
            <CreateLists />
        </BoardListWrapper>
    </BoardStyle>)
}

export default ListPage;

이것으로 컴포넌트 및 페이지 스타일을 넣어 보았습니다.
다음 포스트에서는 각각의 컴포넌트에 기능을 추가합니다.

Share