Merge pull request #1566 from 42organization/Hotfix/#1565-build-fail

[Hotfix] build fail 수정 및 프로필페이지 style 조정 #1565
42organization · Sep 9, 2024 · 2c1ef3a · 2c1ef3a
2 parents fddd491 + 8a7e8d1
commit 2c1ef3a
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 6 deletions.
diff --git 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) => {
 
                     <div className={styles.timeContent}>{timeString}</div>
                   </div>
+                  {/* Team 정보 UI / host 경우 ❌ */}
+                  {historyTeamMates && historyTeamMates.length > 0 ? (
+                    <>
+                      <hr className={styles.divider} />
+
+                      <div className={styles.teamName}>
+                        {historyData.teamName}
+                      </div>
+
+                      <div className={styles.teamIntraIdWrapper}>
+                        <div className={styles.imageWrapper}>
+                          <TeamIcon />
+                        </div>
+
+                        {/* intra id mapping */}
+                        <div className={styles.intraIdWrapper}>
+                          {historyTeamMates.map((mate, index) => (
+                            <div
+                              key={`${historyData.agendaId}-${mate.intraId}-${index}`}
+                            >
+                              {mate.intraId}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+
+                      {/* coalition color mapping */}
+                      <div className={styles.coalitionWrapper}>
+                        <ColorList
+                          peopleCount={peopleCount}
+                          totalPeople={totalPeople}
+                        />
+                      </div>
+                    </>
+                  ) : null}
                 </Link>
               );
             }

diff --git 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, string> = {
     [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 (
     <div className={styles.agendaItemTagBox}>

diff --git 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
@@ -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
@@ -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;