[ gproro-shop-app] 로그인여부로 분기처리 with redux

 

 

장바구니 아래에 로그인 되어있다면 계산하기 버튼만 , 

로그인 하지 않았다면 로그인 버튼이 보이게 하고싶다. 

 

 

 

 

import React, { useEffect } from 'react'

import { useAppDispatch, useAppSelector } from '../../../hooks/redux'

import styles from './Checkout.module.scss'

import { Link } from 'react-router-dom';

import { getTotalPrice } from '../../../store/cart/cart.slice';

import { useAuth } from '../../../hooks/useAuth';

//장바구니 하단에 합계랑 로그인버튼

const Checkout = () => {

    const cart = useAppSelector((state)=> state.cart);

    const dispatch = useAppDispatch();

    useEffect(()=>{

        dispatch(getTotalPrice());

    },[])

    ⭐const {isAuth} = useAuth();

  return (

    <div className={styles.checkout}>

        <div>

            <p>

                {" "}

                <span>합계 : </span> ${cart.totalPrice.toFixed(2)}

            </p>

            ⭐ {isAuth?

            <button className={styles.checkout_button}

            onClick={() => sendOrder()}>

                계산하기

            </button>:

             <Link className={styles.checkout_button} to={"/login"}>

             로그인

         </Link>

             }

           

        </div>

    </div>

  )

}

export default Checkout

 

 

 useAuth를 만들려면

로그인이 되어있는지 체크하는 hooks를 생성하고,

 

import { useAppSelector } from "./redux";

export function useAuth(){

    const{id,email,token} = useAppSelector((state) => state.user);

    return {

        isAuth:!!email,  // email이 존재하면 true, 없으면 false

        email,

        id,

        token,

    }

}

 

useAuth의 반환 객체는 isAuth, email, id, token으로 구성되어 있으며, 이를 통해 로그인 여부와 사용자 정보를 동시에 관리할 수 있다.

 

 

다시 checkout 컴포넌트로 와서 

 

{isAuth ? (

          <button

            className={styles.checkout_button}

            onClick={() => sendOrder()}

          >

            계산하기

          </button>

        ) : (

          <Link className={styles.checkout_button} to={"/login"}>

            로그인

          </Link>

        )}

 

useAuth를 호출하여 isAuth 값을 확인하고, 이 값에 따라 다른 버튼을 렌더링한다.

 

 

 

로그인 하고 유저가 state에 들어가면 "계산하기" 버튼이 보이는것을 확인할 수 있다.