차크라는 대단해

김재즈·2023년 11월 26일

차크라에 대해서 알아보자.

차크라란?

~~차크라는 무협지에 나오는 기(기운), 마나와 비슷한 개념으로서 일본어로 힘을 뜻하는 단어인 힘 력의 발음인..~~
이게 아니라 Chakra-Ui에 대해 알아볼거다.

이게 얼마나 대단하냐면.

CSS-Module

원래 나는 css-module을 사용했다.

이것도 나한텐 진짜 위대한 발전이었고, 스타일을 짜두면 해당 스타일을 가져와서 적용후
입맛에 맞춰 변경하는 그런 대단한 모듈이었다.

Chakra-UI

근데 이건말이죠.

이미 스타일이 전부 짜여있어요 ㅋㅋㅋㅋㅋㅋ.
Chakra-ui 공홈에 들어가보면 이미 전부 스타일이 만들어져있다 이말입니다.

여기서 입맛대로 수정만 하면 되는거니까.
진짜로 전부 다 해주는거죠?

예를 들어서 메뉴 버튼을 만들고 싶다.

원래라면 뭐 Button 태그에 onClick에 기능 다 집어넣고
스타일 만들어서 className에 집어넣고 다 해야했잖아요?

이 Chakra-ui는 전부 다 무료로 해드립니다.

그냥 공홈 들어가서 components에서 Menu 찾아서 원하는 부분 있으면 태그 그대로 가져오는겁니다.

이게 좀 맘에 드니까.

해당 코드 그대로 가져와주면.

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
    Actions
  </MenuButton>
  <MenuList>
    <MenuItem>Download</MenuItem>
    <MenuItem>Create a Copy</MenuItem>
    <MenuItem>Mark as Draft</MenuItem>
    <MenuItem>Delete</MenuItem>
    <MenuItem>Attend a Workshop</MenuItem>
  </MenuList>
</Menu>

버튼 하나 뚝딱.

여기서 태그 안에다가 세부사항 조금씩 넣어서 입맛에 맞춰서 수정이 가능하다 이말이에요.
ㅋㅋ 대박적입니다.

Chakra-UI 설치

그럼 설치를 해야 사용하겠죠.

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

설치 해주자구요.

그리고, 프로젝트 가장 상위 파일인 index나 App 파일에 태그 하나를 둘러줘야하는데,
저는 상위 파일인 index.tsx에다가 둘러싸봐줄게요.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { ChakraProvider } from "@chakra-ui/react";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

이런식으로

import { ChakraProvider } from "@chakra-ui/react";

import 해주시고,
App 태그를 ChakraProvider 태그로 둘러싸주시면 됩니다.

실습

이제 저번 글에서 틀만 짜뒀던 MainLayout을 Chakra-ui로 꾸며줘보자구요.

일단, 사이트 상단에 Nav바를 만들어 줄 생각인데,
여기서 대박인건 Chakra Templates 사이트에서 예시 코드를 제공한다는 겁니다. ㅋㅋ 진짜 다해주네

예시 코드 가져와~

Chakra Templates 사이트에 들어가서
템플릿을 골라주자.

나는 nav 바를 찾고 있었으니까, Templates의 Navigation 목록에 들어가줬다.

바로 그냥 여기 있습니다~ 하고 마중나와주는 예시코드들.

코드 위쪽에 Code 버튼을 눌러주면 해당 예시 화면을 구성하는 코드가 나온다.

그대로 강탈.
(사실 프로그래머의 자질은 구글링과 복붙이 아닐까 생각한다.)

이후, MainLayout에 붙여넣고 약간의 수정을 해준다.

수정 완료된 MainLayout.tsx 코드

import {
  Box,
  Flex,
  Avatar,
  Text,
  Button,
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  MenuDivider,
  useDisclosure,
  useColorModeValue,
  Stack,
  useColorMode,
  Center,
} from "@chakra-ui/react";

import { MoonIcon, SunIcon } from '@chakra-ui/icons'

interface Props {
  children: React.ReactNode
}

const NavLink = (props: Props) => {
  const { children } = props

  return (
    <Box
      as="a"
      px={2}
      py={1}
      rounded={'md'}
      _hover={{
        textDecoration: 'none',
        bg: useColorModeValue('gray.200', 'gray.700'),
      }}
      href={'#'}>
      {children}
    </Box>
  )
}

const Nav = () => {
  const { colorMode, toggleColorMode } = useColorMode()
  return (
    <>
      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
        <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
          <Box>김재즈의 뮤직박스</Box>

          <Flex alignItems={'center'}>
            <Stack direction={'row'} spacing={7}>
              <Button onClick={toggleColorMode}> {/* 다크모드 버튼 */}
                {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
              </Button>
              {
              <Box>
                <Stack
                  flex={{ base: 1, md: 0 }}
                  justify={'flex-end'}
                  direction={'row'}
                  spacing={6}>
                  <Button as={'a'} fontSize={'sm'} fontWeight={400} variant={'link'} href={'#'}>
                    Sign In
                  </Button>
                  <Button
                    as={'a'}
                    display={{ base: 'none', md: 'inline-flex' }}
                    fontSize={'sm'}
                    fontWeight={600}
                    color={'white'}
                    bg={'pink.400'}
                    href={'#'}
                    _hover={{
                      bg: 'pink.300',
                    }}>
                    Sign Up
                  </Button>
                </Stack>
  
                <Menu> {/* 프로필 */}
                  <MenuButton
                    as={Button}
                    rounded={'full'}
                    variant={'link'}
                    cursor={'pointer'}
                    minW={0}>
                    <Avatar
                      size={'sm'}
                      src={'https://avatars.dicebear.com/api/male/username.svg'}
                    />
                  </MenuButton>
                  <MenuList alignItems={'center'}> {/* 프로필 메뉴 */}
                    <br />
                    <Center>
                      <Avatar
                        size={'2xl'}
                        src={'https://avatars.dicebear.com/api/male/username.svg'}
                      />
                    </Center>
                    <br />
                    <Center>
                      <p>Username</p>
                    </Center>
                    <br />
                    <MenuDivider />
                    <MenuItem>Your Servers</MenuItem>
                    <MenuItem>Account Settings</MenuItem>
                    <MenuItem>Logout</MenuItem>
                  </MenuList>
                </Menu>
              </Box>
              }
            </Stack>
          </Flex>
        </Flex>
      </Box>
    </>
  )
}


type PageProps ={
  children: React.ReactNode;
}

const MainLayout = (props: PageProps) => {
  return (
    <Box>
      <Nav/>
      <Box>
        {props.children}
      </Box>
    </Box>
  );
};

export default MainLayout;