feat: 밋팀 관리 페이지(대시보드, 밋팀, 멤버, 구인 현황, 설정) UI 및 기능 구현 #34

kimsuyeon0916 · 2024-01-15T07:46:34Z

구현 내용/방법

밋팀 관리 페이지: <ManagementPage />
- 필수 정보: <RequiredInformation />
- 뒤로가기: <GoBack />
- 내용: <Content />
  - 메뉴 탭: <Menu />
  - 메인 내용: <Main />
    - 대시보드: <DashBoard />
      - 진행상태: <ProgressStatus />
      - 대시보드 이슈: <DashBoardIssue />
      - 대시보드 링크: <DashBoardLink />
      - 대시보드 멤버: <DashBoardMember />
    - 밋팀: <Information/>
      - 밋팀 정보: <MeeteamInformation />
      - 이슈: <Issue />
      - 링크: <Link />
    - 멤버: <Member/>
      - 유저 카드: <MemberCard /> -> 해당 컴포넌트 재사용 하시면 됩니다!
      - 멤버 연락처: <MemberContact />
    - 구인 현황: <Recruitment />
      - 구인 마감일/구인 버튼: <RequirementDeadLine />
      - 구인 정보: <RequirementInformation />
      - 신청자 목록: <ApplicantView />
        
        신청자 카드: <ApplicantCard />
    - 설정: <Setting />
      - 필수 정보 설정: <EssentialSetting />
케밥 메뉴: <KebabMenu />
- 옵션 메뉴: <OptionMenu />
유저 원형 프로필: <RadiusProfile />
Mock/상수 데이터:
- 멤버: MemberData.tsx
- 이슈: IssueData.tsx
- 링크: LinkData.tsx
- 정보: InformationData.tsx
- 신청자: ApplicantData.tsx

리뷰 필요

진행 상태(구인 글 등록, 밋팀 정보 등록, 링크 등록) 관리 방법
- API Response 타입 고민
  - 인터페이스 타입도 한번에 정리하려고요..!
- 전역으로 어떻게 깔끔하게 할 수 있을까요?🤔
Mock/상수 데이터를 한 파일에 합쳐놨는데 분리를 하는게 낫겠죠?🧐
- index.ts 도 지저분해 보여서 어떻게 할지 고민중입니다
- svg 파일 관리 방법 고민중입니다
옵션 모달 useEffect 때문에 여러번 렌더링 되는 문제
- 모달 컴포넌트를 재사용하기 때문에 무조건 해결 하고 싶네요..!🥺
마감일과 구인정보 각각 수정할때는 좋은데, 구인 현황 탭에서 처음 구인할 때는 구인 마감일, 구인 정보 컴포넌트를 둘 다 저장을 눌러야 하는 디자인이라.. 어떻게 해야 좋을까요?😳
밋팀/구인 정보에서 삼항연산자로 편집 모드를 관리하는데, 삼항연산자를 여러개 쓰다보니 코드가 좀 지저분해져서 어떻게 고칠지 고민중이에요🥺
인터페이스 Props 접미사 제거했습니다!
라우터 경로 변경 했습니다! => manage/meeteam/* 로 들어가시면 됩니당

충돌 난 부분 다 resolve 완료 했습니다!
코드가 깔끔하지 못하고 양도 많아서 읽으시는데 힘드실 수 있습니다..

머지 이후에 아래의 해당사항들을 처리할 예정입니다!
- #29
- #31
- 멤버 초대 모달 연결

close #18

이유: 타입 단언 제거

이유: 62.5% 로 적용해서 1rem = 10px; 로 반영

- 이전: 정보, 멤버, 작업물 등록, 설정 - 이후: 대시보드, 밋팀, 멤버, 구인 현황, 설정

- 단위 변경 vw -> rem - 굵기 두께 변경

- 사이즈 단위 변경: vw -> rem - 테두리 컬러 변경

- 뒤로가기, 제목, 필수 정보 컴포넌트 추가

any -> string 타입으로 지정

- 이유: 필수 정보까지 리렌더링 - 적용 내용: 따로 컴포넌트화 시킨 후, 그 컴포넌트 내에서 useState 사용

- 이전: '응소실, Spring, C#, Window Form' - 이후: '응소실,Spring,C#,Window Form'

- 이전: 문구 고정 - 이후; 문구도 상태에 맞게 변경

이유: 옵션 버튼을 눌렀을 때, 모달을 제외한 나머지 컴포넌트의 리렌더링을 막기 위해 따로 합쳐서 제작

- form 태그를 최상단으로 옮김

- format 속성 추가

- 바뀐 디자인에 맞춰 스타일 추가 - 바뀐 기획에 맞춰 기능 추가

- 이유: 대시보드 버튼 클릭해서, 밋팀 관리 탭 컴포넌트 렌더링을 하기 위함

src/components/meeteam/main/recruitment/Recruitment.tsx

src/components/meeteam/main/recruitment/applicantView/applicantCard/ApplicantCard.tsx

src/components/goBack/GoBack.tsx

src/components/meeteam/main/dashBoard/DashBorad.tsx

src/components/meeteam/main/dashBoard/dashBoardLink/DashBoardLink.tsx

prgmr99

[테스트 후]

대시보드

카톡/디스코드/노션, 멤버 이미지 경로를 찾지 못함. (이미지가 뜨지 않음)
제 화면이 작아서 그런지는 모르겠는데, 대시보드 > 멤버 > + 1명이 마지막 멤버 아이콘이 조금 겹쳐있음.
산출물 등록하기를 누르면 create/output으로 이동

밋팀

이미지 안 뜨는 문제(카톡,노션,디스코드)
밋팀 정보 & 링크 수정 저장이 안 되는 문제

멤버

이미지 안 뜨는 문제(프로필 이미지)
멤버 초대

구인 현황

마감일 수정 안 됨.

설정

필수정보 폼

수연님!! 너무 고생하셨네요! 나머지는 전부 잘 됩니다!!👍
아직 미완성인 기능도 계획하고 계시겠지만, 정리하는 느낌으로 같이 적어봤습니다..!

- 이전: .tsx - 이후: .ts

- 이전: sytled - 이후: styled

- 읽기: useRecoilValue() - 쓰기: useSetRecoilState() - 읽기/쓰기: useRecoilState()

prgmr99 · 2024-01-16T07:47:52Z

아 그리고 리뷰가 필요하시다고 적어주신 부분을 이제 봐서
하나씩 답변 달아보겠습니다!!!

- 삼항 연산자 대신 논리연산자 && 로 변경

- 이유: 예상과 다른 state 변경 예방 및 prev 상태 이용

- 이유: 어차피 Content는 Recoil 사용해서 굳이 props 로 넘겨줄 필요 X.

- 이전: (props: {}) - 이후: ({}:{}) - 이유: props. 라는 접두어 제거

- 대시보드에서 산출물 등록하기 버튼 누르면 산출물 등록 페이지로 이동

- 이전: clamp(50%, 108rem, 70%); - 이후: clamp(45%, 108rem, 75%);

- 원인: 이미지 주소가 피그마로 되어있는 상태에서, 피그마 상에서 해당 이미지 삭제

kimsuyeon0916 · 2024-01-17T04:47:33Z

직접 테스트 해주셔서 감사합니다!☺️
적용하고 해결할 수 있는 부분은 해결하였습니다!:-)

[ 변경 사항 ]
대시보드

해결
승준님 혹시 사진 노션에 남겨주실 수 있으실까요??!!
적용

밋팀

해결
이 부분은 뭔가 전체 밋팀 정보를 저장하는 자료구조를 고민중이라 아직 적용을 하지 않았습니다..!!

멤버

해결
머지 후에 이어서 하려고 합니다!

구인 현황

머지 후에 이어서 하려고 합니다!

설정

머지 후에 이어서 하려고 합니다!

prgmr99 · 2024-01-17T05:30:04Z

직접 테스트 해주셔서 감사합니다!☺️ 적용하고 해결할 수 있는 부분은 해결하였습니다!:-)

[ 변경 사항 ] 대시보드

해결

승준님 혹시 사진 노션에 남겨주실 수 있으실까요??!!

적용

밋팀

해결

이 부분은 뭔가 전체 밋팀 정보를 저장하는 자료구조를 고민중이라 아직 적용을 하지 않았습니다..!!

멤버

해결

머지 후에 이어서 하려고 합니다!

구인 현황

머지 후에 이어서 하려고 합니다!

설정

머지 후에 이어서 하려고 합니다!

아하! 알겠습니다!!
추가로 멤버탭에서 새로고침하면 대시보드탭으로 이동합니다!!

prgmr99

수연님!! 고생하셨습니다!! 나머지 기능도 잘 부탁드려요~🫡

kimsuyeon0916 added 30 commits November 26, 2023 16:07

refactor: #10 ComponentProps 인터페이스 -> 타입

dfca4da

이유: 타입 단언 제거

style: #18 globalStyle.Css 내html 태그 폰트 사이즈 설정

2358c20

이유: 62.5% 로 적용해서 1rem = 10px; 로 반영

refactor: #18 진행중 밋팀 관리 페이지 탭 구조 변경

5740811

- 이전: 정보, 멤버, 작업물 등록, 설정 - 이후: 대시보드, 밋팀, 멤버, 구인 현황, 설정

feat: #18 랜덤 컬러 생성 유틸함수 구현

b0ae746

feat: #18 태그와 색깔 매칭 유틸 함수 구현

6b95f48

style: #18 메인 사이즈 변경 및 테두리 굵기 조절

336c8de

- 단위 변경 vw -> rem - 굵기 두께 변경

style: #18 메뉴 탭 사이즈 및 스타일 변경

ea40214

- 사이즈 단위 변경: vw -> rem - 테두리 컬러 변경

feat: #18 필수 정보 컴포넌트 제작

b280a40

feat: #18 밋팀 타이틀 컴포넌트 제작

52b32b6

feat: #18 뒤로가기 컴포넌트 제작

d69de20

feat: #18 밋팀 관리 페이지 레이아웃 배치

8228307

- 뒤로가기, 제목, 필수 정보 컴포넌트 추가

refactor: CustomSelect 컴포넌트 any 타입 제거

e0be807

any -> string 타입으로 지정

refactor: #18 밋팀 관리 메뉴+메인 분리

992a2e8

- 이유: 필수 정보까지 리렌더링 - 적용 내용: 따로 컴포넌트화 시킨 후, 그 컴포넌트 내에서 useState 사용

feat: #18 진행 상태 대시보드 컴포넌트 제작 및 스타일 추가

72c98e8

style: #18 Main 내 공통 스타일 추가

52404c0

feat: #18 이슈 컴포넌트 제작 및 스타일 추가

aa49027

refactor: #18 필수 정보 내의 태그 데이터 형태 변경

caf1f1a

- 이전: '응소실, Spring, C#, Window Form' - 이후: '응소실,Spring,C#,Window Form'

feat: #18 진행 상태 대시보드 UI를 위한 상수 데이터 생성

2dc7369

refactor: #18 진행 상태 대시보드 내의 바로가기 버튼 UI 문구 변경

5ed9188

- 이전: 문구 고정 - 이후; 문구도 상태에 맞게 변경

feat: #18 옵션 메뉴 유틸 컴포넌트 제작

f5b3f12

feat: #18 옵션 버튼 컴포넌트 제작

489ce1d

feat: #18 옵션 모달리스 컴포넌트 제작

af507aa

feat: #18 옵션 버튼, 모달리스 감싸는 컴포넌트 제작

d3e10e0

이유: 옵션 버튼을 눌렀을 때, 모달을 제외한 나머지 컴포넌트의 리렌더링을 막기 위해 따로 합쳐서 제작

feat: #18 링크 UI 구성을 위한 상수 데이터 제작

8152634

feat: #18 링크 컴포넌트 제작

d8f3f06

feat: #18 밋팀 정보 컴포넌트 제작 및 스타일 추가

f4a1b1d

style: #18 링크 컴포넌트 스타일 구조 변경

4e5d2ba

- form 태그를 최상단으로 옮김

chore: #18 react-quill 에디터 기본 설정

c0cec59

- format 속성 추가

refactor: #18 밋팀 탭 컴포넌트 리팩토링

5443d61

- 바뀐 디자인에 맞춰 스타일 추가 - 바뀐 기획에 맞춰 기능 추가

feat: #18 Recoil 추가

fa82004

- 이유: 대시보드 버튼 클릭해서, 밋팀 관리 탭 컴포넌트 렌더링을 하기 위함