feat: 멤버 탭 변경사항 및 mds 반영

package.json

@@ -44,8 +44,8 @@
     "@radix-ui/react-tooltip": "^1.0.5",
     "@sopt-makers/colors": "^3.0.2",
     "@sopt-makers/fonts": "^1.0.0",
-    "@sopt-makers/icons": "^1.0.5",
-    "@sopt-makers/ui": "^2.7.6",
+    "@sopt-makers/icons": "^1.0.7",
+    "@sopt-makers/ui": "^2.8.1",
     "@tanstack/react-query": "^5.4.3",
     "@toss/emotion-utils": "^1.1.10",
     "@toss/error-boundary": "^1.4.6",

src/components/coffeechat/detail/index.tsx

@@ -79,7 +79,7 @@ export default function CoffeechatDetail({ memberId }: CoffeechatDetailProp) {
                 isMine={profile.isMine}
                 isCoffeechatTap
               />
-              <DetailInfoSection profile={profile} isCoffeechat />
+              <DetailInfoSection profile={profile} />
             </ProfileContents>
             <SoptActivityTitle>SOPT 활동 정보</SoptActivityTitle>
             <SoptActivitySection soptActivities={sortedSoptActivities} />

src/components/members/detail/ActivityBadge.tsx

@@ -2,30 +2,29 @@ import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 import { FC } from 'react';
 
+import Text from '@/components/common/Text';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
-import { textStyles } from '@/styles/typography';
 
 interface ActivityBadgeProps {
   category?: string;
   name: string;
 }
 
 const ActivityBadge: FC<ActivityBadgeProps> = ({ category, name }) => {
-  return <Container>{`${category} ${name}`}</Container>;
+  return (
+    <Container>
+      <Category typography='SUIT_13_M'>{category}</Category>
+      <Text typography='SUIT_13_M'>{name}</Text>
+    </Container>
+  );
 };
 
 const Container = styled.div`
   display: flex;
   align-items: center;
-  transition: background-color 0.2s;
-  border-radius: 13px;
+  border-radius: 28px;
   background-color: ${colors.gray700};
   padding: 6px 14px;
-  line-height: 100%;
-  letter-spacing: -0.01em;
-  color: ${colors.gray10};
-
-  ${textStyles.SUIT_14_M}
 
   &:hover {
     background-color: ${colors.gray600};
@@ -38,4 +37,18 @@ const Container = styled.div`
   }
 `;
 
+const Category = styled(Text)`
+  display: flex;
+  align-items: center;
+
+  ::after {
+    display: inline-block;
+    margin: 0 10px;
+    background-color: ${colors.gray400};
+    width: 1px;
+    height: 14px;
+    content: '';
+  }
+`;
+
 export default ActivityBadge;

src/components/members/detail/ActivitySection/MemberDetail.tsx

@@ -61,9 +61,9 @@ const MemberDetail: FC<MemberDetailProps> = ({ memberId }) => {
     <Container>
       <Wrapper>
         <ProfileSection profile={profile} memberId={memberId} />
-        {!profile.isMine && <MessageSection profile={profile} memberId={memberId} />}
+        <MessageSection profile={profile} memberId={memberId} />
         <DetailInfoSection profile={profile} />
-        <SoptActivitySection soptActivities={sortedSoptActivities} />
+        <SoptActivitySection soptActivities={sortedSoptActivities} isMine={profile.isMine} />
         <CareerSection
           careers={profile.careers}
           links={profile.links}
@@ -119,7 +119,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 123px 0;
+  padding: 120px 0;
   @media ${MOBILE_MEDIA_QUERY} {
     padding: 16px 20px;
     padding-bottom: 100px;

src/components/members/detail/ActivitySection/MemberDetailSection.ts

@@ -6,11 +6,14 @@ import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 export const MemberDetailSection = styled.section`
   display: flex;
   flex-direction: column;
+  gap: 32px;
   border-radius: 20px;
   background: ${colors.gray900};
   padding: 40px;
   width: 100%;
+
   @media ${MOBILE_MEDIA_QUERY} {
+    gap: 20px;
     border-radius: 18px;
     padding: 30px 20px;
   }

src/components/members/detail/DetailinfoSection/index.tsx

@@ -1,46 +1,29 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
-import dayjs from 'dayjs';
 
 import { ProfileDetail } from '@/api/endpoint_LEGACY/members/type';
 import Text from '@/components/common/Text';
 import MemberDetailSection from '@/components/members/detail/ActivitySection/MemberDetailSection';
 import InfoItem from '@/components/members/detail/InfoItem';
-import { DEFAULT_DATE } from '@/components/members/upload/constants';
-import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 
 interface DetailInfoSectionProps {
   profile: ProfileDetail;
-  isCoffeechat?: boolean;
 }
 
-const convertBirthdayFormat = (birthday?: string) => {
-  // FIXME: 서버쪽에 YYYY-MM-DD 형태로 무조건 업로드시 전송해줘야 하는 이슈가 있어서,
-  // 생년월일을 보내지 않았을 경우에 DEFAULT_DATE를 전송하도록 임시처리 해 두었습니다. 이를 클라에서 보여주기 위해 대응합니다.
-  if (birthday) {
-    const isDefaultDay = dayjs(birthday).isSame(dayjs(DEFAULT_DATE));
-    return isDefaultDay ? '' : dayjs(birthday).format('YYYY-MM-DD');
-  }
-  return '';
-};
-
-const DetailInfoSection = ({ profile, isCoffeechat = false }: DetailInfoSectionProps) => {
+const DetailInfoSection = ({ profile }: DetailInfoSectionProps) => {
   const hasProfileInfo = profile.birthday || profile.university || profile.major || profile.address;
 
   return hasProfileInfo ? (
     <MemberDetailSection style={{ gap: '30px' }}>
-      {!isCoffeechat && profile.birthday && (
-        <InfoItem label='생년월일' content={convertBirthdayFormat(profile.birthday)} />
-      )}
       {profile.university && <InfoItem label='학교'>{profile.university}</InfoItem>}
       {profile.major && <InfoItem label='전공'>{profile.major}</InfoItem>}
       {profile.address && (
         <InfoItem label='활동 지역'>
           <StyledAddressBadgeWrapper>
             {profile.address.split(',').map((address) => (
-              <AddressBadge key={address}>
-                <Text typography='SUIT_14_M'>{address}</Text>
-              </AddressBadge>
+              <AddressItem key={address}>
+                <Text typography='SUIT_18_M'>{address}</Text>
+              </AddressItem>
             ))}
           </StyledAddressBadgeWrapper>
         </InfoItem>
@@ -54,18 +37,19 @@ export default DetailInfoSection;
 const StyledAddressBadgeWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
   align-items: center;
-
-  @media ${MOBILE_MEDIA_QUERY} {
-    gap: 10px;
-  }
 `;
 
-const AddressBadge = styled.div`
-  border-radius: 13px;
-  background-color: ${colors.gray700};
-  padding: 6px 14px;
-  line-height: 16px;
-  color: ${colors.gray10};
+const AddressItem = styled.div`
+  display: flex;
+  align-items: center;
+
+  &:not(:last-child)::after {
+    display: inline-block;
+    margin: 0 10px;
+    background-color: ${colors.gray600};
+    width: 1px;
+    height: 16px;
+    content: '';
+  }
 `;

src/components/members/detail/GroupSection/index.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
+import { fonts } from '@sopt-makers/fonts';
 import axios from 'axios';
 import Link from 'next/link';
 
@@ -13,7 +14,6 @@ import { playgroundLink } from '@/constants/links';
 import useEnterScreen from '@/hooks/useEnterScreen';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { safeParseInt } from '@/utils';
-import { fonts } from '@sopt-makers/fonts';
 
 interface GroupSectionProps {
   profile: ProfileDetail;
@@ -40,9 +40,9 @@ const GroupSection = ({ profile, meId, memberId }: GroupSectionProps) => {
   }
 
   return (
-    <Container>
+    <>
       {meetingList.length > 0 ? (
-        <>
+        <Container>
           <ActivityTitle>
             {profile.name}님이 참여한 {meetingList.length}개의 모임이에요!
           </ActivityTitle>
@@ -56,11 +56,11 @@ const GroupSection = ({ profile, meId, memberId }: GroupSectionProps) => {
             ))}
           </ActivityDisplay>
           <Target ref={ref} />
-        </>
+        </Container>
       ) : (
         <>
-          {String(meId) === memberId ? (
-            <>
+          {String(meId) === memberId && (
+            <Container>
               <ActivityTitle>아직 참여한 모임이 없어요</ActivityTitle>
               <ActivityUploadNudge>
                 <NudgeSubText typography='SUIT_16_M' style={{ textAlign: 'center', lineHeight: '24px' }}>
@@ -72,13 +72,11 @@ const GroupSection = ({ profile, meId, memberId }: GroupSectionProps) => {
                 </ActivityUploadButton>
                 <ActivityUploadMaskImg src='/icons/img/meeting-mask.png' alt='meeting-mask-image' height={134} />
               </ActivityUploadNudge>
-            </>
-          ) : (
-            <ActivityTitle>아직 {profile.name}님이 참여한 모임이 없어요</ActivityTitle>
+            </Container>
           )}
         </>
       )}
-    </Container>
+    </>
   );
 };
 

src/components/members/detail/InterestSection/index.tsx

@@ -59,13 +59,7 @@ interface InterestSectionProps {
   balanceGame: BalanceGame;
   selfIntroduction?: string;
 }
-const InterestSection: FC<InterestSectionProps> = ({
-  mbti,
-  sojuCapacity,
-  balanceGame,
-  interest,
-  selfIntroduction,
-}) => {
+const InterestSection: FC<InterestSectionProps> = ({ mbti, sojuCapacity, balanceGame, interest, selfIntroduction }) => {
   const balanceGameResults = getBalanceGameResults(balanceGame);
   const isBalanceGameAvailable = balanceGame && Object.values(balanceGame).some((value) => value !== null);
 
@@ -165,7 +159,7 @@ const BalanceGameWrapper = styled.div`
 
   @media ${MOBILE_MEDIA_QUERY} {
     margin-top: 12px;
-    max-width: 236px;
+    max-width: 265px;
   }
 `;
 
@@ -176,5 +170,5 @@ const BalanceGameItem = styled.div`
   line-height: 16px;
   color: ${colors.gray10};
 
-  ${textStyles.SUIT_14_M};
+  ${textStyles.SUIT_16_SB};
 `;

src/components/members/detail/MessageSection/index.tsx

@@ -49,44 +49,74 @@ export default function MessageSection({ memberId, profile }: MessageSectionProp
     router.push(playgroundLink.coffeechatDetail(memberId));
   };
 
-  return (
-    <>
-      <StyledMemberDetailSection>
-        <TitleWrapper>
-          <Title typography='SUIT_18_SB'>{name}님과 나누고 싶은 이야기가 있나요?</Title>
-          <Subtitle typography='SUIT_16_M' color={colors.gray300}>
-            궁금한 점에 대해 편하게 소통해보세요!
-          </Subtitle>
-        </TitleWrapper>
-        <ButtonWrapper>
-          {isCoffeeChatActivate && (
-            <CoffeeChatButton size='sm' theme='black' onClick={handleClickCoffeeChatButton}>
-              커피챗 보러가기
-            </CoffeeChatButton>
-          )}
-          <MessageButton size='sm' onClick={handleClickMessageButton} disabled={isEmptyEmail}>
-            쪽지 보내기
-          </MessageButton>
-        </ButtonWrapper>
-      </StyledMemberDetailSection>
-      {isOpenMessageModal && (
-        <MessageModal
-          receiverId={memberId}
-          name={name}
-          profileImageUrl={profileImage}
-          onClose={onCloseMessageModal}
-          defaultCategory={MessageCategory.NETWORK}
-          onLog={(options) =>
-            logSubmitEvent('sendMessage', {
-              category: options?.category?.toString() ?? '',
-              receiverId: +memberId,
-              referral: 'memberDetail',
-            })
-          }
-        />
-      )}
-    </>
-  );
+  const handleClickCoffeeChatOpenButton = () => {
+    router.push(playgroundLink.coffeechatUpload());
+  };
+
+  const Mine = () => {
+    return (
+      <>
+        {!profile.isCoffeeChatActivate && (
+          <StyledMemberDetailSection>
+            <TitleWrapper>
+              <Title typography='SUIT_18_SB'>SOPT 회원들과 나누고 싶은 이야기가 있나요?</Title>
+              <Subtitle typography='SUIT_16_M' color={colors.gray300}>
+                어떤 내용이라도 좋아요. 편하게 오픈해 보세요!
+              </Subtitle>
+            </TitleWrapper>
+            <ButtonWrapper>
+              <CoffeeChatButton size='sm' theme='black' onClick={handleClickCoffeeChatOpenButton}>
+                커피챗 오픈하러 가기
+              </CoffeeChatButton>
+            </ButtonWrapper>
+          </StyledMemberDetailSection>
+        )}
+      </>
+    );
+  };
+
+  const Others = () => {
+    return (
+      <>
+        <StyledMemberDetailSection>
+          <TitleWrapper>
+            <Title typography='SUIT_18_SB'>{name}님과 나누고 싶은 이야기가 있나요?</Title>
+            <Subtitle typography='SUIT_16_M' color={colors.gray300}>
+              궁금한 점에 대해 편하게 소통해보세요!
+            </Subtitle>
+          </TitleWrapper>
+          <ButtonWrapper>
+            {isCoffeeChatActivate && (
+              <CoffeeChatButton size='sm' theme='black' onClick={handleClickCoffeeChatButton}>
+                커피챗 보러가기
+              </CoffeeChatButton>
+            )}
+            <MessageButton size='sm' onClick={handleClickMessageButton} disabled={isEmptyEmail}>
+              쪽지 보내기
+            </MessageButton>
+          </ButtonWrapper>
+        </StyledMemberDetailSection>
+        {isOpenMessageModal && (
+          <MessageModal
+            receiverId={memberId}
+            name={name}
+            profileImageUrl={profileImage}
+            onClose={onCloseMessageModal}
+            defaultCategory={MessageCategory.NETWORK}
+            onLog={(options) =>
+              logSubmitEvent('sendMessage', {
+                category: options?.category?.toString() ?? '',
+                receiverId: +memberId,
+                referral: 'memberDetail',
+              })
+            }
+          />
+        )}
+      </>
+    );
+  };
+
+  return profile.isMine ? <Mine /> : <Others />;
 }
 
 const StyledMemberDetailSection = styled(MemberDetailSection)`