인프런 커뮤니티 질문&답변

안녕하세요 제로초님 강의들으면서 제 개인 프로젝트에 개념을 대입하면서 실습하고 있는데

 

홈페이지 header부분의 로그인폼이 아무리해도 가운데정렬이 되지 않아서 질문드립니다.

 

flex도 써보고 강의에 나온 verticalAlign을 써보고 구글링으로 답을 찾아봐도 안나와서 이렇게 질문드립니다.

 

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { Row, Col } from 'antd';

import LoggedinMenu from './LoggedinMenu';
import UnLoggedinMenu from './UnLoggedinMenu';

const AppLayout = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);  

  return (
    <>
        <Row style={{display: 'flex', justifyContent: 'space-between'}}>
          <Col>
            <Link href='/'><a><h1>Recipe.io</h1></a></Link>                    
          </Col>

          <Col>
            {isLoggedIn ? <LoggedinMenu setIsLoggedIn={setIsLoggedIn} /> : <UnLoggedinMenu setIsLoggedIn={setIsLoggedIn} />}
          </Col>
        </Row>     
    
      {children}
    </>
  )
};

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

export default AppLayout;

import React, { useCallback } from 'react';
import { Form, Input, Button } from 'antd';
import Link from 'next/link';
import PropTypes from 'prop-types';

const UnLoggedinMenu = ({ setIsLoggedIn }) => { 
  const onSubmitForm = useCallback((value) => {
    console.log(value);    
    setIsLoggedIn(true);
  }, []);

  return (    
    <Form onFinish={onSubmitForm} name="loginForm" style={{ display: 'flex'}}>
      <Form.Item               
        name="user-id"
        rules={[
          {
            type: 'text',
          },
          {
            required: true,
            message: '아이디를 입력하세요.',
          }
        ]}
      >
        <Input placeholder='Enter your Id'/>
      </Form.Item>

      <Form.Item
        name="user-password"
        rules={[
          {
            required: true,
            message: '비밀번호를 입력하세요.',
          }
        ]}
      >                
        <Input.Password placeholder='Enter your Password' />
      </Form.Item>
        
      <Form.Item>
        <Button type='primary' htmlType='submit'>로그인</Button>
      </Form.Item>

      <Form.Item>
        <Link href='/signup'><a><Button type='primary'>회원가입</Button></a></Link>
      </Form.Item>
    </Form>
  )
};

UnLoggedinMenu.propTypes = {
  setIsLoggedIn: PropTypes.func.isRequired,
}

export default UnLoggedinMenu;