マテリアルUIを導入する

[isoiso-isobeage]

概要

フロント側の実装で使用するマテリアルUIを導入する

対象issues

close #34

導入&検証(マテリアルUI)

1. docker compose exec front ash でフロントのコンテナに入る
2. yarn add @mui/material @emotion/react @emotion/styledでマテリアルUIをインストール
3. 検証する為にTest.tsxを作成して動作確認

import React from 'react'
import Button from '@mui/material/Button'

export const Test = () => {
    return (
        <div>
            <Button variant="contained">Hello World</Button>
        </div>
    )
}

ボタンが表示されているのが確認できた

導入&検証(マテリアルアイコン)

1. docker compose exec front ash でフロントのコンテナに入る
2. yarn add @mui/icons-materialでマテリアルアイコンをインストール
3. 検証する為にTest.tsxを作成して動作確認

import React from 'react'
import { Button, Box } from '@mui/material'
import { Favorite, Delete, Add, AccountCircle } from '@mui/icons-material'

export const Test = () => {
  return (
    <Box>
      <Button variant="contained">Hello World</Button>
      <Favorite></Favorite>
      <Delete></Delete>
      <Add></Add>
      <AccountCircle></AccountCircle>
    </Box>
  )
}

アイコンが表示されているのが確認できた

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
diary	❌ Failed (Inspect)			May 7, 2023 6:41am

[DaisukeShinoku]

Vercelデプロイ時にエラー発生

Failed to compile.
Module not found: Error: You attempted to import /vercel/path0/frontend/node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1
Deployment completed
BUILD_UTILS_SPAWN_1: Command "yarn run build" exited with 1

[yuki-snow1823]

@isoiso-isobeage
めっちゃPRの説明わかりやすくて丁寧だと思いました〜

Githubは、``` の後に言語を書くとシンタックスハイライトできるのでおすすめです。

import React from 'react'
import { Button, Box } from '@mui/material'
import { Favorite, Delete, Add, AccountCircle } from '@mui/icons-material'

export const Test = () => {
  return (
    <Box>
      <Button variant="contained">Hello World</Button>
      <Favorite></Favorite>
      <Delete></Delete>
      <Add></Add>
      <AccountCircle></AccountCircle>
    </Box>
  )
}

[yuki-snow1823]

Failed to compile.
--
15:41:50.193 |  
15:41:50.193 | Module not found: Error: You attempted to import /vercel/path0/frontend/node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
15:41:50.194 | You can either move it inside src/, or add a symlink to it from project's node_modules/.
15:41:50.194 |  
15:41:50.194 |  
15:41:50.221 | error Command failed with exit code 1.
15:41:50.222 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
15:41:50.245 | Error: Command "yarn run build" exited with 1
15:41:50.947 | Deployment completed
15:41:50.556 | BUILD_UTILS_SPAWN_1: Command "yarn run build" exited with 1

[yuki-snow1823]

📝 Vercel調べて招待をします

[DaisukeShinoku]

なんと、、、チーム開発でvercelを使うと管理者以外のデプロイが失敗することが判明したよ
ディスカッション開始！

[yuki-snow1823]

Vercelはチームでのデプロイができなかったので、Netlifyを使用しました。
他の人のデプロイが問題なくされるかのテストをしたいので、このブランチはマージさせます。

[DaisukeShinoku]

GOGO