Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[운영배포] 식별 코드 제거 되지 않는 이슈 및 인풋 스타일 수정 #218

Merged
merged 6 commits into from
Oct 11, 2024
Merged

[운영배포] 식별 코드 제거 되지 않는 이슈 및 인풋 스타일 수정 #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
52df710
fix: 삭제 버튼 클릭시 값 undefined로 리셋
alstn2468 Oct 11, 2024
d9bd46e
fix: 렌더링 컨트롤 필드로 하도록 수정
alstn2468 Oct 11, 2024
c708537
Merge pull request #216 from Nexters/fix/remove-button
alstn2468 Oct 11, 2024
012b617
fix: 인풋 포커스 일때만 보더 색상 검정
alstn2468 Oct 11, 2024
a8ef4ca
chore: 안쓰는 인자 제거
alstn2468 Oct 11, 2024
82572b0
Merge pull request #217 from Nexters/fix/input-border
alstn2468 Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions ...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ interface ShowInfoFormLabelProps {
}

interface InputWrapperProps {
text: string;
isError?: boolean;
}

Expand All @@ -24,7 +23,7 @@ const ShowInfoFormLabel = styled.span<ShowInfoFormLabelProps>`
margin-left: 2px;
}

&:first-child {
&:first-of-type {
padding-top: 8px;
}
`;
Expand All @@ -46,12 +45,7 @@ const FieldWrap = styled.div`
const InputWrapper = styled.div<InputWrapperProps>`
${({ theme }) => theme.typo.b3};
border: 1px solid
${({ text, theme, isError }) =>
isError
? theme.palette.status.error
: text
? theme.palette.grey.g90
: theme.palette.grey.g20};
${({ theme, isError }) => (isError ? theme.palette.status.error : theme.palette.grey.g20)};
border-radius: 4px;
background-color: ${({ theme }) => theme.palette.grey.w};
padding: 8px 12px;
Expand All @@ -61,6 +55,12 @@ const InputWrapper = styled.div<InputWrapperProps>`
display: flex;
align-items: center;
width: 100%;
transition: border-color 0.2s ease-in-out;

&:focus-within {
border-color: ${({ theme, isError }) =>
isError ? theme.palette.status.error : theme.palette.grey.g70};
}
`;

const TextFieldWrap = styled.div`
Expand Down
34 changes: 21 additions & 13 deletions apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,10 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
: [{ userCode: false, roleName: false }],
);

const memberFieldState = getFieldState('members');
const disabled =
!getValues('name') ||
(getFieldState('members').isTouched &&
((memberFieldState.isDirty || memberFieldState.isTouched) &&
controlledFields.some(
({ userImgPath, userNickname, roleName }, index) =>
(isMemberFieldBlurred[index].roleName || isMemberFieldBlurred[index].userCode) &&
Expand Down Expand Up @@ -94,20 +95,21 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
/>
<Styled.ShowInfoFormLabel>팀원</Styled.ShowInfoFormLabel>
<Styled.MemberList>
{fields.map((field, index) => (
{controlledFields.map((field, index) => (
<Styled.Row key={field._id}>
<Controller
control={control}
defaultValue={field.userCode}
render={({ field: { onChange, onBlur, value } }) => {
render={({ field: { onChange, onBlur } }) => {
const value = field.userCode;
const isError = Boolean(
isMemberFieldBlurred[index].userCode &&
value &&
(!field.userImgPath || !field.userNickname),
isMemberFieldBlurred[index].userCode
? !value || !field.userImgPath || !field.userNickname
: false,
);
return (
<Styled.FieldWrap>
<Styled.InputWrapper text={value ?? ''} isError={isError}>
<Styled.InputWrapper isError={isError}>
{field.userImgPath && field.userNickname ? (
<>
<Styled.UserImage
Expand All @@ -120,7 +122,15 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
<Styled.Username>{field.userNickname}</Styled.Username>
<Styled.RemoveButton
onClick={() => {
update(index, { roleName: field.roleName });
onChange(undefined);
setIsMemberFieldBlurred((prev) => {
const nextMemberFieldBlurred = [...prev];
nextMemberFieldBlurred[index].userCode = true;
return nextMemberFieldBlurred;
});
update(index, {
roleName: field.roleName,
});
}}
>
<ClearIcon />
Expand Down Expand Up @@ -180,14 +190,12 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
rules={{
required: true,
}}
render={({ field: { onChange, onBlur, value } }) => {
render={({ field: { onChange, onBlur } }) => {
const value = field.roleName;
const isError = isMemberFieldBlurred[index].roleName && !value;
return (
<Styled.FieldWrap>
<Styled.InputWrapper
text={value ?? ''}
isError={isMemberFieldBlurred[index].roleName && !value}
>
<Styled.InputWrapper isError={isMemberFieldBlurred[index].roleName && !value}>
<Styled.Input
placeholder="역할"
required
Expand Down
Loading