NEXTJS 로 twitter클론 해보기(3. 더미데이터로 Login/Logot 하기)

AppLayout 컴포넌트

• useState로 isLoggedIn을 만들고 초기값을 false로 해준다.
  • isLoggedIn이 false일때는 LoginForm 컴포넌트를 보여준다
  • isLoggedIn이 true일때는 UserProfile 컴포넌트를 보여준다

import PropTypes from "prop-types";
import Link from "next/link";
import { Menu, Input, Row, Col } from "antd";
import { useState } from "react";
import UserProfile from "./UserProfile";
import LoginForm from "./LoginForm";
import styled from "styled-components";

const SeachInput = styled(Input.Search)` //antd 커스텀 하는법
  vertical-align: middle;
`;

const AppLayout = ({ children }) => {
  const [isLoggedIn, setIsLoggendIn] = useState(false);
  return (
    <div>
      ...Menu
      <Row gutter={8}>
        <Col xs={24} md={6}>
          {isLoggedIn ? (
            <UserProfile setIsLoggendIn={setIsLoggendIn} />
          ) : (
            <LoginForm setIsLoggendIn={setIsLoggendIn} />
          )}
        </Col>
        <Col xs={24} md={12}>
          {children}
        </Col>
        <Col xs={24} md={6}>
          <a
            href="https://velog.io/@abc5259"
            target="_blank"
            rel="noreferer noopener"
          >
            Made By LeeJaeHoon
          </a>
        </Col>
      </Row>
    </div>
  );
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AppLayout;

LoginForm

• antd에서 Form에는 onFinish가있는데 onSubmit과 같지만 다른점은 e.preventDefault()가 자동으로 들어가있다.
• 로그인 버튼 클릭시 porps로 받은 setIsLoggendIn을 통해 isLoggedIn을 true로 만들어 준다.

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

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

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

const LoginForm = ({ setIsLoggendIn }) => {
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  const onChangeId = useCallback(e => {
    setId(e.target.value);
  }, []);
  const onChangePassword = useCallback(e => {
    setPassword(e.target.value);
  }, []);

  const onSubmitForm = useCallback(() => {
    console.log(id, password);
    setIsLoggendIn(true);
  }, [id, password]);
  return (
    <>
      <FormWrapper onFinish={onSubmitForm}>
        <div>
          <label htmlFor="user-id">아이디</label>
          <br />
          <Input name="user-id" value={id} onChange={onChangeId} required />
        </div>
        <div>
          <label htmlFor="user-password">비밀번호</label>
          <br />
          <Input
            name="user-password"
            type="password"
            value={password}
            onChange={onChangePassword}
            required
          />
        </div>
        <ButtonWrapper>
          <Button type="primary" htmlType="submit" loading={false}>
            로그인
          </Button>
          <Link href="/signup">
            <a>
              <Button>회원가입</Button>
            </a>
          </Link>
        </ButtonWrapper>
      </FormWrapper>
    </>
  );
};

export default LoginForm;

UserProfile

• 로그아웃 버튼 클릭시 props로 받은 setIsLoggendIn을 통해 isLoggedIn을 false로 만들어준다.

import { Avatar, Button, Card } from "antd";
import { useCallback } from "react";

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

export default UserProfile;