✨ pass email to cs

src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/mypage/MypageButton.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import React from 'react';
 
+import CSLink from '@/app/components/shared/CSLink/CSLink';
 import { PropsWithLng } from '@/app/i18next';
 import { useTranslation } from '@/app/i18next/client';
 import BellIcon from '@/assets/icons/bell.svg';
@@ -46,8 +47,6 @@ const MypageButtons = ({ lng }: PropsWithLng) => {
 
   const ICON_CLASSNAME = 'w-10 stroke-text dark:stroke-dark_white';
 
-  const CS_PAGE_URL = 'https://cs.gistory.me/?service=Ziggle';
-
   return (
     <div className="flex flex-col justify-between gap-4">
       <div className="flex justify-between gap-4">
@@ -70,13 +69,13 @@ const MypageButtons = ({ lng }: PropsWithLng) => {
       <div className="h-[1px] bg-greyLight dark:bg-dark_greyBorder" />
 
       <div className="flex justify-between gap-4">
-        <Link href={CS_PAGE_URL} className="flex-1">
+        <CSLink className="flex-1">
           <MypageButton
             align="right"
             icon={<FlagIcon className={ICON_CLASSNAME} />}
             buttonText={t('mypage.feedback')}
           />
-        </Link>
+        </CSLink>
       </div>
     </div>
   );

src/app/components/layout/Footer/Footer.tsx

@@ -6,6 +6,8 @@ import GitHubLogo from '@/assets/logos/github.svg';
 import InfoteamLogo from '@/assets/logos/infoteam.svg';
 import PlayStoreLogo from '@/assets/logos/playstore.svg';
 
+import CSLink from '../../shared/CSLink/CSLink';
+
 export const playStoreLink =
   'https://play.google.com/store/apps/details?id=me.gistory.ziggle';
 export const appStoreLink = 'https://apps.apple.com/kr/app/ziggle/id6451740697';
@@ -47,11 +49,15 @@ const Footer = async ({ lng }: PropsWithLng) => {
             <div key={title} className="flex w-32 flex-col gap-2 md:gap-6">
               <div className="text-sm font-bold">{title}</div>
               <div className="flex flex-col gap-2">
-                {links.map(({ link, name }) => (
-                  <ExternalLink key={name} href={link}>
-                    {name}
-                  </ExternalLink>
-                ))}
+                {links.map(({ link, name }) =>
+                  name === 'Bug Report' ? (
+                    <CSLink key={name}>{name}</CSLink>
+                  ) : (
+                    <ExternalLink key={name} href={link}>
+                      {name}
+                    </ExternalLink>
+                  ),
+                )}
               </div>
             </div>
           ),

src/app/components/shared/CSLink/CSLink.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+import { PropsWithChildren } from 'react';
+
+import { auth } from '@/api/auth/auth';
+
+interface CSLinkProps extends PropsWithChildren {
+  className?: string;
+}
+
+const CSLink = async ({ children, className }: CSLinkProps) => {
+  const session = await auth();
+
+  return (
+    <Link
+      href={`https://cs.gistory.me/?service=Ziggle${
+        session && `&email=${session.user.email}`
+      }`}
+      className={className}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default CSLink;