[FEATURE] 팀피셜록 공유하기 개선 #164

src/app/(main)/project/[id]/page.tsx

@@ -1,5 +1,24 @@
 import React from 'react';
 import ProjectInfo from './_components/ProjectInfo';
+import { Metadata } from 'next';
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: `TEAMFICIAL`,
+    description: `소프트스킬 팀빌딩 서비스, 팀피셜`,
+    openGraph: {
+      title: `TEAMFICIAL`,
+      description: `소프트스킬 팀빌딩 서비스, 팀피셜`,
+      images: [
+        {
+          url: 'https://www.teamficial.com/og/Teamficial_metatag_Image.jpg',
+          width: 1200,
+          height: 630,
+        },
+      ],
+    },
+  };
+}
 
 type Props = {
   params: Promise<{ id: string }>;

src/app/(main)/teampsylog/[uuid]/page.tsx

@@ -1,6 +1,48 @@
 import React from 'react';
 import KeywordListPage from './_components/KeywordListPage';
 import MobileHeader from '@/components/common/MobileHeader';
+import { Metadata } from 'next';
+import axios from 'axios';
+
+type Props = {
+  params: Promise<{ uuid: string }>;
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { uuid } = await params;
+  let userName = '사용자';
+
+  try {
+    const res = await axios.get(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL}/teamficial-log/requester`,
+      {
+        params: {
+          requesterUuid: uuid,
+        },
+      },
+    );
+
+    userName = res.data?.result?.requesterName ?? '사용자';
+  } catch (error) {
+    console.error('Failed to fetch requester data:', error);
+  }
+
+  return {
+    title: `${userName}님의 팀피셜록`,
+    description: `소프트스킬 팀빌딩 서비스, 팀피셜`,
+    openGraph: {
+      title: `${userName}님의 팀피셜록`,
+      description: `소프트스킬 팀빌딩 서비스, 팀피셜`,
+      images: [
+        {
+          url: 'https://www.teamficial.com/og/Teamficial_metatag_Image.jpg',
+          width: 1200,
+          height: 630,
+        },
+      ],
+    },
+  };
+}
 
 const page = () => {
   return (

src/app/(main)/teampsylog/_components/CommentPage.tsx

@@ -37,7 +37,7 @@ const CommentPage = ({
 
   return (
     <div
-      className="desktop:gap-7 desktop:p-8 flex flex-col gap-3 px-4 pt-3 pb-5"
+      className="desktop:gap-7 desktop:p-8 scrollbar-hide flex flex-col gap-3 px-4 pt-3 pb-5"
       style={{ overflowY: 'auto' }}
     >
       <div className="flex flex-col">

src/app/(main)/teampsylog/_components/KeywordBar.tsx

@@ -1,5 +1,5 @@
 import { useGetKeyword } from '@/hooks/queries/useKeyword';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import KeywordItem from './KeywordItem';
 import Image from 'next/image';
 import ProfileDropdown from './ProfileDropdown';
@@ -63,6 +63,9 @@ const KeywordBar = ({
     addToast({ message: '링크가 복사되었어요' });
   };
 
+  const [dismissedByUser, setDismissedByUser] = useState(false);
+  const showShareGuide = !dismissedByUser && !isEditMode;
+
   useEffect(() => {
     // 편집 모드이고 아직 슬롯이 선택되지 않았을 때만 가이드 표시
     if (isEditMode && selectedSlot === null) {
@@ -114,6 +117,15 @@ const KeywordBar = ({
                 <button onClick={handleShare} className="cursor-pointer">
                   <Image src="/icons/share.svg" alt="공유하기" width={28} height={28} />
                 </button>
+                {showShareGuide && (
+                  <KeywordGuideBalloon
+                    position="top"
+                    onClose={() => setDismissedByUser(true)}
+                    text="팀피셜록 링크를 공유해보세요!"
+                    share={true}
+                    balloonClassName="right-4"
+                  />
+                )}
               </div>
             )}
           </div>
@@ -148,6 +160,15 @@ const KeywordBar = ({
           {isEditMode && showGuide && (
             <KeywordGuideBalloon position="bottom" onClose={() => setShowGuide(false)} />
           )}
+          {showShareGuide && (
+            <KeywordGuideBalloon
+              position="bottom"
+              onClose={() => setDismissedByUser(true)}
+              text={`팀피셜록 링크를\n공유해보세요!`}
+              share={true}
+              balloonClassName="right-0 -translate-y-10"
+            />
+          )}
           <div className="flex items-center gap-1">
             {mobileDisplayKeywords.map((keyword, index) => (
               <KeywordItem

src/app/(main)/teampsylog/_components/KeywordGuideBalloon.tsx

@@ -2,18 +2,24 @@ import React from 'react';
 
 interface KeywordGuideBalloonProps {
   position: 'top' | 'bottom';
+  share?: boolean;
   onClose: () => void;
   text?: string;
+  balloonClassName?: string; // 말풍선 위치 오버라이드
 }
 
 const KeywordGuideBalloon: React.FC<KeywordGuideBalloonProps> = ({
   position,
+  share = false,
   onClose,
   text = '변경할 대표 키워드를\n먼저 선택하세요',
+  balloonClassName,
 }) => {
   return (
     <div
-      className={`absolute left-1/2 z-50 flex -translate-x-1/2 items-center rounded bg-gray-800 px-4 py-2 text-white shadow-lg ${
+      className={`absolute z-50 flex items-center bg-gray-800 px-4 py-2 text-white shadow-lg ${
+        share ? 'rounded-lg' : 'rounded'
+      } ${balloonClassName ?? (share ? 'right-4' : 'left-1/2 -translate-x-1/2')} ${
         position === 'top' ? 'bottom-full mb-1.5' : 'top-full mt-1.5'
       }`}
     >
@@ -28,7 +34,9 @@ const KeywordGuideBalloon: React.FC<KeywordGuideBalloonProps> = ({
       </div>
       {/* 꼬리 */}
       <div
-        className={`absolute left-1/2 h-0 w-0 -translate-x-1/2 border-x-[6px] border-x-transparent ${
+        className={`absolute h-0 w-0 border-x-[6px] border-x-transparent ${
+          share ? 'right-3' : 'left-1/2 -translate-x-1/2'
+        } ${
           position === 'top'
             ? 'top-full border-t-[9px] border-t-gray-800'
             : 'bottom-full border-b-[9px] border-b-gray-800'

src/app/(main)/teampsylog/_components/LogNote.tsx

@@ -156,7 +156,7 @@ const LogNote = ({
           {/* 오른쪽 페이지 (데스크톱만) */}
           <div
             className={`desktop:flex relative hidden h-162 w-118 flex-col gap-[13px] rounded-r-[16px] bg-gray-200 shadow-[0_4px_4px_0_#E1E1E1] ${
-              !selectedKeywordId || isEditMode ? 'items-center justify-center' : ''
+              !selectedKeywordId ? 'items-center justify-center' : ''
             }`}
           >
             <button

src/app/globals.css

@@ -29,6 +29,15 @@ input {
   }
 }
 
+.scrollbar-hide {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

src/app/layout.tsx

@@ -17,7 +17,11 @@ export const metadata: Metadata = {
   title: 'TEAMFICIAL',
   description: 'Generated by create next app',
   icons: {
-    icon: '/favicon.svg',
+    icon: [
+      { url: '/favicon.ico', sizes: '48x48', type: 'image/x-icon' },
+      { url: '/favicon.svg', type: 'image/svg+xml' },
+    ],
+    apple: '/apple-touch-icon.png',
   },
 };