Front-end implementation

[hiromaily]

Upgrade front-end by React v18 with Next.js v12 and MUI is used as React component library.
There are so many issue yet.

• Implement top page
  • First mode button doesn't work after displaying page
  • any css doesn't work on main content
    • fixed after hard reload on chrome
  • className mismatch error
    • fixed after hard reload on chrome
  • warn - Attempted to load @next/swc-darwin-arm64, but it was not installed after next dev run on Apple Silicon Mac
    • reinstall npm module after node_modules, package-lock.json removed
• Implement resume page
  • Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
    • Menu Component "Function components cannot be given refs"
    • wrapping by React.forwardRef didn't work for me
    • but wrapping by <> disable click event

            <Link href='/'>
              <>
                <Image src='/hy.png' alt='HY Logo' width={40} height={40} />
              </>
            </Link>

• Warning: Prop className did not match.
  • Next.js + Material UI v5 styled-component example is still showing className mismatch error mui/material-ui#27512
  • https://mui.com/material-ui/guides/server-rendering/
  • https://blog.logrocket.com/getting-started-with-mui-and-next-js/
  • example code
    • https://github.com/mui/material-ui/blob/master/examples/nextjs/pages/_app.js
    • https://github.com/mui/material-ui/blob/master/examples/nextjs/pages/_document.js
  • This must be caused by dark mode, dark mode doesn't work on server side, but it works on client side. Then inconsistency causes this error
    • https://zenn.dev/canoypa/scraps/1040995608de0c