Feat: 가입 대기 스페이스 조회 및 삭제 #71

poco111 · 2024-12-02T07:00:30Z

Key changes 📝

가입 대기 스페이스 조회 및 삭제 구현
공통 컴포넌트 스토리북 작성

To reviewers 👋

가입 대기 스페이스 모달의 너비 설정 관련해서, 가입중인 스페이스의 너비와 동일하게 처리
- 처음에는 가입중인 스페이스의 너비를 state로 구현(ResizeObserver를 활용한 useElementWidth 훅 작성)
- 하지만, 화면 크기가 변할 때 불필요한 리렌더링이 발생하였고 디바운스를 적용해봤으나 실시간으로 너비를 정확히 반영할 수가 없는 문제 발생
- 최종적으로 css 변수를 활용(ResizeObserver를 활용한 useResizeCssVariable 훅 작성)

lolWK

고생했습니다 포코! 그냥 쭉 보면서 코멘트 조금 달아봤어요 🐱

lolWK · 2024-12-02T14:05:31Z

README.md

+     │          .
+     ├── App.tsx
+     ├── index.css
+     └── main.tsx


폴더 구조 어떤 AI가 만들어준거에요 wow

폴더구조.... 수작업....🫠

lolWK · 2024-12-02T14:06:17Z

src/components/common/input/input.tsx

  outline:
    'rounded-lg bg-transparent text-M14 text-text placeholder:text-textWeak focus:bg-white focus:text-text focus:outline-line focus-visible:outline',
-  ghost: '',
+  ghost:


lolWK · 2024-12-02T14:19:28Z

src/components/space-list/searched-space-list.tsx

+    });
+  };
+
  const renderSpaceListContent = () => {


(단순 궁금) 혹시 renderSpaceListContent를 따로 함수로 뺀 이유가 있을까요?

jsx return 문 내부에 조건 처리가 많아지면 가독성이 떨어진다고 판단해서 별도로 분리했습니다! 함수로 분리하면 조건문을 확인하기 수월하다고 판단했어요!

lolWK · 2024-12-02T14:26:17Z

src/components/space-list/waiting-space-list.tsx

+  const handleDeleteWaitingSpace = (requestId: number) => {
+    queryClient.setQueryData(
+      ['waitingSpaceList'],
+      (oldData: TWaitingSpaceData[]) => {
+        return oldData.filter((space) => space.requestId !== requestId);
+      }
+    );
+    deleteWaitingSpace(requestId, {
+      onError: () => {
+        queryClient.invalidateQueries({ queryKey: ['waitingSpaceList'] });
+      },
+    });
+  };


제가 RQ를 요즘 잘 안써서 틀릴 수도 있는데 ㅜㅜ
혹시 제가 제대로 이해했다면,,, setQueryData로 삭제 로직을 낙관적 업데이트를 위해서 이렇게 작성하신걸까요?!
삭제가 성공하지 않았을 때 invalidate로 가져오는 게 맞다면 사라졌다가 갑자기 생기기만 할 것 같아서
실패했다는 토스트나 뭔가 확인 시켜줄 수 있는 UI가 있으면 좋을 것 같아요..!

네네 일단은 낙관적 업데이트 위해서 setQueryData 적용했고, error 관련해서 토스트나 모달 처리 추가로 진행예정입니다!

lolWK · 2024-12-02T14:29:31Z

src/hooks/use-element-width.ts

+type DebounceSetWidthCallback<T> = (value: T) => void;
+
+const debounceSetWidth = <T>(
+  callback: DebounceSetWidthCallback<T>,
+  timeout = 300
+) => {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  return (value: T) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      callback(value);
+    }, timeout);
+  };
+};


요 hook이 생긴게 width에만 한정된 hook이 아니라 공통적으로도 쓸 수 있을 것 같아서 이름에 꼭 SetWidth를 같이 쓰지 않고 분리해놔도 좋을 것 같아요

lolWK · 2024-12-02T14:31:51Z

src/pages/auth-redirect-page.tsx

        {
          onSuccess: (data) => {
-            const { code, name, accessToken, refreshToken } = data;
+            const { code, name, accessToken, refreshToken, firstTime } = data;


(궁금) firstTime값은 어떻게 들어가는건가요?

혹시 "어떻게 들어간다는게" 어떤 내용을 질문하신걸까요?? 사용자가 처음 회원가입 및 로그인인 경우에는 true로, 이전에 로그인 이력이 있으면 false로 오면서 처음 로그인인 경우에만 닉네임 설정 페이지로 이동하게끔 했습니다!

lolWK · 2024-12-02T14:34:21Z

src/pages/home-page.tsx


-  if (isCheckingAuth) {
+  if (isCheckingAuth || !userCode || !userAppName) {
    return <></>;


제가 너무 오랜만에 봐서 잘 기억이 안나는데 로그인을 했다면 userCode와 userAppName이 없을 수 있는걸까요?!
<></>로 반환 시키는 이유가 있는걸까요!

지금 axios에서 refresh 토큰까지 만료된 경우에 모달을 띄우고, store에 있는 userData를 clear 및 window.location.href로 로그인 페이지로 이동하는데, 그때 현재 있는 HomePage에서 렌더링이 발생하고 Header에서 사용중인 avatar에서 userCode, userAppName이 없어서 에러가 발생하고 있어서 일단 조건부 렌더링 처리 했습니다.
HomePage 리렌더링 이슈 해결하면 아마 없앨 것 같아요!

lolWK · 2024-12-02T14:35:07Z

src/service/api/get-waiting-space-list.ts

-    return response.data.data.teamOutlines;
+    return response.data.data.pendingRequestTeamInfos;
  } catch (error) {
    throw new Error('가입 대기 스페이스 목록을 불러오는데 실패하였습니다.');


(단순 궁금) API쪽에서는 따로 에러 메시지를 반환해주지는 않나요?

특정 에러메시지를 반환하는 API도 존재하긴 하는데, 일단은 API 목적에 맞게 에러 메시지를 커스텀하게 만들어뒀어요!

* Feat: 메인페이지 추가 작업 및 자동배포 테스트 (#58) * chore: trivago prettier 재설치 * refactor: 참여중인 스페이스 조회 api 함수 수정 * refactor: 타입 선언 파일 정리 * refactor: api 반환 타입 수정 * feat: useDebounceInput 훅 작성 * feat: 검색된 스페이스 리스트 조회 타입 선언, api 호출 함수 및 훅 작성 * feat: 무한스크롤을 위한 useIntersectionObserver 훅 구현 * refactor: 참여중인 스페이스 조회 api 타입 선언 및 파일명 수정, 검색된 스페이스 조회 api 타입 수정 * refactor: Header에 twin.macor 적용 수정 * refactor: msw에 응답 키값 수정 * refactor: 스타일 컴포넌트 이름 및 반응형 스타일링 수정 * feat: useMediaQuery 훅 작성 및 Header, HeaderM 조건부 렌더링 추가, zustand store 상태 호출 로직 수정 * refactor: 검색된 스페이스 호출 api 경로 및 타입 수정 * chore: 배포 환경변수 yml 파일에 추가 (#61) * Feat: 스페이스 검색 기능 구현 (#63) * feat: media query 상수 추가 * refactor: Header 컴포넌트 로그아웃 상태에서 조건부 렌더링 * feat: tooltip onClick 이벤트 추가 * feat: shadcn dialog 설치 * feat: 로그인 상태 확인 및 리다이렉트하는 훅 작성 * feat: 모달 상태 관리 store 및 confirm 모달 UI 작성 * feat: zustand로 모달 상태 관리 로직 수정 및 modal-manager 구현 * feat: 중복 id를 가진 modal open 방지 로직 추가 * feat: dialog content에 prop으로 닫기버튼("X") 조건부 렌더링 로직 추가 * feat: alert 모달 추가 * feat: 로그아웃 상태에서 모달 open 로직 추가 * refactor: useIntersectionObserver 로직 수정(콜백함수 직접 전달 -> 콜백함수 내부 실행) * refactor: 상수 오타 수정 * feat: axios interceptors에서 로그인 필요한 경우, 만료된 경우 모달 오픈 로직 구현 * feat: 로딩 스피너 컴포넌트 구현 * refactor: 파일 이름 수정 * feat: 스페이스 검색 및 무한스크롤 기능 구현 * feat: 유저정보 및 jwt 토큰 저장 위치 변경(localStorage -> sessionStorage) * refactor: 라우팅 경로에 따른 페이지 수정("/" -> LoginPage) * refactor: 리프래시 토큰 만료시에 navigate 경로 수정 및 accessToken 없을 때 모달 오픈 기능 삭제 * feat: shadcn 버튼 컴포넌트 포커스시 스타일 삭제 * feat: 모바일 화면에서 Header 고정 * refactor: 불필요한 주석 제거 * feat: 무한스크롤 시 input 상단 고정 및 스타일 수정, 로딩스피너 조건 수정 * feat: 로그인 페이지에 로고 이미지 추가 및 서비스 설명 추가 * feat: dialog 기본 스타일 수정 * feat: 버튼 컴포넌트 disabled 추가 * feat: app name 업데이트 로직 수정(버튼 diasbled, store 업데이트) * feat: userSettingModal 구현 * feat: Header 아바타 클릭시에 userSettingModal 렌더 로직 작성 * feat: app name 설정 페이지에 로그인 여부 확인 추가 * refactor: userSettingModal 경로 수정 * feat: spaceList content 조건부 렌더링 로직 수정 * feat: 추천 스페이스 호출 api 및 훅 작성 * feat: 추천 스페이스 렌더링 로직 추가 * feat: 목데이터 업데이트 * feat: 이미지 파일 추가 * feat: Input 컴포넌트에 input 속성 prop 타입 추가 * refactor: 불필요한 onClick 삭제 * feat: ImageInput 컴포넌트 작성 * feat: 스페이스 생성 모달 작성 및 모달 store 추가 * feat: 스페이스 생성 구현 * refactor: 배포를 위한 eslint 에러 수정 (#65) * refactor: 메인 페이지 eslint 에러 수정 (#67) * Feat : 가입 대기 스페이스 목록 UI 구현 (#69) * refactor: 중복 코드 삭제 * feat: 알림 모달 버튼 색상 prop 추가 * feat: 알림, 확인 모달 스토리북 추가 * feat: tootip 스토리북 onClick 추가 * refactor: styled-components import 대신 twin.macro 사용 * feat: close 아이콘 색상 변경 가능하도록 수정 및 image input에서 색상 수정 * feat: shadcn/popover 설치 * feat: 특정 요소의 width를 체크하는 useElementWidth 훅 작성 * feat: 목데이터 수정 및 가입 대기 스페이스 호출 핸들러 추가 * feat: 가입 대기 스페이스 호출 api 및 훅 작성 * feat: 가입 대기 스페이스 UI 작성 * Feat: 가입 대기 스페이스 조회 및 삭제 (#71) * refactor: 중복 코드 삭제 * feat: 알림 모달 버튼 색상 prop 추가 * feat: 알림, 확인 모달 스토리북 추가 * feat: tootip 스토리북 onClick 추가 * refactor: styled-components import 대신 twin.macro 사용 * feat: close 아이콘 색상 변경 가능하도록 수정 및 image input에서 색상 수정 * feat: shadcn/popover 설치 * feat: 특정 요소의 width를 체크하는 useElementWidth 훅 작성 * feat: 목데이터 수정 및 가입 대기 스페이스 호출 핸들러 추가 * feat: 가입 대기 스페이스 호출 api 및 훅 작성 * feat: 가입 대기 스페이스 UI 작성 * refactor: confirm, alert 모달 스타일 수정 * refactor: 닉네임 변경 input placeholder에 기존 닉네임 표시 * feat: 최초 로그인이 아닌 경우, Home 화면으로 navigate 기능 작성 * feat: 검색, 추천 스페이스 click 핸들러 작성 * feat: input ghost 스타일 추가 및 스토리북 작성 * refactor: 가입 대기 스페이스 조회 api 경로 수정 * refactor: 가입 대기 스페이스 응답값 키 수정 * feat: msw 매칭되지 않는 api 경고 해결 위해 전역 핸들러 추가 * feat: 가입 대기 스페이스 요청 취소 api 작성 및 기능 추가 * feat: useElementWidth 디바운스 처리 추가 * refactor: mock 데이터 응답 키값 수정 * feat: css 변수 정의하는 훅 작성 * refactor: 가입 대기 스페이스 너비 설정 방식 수정(prop 전달 -> css 변수 설정) * feat: 로그인 안된 경우에도 빈 HTML 렌더링 로직 추가 * feat: 프로젝트 README 작성

* Feat: 메인페이지 추가 작업 및 자동배포 테스트 (#58) * chore: trivago prettier 재설치 * refactor: 참여중인 스페이스 조회 api 함수 수정 * refactor: 타입 선언 파일 정리 * refactor: api 반환 타입 수정 * feat: useDebounceInput 훅 작성 * feat: 검색된 스페이스 리스트 조회 타입 선언, api 호출 함수 및 훅 작성 * feat: 무한스크롤을 위한 useIntersectionObserver 훅 구현 * refactor: 참여중인 스페이스 조회 api 타입 선언 및 파일명 수정, 검색된 스페이스 조회 api 타입 수정 * refactor: Header에 twin.macor 적용 수정 * refactor: msw에 응답 키값 수정 * refactor: 스타일 컴포넌트 이름 및 반응형 스타일링 수정 * feat: useMediaQuery 훅 작성 및 Header, HeaderM 조건부 렌더링 추가, zustand store 상태 호출 로직 수정 * refactor: 검색된 스페이스 호출 api 경로 및 타입 수정 * chore: 배포 환경변수 yml 파일에 추가 (#61) * Feat: 스페이스 검색 기능 구현 (#63) * feat: media query 상수 추가 * refactor: Header 컴포넌트 로그아웃 상태에서 조건부 렌더링 * feat: tooltip onClick 이벤트 추가 * feat: shadcn dialog 설치 * feat: 로그인 상태 확인 및 리다이렉트하는 훅 작성 * feat: 모달 상태 관리 store 및 confirm 모달 UI 작성 * feat: zustand로 모달 상태 관리 로직 수정 및 modal-manager 구현 * feat: 중복 id를 가진 modal open 방지 로직 추가 * feat: dialog content에 prop으로 닫기버튼("X") 조건부 렌더링 로직 추가 * feat: alert 모달 추가 * feat: 로그아웃 상태에서 모달 open 로직 추가 * refactor: useIntersectionObserver 로직 수정(콜백함수 직접 전달 -> 콜백함수 내부 실행) * refactor: 상수 오타 수정 * feat: axios interceptors에서 로그인 필요한 경우, 만료된 경우 모달 오픈 로직 구현 * feat: 로딩 스피너 컴포넌트 구현 * refactor: 파일 이름 수정 * feat: 스페이스 검색 및 무한스크롤 기능 구현 * feat: 유저정보 및 jwt 토큰 저장 위치 변경(localStorage -> sessionStorage) * refactor: 라우팅 경로에 따른 페이지 수정("/" -> LoginPage) * refactor: 리프래시 토큰 만료시에 navigate 경로 수정 및 accessToken 없을 때 모달 오픈 기능 삭제 * feat: shadcn 버튼 컴포넌트 포커스시 스타일 삭제 * feat: 모바일 화면에서 Header 고정 * refactor: 불필요한 주석 제거 * feat: 무한스크롤 시 input 상단 고정 및 스타일 수정, 로딩스피너 조건 수정 * feat: 로그인 페이지에 로고 이미지 추가 및 서비스 설명 추가 * feat: dialog 기본 스타일 수정 * feat: 버튼 컴포넌트 disabled 추가 * feat: app name 업데이트 로직 수정(버튼 diasbled, store 업데이트) * feat: userSettingModal 구현 * feat: Header 아바타 클릭시에 userSettingModal 렌더 로직 작성 * feat: app name 설정 페이지에 로그인 여부 확인 추가 * refactor: userSettingModal 경로 수정 * feat: spaceList content 조건부 렌더링 로직 수정 * feat: 추천 스페이스 호출 api 및 훅 작성 * feat: 추천 스페이스 렌더링 로직 추가 * feat: 목데이터 업데이트 * feat: 이미지 파일 추가 * feat: Input 컴포넌트에 input 속성 prop 타입 추가 * refactor: 불필요한 onClick 삭제 * feat: ImageInput 컴포넌트 작성 * feat: 스페이스 생성 모달 작성 및 모달 store 추가 * feat: 스페이스 생성 구현 * refactor: 배포를 위한 eslint 에러 수정 (#65) * refactor: 메인 페이지 eslint 에러 수정 (#67) * Feat : 가입 대기 스페이스 목록 UI 구현 (#69) * refactor: 중복 코드 삭제 * feat: 알림 모달 버튼 색상 prop 추가 * feat: 알림, 확인 모달 스토리북 추가 * feat: tootip 스토리북 onClick 추가 * refactor: styled-components import 대신 twin.macro 사용 * feat: close 아이콘 색상 변경 가능하도록 수정 및 image input에서 색상 수정 * feat: shadcn/popover 설치 * feat: 특정 요소의 width를 체크하는 useElementWidth 훅 작성 * feat: 목데이터 수정 및 가입 대기 스페이스 호출 핸들러 추가 * feat: 가입 대기 스페이스 호출 api 및 훅 작성 * feat: 가입 대기 스페이스 UI 작성 * Feat: 가입 대기 스페이스 조회 및 삭제 (#71) * refactor: 중복 코드 삭제 * feat: 알림 모달 버튼 색상 prop 추가 * feat: 알림, 확인 모달 스토리북 추가 * feat: tootip 스토리북 onClick 추가 * refactor: styled-components import 대신 twin.macro 사용 * feat: close 아이콘 색상 변경 가능하도록 수정 및 image input에서 색상 수정 * feat: shadcn/popover 설치 * feat: 특정 요소의 width를 체크하는 useElementWidth 훅 작성 * feat: 목데이터 수정 및 가입 대기 스페이스 호출 핸들러 추가 * feat: 가입 대기 스페이스 호출 api 및 훅 작성 * feat: 가입 대기 스페이스 UI 작성 * refactor: confirm, alert 모달 스타일 수정 * refactor: 닉네임 변경 input placeholder에 기존 닉네임 표시 * feat: 최초 로그인이 아닌 경우, Home 화면으로 navigate 기능 작성 * feat: 검색, 추천 스페이스 click 핸들러 작성 * feat: input ghost 스타일 추가 및 스토리북 작성 * refactor: 가입 대기 스페이스 조회 api 경로 수정 * refactor: 가입 대기 스페이스 응답값 키 수정 * feat: msw 매칭되지 않는 api 경고 해결 위해 전역 핸들러 추가 * feat: 가입 대기 스페이스 요청 취소 api 작성 및 기능 추가 * feat: useElementWidth 디바운스 처리 추가 * refactor: mock 데이터 응답 키값 수정 * feat: css 변수 정의하는 훅 작성 * refactor: 가입 대기 스페이스 너비 설정 방식 수정(prop 전달 -> css 변수 설정) * feat: 로그인 안된 경우에도 빈 HTML 렌더링 로직 추가 * feat: 프로젝트 README 작성 * eslint 에러 해결 (#73)

poco111 added 26 commits November 17, 2024 19:28

refactor: 중복 코드 삭제

e612d91

feat: 알림 모달 버튼 색상 prop 추가

3008eb3

feat: 알림, 확인 모달 스토리북 추가

b52a5bb

feat: tootip 스토리북 onClick 추가

2e6714d

refactor: styled-components import 대신 twin.macro 사용

7da8c0b

feat: close 아이콘 색상 변경 가능하도록 수정 및 image input에서 색상 수정

ecb8d18

feat: shadcn/popover 설치

e163d15

feat: 특정 요소의 width를 체크하는 useElementWidth 훅 작성

e92781f

feat: 목데이터 수정 및 가입 대기 스페이스 호출 핸들러 추가

d9f4543

feat: 가입 대기 스페이스 호출 api 및 훅 작성

32f0588

feat: 가입 대기 스페이스 UI 작성

87aa9f5

refactor: confirm, alert 모달 스타일 수정

0f99a86

refactor: 닉네임 변경 input placeholder에 기존 닉네임 표시

300d30d

feat: 최초 로그인이 아닌 경우, Home 화면으로 navigate 기능 작성

07bbc5a

feat: 검색, 추천 스페이스 click 핸들러 작성

2a3eb3a

feat: input ghost 스타일 추가 및 스토리북 작성

f45942b

refactor: 가입 대기 스페이스 조회 api 경로 수정

5260ab9

refactor: 가입 대기 스페이스 응답값 키 수정

150a75d

feat: msw 매칭되지 않는 api 경고 해결 위해 전역 핸들러 추가

87a387b

feat: 가입 대기 스페이스 요청 취소 api 작성 및 기능 추가

8792c0c

feat: useElementWidth 디바운스 처리 추가

53f852e

refactor: mock 데이터 응답 키값 수정

4da43fd

feat: css 변수 정의하는 훅 작성

82aa48a

refactor: 가입 대기 스페이스 너비 설정 방식 수정(prop 전달 -> css 변수 설정)

7d0be92

feat: 로그인 안된 경우에도 빈 HTML 렌더링 로직 추가

12e2611

feat: 프로젝트 README 작성

b432da2

poco111 self-assigned this Dec 2, 2024

Merge branch 'dev' into feature/wait-space

e77bebb

lolWK approved these changes Dec 2, 2024

View reviewed changes

poco111 merged commit d1d38c3 into dev Dec 3, 2024
1 check passed

Feat: 가입 대기 스페이스 조회 및 삭제 #71

Feat: 가입 대기 스페이스 조회 및 삭제 #71

Uh oh!

Conversation

poco111 commented Dec 2, 2024

Key changes 📝

To reviewers 👋

Uh oh!

lolWK left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lolWK left a comment •

edited

Loading