내 아들은 효자인가 #2 - Material-UI 사용하기

본격적으로 이제 만들어보기로한다!

 

 

화면설계

대충 해본 화면 설계

설명해보자면, 해당 아이돌의 가챠의 결과값을 입력하면 효자인지 아닌지 알려주는 간단한 프로그램이다.

가끔식 나와주기만 하면 효자라고 보이는 콩깍지가 씌워져 만들어보기로 했다.

 

 

구역을 나눠보자면 입력을 담당하는 공간과 결과값을 나타내는 공간으로 분리할수있다.

 

 

HTML작성

기존의 App.js를 수정하여 일단은 쭉 작성해보았다.

import './App.css';

function App() {
  return (
    <div className="App">
      <header>
        <h3>내 아들은 효자인가?</h3>
      </header>
      <div className="input">
        <div>
            유닛: 
            <select>
              <option value="all">전체</option>
              <option value="유성대">유성대</option>
              <option value="발키리">발키리</option>
            </select> 
            아이돌:
            <select>
              <option value="all">전체</option>
              <option value="모리사와 치아키">모리사와 치아키</option>
              <option value="신카이 카나타">신카이 카나타</option>
              <option value="나구모 테토라">나구모 테토라</option>
              <option value="센고쿠 시노부">센고쿠 시노부</option>
              <option value="타카미네 미도리">타카미네 미도리</option>
              <option value="이츠키 슈">이츠키 슈</option>
              <option value="카게히라 미카">카게히라 미카</option>
            </select> 
          
        </div>
        
        <div>
          <input type="radio" name="cate" value="ko"/>한스타
          <input type="radio" name="cate" value="jp"/>일스타
        </div>

        <div>
          사용 다이아: <input type="number"/> 개
        </div>
        <div>
          사용 스카우트 티켓: <input type="number"/> 개
        </div>
        <div>
          뽑은 해당 카드 수: <input type="number"/> 개
        </div>
        <button>확인</button>
      </div>

      <div className="output">
        당신의 (아이돌)은 (웬수) 입니다!

      </div>
      
    </div>
  );
}

export default App;

 

css를 따로 건들지않고 사용했더니 자동으로 가운데 정렬이 되어서 다음과 같은 화면으로 나온다

 

 

 

 

 

Material-UI 적용하기

아무래도 기본이다보니까 못생겼다.

못생긴걸로 작업하려면 작업할 맛도 안나니 남의 것(?)을 가져와 써보기로한다.

 

구글에 서치해보니까 리엑트는 MATERIAL-UI를 많이 사용하는거 같아 그걸 사용해보기로 한다!

 

 

아래와 같이 materia-ui를 추가해준다. 

npm install @mui/material @emotion/react @emotion/styled

 

@emotion/~ 이것들은 material-ui에서 설치하는걸 추천하는거같아서 같이 설치했다.

(홈페이지에서 명령어가 같이 들어있었다.)

무엇인가 하고 대충 찾아보니 css-in-js라고 하던데, css를 js로 표현할수있게 해주는거같다.

워낙 내가 css를 다룰줄 몰라 잘 안쓸거같긴하다.

자세한부분이 궁금하신 분들을 위해 공식홈페이지 링크를 남겨놓겠다.

https://emotion.sh/docs/introduction

Emotion - Introduction

 

 

error 해결

근데 왜 install 했는데.. 못 찾지...?

다음과 같은 에러가 발생했다

Module not found: Error: Can't resolve '@material-ui/core' in '/~/~'

알고보니 v4대의 예제를 보고 잘못 적용했던것이었다.

material-ui가 v4(@material-ui/core)에서 v5(@mui/material)로 올라오면서 달라졌다.

npm install을 @mui/material 로 했다는 것을 잊지말자! (나만 잊었을거같지만!!)

//npm install @mui/material

// @mui/material 로 istall 했기때문에 위의 import로 가져올수없었다.
//import Grid from '@material-ui/core';
import Grid from '@mui/material/Grid';

 

 

 

 

 

 

컴포넌트를 이것저것 찾아보며 나름 적용해본 모습은 이렇다.

 

#화면

 

 

# 소스코드

import React from "react";
import "./App.css";
import {
  Grid,
  Container,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  RadioGroup,
  Radio,
  TextField,
  FormControlLabel,
  InputAdornment,
  Button,
  Box,
} from "@mui/material";

function App() {
  return (
    <div className="App">
      <header>
        <h3>내 아들은 효자인가?</h3>
      </header>
      <Container maxWidth="sm">
        <Grid container spacing={3}>
          <Grid item xs={6}>
            <FormControl fullWidth>
              <InputLabel id="selectUnitLabel">유닛</InputLabel>
              <Select
                labelId="selectUnitLabel"
                id="selectUnit"
                label="Unit"
                onChange={(event) => {}}
              >
                <MenuItem value="all">all</MenuItem>
                <MenuItem value="유성대">유성대</MenuItem>
                <MenuItem value="발키리">발키리</MenuItem>
              </Select>
            </FormControl>
          </Grid>
          <Grid item xs={6}>
            <FormControl fullWidth>
              <InputLabel id="selectIdolLabel"> 아이돌 </InputLabel>
              <Select
                labelId="selectIdolLabel"
                id="selectIdol"
                label="Idol"
                onChange={(event) => {}}
              >
                <MenuItem value="all">all</MenuItem>
                <MenuItem value="모리사와 치아키">모리사와 치아키</MenuItem>
                <MenuItem value="신카이 카나타">신카이 카나타</MenuItem>
                <MenuItem value="나구모 테토라">나구모 테토라</MenuItem>
                <MenuItem value="센고쿠 시노부">센고쿠 시노부</MenuItem>
                <MenuItem value="타카미네 미도리">타카미네 미도리</MenuItem>
                <MenuItem value="이츠키 슈">이츠키 슈</MenuItem>
                <MenuItem value="카게히라 미카">카게히라 미카</MenuItem>
              </Select>
            </FormControl>
          </Grid>
          <Grid item xs={12}>
            <FormControl>
              <RadioGroup
                row
                aria-labelledby="demo-controlled-radio-buttons-group"
                name="controlled-radio-buttons-group"
                value={"ko"}
                onChange={(event) => {}}
              >
                <FormControlLabel
                  value="ko"
                  control={<Radio />}
                  label="한스타"
                />
                <FormControlLabel
                  value="jp"
                  control={<Radio />}
                  label="일스타"
                />
              </RadioGroup>
            </FormControl>
          </Grid>
          <Grid item xs={12}>
            <TextField
              label="사용 다이아"
              id="useDia"
              sx={{ m: 1, width: "25ch" }}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">개</InputAdornment>
                ),
              }}
            />
          </Grid>
          <Grid item xs={12}>
            <TextField
              label="사용 스카우트 티켓"
              id="useTicket"
              sx={{ m: 1, width: "25ch" }}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">개</InputAdornment>
                ),
              }}
            />
          </Grid>
          <Grid item xs={12}>
            <TextField
              label="뽑은 픽업 카드 수"
              id="pickCnt"
              sx={{ m: 1, width: "25ch" }}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">개</InputAdornment>
                ),
              }}
            />
          </Grid>
          <Grid item xs={12}>
            <Button variant="outlined">확인</Button>
          </Grid>
          <Grid item xs={12}>
            <Box
              component="span"
              sx={{ p: 2, gap: 2, height: 300, border: "1px dashed grey" }}
            >
              당신의 (아이돌)은 (웬수) 입니다!
            </Box>
          </Grid>
        </Grid>
      </Container>
    </div>
  );
}

export default App;

 

전보다는 났긴한데, 여전히 간격이라던가 크기라던가 맘에 안든다...

이건 나중에 기능을 다 만들고 나서 천천히 맞춰가보는 걸로 하자...ㅎㅎ