1. router에서 <RequireAuth> 로 감싸기

{
    path: '/mypage',
    element: (
    **<RequireAuth>**
       <Suspense fallback={<Spinner />}>
           <MyPage />
       </Suspense>
     **</RequireAuth>**
   ),
 },

1. 로그인 정보(이름 및 이메일) 활용 방법

import React from 'react'
import { useSelector } from 'react-redux'

const MyPage = () => {
  // Redux store에서 user 정보만 꺼내서 화면에 표시
  **const user = useSelector(state => state.auth.user)**

  return (
    <main>
      <h2>{user.name}님의 마이페이지</h2>
      <p>이메일: {user.email}</p>
      {/* 필요에 따라 프로필 사진, 즐겨찾기, 가입일 등 추가 */}
    </main>
  )
}

export default MyPage

const user = useSelector(state => state.auth.user) 위의 코드로 user.name , user.email 을 통해 정보 활용 가능

1. 특정 영역에 로그인 인증 활용 방법

• 전체 코드

필요한 코드 내용

**1. >> import { useSelector } from 'react-redux'**

const ABCD = () => {
**2. >> const user = useSelector(state => state.auth.user)**

**4. >> const handleSaveClick = e => {
  e.preventDefault()

 if (!user) {
          navigate('/login', { state: { from: window.location.pathname } })
          return
        }
  
  //아래로는 추가 로직 구현(ex.데이터베이스 저장 로직)
}**

  return (
**3. >>**  <div className={css.saveBtn} **onClickCapture={handleSaveClick}**>
      <HeartToggle />
      </div>
  )
}
}

1. import { useSelector } from 'react-redux' → useSelector 선언
2. const user = useSelector(state => state.auth.user)→ 사용자 로그인 확인을 위해 사용
3. onClickCapture={handleSaveClick} → onClickCapture={함수}사용
4. 아래 코드 사용

const 함수 = e => {
  e.preventDefault()

  if (!user) {
    navigate('/login', { state: { from: window.location.pathname } })
    return
  }
}