Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 3x 35x 3x 11x 11x | /**
* BackButton - Shared back/return button for screens
*
* Provides a consistent bilingual button for returning to menu or previous screen.
* Uses BaseButtonOverlayHtml for consistency and maintainability.
*
* @module components/shared/ui
* @category UI Components
* @korean 뒤로가기버튼
*/
import React from "react";
import { BaseButtonOverlayHtml } from "../../shared/base/BaseButtonOverlayHtml";
export interface BackButtonProps {
/** Callback when button is clicked */
readonly onClick: () => void;
/** Korean text for the button */
readonly korean?: string;
/** English text for the button */
readonly english?: string;
/** Whether on mobile device */
readonly isMobile: boolean;
/** Test ID for the button */
readonly testId?: string;
}
/**
* BackButton Component
*
* Reusable bilingual back/return button using BaseButtonOverlayHtml.
* Provides consistent Korean theming and responsive sizing.
*
* Refactored to use BaseButtonOverlayHtml for better consistency.
*
* @example
* ```tsx
* <BackButton
* onClick={() => navigate('/menu')}
* korean="돌아가기"
* english="Return"
* isMobile={false}
* />
* ```
*/
export const BackButton: React.FC<BackButtonProps> = ({
onClick,
korean = "돌아가기",
english = "Return",
isMobile,
testId = "back-button",
}) => {
return (
<BaseButtonOverlayHtml
korean={korean}
english={english}
onClick={onClick}
variant="primary"
size="md"
isMobile={isMobile}
testId={testId}
/>
);
};
export interface LinkButtonProps {
/** Callback when button is clicked */
readonly onClick: () => void;
/** Korean text for the button */
readonly korean: string;
/** English text for the button */
readonly english: string;
/** Icon/emoji to display */
readonly icon?: string;
/** Whether on mobile device */
readonly isMobile: boolean;
/** Test ID for the button */
readonly testId?: string;
}
/**
* LinkButton Component
*
* Secondary action button using BaseButtonOverlayHtml with secondary variant.
* Used for links and secondary actions like ISMS policy links.
*
* Refactored to use BaseButtonOverlayHtml for better consistency.
*
* @example
* ```tsx
* <LinkButton
* onClick={() => window.open(url)}
* korean="보안 정책"
* english="Security Policy"
* icon="🔐"
* isMobile={false}
* />
* ```
*/
export const LinkButton: React.FC<LinkButtonProps> = ({
onClick,
korean,
english,
icon,
isMobile,
testId = "link-button",
}) => {
const labelKorean = icon ? `${icon} ${korean}` : korean;
return (
<BaseButtonOverlayHtml
korean={labelKorean}
english={english}
onClick={onClick}
variant="secondary"
size="sm"
isMobile={isMobile}
testId={testId}
/>
);
};
export default { BackButton, LinkButton };
|