단체 메인, 관리 페이지 개발 #26

sera2002 · 2023-09-11T05:41:21Z

작성자: @sera2002

Related to #{이슈 번호 기입}

체크 리스트

적절한 제목으로 수정했나요?
상단에 이슈 번호를 기입했나요?
Target Branch를 올바르게 설정했나요?
Label을 알맞게 설정했나요?

작업 내역

단체 메인페이지
- 관리자 ver.
- 멤버 ver
- 방문객 ver.
- 등록된 맛집이 없는 경우
단체 정보 수정 페이지
단체 멤버 관리 페이지
- 관리 권한 승계
단체 맛집 관리 페이지
단체 멤버 조회 페이지

비고

공통 컴포넌트 수정 사항 : dataDisplay/Member
- showManangementButton Props 추가 (dots icon 보여줄 지 결정)
단체 메인 페이지에서 맛집 필터 설정은 아직 개발되지 않았습니다.
단체 정보 수정 페이지의 경우 단체 생성 페이지와 포맷을 맞추면 좋을 것 같습니다.

…on-main

jaychang99

수고하셨습니다!

src/components/dataDisplay/Member.tsx

src/feature/organization/organizationMain/components/buttons/ActionButtons.tsx

jaychang99 · 2023-09-11T10:47:18Z

src/feature/organization/organizationMain/components/buttons/ActionButtons.tsx

+import Button from "components/button/Button";
+
+interface Props {
+  organizationId: string | number | string[];


organizationId 의 타입에 string[] 도 추가해주신 특별한 이유가 있을까요~?

음.. organizationId를 넘겨줄 때 타입 명시를 안해줬더니 error TS2322: Type 'string | number | string[]' is not assignable to type 'number’. 이런 에러가 발생해서 일단 추가해줬던 것 같습니다..
현재는 organizationId의 타입을 number로만 받는걸로 수정했습니다!

jaychang99 · 2023-09-11T10:53:56Z

src/feature/organization/organizationMain/components/icons/ButtonIcons.tsx

+    <Image
+      width={size}
+      height={size}
+      alt="멤버 관리 아이콘"


오 접근성과 SEO 를 염두에 둔 alt text 좋습니다!! 👍

src/pages/organizations/[organizationId]/index.tsx

jaychang99 · 2023-09-11T12:09:45Z

src/pages/organizations/[organizationId]/index.tsx

-        title={`${organizationId} 번 단체 상세 페이지`}
-        description="단체 관리 및 맛집 목록 등 단체에 대한 정보를 볼 수 있는 페이지 "
-      />
+      <ViewOrganizationMainPage organizationId={organizationId}></ViewOrganizationMainPage>


self-closing 태그가 되어도 좋을 것 같습니다!

수정했습니다!

jaychang99 · 2023-09-11T12:10:41Z

src/feature/organization/organizationMain/view/ViewOrganizationMainPage.tsx

+  /**
+   * TODO: 서버에서 해당 단체에 대한 유저의 권한 받아오기
+   */
+  const userAuth = 0; // 해당 단체에 대한 유저의 권한 (0: 관리자, 1: 멤버, 2: 방문객)


이 값은 API 문서의 값인가요?

넵 맞습니다.

jaychang99 · 2023-09-11T12:11:03Z

src/feature/organization/organizationMain/view/ViewOrganizationMainPage.tsx

+
+export default ViewOrganizationMainPage;
+
+const EmotionWrapper = styled.div``;


없어도 될 것 같습니다! Fragment (<> </>) 로 감싸도 될 것 같습니다!

수정했습니다!

jaychang99 · 2023-09-11T12:14:35Z

src/feature/organization/organizationMain/components/section/OrganizationMainButtonsSection.tsx

+  if (userAuth === 0) {
+    AuthButtonsComponent = ManagementButtons;
+  } else if (userAuth === 1) {
+    AuthButtonsComponent = MemberButtons;
+  } else {
+    AuthButtonsComponent = VisitorButtons;
+  }


if ~ else if ~ else 가 중첩되어 가독성이 약간 좋지 않은 것 같습니다. 또한 let 사용으로 인해 불변성 보장을 받지 못할 것 같은데 혹시 아래와 같이 또한 컴포넌트 외부에서 처리 및 리렌더 될 때마다 새로 불러오지 않으므로 이 부분만 컴포넌트 위로 빼는 것은 어떨까요? ( 이렇게 하면 const 사용으로도 변경할 수 있을 것 같습니다!)

아래와 같은 형식을 생각하였습니다.

Suggested change

if (userAuth === 0) {

AuthButtonsComponent = ManagementButtons;

} else if (userAuth === 1) {

AuthButtonsComponent = MemberButtons;

} else {

AuthButtonsComponent = VisitorButtons;

}

const AUTH_BUTTONS_COMPONENT = {

0: ManagementButtons,

1: MemberButtons,

2: VisitorButtons,

}

const AuthButtonComponent = AUTH_BUTTONS_COMPONENT[userAuth]

return (

...

<AuthButtonComponent />

)

오.. 넵 좋습니다.
제안해주신 사항 반영해서 수정했습니다!

jaychang99 · 2023-09-11T12:15:02Z

src/feature/organization/organizationMain/components/section/OrganizationMainButtonsSection.tsx

+    <EmotionWrapper>
+      <AuthButtonsComponent organizationId={organizationId} />
+      {(userAuth === 0 || userAuth === 1) && (
+        <ActionButtons organizationId={organizationId}></ActionButtons>


self-closing 해도 될 것 같습니다.

수정했습니다!

jaychang99 · 2023-09-11T12:19:00Z

@sera2002 @hoon5083 앗 그리고 제가 <Restaurant /> 컴포넌트 설계를 잘못 해서 <a /> 태그 안에 또 <a /> 태그가 들어가는 꼴이 되어 Restaurant 컴포넌트를 사용한 페이지에서 hydration error 가 나는 것 같습니다. 이것만 픽스해서 PR 따로 올려야 할 것 같습니다. 죄송합니다. 🙏

jaychang99 · 2023-09-19T11:23:57Z

@sera2002 제안 사항 반영 감사합니다!!

현 시점까지 반영해주신 부분은 👍 마크와 함께 스레드를 Resolve 했습니다. 수고하셨습니다!

…가 설정되도록 변경

sera2002 added 13 commits August 22, 2023 16:25

feat(organizations-main): 단체 프로필 view 개발

d7d6a81

feat(organization-main): 맛집 리스트 제외 디자인 요소 배치 완료

582b74f

chore(organization-main): 임시 컴포넌트 추가

48670ef

feat(organization-management): 단체 관리 페이지 추가

5996d2d

fix(org-main): 이미지 컴포넌트에 priority 속성 추가

7291b41

fix(org-management): 단체 한줄 소개 textarea로 변경

a9ecb62

feat(organization-main): 단체, 멤버, 맛집 관리 페이지 구성

f0dbf6d

refactor(organization-main): 폴더 구조 재구성

b16fa78

feat(oraganization-main): 등록된 맛집이 없을 때 표시할 아이콘 추가

440540f

feat(organization-main): 등록된 맛집이 없을 때 보여주는 부분 추가

e5fc3a0

Merge remote-tracking branch 'origin/develop' into feature/organizati…

38f6c40

…on-main

feat(organizaiton-main): Restaurant 컴포넌트 적용

7a32879

feat(organization-main): Member 컴포넌트 수정(show 옵션), 관리자 위임 모달 추가

73c2395

sera2002 added the feature 신규 컴포넌트/기능 개발 (제일 일반적) label Sep 11, 2023

sera2002 requested review from hoon5083 and jaychang99 September 11, 2023 05:41

sera2002 self-assigned this Sep 11, 2023

sera2002 changed the title ~~단체 메인 페이지 개발~~ 단체 메인, 관리 페이지 개발 Sep 11, 2023

jaychang99 reviewed Sep 11, 2023

View reviewed changes

sera2002 added 5 commits September 12, 2023 16:10

feat(organization-main): member페이지 userAuth 추가

0516a9a

refactor(organization-main): 빈 EmotionWrapper 제거, boolean props 그냥 주기

6165c6b

refactor(organization-main): 빈 EmotionWrapper 제거

a6a26d5

refactor(organization-main): member, restaurant 관련 파일 이름 복수형으로 통일

2767167

fix(member-management): 관리자 승계 클릭 시 관리자 옆의 선택 버튼은 disabled 상태로

5b47f77

sera2002 added 4 commits September 20, 2023 21:49

refactor(organization-main): 필요 없는 EmotionWrapper 제거

678b029

feat(organization-main): organizationId type에서 string[] 제거

1c31b07

feat(organization-main): organizationId type을 number로 수정

af1b5b8

refactor(organization-main): feature 하위 폴더 이름을 dot notation으로 변경

841fade

sera2002 added 5 commits September 22, 2023 14:44

feat(organization-member): memberContainer에 대해서만 transitionEndHandler…

163903f

…가 설정되도록 변경

feat(organization-member): SuccessionModal 분리

d6b1fb5

feat(organization-member): 상대경로 -> 절대경로 변경

0676e45

feat(organization-member): 모달 onClose에 setSelectedMember(null) 추가

2d797e0

refactor(organization-main): 사용자 권한별 버튼 표시 로직 변경

18621f2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

단체 메인, 관리 페이지 개발 #26

단체 메인, 관리 페이지 개발 #26

sera2002 commented Sep 11, 2023

jaychang99 left a comment

jaychang99 Sep 11, 2023

sera2002 Sep 22, 2023

jaychang99 Sep 11, 2023

jaychang99 Sep 11, 2023

sera2002 Sep 22, 2023

jaychang99 Sep 11, 2023

sera2002 Sep 22, 2023

jaychang99 Sep 11, 2023

sera2002 Sep 22, 2023

jaychang99 Sep 11, 2023

sera2002 Sep 22, 2023

jaychang99 Sep 11, 2023

sera2002 Sep 22, 2023

jaychang99 commented Sep 11, 2023

jaychang99 commented Sep 19, 2023


		export default ViewOrganizationMainPage;

		const EmotionWrapper = styled.div``;

-  if (userAuth === 0) {
-    AuthButtonsComponent = ManagementButtons;
-  } else if (userAuth === 1) {
-    AuthButtonsComponent = MemberButtons;
-  } else {
-    AuthButtonsComponent = VisitorButtons;
-  }
+const AUTH_BUTTONS_COMPONENT = {
+: ManagementButtons,
+: MemberButtons,
+: VisitorButtons,
+}
+  const AuthButtonComponent = AUTH_BUTTONS_COMPONENT[userAuth]
+  return (
+  ...
+    <AuthButtonComponent />
+  )

단체 메인, 관리 페이지 개발 #26

Are you sure you want to change the base?

단체 메인, 관리 페이지 개발 #26

Conversation

sera2002 commented Sep 11, 2023

체크 리스트

작업 내역

비고

jaychang99 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaychang99 commented Sep 11, 2023

jaychang99 commented Sep 19, 2023