Skip to content

Commit

Permalink
fix: 멤버 추가 시 제대로 작동하지 않는 문제 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
Todari committed Sep 26, 2024
1 parent 57cb197 commit 2228b36
Show file tree
Hide file tree
Showing 24 changed files with 148 additions and 538 deletions.
42 changes: 30 additions & 12 deletions client/src/components/Design/components/Input/Input.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,35 @@ import {Theme} from '@theme/theme.type';
const getBorderStyle = (isFocus: boolean, theme: Theme, isError?: boolean) =>
isError ? `0 0 0 1px ${theme.colors.error} inset` : isFocus ? `0 0 0 1px ${theme.colors.primary} inset` : 'none';

export const inputBoxStyle = (
theme: Theme,
isFocus: boolean,
isError: boolean | undefined,
isAlwaysOnBorder: boolean,
) =>
export const labelTextStyle = (theme: Theme, hasFocus: boolean, hasValue: boolean) =>
css([
{
height: '1.125rem',
color: theme.colors.gray,
},
labelTextAnimationStyle(hasFocus, hasValue),
]);

export const labelTextAnimationStyle = (hasFocus: boolean, hasValue: boolean) =>
css({
opacity: hasFocus || hasValue ? '1' : '0',

transition: '0.2s',
transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)',
});

export const errorTextStyle = (theme: Theme, isError: boolean) =>
css({
height: '1.125rem',
color: theme.colors.onErrorContainer,

opacity: isError ? '1' : '0',

transition: '0.2s',
transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)',
});

export const inputBoxStyle = (theme: Theme, isFocus: boolean, isError: boolean | undefined) =>
css([
{
display: 'flex',
Expand All @@ -22,7 +45,7 @@ export const inputBoxStyle = (
boxSizing: 'border-box',
boxShadow: getBorderStyle(isFocus, theme, isError),
},
isAlwaysOnBorder ? inputBoxAlwaysBorderStyle(theme) : inputBoxAnimationStyle(),
inputBoxAnimationStyle(),
]);

export const inputBoxAnimationStyle = () =>
Expand All @@ -31,11 +54,6 @@ export const inputBoxAnimationStyle = () =>
transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)',
});

export const inputBoxAlwaysBorderStyle = (theme: Theme) =>
css({
boxShadow: `0 0 0 1px ${theme.colors.primary} inset`,
});

export const inputStyle = (theme: Theme) =>
css(
{
Expand Down
102 changes: 61 additions & 41 deletions client/src/components/Design/components/Input/Input.tsx
Original file line number Diff line number Diff line change
@@ -1,65 +1,85 @@
/** @jsxImportSource @emotion/react */
import React, {forwardRef, useImperativeHandle, useRef} from 'react';
import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';

import IconButton from '@HDcomponents/IconButton/IconButton';
import {InputProps} from '@HDcomponents/Input/Input.type';
import {inputBoxStyle, inputStyle} from '@HDcomponents/Input/Input.style';
import {useInput} from '@HDcomponents/Input/useInput';
import Icon from '@HDcomponents/Icon/Icon';
import {useTheme} from '@theme/HDesignProvider';

Check failure on line 7 in client/src/components/Design/components/Input/Input.tsx

View workflow job for this annotation

GitHub Actions / test

There should be at least one empty line between import groups
import Flex from '../Flex/Flex';
import Text from '../Text/Text';

Check failure on line 9 in client/src/components/Design/components/Input/Input.tsx

View workflow job for this annotation

GitHub Actions / test

There should be at least one empty line between import groups
import {inputBoxStyle, inputStyle, labelTextStyle, errorTextStyle} from './Input.style';

export const Input: React.FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(function Input(
{
value: propsValue,
value,
onChange,
onFocus,
onBlur,
inputType,
isError,
onDelete,
placeholder,
autoFocus,
isAlwaysOnBorder = false,
autoFocus = false,
labelText,
errorText = '',
inputType = 'input',
isError,
...htmlProps
}: InputProps,
ref,
) {
const {theme} = useTheme();
const inputRef = useRef<HTMLInputElement>(null);
const {value, handleChange, hasFocus, handleClickDelete, handleBlur, handleFocus, handleKeyDown} = useInput({
propsValue,
onChange,
onBlur,
onFocus,
inputRef,
autoFocus,
});
const [hasFocus, setHasFocus] = useState(autoFocus);
const hasValue = !!value;

useImperativeHandle(ref, () => inputRef.current!);

useEffect(() => {
inputRef.current?.addEventListener('focus', () => setHasFocus(true));
inputRef.current?.addEventListener('blur', () => setHasFocus(false));
return () => {
inputRef.current?.removeEventListener('focus', () => setHasFocus(true));
inputRef.current?.removeEventListener('blur', () => setHasFocus(false));
};
}, []);

return (
<div css={inputBoxStyle(theme, hasFocus, isError, isAlwaysOnBorder)}>
<input
css={inputStyle(theme)}
ref={inputRef}
value={value}
onChange={handleChange}
onBlur={handleBlur}
onFocus={handleFocus}
placeholder={value ? '' : placeholder}
onKeyDown={handleKeyDown}
autoFocus={autoFocus}
{...htmlProps}
/>
{inputType === 'input' && value && hasFocus && (
<IconButton tabIndex={-1} variants="none" onMouseDown={handleClickDelete}>
<Icon iconType="inputDelete" />
</IconButton>
)}
{inputType === 'search' && (
<IconButton tabIndex={-1} variants="none">
<Icon iconType="search" />
</IconButton>
<Flex flexDirection="column" gap="0.375rem">
{(labelText || errorText) && (
<Flex justifyContent="spaceBetween" paddingInline="0.5rem" margin="0 0 0.375rem 0">
{labelText && (
<Text size="caption" css={labelTextStyle(theme, hasFocus, hasValue)}>
{labelText}
</Text>
)}
{errorText && (
<Text size="caption" css={errorTextStyle(theme, isError ?? false)}>
{errorText}
</Text>
)}
</Flex>
)}
</div>
<Flex flexDirection="column" gap="0.5rem">
<div css={inputBoxStyle(theme, hasFocus, isError)}>
<input
css={inputStyle(theme)}
ref={inputRef}
value={value}
onChange={onChange}
placeholder={value ? '' : placeholder}
autoFocus={autoFocus}
{...htmlProps}
/>
{onDelete && value && hasFocus && (
<IconButton tabIndex={-1} variants="none" onMouseDown={onDelete}>
<Icon iconType="inputDelete" />
</IconButton>
)}
{inputType === 'search' && (
<IconButton tabIndex={-1} variants="none">
<Icon iconType="search" />
</IconButton>
)}
</div>
</Flex>
</Flex>
);
});

Expand Down
6 changes: 4 additions & 2 deletions client/src/components/Design/components/Input/Input.type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@ import {Theme} from '@theme/theme.type';

export interface InputStyleProps {
theme?: Theme;
isAlwaysOnBorder?: boolean;
isError?: boolean;
}

export type InputType = 'input' | 'search';

export interface InputCustomProps {
inputType?: InputType;
isError?: boolean;
labelText?: string;
errorText?: string | null;
onDelete?: () => void;
}

export type InputOptionProps = InputStyleProps & InputCustomProps;
Expand Down

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

Loading

0 comments on commit 2228b36

Please sign in to comment.