App.tsx

순9·2023년 9월 11일

리액트 게시판

목록 보기

13/54

전체 코드

import React, { useState, useEffect } from "react";
import "./scss/main.css";

//컴포넌트 연결
import Form from "./components/users/Form";
import Board from "./components/board/board";
import Page from "./components/board/page";
import Sign from "./components/users/sign";
import Login from "./components/users/login";

//화면 이동을 위해 BrowserRouter연동
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

//로그인 관련으로 파이어베이스 연동
import { firestore, appAuth } from "./firebase";
import { getAuth, signOut } from "firebase/auth";

//Redux 스토어에서 특정 액션을 디스패치
//애플리케이션의 상태를 관리하고 상태 변경에 따른 뷰 업데이트
import { useDispatch } from "react-redux";

//boardSlice에서 작성한 reducer
import { creatBoard } from "../src/redux/slices/boardSlice";

function App() {
  //Redux 스토어에서 특정 액션을 디스패치
  const dispatch = useDispatch();

  //상태 초기화 관리
  const [init, setInit] = useState(false);
  //사용자의 로그인 상태 관리
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const auth = getAuth();

  useEffect(() => {
    //onAuthStateChanged 사용자의 로그인 상태가 변경될 때마다 호출
    appAuth.onAuthStateChanged((user) => {
      if (user) {
        setIsLoggedIn(true);
      } else {
        //로그아웃한 상태를 새롭게 설정
        setIsLoggedIn(false);
      }
      //초기화 상태 새롭게 변경
      setInit(true);
    });
  }, []);

  //로그아웃
  const logout = () => {
    signOut(auth)
      .then(() => {
        console.log("로그아웃");
      })
      .catch((error) => {
        console.log("로그아웃 실패");
      });
  };

//추가된 코드
  const handleLinkClick = () => {
    // Link 클릭 시 Redux 스토어에 새로운 boardstate를 생성
    dispatch(creatBoard(1)); //임의로 데이터 넣어둠
  };

  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={
            <div className="board_map">
              {!isLoggedIn ? (
                <>
                  <Link to="/sign">회원가입</Link>
                  <Link to="/login">로그인</Link>
                </>
              ) : (
                <>
                  <button onClick={logout}>로그아웃</button>
                </>
              )}

              <Board />
              <div className="write_btn">
              
              //수정됨
                <Link to="/form" onClick={handleLinkClick}>
                  글쓰기
                </Link>
                
              </div>
              <div className="write_btn2">
                <Link to="/page">상세페이지</Link>
              </div>
            </div>
          }
        />
        <Route path="/form" element={<Form />}></Route>
        <Route path="/page" element={<Page />}></Route>
        <Route path="/sign" element={<Sign email={""} password={""} />}></Route>
        <Route
          path="/login"
          element={<Login email={""} password={""} />}
        ></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;