Guild Member Setting 페이지

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/@modal/(.)create/page.tsx

@@ -1,4 +1,4 @@
-import GuildCreate from '../../(components)/GuildCreate';
+import GuildCreate from '../../_components/GuildCreate';
 import GuildModal from '../GuildModal';
 
 export default function GuildCreateModal() {

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

@@ -8,7 +8,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from '@/i18n/routing';
 import { joinGuildAction } from '@/serverActions/guild';
 
-import { GuildJoinPetSelectDialog } from '../../../../(components)/GuildPetSelectDialog';
+import { GuildJoinPetSelectDialog } from '../../../../_components/GuildPetSelectDialog';
 import GuildModal from '../../../GuildModal';
 
 export default function GuildJoinModal({ params }: { params: { id: string } }) {

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

@@ -2,7 +2,7 @@ import { Button } from '@gitanimals/ui-panda';
 
 import { Link } from '@/i18n/routing';
 
-import { GuildDetail } from '../../../(components)/GuildDetail';
+import { GuildDetail } from '../../../_components/GuildDetail';
 import GuildModal from '../../GuildModal';
 
 export default function GuildDetailModal({ params }: { params: { id: string } }) {

apps/web/src/app/[locale]/guild/[id]/MoreMenu.tsx

@@ -30,10 +30,12 @@ export async function MoreMenu({ guildId }: { guildId: string }) {
             <CatIcon color="#FFFFFF80" size={18} />
             Edit profile pet
           </DropdownMenuItem>
-          <DropdownMenuItem>
-            <UsersRoundIcon color="#FFFFFF80" size={18} />
-            Manage members
-          </DropdownMenuItem>
+          <Link href={`/guild/${guildId}/setting/member`}>
+            <DropdownMenuItem>
+              <UsersRoundIcon color="#FFFFFF80" size={18} />
+              Manage members
+            </DropdownMenuItem>
+          </Link>
           <DropdownMenuItem>
             <LinkIcon color="#FFFFFF80" size={18} />
             Send invite message

apps/web/src/app/[locale]/guild/[id]/setting/GuildSetting.tsx

@@ -6,7 +6,7 @@ import type { Guild } from '@gitanimals/api';
 import { useRouter } from '@/i18n/routing';
 import { updateGuildAction } from '@/serverActions/guild';
 
-import { GuildInfoFormClient, GuildInfoFormSubmitButton } from '../../(components)/GuidlInfoFormClient';
+import { GuildInfoFormClient, GuildInfoFormSubmitButton } from '../../_components/GuidlInfoFormClient';
 
 export interface FormState {
   message: string;

apps/web/src/app/[locale]/guild/[id]/setting/layout.tsx

@@ -1,26 +1,7 @@
 import type { PropsWithChildren } from 'react';
-import { css } from '_panda/css';
-import { Flex } from '_panda/jsx';
-import { dialogTitleStyle } from '@gitanimals/ui-panda';
+
+import { GuildModalPageLayout } from '../../_components/GuildModalPageLayout';
 
 export default function GuildCreatePage({ children }: PropsWithChildren) {
-  return (
-    <div className={css({ minH: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' })}>
-      <div
-        className={css({
-          maxWidth: '880px',
-          mx: 'auto',
-          background: 'gray.gray_150',
-          p: '40px',
-          borderRadius: '16px',
-          color: 'white.white',
-        })}
-      >
-        <h2 className={dialogTitleStyle}>Guild Setting</h2>
-        <Flex flexDirection="column" gap="24px">
-          {children}
-        </Flex>
-      </div>
-    </div>
-  );
+  return <GuildModalPageLayout>{children}</GuildModalPageLayout>;
 }

apps/web/src/app/[locale]/guild/[id]/setting/member/BannerGuildMember.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable @next/next/no-img-element */
+import type { ReactNode } from 'react';
+import { css } from '_panda/css';
+import { Flex } from '_panda/jsx';
+
+export function BannerGuildMember({
+  image,
+  name,
+  count,
+  bottomElement,
+}: {
+  image: string;
+  name: string;
+  count: string;
+  bottomElement: ReactNode;
+}) {
+  return (
+    <div className={bannerStyle}>
+      <img src={image} alt={name} width={80} height={80} />
+      <p className={nameStyle}>{name}</p>
+      <p className={countStyle}>{count}</p>
+      <Flex gap="2">{bottomElement}</Flex>
+    </div>
+  );
+}
+
+const bannerStyle = css({
+  display: 'inline-flex',
+  padding: '8px 16px 16px 16px',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '12px',
+  backgroundColor: 'white.white_10',
+  borderRadius: '8px',
+});
+
+const nameStyle = css({
+  textStyle: 'glyph16.regular',
+  color: 'white',
+});
+
+const countStyle = css({
+  textStyle: 'glyph14.regular',
+  color: 'white.white_50',
+});

apps/web/src/app/[locale]/guild/[id]/setting/member/MemberCard.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import type { GuildMember } from '@gitanimals/api';
+import { kickMemberFromGuild } from '@gitanimals/api';
+import { Button } from '@gitanimals/ui-panda';
+import { toast } from 'sonner';
+
+import { useRouter } from '@/i18n/routing';
+import { getPersonaImage } from '@/utils/image';
+
+import { BannerGuildMember } from './BannerGuildMember';
+
+export function MemberCard({ member, guildId }: { member: GuildMember; guildId: string }) {
+  const router = useRouter();
+
+  const kickMember = async () => {
+    await kickMemberFromGuild({ guildId, userId: member.userId });
+    toast.success('Kicked member');
+    router.refresh();
+  };
+
+  return (
+    <BannerGuildMember
+      key={member.id}
+      image={getPersonaImage(member.personaType)}
+      name={member.name}
+      count={member.contributions}
+      bottomElement={<Button onClick={kickMember}>Remove</Button>}
+    />
+  );
+}

apps/web/src/app/[locale]/guild/[id]/setting/member/WaitMemberCard.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Flex } from '_panda/jsx';
+import { acceptJoinGuild, denyJoinGuild, type GuildMember } from '@gitanimals/api';
+import { Button } from '@gitanimals/ui-panda';
+import { toast } from 'sonner';
+
+import { useRouter } from '@/i18n/routing';
+import { getPersonaImage } from '@/utils/image';
+
+import { BannerGuildMember } from './BannerGuildMember';
+
+export function WaitMemberCard({ member, guildId }: { member: GuildMember; guildId: string }) {
+  const router = useRouter();
+
+  const acceptMember = async () => {
+    await acceptJoinGuild({ guildId: guildId, userId: member.userId });
+    toast.success('Accepted member');
+    router.refresh();
+  };
+
+  const denyMember = async () => {
+    await denyJoinGuild({ guildId: guildId, userId: member.userId });
+    toast.success('Denied member');
+    router.refresh();
+  };
+
+  return (
+    <BannerGuildMember
+      key={member.id}
+      image={getPersonaImage(member.personaType)}
+      name={member.name}
+      count={member.contributions}
+      bottomElement={
+        <Flex gap="2">
+          <Button variant="secondary" onClick={denyMember}>
+            Deny
+          </Button>
+          <Button onClick={acceptMember}>Accept</Button>
+        </Flex>
+      }
+    />
+  );
+}

apps/web/src/app/[locale]/guild/[id]/setting/member/page.tsx

@@ -0,0 +1,48 @@
+import { css } from '_panda/css';
+import { Flex } from '_panda/jsx';
+import { getGuildById } from '@gitanimals/api';
+
+import { GuildModalPageTitle } from '../../../_components/GuildModalPageLayout';
+
+import { MemberCard } from './MemberCard';
+import { WaitMemberCard } from './WaitMemberCard';
+
+export default async function GuildMemberSetting({ params }: { params: { id: string } }) {
+  const guild = await getGuildById({ guildId: params.id });
+
+  return (
+    <div className={css({ minH: 'calc(100vh - 300px)' })}>
+      <GuildModalPageTitle className={css({ mb: '40px' })}>Manage members</GuildModalPageTitle>
+
+      {guild?.waitMembers.length === 0 ? null : (
+        <>
+          <h3 className={subHeadingStyle}>Request</h3>
+          <Flex gap="1" flexWrap="wrap" mb="24px">
+            {guild.waitMembers.map((member) => (
+              <WaitMemberCard member={member} guildId={guild.id} key={member.id} />
+            ))}
+          </Flex>
+        </>
+      )}
+
+      {guild?.members.length === 0 ? (
+        <p className={css({ textAlign: 'center', py: '40px', color: 'white.white_50' })}>No members</p>
+      ) : (
+        <>
+          <h3 className={subHeadingStyle}>Members</h3>
+          <Flex gap="1" flexWrap="wrap">
+            {guild.members.map((member) => (
+              <MemberCard member={member} key={member.id} guildId={guild.id} />
+            ))}
+          </Flex>
+        </>
+      )}
+    </div>
+  );
+}
+
+const subHeadingStyle = css({
+  textStyle: 'glyph14.regular',
+  color: 'white',
+  mb: '8px',
+});

apps/web/src/app/[locale]/guild/[id]/setting/page.tsx

@@ -2,6 +2,8 @@ import { checkIsLeader, getGuildBackgrounds, getGuildById, getGuildIcons } from
 
 import { redirect } from '@/i18n/routing';
 
+import { GuildModalPageTitle } from '../../_components/GuildModalPageLayout';
+
 import { GuildSetting } from './GuildSetting';
 
 export default async function GuildSettingPage({ params }: { params: { id: string } }) {
@@ -15,5 +17,10 @@ export default async function GuildSettingPage({ params }: { params: { id: strin
     redirect(`/guild/${params.id}`);
   }
 
-  return <GuildSetting icons={icons} backgrounds={backgrounds} guildId={params.id} initialData={data} />;
+  return (
+    <>
+      <GuildModalPageTitle>Guild Setting</GuildModalPageTitle>
+      <GuildSetting icons={icons} backgrounds={backgrounds} guildId={params.id} initialData={data} />;
+    </>
+  );
 }

apps/web/src/app/[locale]/guild/(components)/GuidlInfoFormClient.tsx → apps/web/src/app/[locale]/guild/_components/GuidlInfoFormClient.tsx

@@ -32,7 +32,12 @@ export function GuildInfoFormClient(props: GuildInfoFormProps) {
           className={css({ mb: '6px' })}
           defaultValue={props.initialData?.title}
         />
-        <TextArea placeholder="Type guild description" name="description" defaultValue={props.initialData?.body} />
+        <TextArea
+          placeholder="Type guild description"
+          maxLength={50}
+          name="description"
+          defaultValue={props.initialData?.body}
+        />
       </div>
       <div>
         <p className={headingStyle}>Guild thumbnail</p>

apps/web/src/app/[locale]/guild/(components)/GuildCreateForm.tsx → apps/web/src/app/[locale]/guild/_components/GuildCreateForm.tsx

@@ -28,7 +28,11 @@ export function GuildCreateForm({ formData, onDataChange }: GuildCreateFormProps
             className={css({ mb: '6px' })}
             onChange={(e) => onDataChange('title', e.target.value)}
           />
-          <TextArea placeholder="Type guild description" onChange={(e) => onDataChange('body', e.target.value)} />
+          <TextArea
+            placeholder="Type guild description"
+            maxLength={50}
+            onChange={(e) => onDataChange('body', e.target.value)}
+          />
         </div>
         <div>
           <p className={headingStyle}>Guild thumbnail</p>

apps/web/src/app/[locale]/guild/_components/GuildModalPageLayout.tsx

@@ -0,0 +1,37 @@
+import type { PropsWithChildren } from 'react';
+import { css, cx } from '_panda/css';
+import { Flex } from '_panda/jsx';
+import { dialogTitleStyle } from '@gitanimals/ui-panda';
+import { XIcon } from 'lucide-react';
+
+import { BackTrigger } from '@/components/Trigger';
+
+export function GuildModalPageLayout({ children }: PropsWithChildren) {
+  return (
+    <div className={css({ minH: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' })}>
+      <div
+        className={css({
+          maxWidth: '880px',
+          mx: 'auto',
+          background: 'gray.gray_150',
+          p: '40px',
+          borderRadius: '16px',
+          color: 'white.white',
+          w: '100%',
+          position: 'relative',
+        })}
+      >
+        <BackTrigger className={css({ position: 'absolute', top: '16px', right: '16px' })}>
+          <XIcon />
+        </BackTrigger>
+        <Flex flexDirection="column" gap="24px">
+          {children}
+        </Flex>
+      </div>
+    </div>
+  );
+}
+
+export const GuildModalPageTitle = ({ children, className }: PropsWithChildren<{ className?: string }>) => (
+  <h2 className={cx(dialogTitleStyle, className)}>{children}</h2>
+);

apps/web/src/app/[locale]/guild/create/page.tsx

@@ -1,27 +1,16 @@
-import { css } from '_panda/css';
 import { Flex } from '_panda/jsx';
 import { dialogTitleStyle } from '@gitanimals/ui-panda';
 
-import GuildCreate from '../(components)/GuildCreate';
+import GuildCreate from '../_components/GuildCreate';
+import { GuildModalPageLayout } from '../_components/GuildModalPageLayout';
 
 export default function GuildCreatePage() {
   return (
-    <div className={css({ minH: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' })}>
-      <div
-        className={css({
-          maxWidth: '880px',
-          mx: 'auto',
-          background: 'gray.gray_150',
-          p: '40px',
-          borderRadius: '16px',
-          color: 'white.white',
-        })}
-      >
-        <h2 className={dialogTitleStyle}>Create Guild</h2>
-        <Flex flexDirection="column" gap="24px">
-          <GuildCreate />
-        </Flex>
-      </div>
-    </div>
+    <GuildModalPageLayout>
+      <h2 className={dialogTitleStyle}>Create Guild</h2>
+      <Flex flexDirection="column" gap="24px">
+        <GuildCreate />
+      </Flex>
+    </GuildModalPageLayout>
   );
 }