gdsc-hongik / gdsc-admin Goto Github PK

✨ 어떤 작업인가요?

배포 에러 해결했습니다.
HeaderRightElement에 반환값을 Record<ManagementVariant, ReactElement | null>로 지정해주었는데 모든 variant에 대해서 정의를 해주지 않아 발생한 문제입니다.

AS-IS

TO-BE

HeaderRightElement에 모든 variant를 지정해주도록 변경

☑ TODO

• HeaderRightElement에 모든 variant를 지정해주도록 변경

✨ 어떤 작업인가요?

현재는 회비 납부 상태가 미납이라면, 납입 버튼이 활성화되어있고, 해당 버튼을 클릭하면 납입 상태가 변경되는 방식으로 작동합니다.
이를, 토글 버튼 방식으로 미납 상태라면 미납 버튼이 활성화, 미납 버튼을 누르면 납입 상태도 납입으로 변경되고, 납입 버튼이 활성화되는 방식으로 변경합니다.

AS-IS

TO-BE

회비 납부 여부 처리 방식 변경

☑ TODO

• 회비 납부 여부 처리 방식 변경

✨ 어떤 작업인가요?

버셀로 배포한 어드민 사이트에서 새로고침을 하면 404가 뜨는 문제가 있습니다.
이 문제를 해결합니다.

AS-IS

TO-BE

버셀 배포 사이트 새로고침 시 404 뜨는 문제 해결

☑ TODO

• 버셀 배포 사이트 새로고침 시 404 뜨는 문제 해결

✨ 어떤 작업인가요?

깃허브 소셜 로그인 쪽 이슈가 있어서 기본 로그인으로 변경합니다.

AS-IS

TO-BE

깃허브 소셜 로그인 기본 로그인으로 변경

☑ TODO

• 깃허브 소셜 로그인 기본 로그인으로 변경

✨ 어떤 작업인가요?

회비 납부 여부 관리 페이지 레이아웃을 구현합니다.

AS-IS

TO-BE

• 회비 납부 여부 관리 페이지 레이아웃 구현
• 승인 모달창 구현

☑ TODO

• 회비 납부 여부 관리 페이지 레이아웃 구현

✨ 어떤 작업인가요?

깃허브 소셜 로그인 부분에서 문제가 생겼던 부분이 해결되어 기본 로그인에서 다시 깃허브 소셜 로그인으로 변경합니다.

AS-IS

TO-BE

기본 로그인에서 깃허브 소셜 로그인으로 변경

☑ TODO

• 기본 로그인에서 깃허브 소셜 로그인으로 변경

✨ 어떤 작업인가요?

자잘한 수정 사항을 반영합니다.

• 학과 필드 단어 단위로 줄바꿈되도록 수정
• 파일명 변경

AS-IS

TO-BE

• 학과 필드 단어 단위로 줄바꿈되도록 수정
• 파일명 변경

☑ TODO

• 학과 필드 단어 단위로 줄바꿈되도록 수정
• 파일명 변경

✨ 어떤 작업인가요?

스토리북을 사용하지 않아 삭제합니다.

AS-IS

TO-BE

☑ TODO

• 스토리북 삭제

✨ 어떤 작업인가요?

https 설정을 해줍니다.

AS-IS

TO-BE

https 설정

☑ TODO

• https 설정

✨ 어떤 작업인가요?

QA 후 반영되어야 하는 사항이 있어 반영합니다.

• 페이지네이션 페이지 넘어가는 동작 안 하는 부분 수정
• 맨 처음 접속 시 전체 멤버 관리 페이지로 내비게이션 되도록 수정
• 각 페이지 멤버 관리 설명 추가
• 로그아웃 추가
• 승인 가능 멤버 관리 페이지에 수정 기능 추가

AS-IS

TO-BE

• 페이지네이션 페이지 넘어가는 동작 안 하는 부분 수정
• 맨 처음 접속 시 전체 멤버 관리 페이지로 내비게이션 되도록 수정
• 각 페이지 멤버 관리 설명 추가
• 로그아웃 추가
• 승인 가능 멤버 관리 페이지에 수정 기능 추가

☑ TODO

• 페이지네이션 페이지 넘어가는 동작 안 하는 부분 수정
• 맨 처음 접속 시 전체 멤버 관리 페이지로 내비게이션 되도록 수정
• 각 페이지 멤버 관리 설명 추가
• 로그아웃 추가
• 승인 가능 멤버 관리 페이지에 수정 기능 추가

✨ 어떤 작업인가요?

전체 멤버 관리 레이아웃 구현

AS-IS

TO-BE

• 페이지 레이아웃
• 멤버 정보 수정 모달

☑ TODO

• 페이지 레이아웃
• 멤버 정보 수정 모달

✨ 어떤 작업인가요?

현재는 그냥 해당 상태 전체를 불러와서 구조 분해 할당을 통해 사용하고 있습니다.
예시로, 스토어에 A, B 속성이 있는데 Component1 컴포넌트에서는 A, Component2 컴포넌트에서는 B를 사용하고 있습니다.
두 컴포넌트는 각각 해당 상태 전체를 불러와서 구조 분해 할당을 통해 사용하고 있다면, B 속성이 변경되었을 때 Component1에서도 리렌더링이 발생하게 됩니다.

이를 방지할 수 있게 해주는 것이 selector 함수입니다.
selector 함수를 사용하면 딱 필요한 상태만 가져와서 해당 상태가 리렌더링될 때 해당 컴포넌트만 리렌더링됩니다.

AS-IS

TO-BE

전역 상태 selector 사용하도록 변경

☑ TODO

• 전역 상태 selector 사용하도록 변경

✨ 어떤 작업인가요?

현재 멤버 정보 수정 시 모든 필드가 다 작성되지 않았다면 저장하기 버튼이 활성화되지 않습니다.
하지만, 아직 디스코드 인증을 하지 않은 사용자는 디스코드 닉네임과 디스코드 사용자명이 null 값이기 때문에 이 validation 적용으로 인해 학과 정보 등을 수정하지 못합니다.
따라서 이 validation을 삭제합니다.

AS-IS

TO-BE

멤버 정보 수정 시 모든 필드가 다 작성되었는지 확인하는 validation 삭제

☑ TODO

• 멤버 정보 수정 시 모든 필드가 다 작성되었는지 확인하는 validation 삭제

✨ 어떤 작업인가요?

회비 납부 여부 페이지 검색 api를 연결합니다.

AS-IS

TO-BE

회비 납부 여부 페이지 검색 api 연결

☑ TODO

• 회비 납부 여부 페이지 검색 api 연결

✨ 어떤 작업인가요?

api RequestDto, ReponseDto 타입들을 리팩토링합니다.

AS-IS

TO-BE

Api RequestDto 리팩토링
Api ResponseDto 리팩토링

☑ TODO

• Api RequestDto 리팩토링
• Api ResponseDto 리팩토링

✨ 어떤 작업인가요?

멤버 정보 수정 모달 코드를 리팩토링합니다.

AS-IS

TO-BE

☑ TODO

• 멤버 정보 수정 모달 내부 컴포넌트명 변경
• validation 객체에 isError, helperText 속성 추가

✨ 어떤 작업인가요?

로그인 기능 구현

AS-IS

TO-BE

로그인 기능 구현

☑ TODO

• 로그인 화면 구현
• 로그인 api 연동

✨ 어떤 작업인가요?

HeaderRightCol 컴포넌트에 리팩토링해야 할 부분이 있어 리팩토링합니다.

AS-IS

TO-BE

공통 로직 추상화
엑셀 다운로드 로직 유틸 함수로 분리

☑ TODO

• 공통 로직 추상화
• 엑셀 다운로드 로직 유틸 함수로 분리

✨ 어떤 작업인가요?

현재는 전체 멤버 관리 페이지 기준 searchText, searchType을 지역 상태로 사용하고 있습니다.
그래서 Header 컴포넌트 자체에서는 이를 사용하지 않고 HeaderLeftCol, HeaderRightCol 컴포넌트에서만 사용합니다.
지역 상태를 사용하고 props drilling을 발생시키는 것보다 context api나 전역 상태로 관리해보려고 합니다.
다만, context api를 사용하기에는 여러 컴포넌트에서 해당 상태를 사용하고 있어 리렌더링 문제가 발생할 것 같습니다.
따라서, 전역 상태로 관리해보려고 합니다.

현재 selectedMember 관련 로직도 지역 상태로 관리 중인데, props drilling이 발생하기 때문에 변경이 필요합니다.
다만 이를 구독한 컴포넌트들이 많지 않고, 여러 컴포넌트에서 다른 값들을 가져다 써야 하기 때문에 컨텍스트 api로 변경합니다.

또한 HeaderLeftCol 로직이 상당히 복잡한데, 최대한 공통 로직을 빼고, 복잡한 if문을 object mapping 방식으로 리팩토링합니다.

AS-IS

TO-BE

searchText, searchType를 전역 상태로 변경
HeaderLeftCol 관련 복잡한 로직들 리팩토링 (if문 로직 최대한 추상화, object mapping으로 변경)
selectedMember 관련 로직 컨텍스트 api로 변경

☑ TODO

• searchText, searchType를 전역 상태로 변경
• HeaderLeftCol 관련 복잡한 로직들 리팩토링 (if문 로직 최대한 추상화, object mapping으로 변경)
• selectedMember 관련 로직 컨텍스트 api로 변경

✨ 어떤 작업인가요?

멤버 상세 정보 모달 코드를 리팩토링합니다.

AS-IS

TO-BE

☑ TODO

• filterMemberDetailInfo 함수 리팩토링

✨ 어떤 작업인가요?

전체 멤버 관리 페이지에서 멤버 수정 기능을 구현합니다.

AS-IS

TO-BE

전체 멤버 관리 페이지 멤버 수정 기능 구현

☑ TODO

• 전체 멤버 관리 페이지 멤버 수정 api 연결
• 학과 리스트 검색 api 연결
• 각 필드 validation 추가

✨ 어떤 작업인가요?

현재는 색상값, 타이포를 직접 입력하는 방식으로 코드가 작성되어있습니다.
styles 폴더 내부 상수 값으로 선언해서 사용하도록 리팩토링합니다.

AS-IS

TO-BE

styles 폴더 내부 상수 값으로 스타일 속성 선언 후 사용

☑ TODO

• 색상값 palette 내부 상수값 이용하도록 변경
• 타이포 typo 내부 상수값 이용하도록 변경

✨ 어떤 작업인가요?

회비 납부 여부 페이지 api를 연결합니다.

AS-IS

TO-BE

회비 납부 여부 페이지 api 연결

☑ TODO

• 회비 납부 여부에 따른 전체 회원 목록 조회 api 연결
• 회비 납부 상태 변경 api 연결

✨ 어떤 작업인가요?

가입 대기 멤버 관리 - 가입 대기 회원 관리 페이지를 리팩토링합니다.

AS-IS

TO-BE

☑ TODO

• 변경 사항 반영

✨ 어떤 작업인가요?

현재 작성된 로컬 스토리지 메서드는 아래와 같이 에러를 캐치하면 빈 문자열을 반환합니다.
보다 명확하게 에러 핸들링을 하기 위해서 코드를 수정합니다.

private deserialize = (value: string) => {
    try {
      return JSON.parse(value);
    } catch (e) {
      return "";
    }
  };

AS-IS

TO-BE

로컬 스토리지 메서드 에러 핸들링

☑ TODO

• 로컬 스토리지 메서드 에러 핸들링

✨ 어떤 작업인가요?

승인 가능 멤버 관리 페이지에서 승인 처리 후 새로고침하지 않으면 데이터가 업데이트되지 않는 문제를 해결합니다.
invalidateQueries 속성을 누락하여 이 부분을 추가합니다.

AS-IS

TO-BE

승인 가능 멤버 관리 페이지에서 승인 처리 후 새로고침하지 않으면 데이터가 업데이트되지 않는 문제 해결

☑ TODO

• 승인 가능 멤버 관리 페이지에서 승인 처리 후 새로고침하지 않으면 데이터가 업데이트되지 않는 문제 해결

✨ 어떤 작업인가요?

대기 멤버 관리 페이지 검색 api를 연결합니다.

AS-IS

TO-BE

대기 멤버 관리 페이지 검색 api 연결

☑ TODO

• 대기 멤버 관리 페이지 검색 api 연결

✨ 어떤 작업인가요?

기존에는 useQueryClient를 사용해서 query client instance를 불러왔습니다.
이는 컴포넌트 단 범위에서만 사용되고, 해당 컴포넌트가 마운트되어 있는 동안만 유효합니다.

하지만, react 라이브러리의 cache 함수를 사용해서 싱글톤 인스턴스 생성 후 사용하게 되면 전역에서 유효하고 여러 컴포넌트 간 동일한 인스턴스로 접근이 가능합니다.

또한, useQueryClient를 사용하는 경우에는 컴포넌트의 렌더링 단계에서 해당 QueryClient에 접근할 수 있습니다.
반면 cache 함수를 사용해서 싱글톤 인스턴스를 생성하는 방법은 인스턴스가 이미 생성되어 있으므로 즉시 접근할 수 있습니다.

AS-IS

TO-BE

useQueryClient 대신 react 라이브러리의 cache 함수를 이용한 getQueryClient 함수 정의 후 사용

☑ TODO

• useQueryClient 대신 react 라이브러리의 cache 함수를 이용한 getQueryClient 함수 정의 후 사용

✨ 어떤 작업인가요?

테이블 컴포넌트를 리팩토링합니다.

AS-IS

TO-BE

☑ TODO

• 명령형 코드 함수형 프로그래밍 방식으로 리팩토링
• 공통 함수로 추출 가능한 부분 리팩토링

✨ 어떤 작업인가요?

전체 멤버 관리 페이지에서 엑셀 다운로드 api를 연결합니다.

AS-IS

TO-BE

전체 멤버 관리 페이지 엑셀 다운로드 api 연결

☑ TODO

• 전체 멤버 관리 페이지 엑셀 다운로드 api 연결

✨ 어떤 작업인가요?

함수형 프로그래밍 도입으로 인한 에러를 해결합니다.

AS-IS

TO-BE

☑ TODO

• reduce 함수 수정

✨ 어떤 작업인가요?

멤버 정보 수정 시 빈 필드는 빈 문자열 대신 null 입력하도록 변경합니다.

AS-IS

TO-BE

멤버 정보 수정 시 빈 필드는 빈 문자열 대신 null 입력하도록 변경

☑ TODO

• 멤버 정보 수정 시 빈 필드는 빈 문자열 대신 null 입력하도록 변경

✨ 어떤 작업인가요?

배포 사이트에서 CORS 이슈가 있어서 버셀 설정을 변경합니다.

AS-IS

TO-BE

배포 사이트 CORS 문제 해결

☑ TODO

• 배포 사이트 CORS 문제 해결

✨ 어떤 작업인가요?

대기 멤버 관리 페이지 api를 연결합니다.

AS-IS

TO-BE

• 대기 멤버 관리 api 연결

☑ TODO

• 대기 멤버 목록 api 연결
• 회원 승인 api 연결

✨ 어떤 작업인가요?

정회원 관리 - 전체 정회원 관리 수정 모달을 리팩토링합니다.
디자인 변경된 부분을 반영하고 상태 관리 로직도 리팩토링합니다.

AS-IS

TO-BE

☑ TODO

• 디자인 변경 사항 반영
• 상태 관리 로직 리팩토링

✨ 어떤 작업인가요?

멤버 승인 모달 코드를 리팩토링합니다.

AS-IS

TO-BE

☑ TODO

• 명령형 코드를 함수형 프로그래밍으로 변경
• 불필요한 긴 코드 리팩토링
• 불필요한 삼항 연산자 없애기

✨ 어떤 작업인가요?

현재 prettier가 작동하지 않는 문제, 타입 폴더 관련 import문에서 발생하는 에러가 있습니다.
이 에러들을 해결합니다.
또, import문 순서를 지정해주도록 설정 정보를 적용합니다.

AS-IS

TO-BE

☑ TODO

• prettier 적용 안 되는 문제 해결
• 타입 폴더 관련 import문 에러 해결
• import문 순서 지정해주도록 설정

✨ 어떤 작업인가요?

SideNavbar 변경된 디자인 및 용어를 반영합니다.

AS-IS

TO-BE

☑ TODO

• 용어 반영
• 디자인 반영

✨ 어떤 작업인가요?

프로젝트 초기 세팅을 진행합니다.

☑ TODO

• react, vite, ts 프로젝트 생성
• 절대 경로 설정 및 절대 경로 자동 변환 설정
• yarn berry 세팅
• react-query 세팅
• zustand 설치
• emotion 세팅
• eslint 규칙 추가
• #3
• cypress 세팅
• vitest 세팅
• 스토리북 세팅
• chromatic에 스토리북 배포

✨ 어떤 작업인가요?

레이아웃 및 라우터 구성

AS-IS

TO-BE

라우터 구성
페이지 레이아웃 작성

☑ TODO

• 라우터 구성
• 레이아웃 작성
• api client 구성

✨ 어떤 작업인가요?

승인 처리된 멤버 페이지를 추가 구현합니다.

AS-IS

TO-BE

승인된 멤버 페이지 레이아웃 및 api 연결

☑ TODO

• 승인된 멤버 페이지 레이아웃 구현
• 승인 멤버 리스트 api 연결

✨ 어떤 작업인가요?

로그아웃 기능 추가와 토큰 만료 처리를 추가합니다.

AS-IS

TO-BE

로그아웃 기능 추가 및 토큰 만료 처리

☑ TODO

• 로그아웃 기능 추가
• 토큰 만료 처리

✨ 어떤 작업인가요?

살짝 디자인이 깨지는 부분이 있어 수정 사항 반영합니다.

AS-IS

TO-BE

자잘한 디자인 수정

☑ TODO

• 자잘한 디자인 수정

✨ 어떤 작업인가요?

정회원 관리 중 전체 정회원 관리 페이지 리팩토링 진행합니다.
1차 MVP와 달라진 용어 및 디자인 반영합니다.

AS-IS

TO-BE

☑ TODO

• 변경사항 반영

✨ 어떤 작업인가요?

회비 관리 - 회비 납부 관리 페이지를 구현합니다.

AS-IS

TO-BE

☑ TODO

• 회비 관리 - 회비 납부 관리 페이지 레이아웃 구현

✨ 어떤 작업인가요?

운영진 요청에 따라 승인 가능(모든 조건이 충족돼서 승인 버튼만 누르면 되는) 멤버 페이지를 추가합니다.

AS-IS

TO-BE

승인 가능 멤버 페이지 레이아웃 구현 및 api 연결

☑ TODO

• 승인 가능 멤버 페이지 레이아웃 구현
• 승인 가능 멤버 리스트 조회 api 연결
• 멤버 승인 api 연결

✨ 어떤 작업인가요?

기존에는 yarn berry를 사용하였는데 pnpm으로 패키지 매니저를 변경합니다.

AS-IS

TO-BE

☑ TODO

• pnpm으로 패키지 매니저 변경

✨ 어떤 작업인가요?

대기 멤버 관리 레이아웃을 구현합니다.

AS-IS

TO-BE

• 대기 멤버 관리 페이지 레이아웃 구현
• 멤버 상세 정보 모달 구현

☑ TODO

• 대기 멤버 관리 페이지 레이아웃 구현
• 멤버 상세 정보 모달 구현

✨ 어떤 작업인가요?

전체 멤버 관리 페이지 api를 연결합니다.

AS-IS

TO-BE

☑ TODO

• 전체 회원 목록 조회 api 연결
• 회원 탈퇴 api 연결
• 검색창 api 연결

✨ 어떤 작업인가요?

머지하면서 삭제되었던 로컬 스토리지 메서드를 다시 추가합니다.

AS-IS

TO-BE

로컬 스토리지 메서드 추가

☑ TODO

• 로컬 스토리지 메서드 추가
• 로컬 스토리지 메서드 적용