diff --git a/components/agenda/Profile/HistoryList.tsx b/components/agenda/Profile/HistoryList.tsx index cf98bb192..e9110f459 100644 --- a/components/agenda/Profile/HistoryList.tsx +++ b/components/agenda/Profile/HistoryList.tsx @@ -5,6 +5,8 @@ import { } from 'types/agenda/profile/historyListTypes'; import AgendaTags from 'components/agenda/utils/AgendaTags'; import { countHistoryCoalitions } from 'components/agenda/utils/coalition/countCoalitions'; +import ColorList from 'components/agenda/utils/ColorList'; +import TeamIcon from 'public/image/agenda/rock-and-roll-hand.svg'; import TimeIcon from 'public/image/agenda/Time.svg'; import styles from 'styles/agenda/Profile/HistoryList.module.scss'; @@ -68,6 +70,41 @@ const HistoryList = ({ historyListData }: HistoryListProps) => {
{timeString}
+ {/* Team 정보 UI / host 경우 ❌ */} + {historyTeamMates && historyTeamMates.length > 0 ? ( + <> +
+ +
+ {historyData.teamName} +
+ +
+
+ +
+ + {/* intra id mapping */} +
+ {historyTeamMates.map((mate, index) => ( +
+ {mate.intraId} +
+ ))} +
+
+ + {/* coalition color mapping */} +
+ +
+ + ) : null} ); } diff --git a/components/agenda/utils/AgendaTags.tsx b/components/agenda/utils/AgendaTags.tsx index 582bfc1e7..f14e8a618 100644 --- a/components/agenda/utils/AgendaTags.tsx +++ b/components/agenda/utils/AgendaTags.tsx @@ -3,7 +3,15 @@ import { AgendaLocation, AgendaStatus } from 'constants/agenda/agenda'; import { DefaultTag } from 'components/agenda/utils/AgendaTag'; import styles from 'styles/agenda/utils/AgendaTag.module.scss'; -const AgendaTags = (data: AgendaDataProps) => { +interface TagProps { + agendaStatus?: AgendaStatus; + agendaLocation: AgendaLocation; + isOfficial: boolean; + agendaMaxPeople: number; + isRanking?: boolean; +} + +const AgendaTags = (data: TagProps) => { const statusToTagName: Record = { [AgendaStatus.CANCEL]: '취소', [AgendaStatus.OPEN]: '모집중', @@ -16,15 +24,15 @@ const AgendaTags = (data: AgendaDataProps) => { [AgendaLocation.MIX]: '전국', }; - const status = statusToTagName[data.agendaStatus]; + const status = data.agendaStatus ? statusToTagName[data.agendaStatus] : ''; const location = LocationToTagName[data.agendaLocation]; const tags = [ data.isOfficial ? '공식' : '비공식', data.agendaMaxPeople === 1 ? '개인' : '팀', data.isRanking ? '대회' : null, - status, location, ].filter(Boolean); + status && tags.push(status); return (
diff --git a/styles/agenda/Profile/CurrentList.module.scss b/styles/agenda/Profile/CurrentList.module.scss index 03f36d8d9..6bdb6953d 100644 --- a/styles/agenda/Profile/CurrentList.module.scss +++ b/styles/agenda/Profile/CurrentList.module.scss @@ -14,6 +14,10 @@ .currentItemWrapper { width: 100%; @media screen and (min-width: 961px) { - max-width: 22rem; + width: 48%; } } + +.currentItemWrapper:first-child:last-child { + width: 100% !important; +} diff --git a/styles/agenda/Profile/HistoryList.module.scss b/styles/agenda/Profile/HistoryList.module.scss index 014fba75f..0e65a2353 100644 --- a/styles/agenda/Profile/HistoryList.module.scss +++ b/styles/agenda/Profile/HistoryList.module.scss @@ -15,7 +15,6 @@ .historyItem { display: flex; width: 100%; - max-width: 22rem; height: auto; flex-direction: column; padding: 1rem; @@ -27,6 +26,13 @@ justify-content: flex-start; align-items: flex-start; gap: 0.5rem; + @media screen and (min-width: 1401px) { + width: 48%; + } +} + +.historyItem:first-child:last-child { + width: 100% !important; } .agendaTitle { @@ -56,3 +62,30 @@ width: 0.8rem; height: 0.8rem; } + +.divider { + width: 100%; +} + +.teamName { + @include text(tab); +} + +.teamIntraIdWrapper { + display: flex; + align-items: center; + gap: 0.7rem; + @include text(description-s); + + .intraIdWrapper { + display: flex; + align-items: center; + gap: 0.5rem; + } +} + +.coalitionWrapper { + display: flex; + width: 100%; + height: 1rem; +} diff --git a/types/agenda/profile/historyListTypes.ts b/types/agenda/profile/historyListTypes.ts index 51931e58f..1e8a63333 100644 --- a/types/agenda/profile/historyListTypes.ts +++ b/types/agenda/profile/historyListTypes.ts @@ -1,10 +1,12 @@ +import { AgendaLocation } from 'constants/agenda/agenda'; + export interface HistoryItemProps { agendaId: string; agendaTitle: string; agendaStartTime: string; agendaEndTime: string; agendaCurrentTeam: number; - agendaLocation: string; + agendaLocation: AgendaLocation; teamKey: string; isOfficial: boolean; agendaMaxPeople: number;