[220517] 마이페이지 헤더 만들기

그 전에 다음 두가지 버튼이 있는 헤더를 만들어보자

1) 메인으로 가는 버튼

2) 마이페이지로 가는 버튼

 

 

헤더를 이루는 레이아웃 만들기

Layout.tsx

import React, {FC} from "react";
import { Stack, Flex, Box, Text, Button } from "@chakra-ui/react";
import { Link } from "react-router-dom";

const Layout: FC = ({children}) => {
    return(
	<Stack h="100vh">
            <Flex
                bg="purple.200"
                p={4}
                justifyContent="space-around"
                alignItems="center"
            >
                <Box>
                    <Text fontWeight="bold">h662-Animals</Text>
                </Box>

                // 홈으로 가는 버튼
                <Link to="/">
                    <Button size="sm" colorScheme="blue">
                        Main
                    </Button>
                </Link>

                // 마이페이지로 가능 버튼
                <Link to="my-animal">
                    <Button size="sm" colorScheme="red">
                        My Animal
                    </Button>
                </Link>
            </Flex>

            <Flex
                direction="column"
                h="full"
                justifyContent="center"
                alignItems="center"
            >
            	{children}
            </Flex>
    </Stack>
    );
};

export default Layout;

 

 

마이페이지를 클릭했을때 나오는 화면

my-animal.tsx

import React,{FC} from "react";

//props에서 account를 내려줬으니까
interface MyAnimalProps {
    account: string;
}

const MyAnimal: FC<MyAnimalProps> = () => {
    return <div>Ma</div>
};

export default MyAnimal;

 

 

홈버튼을 클릭했을때 나오는 화면

App.tsx

import React, { FC, useEffect, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Layout from "./components/Layout";
import Main from './routes/main'
import MyAnimal from "./routes/my-animal";

const App: FC = () => {
  //메타마스크 주소를 담는 state
  const [account, setAccount] = useState<string>(""); 

  // 계정을 가져오는 코드
  const getAccount = async () => {
    try {
      if (window.ethereum) {
        const accounts = await window.ethereum.request({
          method: "eth_requestAccounts",
        });

        setAccount(accounts[0]); // 객체를 불러움
      }
    } catch (error) {
      // 이더리움이 없는 경우
      console.error(error);
    }
  };

  useEffect(() => {
    getAccount();
  }, [account]);


  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Main account={account}/>} />
          <Route path="my-animal" element={<MyAnimal account={account} />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export default App;

 

 

github

https://github.com/h662/h662Animals-frontend/commit/a65db002071b2f159609bc433adf0159b40c1b7b