[FEATURE] 팀피셜록 공유하기 모달 추가

src/app/(main)/page.tsx

@@ -20,5 +20,5 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default function RootPage() {
-  redirect('/project');
+  redirect('/teampsylog');
 }

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

@@ -10,7 +10,7 @@ const KeywordListPage = () => {
 
   return (
     <>
-      <KeywordPage share={true} uuid={uuid} />
+      <KeywordPage uuid={uuid} />
     </>
   );
 };

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

@@ -37,12 +37,12 @@ const CommentPage = ({
 
   return (
     <div
-      className="desktop:gap-7 desktop:p-8 scrollbar-hide flex flex-col gap-3 px-4 pt-3 pb-5"
+      className="desktop:gap-5 desktop:p-8 scrollbar-hide flex flex-col gap-3 px-4 pt-3 pb-5"
       style={{ overflowY: 'auto' }}
     >
       <div className="flex flex-col">
         <p className="desktop:title-4 body-7">{`‘${keywordName}’에 대한 다른 사람들의 코멘트에요`}</p>
-        <p className="desktop:body-6 body-9 text-gray-600">중복된 키워드는 말풍선이 커져요</p>
+        {/* <p className="desktop:body-6 body-9 text-gray-600">중복된 키워드는 말풍선이 커져요</p> */}
       </div>
       <div className="desktop:gap-3 flex flex-col gap-2">
         {comments.map((comment, idx) => (

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

@@ -6,6 +6,7 @@ import ProfileDropdown from './ProfileDropdown';
 import { ResponseProfile } from '@/types/profile';
 import { useToast } from '@/contexts/ToastContext';
 import KeywordGuideBalloon from './KeywordGuideBalloon';
+import { useModal } from '@/contexts/ModalContext';
 
 const KeywordBar = ({
   profileId,
@@ -42,6 +43,8 @@ const KeywordBar = ({
     ...Array(Math.max(0, 3 - headKeywords.length)).fill('키워드 선택'),
   ];
 
+  // 모달 추가
+  const { openModal } = useModal();
   const handleShare = async () => {
     let uuid: string | undefined;
     if (typeof window !== 'undefined') {
@@ -60,7 +63,9 @@ const KeywordBar = ({
       ? `${window.location.origin}/teampsylog/head/${uuid}`
       : `${window.location.origin}/teampsylog`;
     await navigator.clipboard.writeText(url);
-    addToast({ message: '링크가 복사되었어요' });
+
+    openModal('linkShare');
+    // addToast({ message: '링크가 복사되었어요' });
   };
 
   const [dismissedByUser, setDismissedByUser] = useState(false);

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

@@ -16,14 +16,17 @@ import Loading from '@/components/common/Loading';
 import KeywordGuideOverlay from './KeywordGuideOverlay';
 
 interface Props {
-  share?: boolean;
   uuid?: string;
 }
 
-const KeywordPage = ({ share = false, uuid }: Props) => {
+// uuid 비교후 사용자와 동일하면 일반모드, 다르면 공유모드.
+
+const KeywordPage = ({ uuid }: Props) => {
   const router = useRouter();
   const { addToast } = useToast();
-  const { userName, _hasHydrated } = useUserStore();
+  const { uuid: userUuid, userName, _hasHydrated } = useUserStore();
+
+  const share = !_hasHydrated || userUuid !== uuid;
 
   const hasAlerted = useRef(false);
 
@@ -53,14 +56,14 @@ const KeywordPage = ({ share = false, uuid }: Props) => {
     }
   }, [_hasHydrated, userName, router, addToast, share]);
 
-  // 공유 모드: uuid가 있을 때만 실행
+  // 공유 모드일 때만 실행
   const requesterInfoResult = useRequesterInfo(uuid ?? '', { enabled: share && !!uuid });
   const requesterInfo = requesterInfoResult.data;
   const shareUserId = share && requesterInfo ? requesterInfo.userId : null;
   const requesterName = requesterInfo?.requesterName;
 
-  // 공유모드 getProfileList 가져오기
-  const { data: sharedProfiles } = useGetUuidProfileList(uuid ?? '');
+  // 공유 모드일 때만 uuid 기반 프로필을 가져온다.
+  const { data: sharedProfiles } = useGetUuidProfileList(share && uuid ? uuid : '');
 
   // 일반 모드
   const isAuthenticated = _hasHydrated && checkIsLoggedIn(userName);

src/app/(main)/teampsylog/page.tsx

@@ -1,11 +1,30 @@
-import MobileHeader from '@/components/common/MobileHeader';
-import KeywordPage from './_components/KeywordPage';
+'use client';
+import { useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import Loading from '@/components/common/Loading';
+import { useUserStore } from '@/store/useUserStore';
 
 const Page = () => {
+  const router = useRouter();
+  const { uuid, _hasHydrated } = useUserStore();
+  const redirectedRef = useRef(false);
+
+  useEffect(() => {
+    if (!_hasHydrated || redirectedRef.current) return;
+
+    redirectedRef.current = true;
+
+    if (uuid) {
+      router.replace(`/teampsylog/${uuid}`);
+      return;
+    }
+
+    router.replace('/login');
+  }, [_hasHydrated, router, uuid]);
+
   return (
     <section className="h-dvh">
-      <MobileHeader title="팀피셜록" />
-      <KeywordPage />
+      <Loading />
     </section>
   );
 };

src/app/layout.tsx

@@ -1,10 +1,12 @@
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
+import Script from 'next/script';
 import { GoogleTagManager } from '@next/third-parties/google';
 import './globals.css';
 import { ModalProvider } from '@/contexts/ModalContext';
 import Providers from './provider';
 import { ToastProvider } from '@/contexts/ToastContext';
+import KakaoScript from '@/components/common/KaKaoScript';
 
 const pretendard = localFont({
   src: '../../public/fonts/PretendardVariable.woff2',
@@ -15,13 +17,14 @@ const pretendard = localFont({
 
 export const metadata: Metadata = {
   title: 'TEAMFICIAL',
-  description: 'Generated by create next app',
+  description: '소프트스킬 팀빌딩 서비스, 팀피셜',
   icons: {
     icon: [
       { url: '/favicon.ico', sizes: '48x48', type: 'image/x-icon' },
       { url: '/favicon.svg', type: 'image/svg+xml' },
     ],
-    apple: '/apple-touch-icon.png',
+    apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
+    shortcut: '/favicon.ico',
   },
 };
 
@@ -39,6 +42,7 @@ export default function RootLayout({
           </ToastProvider>
         </Providers>
         <GoogleTagManager gtmId="GTM-5KPSS9WV" />
+        <KakaoScript />
       </body>
     </html>
   );

src/components/common/Header.tsx

@@ -74,7 +74,7 @@ const Header = () => {
               height={41}
             />
           </Link>
-          <Link
+          {/* <Link
             href="/project"
             className={clsx(
               'hover:text-primary-900 px-3 transition-colors',
@@ -93,7 +93,7 @@ const Header = () => {
             )}
           >
             팀피셜록
-          </Link>
+          </Link> */}
         </div>
         {isLoggedIn ? (
           <div className="relative">
@@ -106,7 +106,7 @@ const Header = () => {
               <Image src="/icons/profile.svg" alt="profile" width={44} height={44} />
             </button>
             {isProfileDropdownOpen && (
-              <div className="body-5 absolute right-0 z-20 mt-2 w-34 cursor-pointer rounded-lg border border-gray-300 bg-white text-gray-800 shadow-lg">
+              <div className="body-5 absolute right-0 z-60 mt-2 w-34 cursor-pointer rounded-lg border border-gray-300 bg-white text-gray-800 shadow-lg">
                 <Link
                   href="/mypage"
                   className="block border-b border-gray-300 py-3 pl-7 hover:bg-gray-100"
@@ -187,15 +187,15 @@ const Header = () => {
               </div>
               <div className="mt-4 h-[1px] w-full bg-gray-300" />
               <div className="body-5 flex flex-col gap-4 pt-5">
-                <Link
+                {/* <Link
                   href="/project"
                   className={clsx(
                     pathname.startsWith('/project') ? 'text-primary-900' : 'text-gray-800',
                   )}
                   onClick={() => setIsMenuOpen(false)}
                 >
                   프로젝트
-                </Link>
+                </Link> */}
                 <Link
                   href="/teampsylog"
                   className={clsx(
@@ -205,7 +205,7 @@ const Header = () => {
                 >
                   팀피셜록
                 </Link>
-                {isLoggedIn ? (
+                {/* {isLoggedIn ? (
                   <Link
                     href="/mypage"
                     className={clsx(
@@ -215,7 +215,7 @@ const Header = () => {
                   >
                     마이페이지
                   </Link>
-                ) : null}
+                ) : null} */}
               </div>
             </div>
             <div className="mt-auto">

src/components/common/KaKaoScript.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import Script from 'next/script';
+
+export default function KakaoScript() {
+  return (
+    <Script
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
+      integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"
+      crossOrigin="anonymous"
+      strategy="lazyOnload"
+      onLoad={() => {
+        if (window.Kakao && !window.Kakao.isInitialized()) {
+          window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JS_KEY!);
+        }
+      }}
+    />
+  );
+}

src/components/modal/LinkShareModal.tsx

@@ -0,0 +1,83 @@
+import { BaseModalProps } from '@/constants/ModalList';
+import BaseModal from '.';
+import Image from 'next/image';
+import { useToast } from '@/contexts/ToastContext';
+import { useUserStore } from '@/store/useUserStore';
+
+const LinkShareModal = ({ isOpen, onClose }: BaseModalProps) => {
+  const { addToast } = useToast();
+  const { userName } = useUserStore();
+
+  const getShareUrl = () => {
+    const uuid = window.location.pathname.split('/').pop();
+    return `${window.location.origin}/teampsylog/head/${uuid}`;
+  };
+
+  const handleKakaoShare = () => {
+    if (!window.Kakao?.isInitialized()) {
+      addToast({ message: '카카오톡 공유를 불러오는 중입니다. 잠시 후 다시 시도해주세요.' });
+      return;
+    }
+
+    const shareUrl = getShareUrl();
+
+    window.Kakao.Share.sendDefault({
+      objectType: 'feed',
+      content: {
+        title: '팀피셜 (Teamficial)',
+        description: `${userName}님이 협업 후기를 기다리고 있어요!`,
+        imageUrl: `https://www.teamficial.com/og/Teamficial_metatag_Image.jpg`,
+        link: {
+          mobileWebUrl: shareUrl,
+          webUrl: shareUrl,
+        },
+      },
+      buttons: [
+        {
+          title: '팀피셜록 작성하기',
+          link: {
+            mobileWebUrl: shareUrl,
+            webUrl: shareUrl,
+          },
+        },
+      ],
+    });
+  };
+
+  const handleCopyLink = async () => {
+    const shareUrl = getShareUrl();
+    await navigator.clipboard.writeText(shareUrl);
+    addToast({ message: '링크가 복사되었습니다.' });
+  };
+
+  return (
+    <BaseModal isOpen={isOpen} onClose={onClose}>
+      <div className="desktop:w-115 desktop:pb-0 flex flex-col pb-2">
+        <div className="border-b border-b-gray-300 pb-2">
+          <p className="body-7 desktop:body-1 text-gray-800">팀피셜록 공유하기</p>
+          <p className="body-10 desktop:body-4 text-gray-700">
+            사람들에게 나의 소프트스킬 역량을 어필하세요
+          </p>
+        </div>
+        <div className="desktop:gap-7 flex items-center justify-center gap-5 pt-4">
+          <button
+            onClick={handleKakaoShare}
+            className="desktop:gap-2 flex flex-col items-center gap-1"
+          >
+            <Image src="/images/share-kakao.png" width={48} height={48} alt="카카오톡 공유하기" />
+            <p className="body-10 desktop:body-5 text-gray-700">카카오톡</p>
+          </button>
+          <button
+            onClick={handleCopyLink}
+            className="desktop:gap-2 flex flex-col items-center gap-1"
+          >
+            <Image src="/images/share-link.png" width={48} height={48} alt="링크 복사" />
+            <p className="body-10 desktop:body-5 text-gray-700">링크복사</p>
+          </button>
+        </div>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default LinkShareModal;

src/constants/ModalList.ts

@@ -21,6 +21,7 @@ import { RequestReportComment } from '@/types/teampsylog';
 import ReportCommentModal from '@/components/modal/ReportCommentModal';
 import ReportCompleteModal from '@/components/modal/ReportCompleteModal';
 import ReportErrorModal from '@/components/modal/ReportErrorModal';
+import LinkShareModal from '@/components/modal/LinkShareModal';
 
 export interface BaseModalProps {
   isOpen: boolean;
@@ -128,6 +129,7 @@ export const MODAL_COMPONENTS = {
   reportComment: ReportCommentModal,
   reportComplete: ReportCompleteModal,
   reportError: ReportErrorModal,
+  linkShare: LinkShareModal,
 };
 
 export type ModalType = keyof typeof MODAL_COMPONENTS;
@@ -152,4 +154,5 @@ export interface ModalPropsMap {
   reportComment: ReportCommentModalProps;
   reportComplete: ReportCompleteModalProps;
   reportError: BaseModalProps;
+  linkShare: BaseModalProps;
 }

src/types/global.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

src/types/kakao.d.ts

@@ -0,0 +1,29 @@
+interface Window {
+  Kakao: {
+    isInitialized: () => boolean;
+    init: (key: string) => void;
+    Share: {
+      sendDefault: (settings: KakaoShareSettings) => void;
+    };
+  };
+}
+
+interface KakaoShareSettings {
+  objectType: 'feed' | 'list' | 'location' | 'commerce' | 'text';
+  content: {
+    title: string;
+    description?: string;
+    imageUrl?: string;
+    link: {
+      mobileWebUrl?: string;
+      webUrl?: string;
+    };
+  };
+  buttons?: {
+    title: string;
+    link: {
+      mobileWebUrl?: string;
+      webUrl?: string;
+    };
+  }[];
+}