refactor: polymorphic cta-button

Nexters · Apr 7, 2024 · ec91eac · ec91eac
1 parent f6b2f3b
commit ec91eac
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 50 deletions.
diff --git a/src/app/(routes)/member/[memberId]/characters-container.tsx b/src/app/(routes)/member/[memberId]/characters-container.tsx
@@ -7,6 +7,7 @@ import { useCharactersQuery } from '@/store/query/useCharactersQuery';
 import { Characters } from './characters';
 import { Header } from './header';
 import { MemberData } from './member-data';
+import Link from 'next/link';
 
 type Props = {
     memberId: Member['memberId'];
@@ -26,9 +27,7 @@ export function CharactersContainer({ memberId }: Props) {
                 <MemberData joinDays={joinDays} memoCount={memoCount} />
                 <Characters isMyPage={isMyPage} characters={characters} />
             </div>
-            {!isMyPage && (
-                <FixedBottomArea contents={<CTAButton as={'Link'} href="/" text="내 캐릭터 만들러 가기" />} />
-            )}
+            {!isMyPage && <FixedBottomArea contents={<CTAButton as={Link} href="/" text="내 캐릭터 만들러 가기" />} />}
         </>
     );
 }
diff --git a/src/app/(routes)/member/[memberId]/header.tsx b/src/app/(routes)/member/[memberId]/header.tsx
@@ -1,5 +1,5 @@
-import { LikeButton, LikeButtonWithTooltip } from './like-button';
 import { GetCharactersResponse } from '@/services/character/getCharacters';
+import { LikeButtonWithTooltip, LikeButton } from './like-button';
 
 type Props = {
     isMyPage: boolean;

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -21,9 +21,7 @@ export default async function Home() {
                 <Image quality={100} alt={'로고'} src={Logo} width={256} height={77} />
             </div>
             <FixedBottomArea className="mb-[31px] gap-[16px]">
-                <Link href="/create">
-                    <CtaButton text="내 캐릭터 만들기" />
-                </Link>
+                <CtaButton as={Link} text="내 캐릭터 만들기" href="/create" />
                 <div className="semibold-14 text-gray-400 ">
                     {'이미 도감이 있으면 '}
                     <a

diff --git a/src/components/create-character/steps/story.tsx b/src/components/create-character/steps/story.tsx
@@ -11,6 +11,7 @@ import Badge from '@/assets/images/badgeSm.png';
 import Story1 from '@/assets/images/story-1.webp';
 import Story2 from '@/assets/images/story-2.webp';
 import Story3 from '@/assets/images/story-3.webp';
+import Link from 'next/link';
 
 export function Story() {
     const router = useRouter();
@@ -59,7 +60,7 @@ export function Story() {
                                     '캐릭터에게 그 날의 일기 메모를 먹이로 줄 수 있어요. 메모는 하루에 3개까지 쓸 수 있어요.'
                                 }
                             />
-                            <CtaButton as="Link" text="다음" href="/create?step=1" />
+                            <CtaButton as={Link} text="다음" href="/create?step=1" />
                         </FixedBottomArea>
                     </>
                 )

diff --git a/src/components/ui/cta-button.tsx b/src/components/ui/cta-button.tsx
@@ -1,53 +1,25 @@
 'use client';
 
-import Link from 'next/link';
-import { twMerge } from 'tailwind-merge';
+import { ComponentPropsWithoutRef, ElementType } from 'react';
 
-type BaseProps = {
+type ExtendedProps<C extends ElementType = 'button'> = {
     text?: string;
+    as?: C;
     children?: React.ReactNode;
-    className?: string;
 };
 
-type LinkProps = {
-    as?: 'Link';
-    href: string;
-    disabled?: boolean;
-} & BaseProps;
+type Props<C extends ElementType = 'button'> = ExtendedProps<C> &
+    Omit<ComponentPropsWithoutRef<C>, keyof ExtendedProps>;
 
-type ButtonProps = {
-    as?: 'button';
-} & BaseProps &
-    React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-type Props = LinkProps | ButtonProps;
-
-const isLink = (props: Props): props is LinkProps => {
-    return props.as === 'Link';
-};
-
-export default function CTAButton(props: Props) {
+export default function CTAButton<C extends ElementType = 'button'>({ text, as, children, ...props }: Props<C>) {
+    const Component = as ?? 'button';
     return (
-        <>
-            {isLink(props) ? (
-                <Link
-                    className={`flex h-[56px] w-[343px] items-center justify-center rounded-[16px] text-[18px] font-[600] text-white shadow-[0_0_4px_0_rgba(0,0,0,0.25)]  ${props.disabled ? 'bg-[#7D7D7D] shadow-none active:shadow-none ' : ' bg-primary-500 active:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5)]'}`}
-                    href={props.href}
-                >
-                    {props.text}
-                </Link>
-            ) : (
-                <button
-                    {...props}
-                    className={twMerge(
-                        `h-[56px] w-[343px] rounded-[16px] text-[18px] font-[600] text-white shadow-[0_0_4px_0_rgba(0,0,0,0.25)]  ${props.disabled ? 'bg-[#7D7D7D] shadow-none active:shadow-none ' : ' bg-primary-500 active:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5)]'}`,
-                        props.className,
-                    )}
-                >
-                    {props.text}
-                    {props.children}
-                </button>
-            )}
-        </>
+        <Component
+            className={`flex h-[56px] w-[343px] items-center justify-center rounded-[16px] text-[18px] font-[600] text-white shadow-[0_0_4px_0_rgba(0,0,0,0.25)]  ${props.disabled ? 'bg-[#7D7D7D] shadow-none active:shadow-none ' : ' bg-primary-500 active:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5)]'}`}
+            {...props}
+        >
+            {text}
+            {children}
+        </Component>
     );
 }