Feat/46/goback link component

src/components/pagination/Arrow.tsx

@@ -8,16 +8,17 @@ import { cn } from '@/utils/helper';
 interface ArrowProps {
   direction: 'left' | 'right';
   disabled?: boolean;
+  className?: string;
 }
 
-export default function Arrow({ direction, disabled = false }: ArrowProps) {
+export default function Arrow({ direction, disabled = false, className }: ArrowProps) {
   const baseStyle = 'w-4 h-4 fill-current';
   const colorStyle = disabled ? 'text-gray-30 cursor-default' : 'text-gray-50 hover:text-gray-60 cursor-pointer';
 
   const dValue = direction === 'left' ? ARROW_PATH_LEFT : ARROW_PATH_RIGHT;
 
   return (
-    <svg className={cn(baseStyle, colorStyle)} width='10' height='16' viewBox='0 0 10 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <svg className={cn(baseStyle, colorStyle, className)} width='10' height='16' viewBox='0 0 10 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path d={dValue} fill='currentColor' />
     </svg>
   );

src/components/ui/Link/GoBackLink.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link';
+import Arrow from '@/components/pagination/Arrow';
+
+/*
+ * GoBackLink 컴포넌트
+ *
+ * - 이동할 링크 주소를 href prop으로 전달하면 됩니다.
+ * 예시:
+ *   <GoBackLink href="/mydashboard" />
+ */
+
+interface GoBackLinkProps {
+  href: string;
+}
+
+export default function GoBackLink({ href }: GoBackLinkProps) {
+  return (
+    <Link href={href} className='flex items-center gap-2 text-center text-md font-medium text-gray-70 md:text-lg'>
+      <Arrow direction='left' className='h-[13px] w-[7px] text-gray-70 md:h-[16px] md:w-[8px]' />
+      돌아가기
+    </Link>
+  );
+}