NicknameEditForm, FollowList가 렌더되지 않습니다

안녕하세요. 강의 잘 듣고 있습니다.

현재 섹션 1까지 모두 수강하였습니다. 다만 제목과 같이 NicknameEditForm, FollowList 구현부터 웹에 렌더가 되지 않아 진도가 막힌 상태입니다...ㅜㅜ

antd나 스타일 컴포넌트의 문제 같아 환경설정도 변경해보고 VS code를 재다운로드하거나 버전별로 테스트 해보기도 했는데 아직 해결 방법을 찾지 못한 상태입니다.

코드 실행한 결과입니다. 회원 정보 카드 옆에 닉네임 수정 폼이나 팔로우 리스트가 생성되어야 하는데 전혀 뜨질 않네요. 혹시 어떤 해결 방법이 있을까요?

아래는 환경과 작성한 코드입니다.

{
  "name": "react-nodebird-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next"
  },
  "author": "kde",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^5.1.3",
    "antd": "^4.3.1",
    "next": "^9.5.5",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-test-renderer": "^17.0.2",
    "styled-components": "^5.3.11"
  },
  "devDependencies": {
    "eslint": "^8.41.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0"
  }
}

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

const UserProfile = ({ setIsLoggedIn }) => {
    const onLogOut = useCallback(() => {
        setIsLoggedIn(false);
    }, []);

    return (
        <Card 
            actions={[
                <div key="twit">짹짹<br/>0</div>,
                <div key="following">팔로잉<br/>0</div>,
                <div key="following">팔로워<br/>0</div>,
            ]}
        >
        <Card.Meta
            avatar={<Avatar>test</Avatar>}
            title="test"
        />
        <Button onClick={onLogOut}>로그아웃</Button>
        </Card>
    );
};

export default UserProfile;

import React, { useMemo } from "react";
import { Form, Input } from 'antd';

const NicknameEditForm = () => {

    return (
        <Form style={{ marginBottom: '20px', border: '1px solid #d9d9d9', padding: '20px' }}>
            <Input.Search addonBefore="닉네임" enterButton="수정"/>
        </Form>
    );
};

export default NicknameEditForm;

import React from "react";
import PropTypes from 'prop-types';
import { Button, List, Card } from 'antd';
import { StopOutlined } from '@ant-design/icons';


const FollowList = ({ header, data }) => {
    return (
        <List 
        style={{ marginBottom: '20px' }}
        grid={{ gutter: 4, xs: 2, md: 3 }}
        size="small"
        header={<div>{header}</div>}
        loadMore={<div style={{ textAlign: 'center', margin: '10px 0' }}><Button>더보기</Button></div>}
        bordered
        dataSource={data}
        renderItem={(item) => (
            <List.Item style={{ marginTop: '20px' }}>
                <Card actions={[<StopOutlined key="stop"/>]}>
                    <Card.Meta description={item.nickname}/>
                </Card>
            </List.Item>
        )}
        />
    );
};

FollowList.propTypes = {
    header: PropTypes.string.isRequired,
    data: PropTypes.array.isRequired,
};

export default FollowList

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

import UserProfile from '../components/UserProfile';
import LoginForm from '../components/LoginForm';

// const SearchInput = styled(Input.Search)`
//     vertical-align: middle;
// `;

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

    return (
        <div>
            <Menu mode="horizontal">
                <Menu.Item>
                    <Link href="/"><a>노드버드</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Link href="/profile"><a>프로필</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Link href="/signup"><a>회원가입</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Input.Search enterButton style={{ verticalAlign: 'middle' }}/>
                </Menu.Item>
            </Menu>
            <Row gutter={8}>
                <Col xs={24} md={6}>
                    {isLoggedIn ? <UserProfile setIsLoggedIn={setIsLoggedIn}/> : <LoginForm setIsLoggedIn={setIsLoggedIn}/>}
                </Col>
                <Col xs={24} md={12}>
                    
                </Col>
                <Col xs={24} md={6}>
                    <a href="http://google.com" target="_blank" rel="noreferrer noopener">메인화면</a>
                </Col>
            </Row>
        </div>
    );
};

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

export default AppLayout;

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

import useInput from '../hooks/useInput';

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

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

function LoginForm({ setIsLoggedIn }) {

    const [id, onChangeId] = useInput('');
    const [password, onChangePassword] = useInput('');

    //  const style = useMemo(() => ({ marginTop: 10 }), []);
    const onSubmitForm = useCallback(() => {
        console.log(id, password);
        setIsLoggedIn(true);
    }, [id, password]);

    return (
        <Form onFinish={onSubmitForm} style={{ padding: '10px' }}>
            <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>
            <div style={{ marginTop: '10px' }}>
                <Button type="primary" htmlType="submit" loading={false}>로그인</Button>
                <Link href="/signup"><a><Button>회원가입</Button></a></Link>
            </div>
        </Form>
    );
}

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

export default LoginForm;

/* eslint-disable react/jsx-no-undef */
/* eslint-disable no-unused-vars */
import React from 'react';
import Head from 'next/head';

import AppLayout from '../components/AppLayout';
import NicknameEditForm from '../components/NicknameEditForm';
import FollowList from '../components/FollowList';

const Profile = () => {
    const followerList = [{ nickname: 'test1' }, { nickname: 'test2' }, { nickname: 'test3' }];
    const followingList = [{ nickname: 'test1' }, { nickname: 'test2' }, { nickname: 'test3' }];

    return (
        <>
            <Head>
                <title>내 프로필 | NodeBird</title>
            </Head>
            <AppLayout>
                <NicknameEditForm/>
                <FollowList header="팔로잉 목록" data={followingList}/>
                <FollowList header="팔로워 목록" data={followerList}/>
            </AppLayout>
        </>
    );
};

export default Profile;