먼저 LoginForm에서 antd의 Form 컴포넌트에 기본적으로 들어있는 onFinish 프로퍼티를 이용해 formSubmit 처리를 하여 로그인한 상태로 바꿔주자, 로그인 상태 변경은 AppLayout 컴포넌트에서 Hooks를 상속하는 방법으로 우선 처리한다.

import React, { useCallback, useState } from "react";
import { Form, Input, Button } from "antd";
import Link from "next/link";
import styled from "styled-components";

const ButtonWrapper = styled.div`
  margin-top: 10px;
`;

const FormWrapper = styled(Form)`
  padding: 10px;
`;

const LoginForm = ({ setLoggedIn }) => {
  // antd에 onFinish에는 자동으로 e.preventDefault()가 적용되어 있다.
  const onSubmitForm = useCallback(() => setLoggedIn(true), [id, password]);

  return (
    <FormWrapper onFinish={onSubmitForm}>
      {/* ... inputs and buttons */}
    </FormWrapper>
  );
};

export default LoginForm;

이제 UserProfile을 작업해본다.

// UserProfile.js
import React, { useCallback } from "react";
import { Card, Avatar, Button } from "antd";

const UserProfile = ({ setIsLoggedIn }) => {
  const onLogout = useCallback(() => setIsLoggedIn(false), []);
  return (
    <Card
      actions={[
        <div key="twit">
          짹짹
          <br />0
        </div>,
        <div key="followings">
          팔로잉
          <br />0
        </div>,
        <div key="followings">
          팔로워
          <br />0
        </div>,
      ]}
    >
      <Card.Meta title="Vicky" avatar={<Avatar>V</Avatar>} />
      <Button onClick={onLogout}>로그아웃</Button>
    </Card>
  );
};

export default UserProfile;