tesseractjh / turktionary_frontend

튀르크어 오픈사전 프론트엔드

📖 Turktionary

사용자 참여형 튀르크어 사전 (개발중... 🛠)

백엔드 레포: https://github.com/tesseractjh/turktionary_backend

🎨 구현 화면

• 회원가입 / 로그인

• 언어별 품사 등록

• 단어 등록

🔧 기술 스택

Frontend

• React
• TypeScript
• Emotion
• Recoil
• React Query

Backend

• Express
• MySQL

turktionary_frontend's Issues

useAPI, useMutationAPI 리팩토링

• 지금은 access token이 만료되었을 때 refresh token이 유효하다면 기존의 요청에 대한 응답에 새로 발급된 access token을 추가로 같이 응답해주는 방식을 취하고 있음. 이 방식에서 응답을 access token이 유효하지 않음을 { refreshAccessToken: boolean }으로 보내도록 하고, 이 응답을 받으면 '/refresh' 요청을 다시 날려서 새 access token과 refresh token을 발급받고 다시 원래 하려던 요청을 다시 하는 방식으로 변경
• access token을 필요로 하는 (로그인을 필요로 하는) 요청과 그렇지 않은 요청을 분리하여 각각 별도의 커스텀 훅으로 관리하기
  • useAPI, useMutationAPI -> useAPI, useAPIWithToken, useMutationAPI, useMutationAPIWithToken
• access token을 새로 발급받았을 때 데이터가 빈 객체가 되거나, 로그인 상태가 해제되는 버그 수정
• React Query의 queryKey를 일관된 방식(getAccessToken => accessToken)으로 변경하기

품사 페이지에 React.lazy 적용

• 품사 페이지(/lang_name/pos)에 React.lazy 적용하여 코드 분할하기
• 메인 페이지에 Fallback 스피너 컴포넌트는 코드 분할하지 않도록 변경하기

React.lazy로 코드 분할하기

• Route별로 렌더될 컴포넌트들을 React.lazy로 불러오도록 변경

반응형 구현

• 공통된 크기의 컴포넌트들의 규격을 모듈화하기
• ThemeProvider를 통해 미디어쿼리 적용하기

Dictionary 컴포넌트 UI 수정

• Content 컴포넌트 가운데 정렬
• Content와 Footer 사이에 여백이 없도록 Content 길이 늘이기
• 단어 추가, 품사 목록 버튼 hover CSS 추가
• 단어 추가, 품사 목록 버튼이 해당 페이지에서는 강조되어 표시되도록 하기
• 모바일에서 Dictionary 컴포넌트의 padding 조정

react-query 적용하기

• react-query를 적용하여 클라이언트와 서버의 상태 분리하기
  클라이언트 상태는 recoil로, 서버 상태는 react-query로 분리하여 관리하고자 함

사전 메뉴에서 마우스 스크롤로 가로 스크롤 조작하는 기능 추가

• 사전 메뉴에서 마우스 스크롤로 가로 스크롤을 조작할 수 있도록 기능 구현

/info/header API 삭제에 따른 useLogin 변경

• 유저 정보(닉네임, 경험치)를 얻기 위한 api 추가
• 알림을 얻기 위한 api 추가
• useLogin에서 access token을 얻기 위한 요청, 유저 정보를 얻기 위한 요청, 알림을 얻기 위한 요청을 각각 따로 보내기

Footer 컴포넌트 추가

• Footer 컴포넌트 추가

품사 등록 기능 추가

• 품사 등록 기능 추가
  • 언어별 품사 목록 조회 페이지
  • 언어별 품사 등록 기능
  • 언어별 품사 편집 기능
  • 언어별 품사 수정 제안 기능
• 편집 페이지에 들어갈 히스토리 컴포넌트 추가

API 명세 변경에 따른 수정

• 품사 등록, 수정에 대한 로그 테이블을 별도로 추가함에 따른 변경
• 어휘 테이블 컬럼명 변경(word -> headword), 품사 테이블 컬럼 삭제(pos_order)

카카오 로그인 기능 구현

카카오 로그인 버튼을 누르면 카카오 OAuth 로그인을 요청하도록 하기

헤더 기능 완성하기

• 알림 버튼
  • 알림 카운트 표시
  • 알림 읽음/안 읽음 표시
• 내 정보 드롭다운 메뉴 완성하기
  • 회원 정보(닉네임, 레벨, 경험치 표시)
  • 마이페이지 버튼
  • 로그아웃 버튼
• 스크롤시 헤더 상단 고정
• 스크롤이 검색창을 완전히 지나치면 헤더에 검색창 표시
  • 태블릿, 모바일에서는 헤더 하단에 표시하고 사전 선택 메뉴를 숨김(대신 상단에 사전 언어 선택 메뉴 추가)

헤더 로그인 여부 확인 전에 렌더링 방지

• useLogin 내부의 useEffect를 useLayoutEffect로 변경하여 로그인 이전 상태의 로그인 버튼이 나타났다가 사라지는 깜빡임 현상 방지하기

단어 페이지 추가

• 품사 페이지, 단어 페이지 하단에 라이센스 표시
• 단어 조회 페이지
• 단어 등록, 편집 페이지
  • 동원어, 유의어, 반의어, 품사 선택 기능
  • 뜻, 예문, 어원 추가 기능
  • 히스토리 기능
    • 편집단위 또는 항목별 히스토리 확인 기능
    • 항목별 히스토리의 선택된 항목은 로컬 스토리지에 저장
• 단어 신고 기능 (히스토리별로 신고)

로그인, 회원가입 페이지 구현

• 로그인, 회원가입 페이지 구현
• 로그인, 회원가입 API 연동

아이디 중복 검사 버그

• 회원가입 페이지에서 아이디 중복 검사 요청 후 응답을 받기 전에 input이 변동되면 이전 input으로 중복 여부를 검사하여 유효하지 않은 아이디로 회원가입이 될 수 있음

useAPI에서 access token 갱신 자동화

• useAPI에서 가져온 데이터에 accessToken이 포함되어 있을 경우 자동으로 accessToken을 갱신하도록 변경
  • useLogin에서 별도로 useSetAccessToken을 사용하여 토큰을 갱신하지 않도록 하기