diff --git a/src/pages/FaqPage/FaqPage.page.tsx b/src/pages/FaqPage/FaqPage.page.tsx index 68526c94..2161a4e3 100644 --- a/src/pages/FaqPage/FaqPage.page.tsx +++ b/src/pages/FaqPage/FaqPage.page.tsx @@ -1,9 +1,9 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { OutputData } from '@editorjs/editorjs'; import { Editor, EditorAside } from '@/components'; import * as Styled from './FaqPage.styled'; -import { $teams, $profile } from '@/store'; +import { $teams, $profile, $isMaster } from '@/store'; import { SelectSize } from '@/components/common/Select/Select.component'; import { decodeHTMLEntities, @@ -28,22 +28,26 @@ const FaqPage = () => { const { handleAddToast } = useToast(); const teams = useRecoilValue($teams); - const teamOptions = teams.map(({ teamId, name }) => ({ - value: teamId.toString(), - label: name, - })); + const teamOptions = useMemo(() => { + return teams.map(({ name }) => ({ + value: name.toLowerCase(), + label: name, + })); + }, [teams]); const myTeamName = useRecoilValue($profile)[0]; + const isMaster = useRecoilValue($isMaster); const isStaffUser = myTeamName === Team.mashUp || myTeamName === Team.branding; - const getTeamSelectOptions = () => { + const teamSelectOptions = useMemo(() => { + if (isMaster) { + return [commonSelectOption, ...teamOptions]; + } const myTeamOptionObject = teamOptions.find( ({ label }) => label.toUpperCase() === myTeamName.toUpperCase(), ); return [myTeamOptionObject ?? commonSelectOption]; - }; - - const teamSelectOptions = getTeamSelectOptions(); + }, [teamOptions, myTeamName, isMaster]); const handleUpdateButtonClick = async () => { const originalOutputData = getLocalStorageData(EDITOR_ID); @@ -84,13 +88,8 @@ const FaqPage = () => { }; useEffect(() => { - const myTeamSelectOptions = teamSelectOptions[0] ?? commonSelectOption; - - if (myTeamSelectOptions.value === commonSelectOption.value) { - setSelectedPlatform(commonSelectOption.value); - } else { - setSelectedPlatform(myTeamSelectOptions.label.toLowerCase()); - } + const myTeamSelectOption = teamSelectOptions[0] ?? commonSelectOption; + setSelectedPlatform(myTeamSelectOption.value); }, [teamSelectOptions]); useEffect(() => { @@ -126,6 +125,9 @@ const FaqPage = () => { defaultValue={teamSelectOptions[0]} size={SelectSize.sm} options={teamSelectOptions} + onChangeOption={(option) => { + setSelectedPlatform(option.value); + }} /> } rightActionButton={{ diff --git a/src/store/login.ts b/src/store/login.ts index 3f9b1056..b77c971a 100644 --- a/src/store/login.ts +++ b/src/store/login.ts @@ -1,8 +1,7 @@ import { atom } from 'recoil'; -import { LoginResponse, MemberPositionType } from '@/types/dto'; +import { LoginResponse, MemberPosition, MemberPositionType } from '@/types/dto'; import { TeamType, RoleType } from '@/components/common/UserProfile/UserProfile.component'; import { selectorWithRefresher } from './recoil'; -import { ScoreType } from '@/components/ActivityScore'; export const $me = atom({ key: 'me', @@ -38,7 +37,12 @@ export const $profile = selectorWithRefresher<[string, string, MemberPositionTyp }, }); -const MASTER_SCORE_TYPES = [ScoreType.MASHUP_LEADER, ScoreType.MASHUP_SUBLEADER] as string[]; +const MASTER_SCORE_TYPES = [ + MemberPosition.mashupLeader, + MemberPosition.mashupSubLeader, + MemberPosition.brandingLeader, + MemberPosition.brandingSubLeader, +] as string[]; export const $isMaster = selectorWithRefresher({ key: 'isMaster', diff --git a/src/types/dto/adminMember.ts b/src/types/dto/adminMember.ts index 42f8e92e..50739b32 100644 --- a/src/types/dto/adminMember.ts +++ b/src/types/dto/adminMember.ts @@ -5,7 +5,8 @@ export const MemberPosition = { mashupSubLeader: 'MASHUP_SUBLEADER', brandingLeader: 'BRANDING_LEADER', brandingSubLeader: 'BRANDING_SUBLEADER', - brandingMember: 'BRANDING_MEMBER', + brandingHelper: 'BRANDING_HELPER', + brandingMember: 'BRANDING_MEMBER', // deprecated springLeader: 'SPRING_LEADER', springSubLeader: 'SPRING_SUBLEADER', springHelper: 'SPRING_HELPER',