feat: profile 2차 Q/A

apps/profile/src/components/Header/Header.styles.ts

@@ -2,7 +2,7 @@ import { mq_lg } from '@boolti/ui';
 import styled from '@emotion/styled';
 
 const Header = styled.div<{ hasTitle: boolean }>`
-  height: 68px;
+  height: 60px;
   display: flex;
   align-items: center;
   padding: 0 20px;
@@ -11,6 +11,8 @@ const Header = styled.div<{ hasTitle: boolean }>`
 
   ${mq_lg} {
     padding: 0;
+    position: relative;
+    background-color: transparent;
   }
 `;
 

apps/profile/src/hooks/useYoutubeVideoDuration.ts

@@ -2,40 +2,51 @@ import { useQuery, type UseQueryResult } from '@tanstack/react-query';
 
 interface YouTubeVideoResponse {
   items?: Array<{
+    snippet?: {
+      title?: string;
+    };
     contentDetails?: {
       duration?: string;
     };
   }>;
 }
 
+export interface YouTubeVideoData {
+  title: string | null;
+  duration: string | null;
+}
+
 export const useYoutubeVideoDuration = (
   videoId: string | null,
-): UseQueryResult<string | null, Error> => {
+): UseQueryResult<YouTubeVideoData, Error> => {
   return useQuery({
-    queryKey: ['youtube', 'duration', videoId],
-    queryFn: async (): Promise<string | null> => {
-      if (!videoId) return null;
+    queryKey: ['youtube', 'video', videoId],
+    queryFn: async (): Promise<YouTubeVideoData> => {
+      if (!videoId) return { title: null, duration: null };
 
       const apiKey = import.meta.env.VITE_YOUTUBE_API_KEY;
       if (!apiKey) {
         console.warn('YouTube API key is not configured');
-        return null;
+        return { title: null, duration: null };
       }
 
       try {
         const response = await fetch(
-          `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&part=contentDetails&key=${apiKey}`,
+          `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&part=snippet,contentDetails&key=${apiKey}`,
         );
 
         if (!response.ok) {
-          throw new Error('Failed to fetch video duration');
+          throw new Error('Failed to fetch video data');
         }
 
         const data: YouTubeVideoResponse = await response.json();
-        return data.items?.[0]?.contentDetails?.duration ?? null;
+        return {
+          title: data.items?.[0]?.snippet?.title ?? null,
+          duration: data.items?.[0]?.contentDetails?.duration ?? null,
+        };
       } catch (error) {
-        console.error('Error fetching YouTube video duration:', error);
-        return null;
+        console.error('Error fetching YouTube video data:', error);
+        return { title: null, duration: null };
       }
     },
     enabled: !!videoId,

apps/profile/src/pages/ProfileLinkPage/ProfileLinkPage.styles.ts

@@ -1,21 +1,42 @@
 import styled from '@emotion/styled';
+import { mq_lg } from '@boolti/ui';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 20px 0px;
+  padding: 0 0 60px 0;
+
+  ${mq_lg} {
+    padding: 0 20px 60px 20px;
+  }
+`;
+
+const CountText = styled.p`
+  ${({ theme }) => theme.typo.b3};
+  color: ${({ theme }) => theme.palette.grey.g50};
+  margin: 0 0 8px 0;
+  padding: 0 20px;
+
+  ${mq_lg} {
+    padding: 0;
+  }
 `;
 
 const LinkItem = styled.a`
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 18px 16px;
+  padding: 16px 20px;
   background-color: ${({ theme }) => theme.palette.mobile.grey.g90};
   border-radius: 10px;
   text-decoration: none;
   cursor: pointer;
+  margin: 0 20px;
+
+  ${mq_lg} {
+    margin: 0;
+  }
 `;
 
 const IconWrapper = styled.div`
@@ -45,6 +66,7 @@ const Title = styled.span`
 
 export default {
   Container,
+  CountText,
   LinkItem,
   IconWrapper,
   LinkInfo,

apps/profile/src/pages/ProfileLinkPage/index.tsx

@@ -13,6 +13,7 @@ export const ProfileLinkPage = () => {
     <Layout>
       <Header title="링크" />
       <Styled.Container>
+        <Styled.CountText>총 {data?.length || 0}개</Styled.CountText>
         {data?.map((link, index) => (
           <Styled.LinkItem
             key={`${link.link}-${index}`}