profile 페이지 (로그인 했을때 vs 로그인 안했을 때)

AppLayout 코드입니다. import React, { useState } from 'react'; import PropTypes from 'prop-types'; import Link from 'next/link' import Image from 'next/image'; import { Menu, Input, Dropdown } from 'antd'; import {TwitterOutlined} from '@ant-design/icons'; import {useSelector, useDispatch} from "react-redux" import { logoutAction } from '../reducers/user'; const { Search } = Input const dropDownMenu = (dispatch)=>{return ( Menu> Menu.Item key="0"> Link href='/profile'> a>Profilea> Link> Menu.Item> Menu.Item key="1"> a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com"> 2nd menu item a> Menu.Item> Menu.Divider /> Menu.Item key="3"> a href="/" onClick={(e)=>{e.preventDefault(); dispatch(logoutAction)}}>LOG OUTa> Menu.Item> Menu> );} const AppLayout = ({children}) => { const isLoggedin = useSelector((state)=>state.user.isLoggedin); const dispatch = useDispatch(); return ( Menu mode="horizontal"> Menu.Item> Link href='/'> a style={{fontSize:"2vw"}}> TwitterOutlined style={{fontSize: '21px', width:'40px', paddingLeft:'10px'}} /> a> Link> Menu.Item> Menu.Item style={{ marginLeft:"20vw"}}> Search placeholder="input search text" allowClear style={{ width: "25vw", verticalAlign:"middle" }} /> Menu.Item> {isLoggedin ? Menu.Item style={{ marginLeft:"20vw"}}> div style={{height:"46px"}}> Dropdown overlay={dropDownMenu(dispatch)}> a className="ant-dropdown-link" onClick={e => e.preventDefault()}> Image src="/img/groot2.jpg" alt="profileImg" width="44" height="44" /> a> Dropdown> div> Menu.Item> : Menu.Item> Link href='/signIn'>a style={{fontSize:"2vw"}}>Sign Ina>Link> Menu.Item> Menu.Item> Link href='/signUp'>a style={{fontSize:"2vw",border:"solid 0.5px", borderRadius: '5px', padding: "5px"}}>Sign Upa>Link> Menu.Item> } Menu> {children} ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout;

profile 페이지 (로그인 했을때 vs 로그인 안했을 때)

profile.js 코드입니다. import React, { useEffect } from 'react'; import Head from 'next/head'; import { useSelector } from 'react-redux'; import AppLayout from '../components/appLayout'; import ProfileEditForm from '../components/ProfileEditForm'; import FollowList from '../components/FollowList'; const Profile = () => { console.log("profile 페이지 들어갑니다잉"); let isLoggedin = useSelector((state)=>state.user.isLoggedin); let followerList; let followingList if(isLoggedin){ followerList = useSelector((state)=>state.user.user.Followers); followingList = useSelector((state)=>state.user.user.Followings); } console.log(`로그인했나? ${isLoggedin}, 팔로워리스트${followerList}, 팔로잉리스트${followingList}`); return ( Head> title>프로필 | NodeBirdtitle> Head> AppLayout> {isLoggedin ? ProfileEditForm/> FollowList header="Follower List" data={followerList}/> FollowList header="Following List" data={followingList}/> : div>pls logindiv> } AppLayout> ); }; export default Profile;