Merge pull request #13 from TEAM-CLIP/12-analytics

feat: va 측정 위한 인스타그램 연결 페이지 추가
TEAM-CLIP · Aug 25, 2024 · 4d711d6 · 4d711d6
2 parents c25eeb9 + 90512ae
commit 4d711d6
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 44 deletions.
diff --git a/src/app/photographer/link-instagram/page.tsx b/src/app/photographer/link-instagram/page.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import Logo from '@/data/logo.svg';
+
+export default function InstagramRedirectPage() {
+  const router = useRouter();
+  let instagramId: string | null = null;
+
+  if (typeof window !== 'undefined') {
+    const searchParams = new URLSearchParams(window.location.search);
+    instagramId = searchParams.get('id');
+  }
+
+  useEffect(() => {
+    console.log(instagramId);
+    if (instagramId) {
+      window.location.href = `https://www.instagram.com/${instagramId}`;
+    } else {
+      router.push('/photographer'); // instagramId이 없으면 다시 입력 페이지로 이동
+    }
+  }, []);
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <div className="flex flex-col items-center justify-center">
+        <Image
+          src={Logo}
+          alt="linking to instagram"
+          width={100}
+          height={100}
+          className="mb-4"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/photographer/page.tsx b/src/app/photographer/page.tsx
@@ -119,7 +119,7 @@ const RecommendedPhotographers = () => {
           >
             <Link
               target={'_blank'}
-              href={`https://www.instagram.com/${photographer.instagram_id}`}
+              href={`/photographer/link-instagram?id=${photographer.instagram_id}`}
             >
               <div className="flex flex-col justify-center w-full">
                 <div className="flex w-full items-center space-x-2 mb-2.5">

diff --git a/src/components/ClipContainer.tsx b/src/components/ClipContainer.tsx
@@ -19,55 +19,67 @@ const ClipContainer = ({ children }: any) => {
       ? 'h-[3.5rem]'
       : 'h-[7rem]';
 
+  const showHeader = path !== '/photographer/link-instagram';
+
   return (
     <div className="flex flex-col max-w-md min-h-screen mx-auto bg-white">
-      <header
-        className={`fixed top-0 left-0 right-0 max-w-md mx-auto w-full z-50`}
-      >
-        <div
-          className={`${
-            path === '/'
-              ? 'bg-black/40 backdrop-blur-sm text-white'
-              : 'bg-gray-50'
-          } px-[1rem] h-[3.5rem] flex justify-center relative`}
-        >
-          <div className="flex justify-center my-[1rem]">
-            <Link href="/">
-              <Image
-                src={path === '/' ? Logo : GrayLogo}
-                alt="chiksnap"
-                width={28}
-                height={28}
-                className="object-contain"
-              />
-            </Link>
-          </div>
+      {showHeader && (
+        <>
+          <header
+            className={`fixed top-0 left-0 right-0 max-w-md mx-auto w-full z-50`}
+          >
+            <div
+              className={`${
+                path === '/'
+                  ? 'bg-black/40 backdrop-blur-sm text-white'
+                  : 'bg-gray-50'
+              } px-[1rem] h-[3.5rem] flex justify-center relative`}
+            >
+              <div className="flex justify-center my-[1rem]">
+                <Link href="/">
+                  <Image
+                    src={path === '/' ? Logo : GrayLogo}
+                    alt="chiksnap"
+                    width={28}
+                    height={28}
+                    className="object-contain"
+                  />
+                </Link>
+              </div>
 
-          {path !== '/request-notification' && (
-            <div className="flex items-center">
-              <Link
-                href="/request-notification"
-                className={`${
-                  path === '/' ? 'border-gray-700' : 'border-gray-100 bg-white'
-                } h-[2rem] p-[8px] rounded-[0.25rem] border absolute right-[1rem]`}
-              >
-                <p className="caption">사전알림신청</p>
-              </Link>
+              {path !== '/request-notification' && (
+                <div className="flex items-center">
+                  <Link
+                    href="/request-notification"
+                    className={`${
+                      path === '/'
+                        ? 'border-gray-700'
+                        : 'border-gray-100 bg-white'
+                    } h-[2rem] p-[8px] rounded-[0.25rem] border absolute right-[1rem]`}
+                  >
+                    <p className="caption">사전알림신청</p>
+                  </Link>
+                </div>
+              )}
             </div>
-          )}
-        </div>
 
-        {path !== '/' && path !== '/request-notification' && (
-          <div className="bg-white px-4 h-[3.5rem] flex items-center">
-            <div className="cursor-pointer" onClick={() => router.back()}>
-              <div className="flex w-[1.5rem] h-[1.5rem]">
-                <Image src={ArrowBack} alt="Back" className="object-cover" />
+            {path !== '/' && path !== '/request-notification' && (
+              <div className="bg-white px-4 h-[3.5rem] flex items-center">
+                <div className="cursor-pointer" onClick={() => router.back()}>
+                  <div className="flex w-[1.5rem] h-[1.5rem]">
+                    <Image
+                      src={ArrowBack}
+                      alt="Back"
+                      className="object-cover"
+                    />
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        )}
-      </header>
-      <div className={headerHeight} />
+            )}
+          </header>
+          <div className={headerHeight} />
+        </>
+      )}
       {children}
     </div>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -287,6 +287,13 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@vercel/analytics@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@vercel/analytics/-/analytics-1.3.1.tgz#e2b1deac1b5d14fa2e4fe36186ac5054c6385ae4"
+  integrity sha512-xhSlYgAuJ6Q4WQGkzYTLmXwhYl39sWjoMA3nHxfkvG+WdBT25c563a7QhwwKivEOZtPJXifYHR1m2ihoisbWyA==
+  dependencies:
+    server-only "^0.0.1"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -2380,6 +2387,11 @@ semver@^7.5.4:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
   integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
 
+server-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/server-only/-/server-only-0.0.1.tgz#0f366bb6afb618c37c9255a314535dc412cd1c9e"
+  integrity sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==
+
 set-function-length@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"