[RTK] Typescript todoList 만들기 - (2) 기본적인 디자인하기

[RTK] Typescript todoList 만들기 - (2) 기본적인 디자인하기

 

이전 포스팅에 이어서 기본적인 디자인을 진행하겠다.

2022.10.25 - [개발 공부 시리즈/Redux-ToolKit] - [RTK] Typescript todoList 만들기 - (1)

 

라이브러리는 Meterial UI 를 사용하여 진행하겠다.

 

Meterial UI는 React를 좀 더 직관적이게 보여줄 수 있는 라이브러리이다.

 

 

이전 포스팅에서는 addTodo 기능 구현까지 진행하였다.

전체적인 디자인을 구성한 후, 컴포넌트를 분리해야겠다.

 

1. 디자인 틀 만들기

App.tsx를 다음과 같이 변경한다.

//App.tsx

import React,{ useState } from 'react';
import { AppDispatch, RootState } from './app/store'
import { useSelector, useDispatch } from 'react-redux'
import { addTodo } from './features/todos/todoSlice';

//meterial Ui
import CssBaseline from '@mui/material/CssBaseline';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';

//css modules import 
// import styles from './App.module.css';


function App() {
  const todoList = useSelector((state: RootState) => state.todos)
  const dispatch = useDispatch<AppDispatch>()

  console.log(dispatch)

  let [ txt , setTxt ] = useState('');

  return (
    <CssBaseline>
    <Container fixed >
      <Box sx={{height: '100vh' }}> 
      <h1>할일 관리</h1>
      <div>
        <input 
        type="text"
        onChange={(e) => setTxt(e.target.value)}
        ></input>
        <button
          onClick={() => {
            dispatch(addTodo(txt));
          }}
        >추가</button>
      </div>
      <div>
        <h3>할일 내용</h3>
        <>
        {todoList.map((item) =>(
          <p key={item.id}>{item.text}</p>
        ))}          
        </>        
      </div>
      </Box>
    </Container>
    </CssBaseline>
  );
}

export default App;

Mui의 CssBaseline, Container, Box를 이용해 기초적인 틀을 잡아주었다.

 

- CssBaseline : 글로벌로 nomalize.css 와 같은 역할을 한다. 원하는 자식 태그만으로도 ScopedCssBaseline 컴포넌트를 사용하여 Baseline을 지정할 수 있다.

- Container : 콘텐츠를 가로로 중앙에 배치하게 된다.

- Box : 래퍼의 역할을 한다.

 

적용하면 화면에 일정 가로의 크기 사이에 적용되게 된다.

2. CSS Module 이용하기

 

App.module.css 를 이용하여 css를 작성할 수 있다.

자신이 수정하기 원하는 컴포넌트한테만 CSS Module의 기술을 사용하여 클래스의 중첩을 방지할 수 있다.

 

확장자는. module.css를 사용하여 작성한다.

 

예를 들면 App.module.css를 다음과 같이 작성하면

/* App.module.css */

.wrapper {
    background-color: blanchedalmond;
}

 

App.tsx

다음과 같이 적용하여 사용할 수 있다.

//css modules import 
import styles from './App.module.css';

///....

//다음과 같이 CSS 모듈 사용
<Container fixed className={styles.wrapper}>
      <Box sx={{height: '100vh' }}> 
      <h1>할일 관리</h1>
      <div>
        <input 
        type="text"
        onChange={(e) => setTxt(e.target.value)}
        ></input>
        <button
          onClick={() => {
            dispatch(addTodo(txt));
          }}
        >추가</button>
      </div>
      <div>
        <h3>할일 내용</h3>
        <>
        {todoList.map((item) =>(
          <p key={item.id}>{item.text}</p>
        ))}          
        </>        
      </div>
      </Box>
    </Container>

 

 

3. 아이콘 패키지 설치하기

 

아이콘을 사용하기위해 다음의 패키지를 설치해준다.

 

npm install @mui/icons-material

 

패키지를 설치하면 사용할 아이콘을 import 하여 사용할 수 있다.

https://mui.com/material-ui/material-icons/#main-content

Material Icons - Material UI

 

문서에도 아이콘을 검색하여 사용할 수 있다.

 

4. TODO-APP 커스텀하기

App.tsx 전체 커스텀 css 코드

 

App.module.css

 

/* App.module.css */

.wrapper {
    background-color: blanchedalmond;
}

.center {
    text-align: center;
}

.margin-auto {
    margin : 0 auto
}

 

 

App.tsx

//App.tsx

import React,{ useState } from 'react';
import { AppDispatch, RootState } from './app/store'
import { useSelector, useDispatch } from 'react-redux'
import { addTodo } from './features/todos/todoSlice';

//meterial Ui
import CssBaseline from '@mui/material/CssBaseline';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';

import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';


import List from '@mui/material/List';
import { ListItem } from '@mui/material';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';

//css modules import 
import styles from './App.module.css';


function App() {
  const todoList = useSelector((state: RootState) => state.todos)
  const dispatch = useDispatch<AppDispatch>()

  console.log(dispatch)

  let [ txt , setTxt ] = useState('');

  return (
    <CssBaseline>
    <Container fixed >
      <Box sx={{height: '100vh'}}> 
      <h1 className={styles.center}>Todo List</h1>
      <div className={styles.center}>
        <TextField 
        type="text"
        onChange={(e) => setTxt(e.target.value)}
        id="standard-basic" label="todo Input" variant="standard"
        ></TextField>
        <Button
          style={{ marginTop : '10px', marginLeft : '10px'}}
          variant="outlined"
          onClick={() => {
            dispatch(addTodo(txt));
          }}
        >추가</Button>
      </div>
      <div className={styles.center}>
        <h3>할일 내용</h3>
        
        <List dense sx={{ margin : '0 auto',width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
        {todoList.map((item) =>(
          <Card style={{marginTop : '20px'}}> 
            <CardContent>
              <ListItem 
              style={{justifyContent : 'space-between'}}
              disableGutters
              key={item.id}>{item.text} < DeleteOutlineIcon  style={{float : 'right'}}/></ListItem>
          </CardContent>
          </Card>
        ))}          
        </List>        
      </div>
      </Box>
    </Container>
    </CssBaseline>
  );
}

export default App;

간단하게 설명하자면 우선은 App.tsx 파일에 모든 디자인을 넣었다. 공통적으로 쓰이는 간단한 것들은 module.css로 뺄 예정이다.

 

MUI의 다양한 컴포넌트들을 사용하고, 아이콘도 사용하고 내부 스타일도 사용하였다.

간단히 설명하면

- TextField : 텍스트를 넣는 필드이다. input 태그 대신에 사용하였다.

- Card : 카드 형태로 나오는 디자인을 사용할 수 있다.

- List : ListItem 과 같이 사용하며 리스트를 불러올 때 사용한다.

- DeleteOutlineIcon : 삭제 버튼 아이콘을 가져올 때 사용한다.

- Button : 디자인 된 버튼을 사용할 수 있다.

 

이러한 코드들은 다음과 같이 커스텀 되었다.

 

todo app custom 화면

 

다음과 같이 커스텀하였다. 라이브러리를 이용하여 CSS디자인을 커스텀하는 것도 편하고 좋지만, 

나만의 디자인을 하려면 라이브러리에 의존하지 않고 사용하는 것도 좋은 방법이다.

템플릿을 사용하는것도 시간의 지체 없이 사용할 수 있어서 좋은 방법인 것 같다.

 

다음 포스팅에는 삭제와 할 일 완료 기능을 구현해야겠다.