-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Extract Components, dummy data to hooks
- Loading branch information
Showing
7 changed files
with
253 additions
and
136 deletions.
There are no files selected for viewing
72 changes: 72 additions & 0 deletions
72
src/pages/MyPage/components/member-management/InfoTooltip.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import React from 'react'; | ||
| import { ReactComponent as Info } from '@/pages/MyPage/tempAsssets/info_circle.svg'; | ||
| import { Tooltip } from '@mui/material'; | ||
|
|
||
| // | ||
| // | ||
| // | ||
|
|
||
| const CustomTooltip = () => { | ||
| return ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: 'white', | ||
| fontSize: '1rem', | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: '1.5rem', | ||
| minWidth: '50rem', | ||
| }} | ||
| > | ||
| <div> | ||
| <h3>COTATO 페이지에는 다음과 같은 관리자 권한이 있습니다.</h3> | ||
| <ul> | ||
| <li>출석: 출석 정보 수정</li> | ||
| <li>세션 기록: 정보 업로드 및 수정</li> | ||
| <li>마이페이지: 부원 정보 관리</li> | ||
| </ul> | ||
| </div> | ||
| <hr style={{ border: '1px solid black', width: '100%' }} /> | ||
| <div> | ||
| <span>각 역할(Role)에게 부여되는 권한은 다음과 같습니다:</span> | ||
| <ul> | ||
| <li> | ||
| 개발팀 : 모든 기능에 대한 전체 권한을 보유하며, 활동 기수가 아니더라도 출석 및 문제 | ||
| 풀이가 가능합니다. | ||
| </li> | ||
| <li>관리자 : 모든 기능에 대한 전체 권한을 보유합니다.</li> | ||
| <li>부관리자 : 출석 관리 권한이 허용되며, 출석 관리 외의 기능은 제한됩니다.</li> | ||
| <li>멤버 (일반 사용자) : 모든 관리자 기능이 제한됩니다.</li> | ||
| <li>OM : 활동 기수가 아니며, 출석 및 실시간 문제 풀이가 불가합니다.</li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| // | ||
| // | ||
| // | ||
|
|
||
| export default function InfoTooltip() { | ||
| return ( | ||
| <Tooltip | ||
| title={<CustomTooltip />} | ||
| slotProps={{ | ||
| tooltip: { | ||
| sx: { | ||
| bgcolor: 'white', | ||
| color: 'black', | ||
| borderRadius: '0.625rem', | ||
| padding: '2rem 1.5rem', | ||
| boxShadow: '0px 4px 30px rgba(0, 0, 0, 0.25)', | ||
| maxWidth: 'none', | ||
| width: 'auto', | ||
| }, | ||
| }, | ||
| }} | ||
| > | ||
| <Info /> | ||
| </Tooltip> | ||
| ); | ||
| } |
23 changes: 23 additions & 0 deletions
23
src/pages/MyPage/components/member-management/SearchBar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { IconButton, InputBase, Paper } from '@mui/material'; | ||
| import { ReactComponent as Search } from '@/pages/MyPage/tempAsssets/search.svg'; | ||
| import React from 'react'; | ||
|
|
||
| export default function SearchBar() { | ||
| return ( | ||
| <Paper | ||
| component="form" | ||
| sx={{ | ||
| p: '2px 4px', | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| width: 400, | ||
| height: '2.25rem', | ||
| }} | ||
| > | ||
| <InputBase sx={{ ml: 1, flex: 1 }} placeholder="이름/기수/파트 검색"></InputBase> | ||
| <IconButton type="button"> | ||
| <Search /> | ||
| </IconButton> | ||
| </Paper> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { | ||
| CotatoMemberEnrollInfoResponse, | ||
| CotatoMemberEnrollInfoResponseRoleEnum, | ||
| } from 'cotato-openapi-clients'; | ||
| import { useState } from 'react'; | ||
|
|
||
| export const useActiveMemberManagement = () => { | ||
| const [activeMembers, setActiveMembers] = useState<CotatoMemberEnrollInfoResponse[]>([]); | ||
| return { | ||
| activeMembers: dummyMemberData, | ||
| updateMemberRole: (memberId: number, newRole: CotatoMemberEnrollInfoResponseRoleEnum) => {}, | ||
| transferToOM: (memberId: number) => {}, | ||
| }; | ||
| }; | ||
|
|
||
| const dummyMemberData: CotatoMemberEnrollInfoResponse[] = [ | ||
| { | ||
| memberId: 1, | ||
| name: '김코타', | ||
| position: 'FE', | ||
| generationNumber: 3, | ||
| role: 'ADMIN', | ||
| }, | ||
| { | ||
| memberId: 2, | ||
| name: '이토타', | ||
| position: 'BE', | ||
| generationNumber: 3, | ||
| role: 'MEMBER', | ||
| }, | ||
| { | ||
| memberId: 3, | ||
| name: '박개발', | ||
| position: 'BE', | ||
| generationNumber: 2, | ||
| role: 'MANAGER', | ||
| }, | ||
| { | ||
| memberId: 4, | ||
| name: '정디자', | ||
| position: 'PM', | ||
| generationNumber: 2, | ||
| role: 'MEMBER', | ||
| }, | ||
| { | ||
| memberId: 5, | ||
| name: '최코딩', | ||
| position: 'NONE', | ||
| generationNumber: 3, | ||
| role: 'DEV', | ||
| }, | ||
| { | ||
| memberId: 6, | ||
| name: '황기획', | ||
| position: 'FE', | ||
| generationNumber: 2, | ||
| role: 'MEMBER', | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { CotatoMemberEnrollInfoResponse } from 'cotato-openapi-clients'; | ||
| import { useState } from 'react'; | ||
|
|
||
| export const useOMManagement = () => { | ||
| const [OMMembers, setOMMembers] = useState<CotatoMemberEnrollInfoResponse[]>([]); | ||
|
|
||
| return { | ||
| OMMembers: dummyMemberData, | ||
| searchOM: (keyword: string) => {}, | ||
| transferToActive: (memberId: number) => {}, | ||
| }; | ||
| }; | ||
|
|
||
| const dummyMemberData: CotatoMemberEnrollInfoResponse[] = [ | ||
| { | ||
| memberId: 1, | ||
| name: '김코타OM', | ||
| position: 'NONE', | ||
| generationNumber: 3, | ||
| role: 'MEMBER', | ||
| }, | ||
| { | ||
| memberId: 2, | ||
| name: '이토타OM', | ||
| position: 'NONE', | ||
| generationNumber: 3, | ||
| role: 'MEMBER', | ||
| }, | ||
| { | ||
| memberId: 3, | ||
| name: '박개발OM', | ||
| position: 'NONE', | ||
| generationNumber: 2, | ||
| role: 'MEMBER', | ||
| }, | ||
| { | ||
| memberId: 4, | ||
| name: '정디자', | ||
| position: 'NONE', | ||
| generationNumber: 2, | ||
| role: 'MEMBER', | ||
| }, | ||
| { | ||
| memberId: 5, | ||
| name: '최코딩', | ||
| position: 'NONE', | ||
| generationNumber: 3, | ||
| role: 'MEMBER', | ||
| }, | ||
| { | ||
| memberId: 6, | ||
| name: '황기획', | ||
| position: 'NONE', | ||
| generationNumber: 2, | ||
| role: 'MEMBER', | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.