5주차과제 - 전역 상태 공유 및 리팩토링

[nunoria]

5주차-상태 공유 및 리팩토링

개요

• createContext, useContext 사용한 전역상태관리
• 커스텀 훅 구현
• 컴포넌트 분리등 리펙토링

구현 내용

1. 기본과제

[전역상태 관리]

• SesseionProvider를 구현하여 로그인 및 관련 메서드를 전역으로 사용

  • session : 로그인 상태 정보
  • isAdmin : 관리자 여부
  • login(), logout(), getSession(), setAdmin(): 상태 변경 함수

  /* hooks/Session.jsx */
  const SessionContext = createContext();
  export function SessionProvider({ children, expireTime = 3600 }) {
  // ... 기능 구현
  
    return (
        <SessionContext.Provider value={{ session, getSession, login, logout, isAdmin, setIsAdmin }}>
            {children}
        </SessionContext.Provider>
    );
  }
  
  /* App.jsx */
  function App() {
  //... 기능 구현
    return (
      <BrowserRouter>
        <SessionProvider expireTime={600}>
          <Toaster position="bottom-center" reverseOrder={false} />
          <Routes>
            <Route path="/" element={<Layout />}>
              <Route index element={<Dashboard />} />
              <Route path="LeaveRequest" element={<LeaveRequest />} />
              <Route path="Members" element={<Members />} />
              <Route path="Attendance" element={<Attendance />} />
            </Route>
          </Routes>
        </SessionProvider>
      </BrowserRouter>
    );
  }

2. 선택과제

[커스텀 훅]

• useSession 구현 및 사용

  /* hooks/Session.jsx */
  export function useSession() {
      const context = useContext(SessionContext);
      if (!context) {
          throw new Error("useSession must be used within a SessionProvider");
      }
      return context;
  }
  
  /* pages/LeaveRequest.jsx */
  export default function LeaveRequest() {
  // ...기타 기능 구현
      useEffect(() => {
  
          if (!session) {
              setUser(null);
              setUserLeaveList([]);
              return;
          }
  
          // 세션 정보가 있는 경우 user 정보 가져오기
          const foundMember = getMember({
              memberId: session.id
          })
          if (foundMember) {
              const userLeaveList = getLeaveList({
                  memberId: foundMember.id
              })
  
              setUser(foundMember);
              setUserLeaveList(userLeaveList);
          } else {
              console.error("로그인된 유저가 없습니다.");
          }
  
      }, [session]);

[mock API ]

1. mock data를 json 파일로 저장

   1. attendance.json
   2. leave.json
   3. member.json

2. App 마운트시 각 json 파일을 localStorage 에 저장

   /* App.jsx */
     // json 파일을 storage에 저장
     setAttendanceList(attandanceList);
     setLeaveList(leaveList);
     setMemberList(memberList);

3. lib/storage 에 localStorage 에 대한 data 처리(get, update) 함수 구현

   /* lib/storage.js */
   
   export function getAttendanceList({ memberId })
   export function updateAttendanceList(record)
   export function getLeaveList({ memberId })
   export function updateLeaveList(record)
   export function getMemberList()
   export function getMember({ memberId } = {})

3. 기타 구현

• 로그인 구현
  • 로그인 페이지 구현
    • 이기범,김도완, 조범구,류제원 이름으로 로그인
  • 기존 구현 내용을 로그인 유저 상황에 맞게 리팩토링
• 관리자 모드 구현
  • “직원 현황” 메뉴는 관리자 모드에서만 접근 가능
  • “근태 현황” 페이지에서 직원 검색 기능은 관리자 모드에서만 가능
• 스위치 컴포넌트 구현

추가 Library

주요 학습내용

UI/UX 특징