- 
+
);
diff --git a/src/components/common/BaseInput.tsx b/src/components/common/BaseInput.tsx
index 3113c676..b4dcb055 100644
--- a/src/components/common/BaseInput.tsx
+++ b/src/components/common/BaseInput.tsx
@@ -1,33 +1,32 @@
-import { InputHTMLAttributes } from 'react';
+import { forwardRef, InputHTMLAttributes } from 'react';
import { css, SerializedStyles } from '@emotion/react';
import theme from '@/styles/theme';
-export type InputSize = 'small' | 'medium' | 'large';
+export type InputSize = 'sm' | 'md' | 'lg';
export type InputStatus = 'default' | 'error' | 'success';
export interface BaseInputProps extends InputHTMLAttributes
- 
+
+
('[role="img"]');
+ expect(placeholder?.textContent).toContain('์ด๋ฏธ์ง๋ฅผ ์ผ์์ ์ผ๋ก');
+ expect(placeholder?.style.width).toBe('225px');
+ expect(placeholder?.style.height).toBe('163px');
+ });
+
+ it('retries when the URL changes, including returning to an earlier URL', () => {
+ render( {}} />
+ );
+ render(section('/a.png'));
+ expect(container.querySelector('button')?.disabled).toBe(true);
+ dispatch(image(), 'error');
+ expect(container.querySelector('button')?.disabled).toBe(true);
+ render(section('/b.png'));
+ dispatch(image(), 'load');
+ const button = container.querySelector('button');
+ expect(button?.disabled).toBe(false);
+ document.body.style.overflow = 'scroll';
+ act(() => button?.click());
+ expect(document.body.style.overflow).toBe('hidden');
+ render(section('/c.png'));
+ expect(document.body.style.overflow).toBe('scroll');
+ expect(container.querySelector('button')?.disabled).toBe(true);
+ dispatch(image(), 'load');
+ act(() => container.querySelector('button')?.click());
+ expect(document.body.style.overflow).toBe('hidden');
+ render(null);
+ expect(document.body.style.overflow).toBe('scroll');
+ });
+});
diff --git a/src/components/common/SafeImage.tsx b/src/components/common/SafeImage.tsx
new file mode 100644
index 00000000..8296bdd8
--- /dev/null
+++ b/src/components/common/SafeImage.tsx
@@ -0,0 +1,89 @@
+import { ImgHTMLAttributes, useState } from 'react';
+
+import { css } from '@emotion/react';
+
+interface SafeImageProps extends Omit, 'src'> {
+ src?: string | null;
+ fallbackSrc?: string;
+ variant?: 'image' | 'icon';
+}
+
+// Remount image state when the source changes, including A โ B โ A.
+const SafeImage = ({ src, fallbackSrc, ...props }: SafeImageProps) => (
+ 
{
+ if (usingFallback) setFallbackFailed(true);
+ else setFailed(true);
+ onError?.(event);
+ }}
+ />
+ );
+};
+
+const placeholderStyle = css`
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ min-width: 16px;
+ min-height: 16px;
+ max-width: 100%;
+ background: #f5f5f5;
+ color: #666;
+ font-size: 12px;
+ line-height: 1.5;
+ text-align: center;
+ white-space: normal;
+`;
+
+export default SafeImage;
diff --git a/src/components/common/StrategyIcon.tsx b/src/components/common/StrategyIcon.tsx
new file mode 100644
index 00000000..06423b1a
--- /dev/null
+++ b/src/components/common/StrategyIcon.tsx
@@ -0,0 +1,61 @@
+import { strategyBadgeAssets } from '@/assets/icons/strategy';
+import SafeImage from '@/components/common/SafeImage';
+import { strategyIconFileLabels } from '@/constants/strategyIconMappings';
+
+type BadgeLabel = keyof typeof strategyBadgeAssets;
+
+interface StrategyIconProps extends React.ComponentProps {
+ label?: string;
+}
+
+const legacyLabels: Record = {
+ ...strategyIconFileLabels,
+ 'tradetype_A.png': 'A',
+ 'tradetype_P.png': 'P',
+ 'tradetype_H.png': 'H',
+ 'producttype_stock.png': '๊ตญ๋ด์ฃผ์',
+ 'producttype_futures.png': '๊ตญ๋ด ์ํ ์ ๋ฌผ',
+};
+
+const normalizeLabel = (label: string) => label.replace(/\s+/g, '').toUpperCase();
+const labelLookup = new Map(
+ Object.keys(strategyBadgeAssets).map((label) => [normalizeLabel(label), label as BadgeLabel])
+);
+
+const labelAliases: Record = {
+ ์๋: 'A',
+ ํ์ด๋ธ๋ฆฌ๋: 'H',
+ '๋ฐ์๋(ํ์ด๋ธ๋ฆฌ๋)': 'H',
+ ๋ฐ์๋: 'H',
+ '์๋(๋งค๋ด์ผ)': '์๋',
+ ๋งค๋ด์ผ: '์๋',
+ ๋ฐ์ผ๋ฆฌ: '๋ฐ์ด',
+};
+Object.entries(labelAliases).forEach(([name, badge]) => {
+ labelLookup.set(normalizeLabel(name), badge);
+});
+
+// Names take precedence; UUID mappings come from the verified API option response.
+const getIconSource = (src: string | null | undefined, label: string | undefined) => {
+ const badgeLabel = label ? labelLookup.get(normalizeLabel(label)) : undefined;
+ if (badgeLabel) return strategyBadgeAssets[badgeLabel];
+ if (!src) return src;
+ try {
+ const filename = decodeURIComponent(
+ new URL(src, 'https://local.invalid').pathname.split('/').pop() ?? ''
+ );
+ const knownLabel = Object.prototype.hasOwnProperty.call(legacyLabels, filename)
+ ? legacyLabels[filename]
+ : undefined;
+ const resolvedLabel = knownLabel ? labelLookup.get(normalizeLabel(knownLabel)) : undefined;
+ return resolvedLabel ? strategyBadgeAssets[resolvedLabel] : src;
+ } catch {
+ return src;
+ }
+};
+
+const StrategyIcon = ({ src, label, ...props }: StrategyIconProps) => (
+
{leftIcon && ((props, ref) => {
);
});
+
Input.displayName = 'Input';
const containerStyles = css`
@@ -170,56 +153,10 @@ const wrapperStyles = css`
width: 100%;
`;
-const baseInputStyles = css`
- width: 100%;
- border: 1px solid ${theme.colors.gray[300]};
- background-color: ${theme.colors.main.white};
- outline: none;
- transition: all 0.2s ease;
- font-family: 'Pretendard', sans-serif;
- line-height: 150%;
-
- &::placeholder {
- color: ${theme.colors.gray[700] + '4a'};
- font-weight: ${theme.typography.fontWeight.regular};
- }
-
- &:hover:not(:disabled) {
- border-color: ${theme.colors.main.primary};
- }
-
- &:focus:not(:disabled) {
- border-color: ${theme.colors.main.primary};
- }
-
- &:disabled {
- background-color: ${theme.colors.gray[100]};
- cursor: not-allowed;
- }
-`;
-
-const inputSizeStyles = {
- sm: css`
- height: ${theme.input.height.sm};
- padding: ${theme.input.padding.sm};
- font-size: ${theme.input.fontSize.sm};
- `,
- md: css`
- height: ${theme.input.height.md};
- padding: ${theme.input.padding.md};
- font-size: ${theme.input.fontSize.md};
- `,
- lg: css`
- height: ${theme.input.height.lg};
- padding: ${theme.input.padding.lg};
- font-size: ${theme.input.fontSize.lg};
- `,
-};
-
const iconSpacingStyles = {
sm: css`
svg {
- color: ${theme.colors.gray[400]}; //#a1a1aa
+ color: ${theme.colors.gray[400]};
width: 20px;
height: 20px;
}
@@ -240,24 +177,6 @@ const iconSpacingStyles = {
`,
};
-const inputStatusStyles = {
- default: css``,
- error: css`
- border-color: ${theme.colors.main.alert};
-
- &:hover:not(:disabled) {
- border-color: ${theme.colors.main.alert};
- }
-
- &:focus:not(:disabled) {
- border-color: ${theme.colors.main.alert};
- }
- `,
- success: css`
- border-color: ${theme.colors.gray[400]};
- `,
-};
-
const iconButtonStyles = css`
position: absolute;
display: flex;
@@ -284,12 +203,4 @@ const rightIconStyles = css`
right: 12px;
`;
-const paddingLeftStyles = css`
- padding-left: 36px;
-`;
-
-const paddingRightStyles = css`
- padding-right: 36px;
-`;
-
export default Input;
diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx
index c7fa8db0..300be76f 100644
--- a/src/components/common/Pagination.tsx
+++ b/src/components/common/Pagination.tsx
@@ -40,10 +40,10 @@ const Pagination = ({ totalPage, limit, page, setPage }: paginationProps) => {
return (
{getIcon(leftIcon)}
}
- ((props, ref) => {
}
value={inputValue}
disabled={isDisabled}
- css={currentInputStyles}
+ inputSize={inputSize}
+ status={inputStatus}
onChange={handleInputChange}
+ customStyle={css`
+ ${dynamicPaddingStyles}
+ ${customStyle}
+ `}
/>
{showClearButton && inputValue && inputStatus !== 'success' && (
@@ -156,6 +138,7 @@ const Input = forwardRef
{pages.map((pageNum) => (
))}
);
@@ -80,6 +80,7 @@ const PaginationWrapper = css`
font-weight: ${theme.typography.fontWeight.regular};
line-height: ${theme.typography.lineHeights.lg};
background-color: inherit;
+ border: none;
border-radius: 4px;
color: ${theme.colors.gray[400]};
width: 24px;
diff --git a/src/components/common/SafeImage.test.tsx b/src/components/common/SafeImage.test.tsx
new file mode 100644
index 00000000..5acba70e
--- /dev/null
+++ b/src/components/common/SafeImage.test.tsx
@@ -0,0 +1,167 @@
+// @vitest-environment jsdom
+import { act, ReactNode } from 'react';
+
+import { createRoot, Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import Avatar from '@/components/common/Avatar';
+import SafeImage from '@/components/common/SafeImage';
+import StrategyIcon from '@/components/common/StrategyIcon';
+import ImgSection from '@/components/page/strategy-detail/ImgSection';
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+ Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+ container = document.createElement('div');
+ document.body.append(container);
+ root = createRoot(container);
+});
+
+afterEach(() => {
+ act(() => root.unmount());
+ container.remove();
+ document.body.style.overflow = '';
+});
+
+const render = (node: ReactNode) => act(() => root.render(node));
+const image = () => {
+ const element = container.querySelector('img');
+ if (!element) throw new Error('Expected an image');
+ return element;
+};
+const dispatch = (element: Element, event: string) =>
+ act(() => element.dispatchEvent(new Event(event, { bubbles: true })));
+
+describe('image failure recovery', () => {
+ it('keeps successful images and forwards load events', () => {
+ const onLoad = vi.fn();
+ render({strategy.strategyTitle}
- 
- 
- {strategy.investmentAssetClassesIcons
- ?.slice(0, 2)
- .map((icon) => 
)}
+
{strategy.investmentAssetClassesIcons.length > 2 && (
@@ -162,7 +163,9 @@ const rowStyle = (gridTemplate: string) => css`
display: grid;
grid-template-columns: ${gridTemplate};
align-items: center;
- height: 140px;
+ min-height: 140px;
+ padding: 16px 0;
+ box-sizing: border-box;
background: ${theme.colors.main.white};
color: ${theme.colors.gray[900]};
border-bottom: 1px solid ${theme.colors.gray[300]};
@@ -178,6 +181,8 @@ const rowStyle = (gridTemplate: string) => css`
const headerStyle = (gridTemplate: string) => css`
${rowStyle(gridTemplate)};
height: 56px;
+ min-height: 56px;
+ padding: 0;
background-color: ${theme.colors.gray[100]};
color: ${theme.colors.gray[700]};
border-bottom: 1px solid ${theme.colors.gray[500]};
@@ -212,7 +217,7 @@ const iconStyle = css`
flex-wrap: wrap;
align-items: center;
gap: 4px;
- height: 22px;
+ min-height: 22px;
`;
const countStyle = css`
@@ -240,11 +245,13 @@ const yieldStyle = css`
`;
const mddStyle = (mdd: string | number | undefined) => css`
- color: ${(mdd as number) === 0 || mdd === '-' || mdd === undefined
- ? theme.colors.gray[900]
- : (mdd as number) < 0
- ? theme.colors.main.blue
- : theme.colors.main.red};
+ color: ${
+ (mdd as number) === 0 || mdd === '-' || mdd === undefined
+ ? theme.colors.gray[900]
+ : (mdd as number) < 0
+ ? theme.colors.main.blue
+ : theme.colors.main.red
+ };
`;
const noDataStyle = css`
diff --git a/src/components/common/TextField.tsx b/src/components/common/TextField.tsx
new file mode 100644
index 00000000..f0cafcd8
--- /dev/null
+++ b/src/components/common/TextField.tsx
@@ -0,0 +1,151 @@
+import { forwardRef } from 'react';
+
+import { css, SerializedStyles } from '@emotion/react';
+
+import Input, { InputProps } from '@/components/common/Input';
+import theme from '@/styles/theme';
+
+export interface TextFieldProps extends InputProps {
+ label?: string;
+ helperText?: string;
+ errorMessage?: string;
+ required?: boolean;
+ labelStyle?: SerializedStyles;
+ containerStyle?: SerializedStyles;
+ labelPosition?: 'top' | 'left';
+ labelWidth?: number | string;
+}
+
+const TextField = forwardRef(
+ (
+ {
+ label,
+ helperText,
+ errorMessage,
+ required = false,
+ labelStyle,
+ containerStyle,
+ labelPosition = 'top',
+ labelWidth = 109,
+ ...inputProps
+ },
+ ref
+ ) => {
+ const hasError = Boolean(errorMessage);
+ const hasSuccess = Boolean(helperText && !hasError);
+ const computedStatus = inputProps.status
+ ? inputProps.status
+ : hasError
+ ? 'error'
+ : hasSuccess
+ ? 'success'
+ : 'default';
+ const isHorizontal = labelPosition === 'left';
+
+ const inputWrapperStyles = isHorizontal ? inputWrapperHorizontalStyles : undefined;
+ const containerStyles = isHorizontal
+ ? [fieldContainerHorizontalStyles, containerStyle]
+ : [fieldContainerStyles, containerStyle];
+
+ return (
+ (null);
const [selectedFile, setSelectedFile] = useState();
+ const [previewUrl, setPreviewUrl] = useState();
+
+ useEffect(() => {
+ if (!selectedFile) return;
+ const url = URL.createObjectURL(selectedFile);
+ setPreviewUrl(url);
+ return () => URL.revokeObjectURL(url);
+ }, [selectedFile]);
+
const [fileName, setFileName] = useState(fname);
const [iconUrl, setIconUrl] = useState(icon);
const [iconTitle, setIconTitle] = useState(iconName);
@@ -101,10 +111,10 @@ const FileInput = ({
onChange={handleNameChange}
/>
})
+ {selectedFile && 
}
+ {label && (
+
+ )}
+
+
+ );
+ }
+);
+
+TextField.displayName = 'TextField';
+
+const fieldContainerStyles = css`
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ width: 100%;
+`;
+
+const fieldContainerHorizontalStyles = css`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 100%;
+`;
+
+const inputWrapperHorizontalStyles = css`
+ position: relative;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+`;
+
+const labelStyles = css`
+ font-size: ${theme.typography.fontSizes.body};
+ font-weight: ${theme.typography.fontWeight.medium};
+ color: ${theme.colors.gray[900]};
+ line-height: ${theme.typography.lineHeights.lg};
+`;
+
+const labelHorizontalStyles = css`
+ font-size: ${theme.typography.fontSizes.caption};
+ font-weight: ${theme.typography.fontWeight.regular};
+ color: ${theme.colors.gray[900]};
+ line-height: ${theme.typography.lineHeights.lg};
+ text-align: left;
+`;
+
+const requiredMarkerStyles = css`
+ color: ${theme.colors.main.alert};
+ margin-left: 4px;
+`;
+
+const messageStyles = css`
+ position: absolute;
+ left: 0;
+ bottom: -20px;
+ font-size: ${theme.typography.fontSizes.caption};
+ line-height: ${theme.typography.lineHeights.sm};
+ color: ${theme.colors.main.alert};
+ margin: 0;
+ text-indent: 5px;
+`;
+
+const errorMessageStyles = css`
+ color: ${theme.colors.main.alert};
+`;
+
+const successMessageStyles = css`
+ color: ${theme.colors.main.primary};
+`;
+
+export default TextField;
diff --git a/src/components/page/admin/FileInput.tsx b/src/components/page/admin/FileInput.tsx
index 028843e4..45569345 100644
--- a/src/components/page/admin/FileInput.tsx
+++ b/src/components/page/admin/FileInput.tsx
@@ -1,8 +1,9 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
import { css } from '@emotion/react';
import Button from '@/components/common/Button';
+import SafeImage from '@/components/common/SafeImage';
import { useIconMutation, usePutIconMutation } from '@/hooks/mutations/useIconMutation';
import theme from '@/styles/theme';
import { UserRole } from '@/types/route';
@@ -31,6 +32,15 @@ const FileInput = ({
}: FileInputProps) => {
const fileInputRef = useRef
+
+
+ {(errorMessage || helperText) && (
+
+ + {errorMessage || helperText} +
+ )} +์์ด์ฝ
- {selectedFile && (
-