Merge pull request #80 from softeerbootcamp4th/TASK-256

[�Fix][Task-256] button 이 중첩되어 존재하는 경우 발생하는 warning 막기 위해 inner button tag를 div로 교체
softeerbootcamp4th · Aug 18, 2024 · b93463d · b93463d
2 parents 954b15b + 1193a06
commit b93463d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/user/src/components/common/OutlinedButton.tsx b/packages/user/src/components/common/OutlinedButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/button-has-type */
 import { cn } from '@softeer/common/utils';
 import clsx from 'clsx';
 import { ButtonHTMLAttributes, forwardRef } from 'react';
@@ -11,13 +10,17 @@ const styles = clsx(
 	'active:border-primary active:text-primary',
 );
 
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	as?: 'button' | 'div' | 'span';
+}
 
 /** 기대평 등록, 랜딩 페이지 링크 공유 버튼 */
 const OutlinedButton = forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, ...props }, ref) => (
-		<button className={cn(buttonStyles, styles, className)} ref={ref} {...props} />
-	),
+	({ as: Component = 'button', className, ...props }, ref) => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const Tag = Component as any;
+		return <Tag className={cn(buttonStyles, styles, className)} ref={ref} {...props} />;
+	},
 );
 
 export default OutlinedButton;
diff --git a/packages/user/src/components/event/chatting/inputArea/input/index.tsx b/packages/user/src/components/event/chatting/inputArea/input/index.tsx
@@ -40,7 +40,7 @@ export default function ChatInput({ onSend }: ChatInputProps) {
 		<form className="flex items-center gap-4" onSubmit={handleSubmit}>
 			<Input ref={inputRef} name="input" required />
 			<ProtectedWrapper
-				unauthenticatedDisplay={<OutlinedButton>로그인하고 채팅 보내기</OutlinedButton>}
+				unauthenticatedDisplay={<OutlinedButton as="div">로그인하고 채팅 보내기</OutlinedButton>}
 			/>
 		</form>
 	);