feat(client): 프로필 카드 컴포넌트에 포트폴리오, 이력서, 깃허브 입력 유무 표시 (#386)

* feat(client): 프로필 카드 컴포넌트에 포트폴리오, 이력서, 깃허브 입력 유무 표시

* feat(client): 아이콘 마다 툴팁 추가

Author: SEOKKAMONI

apps/client/public/assets/svgs/github_icon.svg

@@ -39,9 +39,7 @@ const Header = () => {
         {!isLoading && (
           <Stack direction="horizontal" align="center" spacing={12}>
             {user.isLogin && (
-              <StyledNotificationButtonWrapper>
-                <NotificationButton hasNotification={user.hasNotification} />
-              </StyledNotificationButtonWrapper>
+              <NotificationButton hasNotification={user.hasNotification} />
             )}
             {user.isLogin ? (
               <Button onClick={handleLogout} styleType="ghost" size="small">
@@ -69,7 +67,3 @@ const StyledHeader = styled.div`
     background-color: ${theme.colors.white};
   `}
 `;
-
-const StyledNotificationButtonWrapper = styled.div`
-  position: relative;
-`;

apps/client/public/next.svg

@@ -1,21 +1,14 @@
 import styled from '@emotion/styled';
-import { Stack, Text } from '@sickgyun/ui';
+import { IconReviewStarFill, IconStoryArticleFill } from '@seed-design/icon';
+import { colors } from '@sickgyun/design-token';
+import { Stack, Text, Tooltip } from '@sickgyun/ui';
 import { useOverlay } from '@toss/use-overlay';
 import Image from 'next/image';
 import ProfileDetailModal from '../ProfileDetailModal';
+import type { GetProfileListResponse } from '@/hooks/api/profile/useGetProfileList';
 import { useLogAnalyticsEvent } from '@/libs/logging';
-import type { Major } from '@/types/profile';
 
-type ProfileCardProps = {
-  name: string;
-  imageUrl: string;
-  cardinal: number;
-  major: Major;
-  profileId: number;
-  userId: number;
-  company?: string;
-  introduction?: string;
-};
+type ProfileCardProps = Omit<GetProfileListResponse, 'id'>;
 
 const ProfileCard = ({
   name,
@@ -26,6 +19,9 @@ const ProfileCard = ({
   userId,
   company,
   introduction,
+  githubId,
+  portfolioUrl,
+  resumeUrl,
 }: ProfileCardProps) => {
   const overlay = useOverlay();
   const { logClickEvent } = useLogAnalyticsEvent();
@@ -68,13 +64,59 @@ const ProfileCard = ({
           </Text>
         </Stack>
       </Stack>
+      <StyledProfilePresenceCheck direction="horizontal" align="center" spacing={8}>
+        {portfolioUrl && (
+          <Tooltip content="포트폴리오" placement="bottom-end">
+            {({ ref }) => {
+              return (
+                <IconReviewStarFill
+                  ref={ref}
+                  width={20}
+                  height={20}
+                  color={colors.gray400}
+                />
+              );
+            }}
+          </Tooltip>
+        )}
+        {resumeUrl && (
+          <Tooltip content="이력서" placement="bottom-end">
+            {({ ref }) => {
+              return (
+                <IconStoryArticleFill
+                  ref={ref}
+                  width={20}
+                  height={20}
+                  color={colors.gray400}
+                />
+              );
+            }}
+          </Tooltip>
+        )}
+        {githubId && (
+          <Tooltip content="깃허브" placement="bottom-end">
+            {({ ref }) => {
+              return (
+                <Image
+                  ref={ref}
+                  src="/assets/svgs/github_icon.svg"
+                  width={20}
+                  height={20}
+                  alt="Github Logo"
+                />
+              );
+            }}
+          </Tooltip>
+        )}
+      </StyledProfilePresenceCheck>
     </StyledProfileCard>
   );
 };
 
 export default ProfileCard;
 
 const StyledProfileCard = styled.div`
+  position: relative;
   transition: all 0.25s ease;
   padding: 16px;
   border-radius: 8px;
@@ -90,3 +132,9 @@ const StyledProfileImage = styled(Image)`
   border-radius: 8px;
   object-fit: cover;
 `;
+
+const StyledProfilePresenceCheck = styled(Stack)`
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+`;

apps/client/public/vercel.svg

@@ -40,6 +40,9 @@ const ProfileList = ({ major, isRecruited, cardinal }: ProfileListProps) => {
           userId={profile.userId}
           company={profile.company}
           introduction={profile.introduction}
+          portfolioUrl={profile.portfolioUrl}
+          githubId={profile.githubId}
+          resumeUrl={profile.resumeUrl}
         />
       ))}
     </StyledProfileList>

apps/client/src/components/common/Header/index.tsx

@@ -162,6 +162,7 @@ const StyledProfileNavigationBar = styled.div`
   ${({ theme }) => css`
     border-bottom: 1px solid ${theme.colors.gray200};
     background-color: ${theme.colors.white};
+    z-index: ${theme.zIndex.component3};
   `}
 `;
 

apps/client/src/components/profile/ProfileCard/index.tsx

@@ -12,15 +12,17 @@ export type GetProfileListParams = {
 
 export type GetProfileListResponse = {
   id: number;
-  userId: number;
   name: string;
-  admissionYear: number;
   imageUrl: string;
-  major: Major;
-  introduction: string;
-  company: string;
-  isRecruited: boolean;
   cardinal: number;
+  major: Major;
+  profileId: number;
+  userId: number;
+  company?: string;
+  introduction?: string;
+  githubId?: string;
+  portfolioUrl?: string;
+  resumeUrl?: string;
 };
 
 export const PROFILE_LIST_QUERY_KEY = 'profileList';

apps/client/src/components/profile/ProfileList/index.tsx

@@ -102,14 +102,12 @@ const Tooltip = ({
   });
 
   return (
-    <>
-      <PositionWrapper strategy={strategy}>
-        {children({
-          ref: refs.setReference,
-          onOpen: openTooltip,
-          referenceProps: getReferenceProps(),
-        })}
-      </PositionWrapper>
+    <PositionWrapper strategy={strategy}>
+      {children({
+        ref: refs.setReference,
+        onOpen: openTooltip,
+        referenceProps: getReferenceProps(),
+      })}
       <StyledCSSTransition
         nodeRef={transitionRef}
         in={isOpen}
@@ -134,7 +132,7 @@ const Tooltip = ({
           </StyledTooltipItem>
         </StyledTooltipItemWrapper>
       </StyledCSSTransition>
-    </>
+    </PositionWrapper>
   );
 };