FE_Client

🐻‍❄ 프로젝트 소개

개발 기간 : 2023. 07. 24 ~ 2023. 08. 10
> 유저용 배포 사이트 : 당연하지
> 관리자용 배포 사이트 : 당연하지 관리자용
> 유저 레포지토리 : 유저
> 관리자 레포지토리 : 관리자
> 백엔드 레포지토리 : 백엔드

🌟현재 nextJs 로 마이그레이션 중입니다.
기간 : 2023.11.20 ~ 2023.11.25일 🌟

📚 STACKS

Config

Development

Deployment

💬 Communication

⚙ 프로젝트 설계

use case

🖥 페이지 별 화면

🧙🏻‍♂️ 로그인, 회원가입 페이지 구성

로그인 페이지	회원가입 페이지

프로필 수정 페이지	비밀번호 재설정 페이지

---

🧙🏻‍♀️ Side Bar - 네비게이션 페이지 구성

홈 페이지	연차 신청 페이지

당직 신청 페이지	내 일정보기 페이지

---

🧙🏻 관리자 권한 페이지 구성

관리자 로그인 페이지	유저 리스트 페이지

연차 요청 리스트 페이지	연차 리스트 페이지

당직 요청 리스트 페이지	당직 리스트 페이지

ERD

---

🔥 1차 리팩토링

-> 내가 선택한 날짜중 연차 신청 날짜가 존재하는 경우에 대한 예외 처리
-> 연차, 당직 데이터 합쳐서 출력
-> 중복 코드 customhook 만들어서 해결
-> profile contexts 제거후 recoil사용하여 구현
-> 유저 정보에서 남은연차를 표시할때 userinfo api를 사용함. header에서 사용중임에도 불구하고 중복해서 api사용. 따라 상태관리 라이브러리인 recoil을 사용하여 header에서 user정보의 남은연차 값을 store에 저장

---

✨ 프로젝트 담당 기능

🎈 1) 홈, 메인 페이지

✅내가 신청한 연차, 당직 조회
- 각각 연차, 당직에 대한 컴포넌트 생성후, restApi 를 사용해 각각의 데이터 조회.

✅내가 신청한 연차, 당직 취소
- 선택한 아이템에 대한 type, id를 매개변수로 전달받고, 조건식을 통하여 type 에 맞는 선택한 삭제 함수 호출. 해당 삭제 함수에 선택한 아이템id를 전달후 서버 상태값에 따른 업데이트 데이터 조회.

✅모든 유저의 연차, 당직 일정 조회
- 처음 페이지 mount 시 생성한 customHook useCalendarData을 통해 모든 유저 데이터 조회.

-> Promise.all을 사용하여, 캘린더에 출력되야 하는 연차, 당직의 여러 개의 비동기 작업을 병렬로 처리함. 각각의 Promise는 독립적으로 실행되므로 한 Promise의 완료를 다른 Promise에 대기하지 않고 동시에 실행되게함.
따라, 비동기 작업을 효율적으로 처리함으로써 성능 향상이 됨.
→ 연차, 당직의 restApi를 동시에 호출하는 하는 코드의 중복을 최소화 하기 위해 customhook 생성 (아래 📂useCalendarData.tsx 코드 참고)

🌟Refectoring🌟
-> 상태값에 따른 버튼 색상 적용

💻구현코드

📂dutyContainer.tsx

(이전 코드 생략)
import { StatusBox, CancelBox } from '@/styles'

return(
<DutyListBox>
  {datalist(dutyDataList).map(el => (
    <DutyList key={el.id}>
      <h2>📌 {extractDate(el.dutyDate)}</h2>
      <StatusBox status={el.status}>
        {convertStatusToText(el.status)}
      </StatusBox>
      <CancelBox
        onClick={() => deleteButton('당직', el.id)}
        status={el.status}>
        {mainTexts.dutyCancel}
      </CancelBox>
    </DutyList>
  ))}
</DutyListBox>
)

📂styleCommon.tsx

export const StatusBox = styled.div<{ status: string }>`
  width: 70px;
  border-radius: 5px;
  position: absolute;
  right: 110px;
  font-size: 12px;
  padding: 9px;
  padding-left: 13px;
  color: #ffff;

  background-color: ${({ status }) => {
    switch (status) {
      case 'PENDING':
        return '#7752FE' // 승인 대기 상태일 때 배경색
      case 'APPROVE':
        return '#F6635C' // 승인 완료 상태일 때 배경색
      case 'REJECT':
        return '#B31312' // 승인 거절 상태일 때 배경색
      default:
        return 'lightgray' // 기본 배경색
    }
  }};
`

export const CancelBox = styled(StatusBox)`
  right: 20px;
  background-color: #212a3e;
  padding-left: 25px;
  cursor: pointer;
`

→ 상태값이 출력되는 버튼, 취소 버튼 의 스타일을 공통 컴포넌트화 하였음.
따라, StatusBox는 { status }의 값을 props로 받아 조건식으로 그에 따른 버튼 색상을 지정 하였음. 이후 해당 스타일 컴포넌트를 import 하여 사용함.

→ 스타일 공통 컴포넌트화로 서로 다른 컴포넌트에도 쉽게 반영할수 있고, css-in-js의 특징을 가진 styled-components 의 장점을 활용하여 상태값을 props로 받아서 사용할수 있었음.

🌟리팩토링 후

---

🎈 2) 내 일정 보기 페이지

✅ 내가 신청한 당직, 연차 캘린더 조회
-> 캘린더 조회 customHook 을 사용해 조회 기능 구현.

-> customHook 을 사용하여 코드를 재사용하여 코드를 더욱 간결하게 하였고, 가독성이 향상되도록 구현. 결과적으로 코드 52줄 → 19줄로 감소함. 이후 초기 로딩속도 4초 -> 0.7초 개선

💻수정 후 코드

📂useCalendarData.tsx

export const useCalendarData = (
  fetchDataFunction1: Promise<AxiosResponse>,
  fetchDataFunction2: Promise<AxiosResponse>,
  getMyTitle: (item: ItemUsername) => string,
  CalDate: number
) => {
  const [viewDrow, setViewDrow] = useState<Item[]>([
    {
      title: '',
      start: '',
      end: '',
      status: '',
      type: '',
      username: ''
    }
  ])

  useEffect(() => {
    Promise.all([fetchDataFunction1, fetchDataFunction2])
      .then(([data1, data2]) => {
        const processedData1 = data1.data.response.map(
          item =>
            ({
              title: getMyTitle(item),
              start: new Date(item.startDate).toISOString(),
              end: new Date(item.endDate).toISOString(),
              type: 'ANNUAL',
              status: ''
            }) as Item
        )

        const processedData2 = data2.data.response.map(
          item =>
            ({
              ...item,
              title: getMyTitle(item),
              date: new Date(item.dutyDate),
              type: 'DUTY',
              status: ''
            }) as Item
        )
        const combinedData = [...processedData1, ...processedData2]
        setViewDrow(combinedData)
      })
      .catch(error => {
        console.error('error', error)
      })
  }, [CalDate])

  return { viewDrow }
}

→ 캘린더 일정 조회 customHook 생성

📂 Schedule.tsx

export const Schedule = () => {
  const [CalDate, setCalDate] = useState<number>(2023)

  const { viewDrow } = useCalendarData(
    MyAnnualList(CalDate.toString()),
    MyDutyList(CalDate.toString()),
    getMyTitleWithStatus,
    CalDate
  )


  return (
    <Outermost>
      <Rectangle>
        <BarBox>
          <ScheduleBarone>
            <p>{commonTexts.annualText}</p>
          </ScheduleBarone>
          <ScheduleBartwo>
            <p>{commonTexts.dutyText}</p>
          </ScheduleBartwo>
        </BarBox>
        <CalendarCommon viewDrow={viewDrow}/>
      </Rectangle>
    </Outermost>
  )
}

---

🎈 3) 연차/ 당직 신청 페이지

✅ 연차, 당직 신청 모달 -> 클릭한 버튼 type을 setSelectedModal 에 저장하여 selectedModal 업데이트.

조건식을 통하여 selectedModal === 'ANNUAL_MODAL’ 일시 해당 타입에 맞는 모달 컴포넌트 <AnnualModal/> 이 나타날수 있도록 구현.

💻구현 코드

(생략)
const handleModalClick = info => {
    let dateSelect = new Date(info.date)
    dateSelect.setHours(9, 0, 0, 0)
    if (dateSelect.getDay() === 0 || dateSelect.getDay() === 6) {
      alert('토요일 또는 일요일은 선택할 수 없습니다.')
      return false
    }

    const dupuleData = data.filter((item: DataItem) => {
      if (item.type === 'ANNUAL') {
        const startDay = item.start
        const endDay = item.end
        startDay.setHours(9, 0, 0, 0)
        endDay.setHours(9, 0, 0, 0)
        if (
          dateSelect >= startDay &&
          dateSelect <= endDay &&
          item.username === username
        ) {
          return item
        }
      } else {
        const dutyDate = item.date
        dutyDate.setHours(9, 0, 0, 0)
        if (dateSelect === dutyDate && item.username === username) {
          return item
        }
      }
      return false
    })

    console.log(dupuleData)
    if (dupuleData.length > 0) {
      alert('이미 해당 날짜에 신청한 연차가 존재합니다.')
      return false
    }

    const today = new Date()
    today.setHours(0, 0, 0, 0) //시간 분 초 초기화

    if (dateSelect < today) {
      alert('오늘 날짜 이전은 선택할 수 없습니다.')
      return
    }
    viewDrow.find(item => {
      const start = new Date(item.start)
      const end = new Date(item.end)
      if (!start || !end) {
        return false
      }
      const inRange =
        dateSelect.getTime() >= start.getTime() &&
        dateSelect.getTime() <= end.getTime()
      return inRange
    })
    setSelectedModal(
      selectedButton === 'ANNUAL' ? 'ANNUAL_MODAL' : 'DUTY_MODAL'
    )
    setSelectedDate(dateSelect)
    return false
  }

-> 조건식을 통하여 1개이상의 연차, 당직이 신청 되어있으면 "신청 연차 존재" 라는 상태값을 출력.
-> 신청 restApi 를 통해 선택한 날짜의 연차를 신청하도록 구현하였으면 신청후 결과값 업데이트 .

✅ 연차, 당직 유저 데이터
-> 연차, 당직 버튼 클릭시 각 type에 맞는 restApi 호출.

💻구현 코드

const searchData = () => {
    if (calendarRef.current) {
      if (selectedButton === 'ANNUAL') {
        allAnnualList(CalDate.toString())
          .then(data => {
            const returnDatalist = data.data.response
            const modifiedReturnDatalist = returnDatalist.map(item => ({
              title: getTitleWithStatus(item),
              username: item.username,
              start: new Date(item.startDate),
              end: new Date(item.endDate),
              type: 'ANNUAL'
            }))
            setViewDrow(modifiedReturnDatalist)
            setData(modifiedReturnDatalist)
          })
          .catch(error => {
            console.error(error)
          })
      } else {
        allDutyList(CalDate.toString())
          .then(data => {
            const returnDatalist = data.data.response
            const modifiedReturnDatalist = returnDatalist.map(item => ({
              ...item,
              title: getTitleWithStatus(item),
              username: item.username,
              date: new Date(item.dutyDate),
              type: 'DUTY'
            }))
            setViewDrow(modifiedReturnDatalist)
            setData(modifiedReturnDatalist)
          })
          .catch(error => {
            console.error(error)
          })
      }
    } else {
      console.log('년도를 찾을수 없습니다.')
    }
  }

---

✨ 프로젝트 고찰

---

👨‍👩‍👧‍👦 팀원 역할

안중후	이정환	김하은
GitHub 팀장 초기 개발 세팅 프로필 수정, 로그인, 회원가입, Header, 비밀번호 재설정	관리자 페이지 (연차/당직 승인 페이지, 연차/당직 신청 페이지, 관리자 - 전체 유저 / 회원가입 요청 리스트 페이지 )	연차/당직 사용자 페이지 (메인페이지(내가 신청한 당직, 연차 노출/ 전체 유저 일정 노출/ 신청한 연차,당직 취소), 내 일정보기 페이지, 연차/당직 신청 페이지)

---

🎈 작업 진행

1) Notion

-> 그라운드 룰, 커밋 컨벤션, api 문서 등 프로젝트에서 필요한것들을 기록해두었습니다.

✅ TodoList 문서화 기간정해서 기능 구현

✅ Api 명세서 정리

✅ 데일리 스크럼 회의록 작성

2) Github

깃허브 전략 Github Flow

-> develop branch 생성.
-> develop branch 에서 각자 이름의 branch 생성.
-> 각자 branch 에서 기능 개발이 완료되면 develop branch 로 PR 생성.
-> 깃허브 담당자가 올라온 Pull request 확인후 develop branch 로 merge.
-> 모든 기능 구현 완료후 최종적으로 develop branch 를 master branch 로 merge.

---

1️⃣ 유저/관리자 로그인 페이지

• localStorage토큰값을 통해 로그인 유저 판별 / 비로그인 유저 로그인 유저용 페이지 진입 차단 / 로그인 유저 로그인,회원가입,비밀번호 재설정 등 비로그인 유저용 페이지 분리
• 관리자가 승인을 했을 경우에만 회원가입한 아이디 사용가능

2️⃣ 회원가입 페이지

• 이메일 중복체크 API를 통해 이메일 중복체크 후 회원가입 가능
• 비밀번호(정규식을 통한 유효한 비밀번호 판별)

3️⃣ 비밀번호 재설정 페이지

• 이메일 입력시 이메일을 통해 임시 비밀번호 발급

4️⃣ 전체 홈페이지

• fullCalendar 연동후 모든 , 연차 당직 데이터 조회
• 신청 분류에 따른 이벤트 색 표시
• 내가 신청한 연차 신청 현황 데이터 조회
• 내가 신청한 당직 신청 현황 데이터 조회
• 연차, 당직 신청 취소후 fullCalendar 업데이트
• 엑셀로 다운받기 클릭시 분류(연차, 당직)에 따라 엑셀 다운로드
• 연차/ 당직 버튼 클릭시 페이지 이동

5️⃣ 프로필 수정 페이지

• 프로필 이미지 수정/삭제
• 비밀번호 변경(영어 대문자, 영어 소문자, 숫자, 특수문자를 모두 포함 (8글자 이상)) && 비밀번호 확인

6️⃣ 내 일정보기 페이지

• 현재 신청한 연차, 당직 데이터 조회

7️⃣ 연차/당직 신청 페이지

• 연차 신청, 당직 신청 버튼에 따라 데이터 다르게 조회
• 연차,당직 신청 날짜 클릭시 연차 신청 모달 생성
• 모달창에서 날짜 선택후 등록시 조건값에 따라 이미 신청된 날짜 등록 불가.

8️⃣ 관리자 - 전체 유저 / 회원가입 요청 리스트 페이지

• 토큰 값이 없으면 로그인페이지로 이동

• 사용자 측 회원가입 요청 리스트로 출력

• 사용자 측 회원가입시 관리자 승인 기능

• 전체 가입된 유저 리스트 출력

  • 유저 리스트 : 성명, 아이디, 입사일, 잔여 연차
  • 리스트는 입사일 기준으로 내림차순 정렬

9️⃣ 관리자 - 연차/당직 승인 페이지

• 연차

  • 연차 리스트 : 성명, 아이디 , 사유, 신청일, 시작일, 종료일
  • 리스트는 시작일 기준으로 내림차순 정렬
  • 추가적으로 신청일, 시작일, 종료일 기준으로 정렬 기능 추가

• 당직

  • 당직 리스트 : 성명, 아이디, 신청일, 당직일
  • 리스트는 당직일 기준으로 내림차순 정렬
  • 추적으로 신청일, 당직일 기준으로 정렬 기능 추가

• 검색 기능

  • 전체 리스트 검색
  • 사용자 성명을 통한 검색
  • 년, 월을 통한검색

🔟 관리자 - 연차/당직 리스트 페이지

• 연차

  • 요청 리스트 : 성명, 아이디, 신청일, 시작일, 종료일, 승인여부
  • 리스트는 사용자들이 신청한 기준으로 정렬
  • 승인여부에 승인 기능과 거절 기능

• 당직

  • 요청 리스트 : 성명, 아이디, 신청일, 당직일, 승인여부

• 공통

  • 승인시 사용자측에서 승인 확인 가능
  • 거절시 사용자측에서 거절확인 가능

---