Server Error

TypeError: Cannot read properties of undefined (reading 'user')

This error happened while generating the page. Any console logs will be displayed in the terminal window.

이런 에러 떠서 찾다가

reducers폴더 안에 index.js 코드

const initialState = {
    user: {
        isLoggedIn: false,
        user: null,
        signUpData: {},
        loginData: {}
    },
    post: {
        mainPosts: [],
    }
};

export const loginAction = (data) => {
    return {
        type: 'LOG_IN',
        data,
    }
}

export const logoutAction = (data) => {
    return {
        type: 'LOG_OUT',
    }
}

// (이전상태, 액션) => 다음상태
const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'LOG_IN':
            return {
                ...state,
                user: {
                    ...state.user,
                    isLoggedIn: true,
                    user: action.data,
                },
            };
            case 'LOG_OUT':
                return {
                    ...state,
                    user: {
                        ...state.user,
                        isLoggedIn: false,
                        user: null,
                    },
                };
            default:
                return {
                    ...state
                }
            }
        };

export default rootReducer;

default 넣었더니 새로운 에러 나왔습니다.

LoginFrom.js 쪽인거 같은데 뭐가 문제인지 모르겠습니다..

hooks안에 useInput.js 코드

import {useState, useCallback} from 'react';

export default (initialValue = null) => {

const [value, setValue] = useState(initialValue);

const handler = useCallback((e) => {

setValue(e.target.value);

}, []);

return [value, handler];

}

LoginForm.js 코드

import React, {useCallback, useMemo} from 'react';
import {Form, Input, Button} from 'antd';
import Link from 'next/link';
import styled from 'styled-components';
import {useDispatch} from 'react-redux';
import { loginAction } from '../reducers';

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

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

const LoginForm = () => {
    const dispatch = useDispatch();
    const [id, onChangeId] = useInput('');
    const [password, onChangePassword] = useInput('');

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

    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 style={style}>
                <Button type='primary' htmlType='submit' loading={false}>로그인</Button>
                <Link href="/signup"><a><Button>회원가입</Button></a></Link>
            </ButtonWrapper>
        </FormWrapper>
    )
}

export default LoginForm;

버전
"dependencies": {
        "@ant-design/icons": "^4.7.0",
        "antd": "^4.23.1",
        "next": "^12.3.0",
        "next-redux-wrapper": "^6.0.2",
        "react-redux": "^8.0.2",
        "redux": "^4.2.0",
        "styled-components": "^5.3.5",
        "update": "^0.7.4"
      },

어디가 문제인거죠.. 강의는 리덕스 구현하기 입니다.

강의 잘 듣고 있는데 오류가 힘드네요 ㅠㅠ