innovationacademy-kr/24hane-frontend

42서울 출입기록 관리 서비스

24hane-frontend's Issues

jwt 토큰으로 인증변경

• 기존 세션에서 인증방법을 jwt로 변경.

페이지 접근 시 Nan 이 보이는 현상

문제

• 데이터가 페칭 전 데이터가 없을때 사용자에게 보이는 문제.
• 렌더링이 된 후 API를 통해 데이터를 불러오는 과정에서 데이터가 불러오기전에 이미 컴포넌트가 렌더링이 된 후라 Nan이 사용자에게 먼저 보이는 문제가 현재 발생.
• 데이터가 불러지기전에 사용자에게 Nan이 보이는 현상은 사용자 경험에 좋지 않다고 판단하였습니다. 데이터 로딩 시 별도의 컴포넌트를 보여주기로 하였습니다.
  React18에 도입된 suspense 를 이용하여 로딩 시 fallback UI를 보여줄수 있게 처리하였습니다.

에러

에러메시지

Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.

• ReactQuery의 onSucess와 React의 Suspense를 함께 이용할때 언마운트된 컴포넌트의 state를 조작하는 문제가 있었고 링크의 이슈를 보고 해결 하였습니다.

홈 뷰 배경 이미지 스크롤에 따른 크기 변경

홈 뷰에서 배경 이미지가 스크롤 여부에 따라 크기가 변경되어 UX상으로 좋아보이지 않는 현상이 모바일 기기에서 존재한다.
해당 이미지가 보이는 영역을 조절해서 해결해보자.

로그인 API 연동

user 상태를 저장하고 있을 redux 생성

로그인 로직 결정

• 기본적으로 API 요청을 했을때 응답값이 401 이면 로그인이 되어 있지 않음. 응답값으로 프론트 측에서 로그인 유무를 판단하여 처리한다.
• 메인 페이지에서는 로그인이 되어있는지 확인 하는 API user/login/isLogin 을 통해서 로그인이 되어있는지 확인하여 Main 페이지로 리다이렉트 시킨다.

로그인기능

[FE] 홈 뷰의 하루, 월 카드 버튼 유지하는 기능 추가

홈뷰에서 상단의 하루 시간을 나타내는 카드와, 월 시간을 나타내는 카드가 열려 있는 경우 계속 유지 할 수 있도록 localstorage 각각의 버튼이 열려있는지 유무를 확인하는 코드를 추가합니다.

타이틀 오타 수정 필요

0. public/index.html
1. public/manifest.json
2. public/manifest.json

24hoursnotenogh 를 24hoursnotenough로 수정이 필요합니다.

렌더링 최적화

현재상태

• 카드가 뒤집히는 효과는 부모 컴포넌트(Card) 에서 프로필카드와 타임로그 카드를 미리 렌더링한 후에 리플로우를 줄이기 위해서 css 의 transform 을이용하여 카드의 앞, 뒤에 맞는 컴포넌트를 보여주는 상태.
• 카드의 상태(앞,뒤)를 나타내는 state (isCardFlipped) 만 바뀌고 각 프로필카드와 타임로그 카드에서의 내부 데이터(props)는 바뀌지 않는다.
• 기존의 데이터를 그대로 사용하는 컴포넌트들을 메모이제이션을 이용하여 리렌더링을 줄일 수 있다.

결과

- 기존에는 DurationTime, CardContents등 불필요한 컴포넌트까지 리렌더링이 되었다면 메모이제이션을 적용 한 후에는 불필요한 컴포넌트들이 렌더링 되지 않는다. - 렌더링 비용 측정을 위해 Profiler API 를 이용해 측정 하였다. 기존 1.6ms에서 0.8ms로 1/2 로 줄었다.

프론트 백 연동

[FE] FIX: 이중으로 막던 isLogin 유무 코드 삭제

토큰 유무 및 토큰이 유효한지 여부 외에도 isLogin이라는 변수를 통해서 로그인이 온전한 절차(로그인 버튼->백엔드-> /auth) 를 통해 들어왔을 때만 가능하도록 코드를 뒀었으나, 토큰이 유효한 경우에 접근이 되도록 코드 변경합니다.

현재 백엔드 로그인 시, callback으로 /auth로 넘어와야하나 간헐적으로 500에러가 나오는 버그가 있어서, 해당 기능을 삭제하고 500에러가 났지만 유효한 토큰을 발급 받았다면 로그인이 되도록 변경합니다.

로그아웃 시, 쿠키에 있는 토큰 삭제가 안되는 문제

로컬에서는 로그아웃 버튼 클릭 시, 토큰이 잘 삭제 되지만

실제 웹에 올라간 메인 도메인에서는 토큰이 삭제가 되지 않는 버그가 있습니다.

프론트엔드 환경셋팅

• React 초기 작업 셋팅
• #3

S3 Deploy Fix

최근 입실 시간 보여주는 기능 추가

• 현재는 입, 퇴실 짝이 맞을때만 보여주는 로직으로 최근 입실 시간을 볼 수 있으면 좋을거 같다는 문의사항에 따라서 해당 기능을 추가 합니다.
• 기존의 v1/tag-log/maininfo 의 추가된 tagAt 필드를 이용 합니다.

iOS 주소표시줄 위치에 따른 하단 메뉴바 크기 조절

https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar

https://pedia.watcha.com/ko-KR

ios에서 스크롤시 하단 메뉴바가 안보이는 경우, 메뉴바 크기를 조�절하려고 합니다.

왓챠피디아에서 이미 해당 방식으로 동작되고 있는 것을 확인하였고, 해당 코드를 분석해서 조정할 예정입니다.

UI 검수 변경 사항 적용

공통

• 전체적인 사이즈 늘리고 폰트사이즈 키우기.

• footer

  • 위치를 카드 바로 밑으로 변경
  • Gihub링크
  • 공지사항(안내사항)노션링크

메인

• 타이틀 변경
  24HANE
  24 hours are not enough
• 전체적인 정렬 맞추기
• 상태 표시 원에 마우스 오버 시 해당 상태 보여주기

로그

• 로그 포맷팅 변경
  • 예) 8월28일 -> 8/28
  • 8시간58분09초 -> 08:58:09
• 테이블 헤더 고정

UI 작업

• 피그마 참고해서 UI 작업

[FE] PWA 적용

pwa 적용을 위한 issue 입니다.

센트리 연결

• 센트리 초기 셋팅
• 센트리에 에러가 표시되지 않는 경우
• 센트리 에러 메시지 포맷팅
• local 말고 dev 서버에서 확인.

최근 입실 시간 24시간표시가 되지 않습니다.

src/utils/dayjs.ts
line : 8

const dateToFormatFullKor = (date: string) => {
  //return dayjs(date).format"YYYY년 M월 D일 hh시 mm분 ss초");
  return dayjs(date).format"YYYY년 M월 D일 HH시 mm분 ss초");
};

이거 건드리면 되나요

이번달 기록에 대한 api 캐싱 부분 코드 변경

이번달인 경우, 기존 기록이 있고 없고의 유무에 따라서 api를 부를지 말지 결정하여 api 요청을 최소화하는 코드가 있었으나,
해당 코드로 인한 오류가 있어서 이번의 백엔드 api 속도가 전반적으로 빨라짐에 따라 해당 기능을 간소화하여 이번 달인 경우 perMonth api를 요청하도록 수정할 계획입니다.

ReactQuery 도입

도입 이유

• 24HANE 의 데이터들이 서버데이터에 의존적이여서 API통신이 빈번하게 일어납니다.

• onSuccess, onError 등의 옵션을 이용하여 API 요청에 대한 처리를 간단하게 할 수 있습니다.

• 브랜치를 파서 작업 후에 괜찮다면 도입할 예정

프론트 작업

• 사용할 데이터에 대한 redux 추가
• 프론트 작업
• 에러 페이지 추가
• 관리자 엑셀파일 다운 기능 구현
• #7

로그인 된 상태에서 로그인 화면이 보이고나서 메인페이지로 이동하는 이슈

• 401 에러 isLogin 관련 에러 처리
• route 에 protected 관련 처리 해야 함.
  https://www.robinwieruch.de/react-router-private-routes/

CI/CD 작업

TokenError

{"err":{"name":"TokenError","message":"Client authentication failed due to unknown client, no client authentication included, or unsupported authentication method.","code":"invalid_client","status":500}}

• 42 Auth API 키 값 만료
• 인트라에서 재발급받은 키 값으로 변경 후 해결

V3 업데이트

V3 변경 사항

이용 시간일

• 일 이용 시간 클러스터 IN 인 경우, 시간이 움직입니다.
  • 분 단위 카운트 됩니다.
• 목표시간
  • 기본값 4 -> 12h 변경
• 안내문 모달이 추가되었습니다.

월 누적 시간

• 목표 시간 삭제
• "인정 시간" 추가
• "인정 시간" 이름 클릭 시, 안내문 모달 뜹니다.

실시간 현황

• 서초 삭제
• 개포 -> 서울로 명칭 변경

달력

• ‘일' 마다 인정 시간을 넘을 시, 캘린더 '일' 오른쪽 상단에 회색 인디케이터 추가
• 토글 버튼 형태로 "총 시간", "인정 시간"으로 값 변경 됨.

LOG IN 버튼을 통해 Redirection 시 간헐적으로 mainmain으로 이동

일정 시간이 지난 후 재 로그인 시 ~.kr/main이 아닌 ~.kr/mainmain으로 이동하여 404 페이지로 접근됩니다.

home 뷰에서 사용하는 api 교체

이전의 perMonth에서 값을 받아오는 방식으로 오늘 누적, 월 누적을 계산했었습니다.
그 당시 백엔드에서 api 요청 후 값을 받아오는데 시간이 오래 걸렸기 때문에 이 방식으로 값을 계산했었는데,
성능 업데이트가 있음에 따라 다시 원래의 목적에 맞는 api를 사용하도록 변경할 예정입니다.

GA적용

구글 애널리스틱 적용

ChunkLoadError

404 페이지 추가

404 페이지 추가

    {
      path: "/404",
      name: "notFound",
      component: NotFoundViewVue,
    },
    {
      path: "/:pathMatch(.*)*",
      redirect: "/404",
    },

유효하지 않은 라우터의 경우 /404 로 가도록 설정하여 404 페이지를 보여주는 방식으로 처리할 계획입니다.

hotfix: 선택할 월 제대로 안나오는 문제

22년과 현재월을 제외한 중간 월들이 안나오는 문제 발생

시간 포맷이 이상함

401 에러 isLogin 관련 에러 처리

월이 바뀌었을때 로그가 안보이는 오류

월이 지났을때 로그가 안보이는 현상이 있습니다.
월이 변경 되었을 때 로그 전체를 관리하는 logContainer에 새로운 월이 추가가 되지 않았기 때문에 발생하는 문제입니다.