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

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </BrowserRouter>,
)

App /에서 실행할 거여서 설정하고,

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(registerUser.pending, (state) => {
        state.isLoading = true
      })
      .addCase(registerUser.fulfilled, (state) => {
        state.isLoading = false
        toast.info('회원가입을 성공했습니다.')
      })
      .addCase(registerUser.rejected, (state, action) => {
        state.isLoading = false
        state.error = action.payload
        toast.error(action.payload)
      })
  }
})

toast.info, toast.error 등 toast 메세지 정확하게 넣었고,

import { ToastContainer } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"
function Layout() {
  return (
    <div className='flex flex-col justify-between h-screen'>

      <ToastContainer
        position='bottom-right'
        theme='light'
        pauseOnHover
        autoClose={1500}
      />

      <Navbar/>
      <main className='w-10/12 max-w-4xl mx-auto mb-auto'>
        <Outlet/>
      </main>
      <Footer/>
    </div>
  )
}

toastify랑 css를 사용하려고 import했고,

const RegisterPage = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm({ mode: 'onChange' })
  const dispatch = useDispatch()
  // const navigate = useNavigate()

  const onSubmit = ({ email, name, password }) => {
    const body = { email, name, password, image: `https://via.placeholder.com/600x400?text=no+user+image` }
    dispatch(registerUser(body))
    reset()
    // navigate('/login')
  }

실행 하니까, db에 데이터는 잘 담기는데, css가 적용이 안됩니다. 그리고, css가 적용되지 않고, 자꾸 login 페이지로 넘어가기만 합니다. 오류를 도저히 못찾겠어요 도와주세요!