Guild Member Setting 페이지

apps/web/package.json

@@ -26,6 +26,7 @@
     "@gitanimals/util-common": "workspace:*",
     "@next/third-parties": "^14.2.5",
     "@octokit/core": "^6.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@shadow-panda/style-context": "^0.7.1",
     "@suspensive/react": "^2.17.1",

apps/web/src/app/[locale]/error.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect } from 'react';
-import { signOut } from 'next-auth/react';
 
 import { sendMessageToErrorChannel } from '@/apis/slack/sendMessage';
 import { ErrorPage } from '@/components/Error/ErrorPage';
@@ -35,9 +34,8 @@ Error Stack: ${error.stack}
   const router = useRouter();
 
   const onClickRetry = () => {
-    signOut();
     reset();
-    router.push('/');
+    router.refresh();
   };
 
   return (

apps/web/src/app/[locale]/guild/(list)/GuildCard.tsx

@@ -1,44 +1,24 @@
 'use client';
 
-import { useState } from 'react';
 import Image from 'next/image';
 import { Flex } from '_panda/jsx';
 import { flex } from '_panda/patterns';
 import { type Guild } from '@gitanimals/api';
-import { inboxQueries } from '@gitanimals/react-query';
 import { useQueryClient } from '@tanstack/react-query';
 import { UsersRoundIcon } from 'lucide-react';
 
-import { joinGuildAction } from '@/serverActions/guild';
-
-import { GuildDetail } from './GuildDetail';
-import { GuildJoinPetSelectDialog } from './GuildPetSelectDialog';
+import { Link } from '@/i18n/routing';
 
 interface GuildCardProps {
   guild: Guild;
 }
 
 export function GuildCard({ guild }: GuildCardProps) {
   const queryClient = useQueryClient();
-  const [isJoinPetSelectOpen, setIsJoinPetSelectOpen] = useState(false);
-  const [isDetailOpen, setIsDetailOpen] = useState(false);
-
-  const submitJoinGuild = async (selectPersona: string) => {
-    try {
-      await joinGuildAction({
-        guildId: guild.id,
-        personaId: selectPersona,
-      });
-
-      queryClient.invalidateQueries({ queryKey: inboxQueries.allKey() });
-    } catch (error) {
-      console.error(error);
-    }
-  };
 
   return (
     <>
-      <button type="button" className={cardStyle} onClick={() => setIsDetailOpen(true)}>
+      <Link href={`/guild/detail/${guild.id}`} className={cardStyle}>
         <div className="card-top">
           <Image src={guild.guildIcon} alt={guild.title} width={40} height={40} className="card-guild-icon" />
           <Flex gap="6px" alignItems="center">
@@ -59,26 +39,17 @@ export function GuildCard({ guild }: GuildCardProps) {
             <span>{guild.totalContributions}</span>
           </li>
         </ul>
-      </button>
-      {isDetailOpen && (
-        <GuildDetail
-          guildId={guild.id}
-          onClose={() => setIsDetailOpen(false)}
-          onJoin={() => {
-            setIsDetailOpen(false);
-            setIsJoinPetSelectOpen(true);
-          }}
-        />
-      )}
-      {isJoinPetSelectOpen && (
+      </Link>
+
+      {/* {isJoinPetSelectOpen && (
         <GuildJoinPetSelectDialog
           onSubmit={(selectPersona) => {
             submitJoinGuild(selectPersona);
             setIsJoinPetSelectOpen(false);
           }}
           onClose={() => setIsJoinPetSelectOpen(false)}
         />
-      )}
+      )} */}
     </>
   );
 }

apps/web/src/app/[locale]/guild/@modal/(.)create/page.tsx

@@ -0,0 +1,10 @@
+import GuildCreate from '../../_components/GuildCreate';
+import GuildModal from '../GuildModal';
+
+export default function GuildCreateModal() {
+  return (
+    <GuildModal title="Create Guild">
+      <GuildCreate />
+    </GuildModal>
+  );
+}

apps/web/src/app/[locale]/guild/@modal/(.)detail/[id]/join/page.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { css } from '_panda/css';
+import { inboxQueries } from '@gitanimals/react-query';
+import { Dialog } from '@gitanimals/ui-panda';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { useRouter } from '@/i18n/routing';
+import { joinGuildAction } from '@/serverActions/guild';
+
+import { GuildJoinPetSelectDialog } from '../../../../_components/GuildPetSelectDialog';
+import GuildModal from '../../../GuildModal';
+
+export default function GuildJoinModal({ params }: { params: { id: string } }) {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+
+  const submitJoinGuild = async (selectPersona: string) => {
+    try {
+      await joinGuildAction({
+        guildId: params.id,
+        personaId: selectPersona,
+      });
+
+      queryClient.invalidateQueries({ queryKey: inboxQueries.allKey() });
+      router.replace(`/guild`);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <GuildModal>
+      <div>
+        <Dialog.Title className={dialogTitleStyle}>Choose your pet</Dialog.Title>
+        <p className={dialogDescriptionStyle}>If you choose a pet, it will be shown in the guild image.</p>
+      </div>
+      <GuildJoinPetSelectDialog onSubmit={submitJoinGuild} />
+    </GuildModal>
+  );
+}
+
+const dialogTitleStyle = css({});
+
+const dialogDescriptionStyle = css({
+  textStyle: 'glyph20.regular',
+  color: 'white.white_50',
+  mt: 3,
+  textAlign: 'center',
+});

apps/web/src/app/[locale]/guild/@modal/(.)detail/[id]/page.tsx

@@ -0,0 +1,17 @@
+import { Button } from '@gitanimals/ui-panda';
+
+import { Link } from '@/i18n/routing';
+
+import { GuildDetail } from '../../../_components/GuildDetail';
+import GuildModal from '../../GuildModal';
+
+export default function GuildDetailModal({ params }: { params: { id: string } }) {
+  return (
+    <GuildModal>
+      <GuildDetail guildId={params.id} />
+      <Link href={`/guild/detail/${params.id}/join`} style={{ margin: 'auto' }}>
+        <Button w="100px">Join</Button>
+      </Link>
+    </GuildModal>
+  );
+}

apps/web/src/app/[locale]/guild/@modal/GuildModal.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { type PropsWithChildren, useEffect, useState } from 'react';
+import { css, cx } from '_panda/css';
+import { Dialog } from '@gitanimals/ui-panda';
+
+import { usePathname, useRouter } from '@/i18n/routing';
+import { customScrollHorizontalStyle } from '@/styles/scrollStyle';
+
+export default function GuildModal({ children, title }: PropsWithChildren<{ title?: string }>) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onClose = () => {
+    router.back();
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else {
+      setIsOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <Dialog.Content size="large" className={dialogContentStyle}>
+        {title && <Dialog.Title>{title}</Dialog.Title>}
+        {children}
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+const dialogContentStyle = cx(
+  css({
+    height: 'fit-content',
+    gap: 8,
+    overflowY: 'auto',
+  }),
+  customScrollHorizontalStyle,
+);

apps/web/src/app/[locale]/guild/@modal/default.tsx

@@ -0,0 +1,3 @@
+export default function GuildModal() {
+  return null;
+}

apps/web/src/app/[locale]/guild/[id]/@modal/(.)setting/page.tsx

@@ -0,0 +1,26 @@
+import { redirect } from 'next/navigation';
+import { checkIsLeader, getGuildBackgrounds, getGuildById, getGuildIcons } from '@gitanimals/api';
+import { DialogTitle } from '@gitanimals/ui-panda';
+
+import { InterceptingDialog } from '@/components/InterceptingDialog';
+
+import { GuildSetting } from '../../setting/GuildSetting';
+
+export default async function GuildSettingModal({ params }: { params: { id: string } }) {
+  const isLeader = await checkIsLeader(params.id);
+
+  const icons = await getGuildIcons();
+  const backgrounds = await getGuildBackgrounds();
+  const data = await getGuildById({ guildId: params.id });
+
+  if (!isLeader) {
+    redirect(`/guild/${params.id}`);
+  }
+
+  return (
+    <InterceptingDialog>
+      <DialogTitle>Guild Setting</DialogTitle>
+      <GuildSetting icons={icons} backgrounds={backgrounds} guildId={params.id} initialData={data} />
+    </InterceptingDialog>
+  );
+}

apps/web/src/app/[locale]/guild/[id]/@modal/default.tsx

@@ -0,0 +1,3 @@
+export default function GuildModal() {
+  return null;
+}