2주차 스터디 PR - 출근/퇴근 버튼 기능 구현

[KoreanFever]

2주차 과제: 출근/퇴근 버튼 구현

구현 내용

• 출근/퇴근 상태 전환 기능 (출근 완료 → 퇴근 완료)
• 9시 이후 출근 시 지각 표시
• 8시간 이상 근무 시 자동 퇴근 처리
• localStorage를 활용한 출근 정보 저장

학습한 React 개념

• useState:

  • isWorking, checkInTime, isLate 등 상태 관리
  • 조건부 렌더링을 위한 상태값 활용

• useEffect:

  • 컴포넌트 마운트 시 localStorage 데이터 복원
  • 1분 간격 타이머 설정 및 정리
  • 의존성 배열을 통한 효과 제어

• 이벤트 핸들링:

  • 버튼 클릭 이벤트 처리 (handleCheckIn, handleCheckOut)
  • 이벤트에 따른 상태 업데이트

• 조건부 렌더링:

  • 근무 상태에 따른 UI 변경
  • 지각 여부에 따른 경고 메시지 표시
  • 삼항 연산자를 활용한 클래스명 동적 적용

코드 예시

// 상태 관리
const [isWorking, setIsWorking] = useState(false);

// 조건부 렌더링
{isLate && isWorking && (
  <p className="text-red-500">지각입니다!</p>
)}

// 이벤트 핸들링
<button onClick={isWorking ? handleCheckOut : handleCheckIn}>
  {isWorking ? '퇴근하기' : '출근하기'}
</button>