Skip to content

Commit

Permalink
Merge pull request #285 from WePlanPlans/FE-95--feat/Share
Browse files Browse the repository at this point in the history 
Refactor: 마이페이지 디자인 QA 적용
  • Loading branch information
@suehub
suehub authored Jan 27, 2024
2 parents c69676a + e2af705 commit e4139c8
Show file tree
Hide file tree
Showing 14 changed files with 219 additions and 278 deletions.
2 changes: 1 addition & 1 deletion src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const AuthInput = ({
return (
<div className="flex flex-col gap-2">
<div>
<label htmlFor={id} className="body3 text-main1">
<label htmlFor={id} className="body2 text-main1">
{label}
</label>
<span className="body5 text-main1">{subLabel}</span>
Expand Down
41 changes: 5 additions & 36 deletions src/components/Auth/AuthSurvey/AuthSurvey.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,16 @@
import SubmitBtn from '@components/common/button/SubmitBtn';
import AuthSurveyOption from './AuthSurveyOption';
import { SubmitHandler, useForm } from 'react-hook-form';
import { putMemberSurvey } from '@api/member';
import { useNavigate } from 'react-router-dom';
import { surveyArr } from '@utils/survey.constants';
import { useEffect } from 'react';
import { UserInfoState } from '@recoil/Auth.atom';
import { useRecoilState } from 'recoil';
import { UseFormRegister, UseFormSetValue } from 'react-hook-form';

interface Props {
path?: string;
register: UseFormRegister<Survey>;
setValue: UseFormSetValue<Survey>;
}

const AuthSurvey = ({ path }: Props) => {
const {
register,
handleSubmit,
setValue,
formState: { isDirty, isValid },
} = useForm<Survey>();
const navigate = useNavigate();
const AuthSurvey = ({ register, setValue }: Props) => {
const [userInfo, _] = useRecoilState(UserInfoState);
useEffect(() => {
if (userInfo?.survey) {
Expand All @@ -33,29 +24,8 @@ const AuthSurvey = ({ path }: Props) => {
}
}, [userInfo]);

const onSaveSubmit: SubmitHandler<Survey> = async (data) => {
try {
const res = await putMemberSurvey({ survey: data });
if (res.data.status === 200) {
// setUserInfo((prevUserInfo) => {
// const newPrevUserInfo = prevUserInfo!;
// newPrevUserInfo.survey = data;
// return newPrevUserInfo;
// });
if (path) {
navigate(path);
} else {
navigate(-1);
}
}
} catch (err) {
console.error(err);
alert('오류가 발생했습니다. 다시 시도해주세요');
}
};

return (
<form className="mb-8" onSubmit={handleSubmit(onSaveSubmit)}>
<form className="mb-8">
<div className="overflow-auto">
{surveyArr.map((section) => (
<fieldset key={section.id} className="mb-8 flex flex-col gap-4">
Expand All @@ -75,7 +45,6 @@ const AuthSurvey = ({ path }: Props) => {
</fieldset>
))}
</div>
<SubmitBtn isActive={isDirty && isValid}>완료</SubmitBtn>
</form>
);
};
Expand Down
102 changes: 34 additions & 68 deletions src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,48 @@
import AuthDropDownOption from './AuthDropDownOption';
import { UseFormRegister } from 'react-hook-form';
import { UseFormSetValue } from 'react-hook-form';
import * as Select from '@radix-ui/react-select';
import { AuthDropDownIcon } from '@components/common/icons/Icons';

interface Props {
label: string;
options: SelectOption[];
name: string;
register: UseFormRegister<any>;
setValue: UseFormSetValue<any>;
value?: string;
}

const AuthDropDown = ({ label, options, name, register }: Props) => {
const AuthDropDown = ({ label, options, name, setValue, value }: Props) => {
return (
<div className="z-10 flex flex-col">
<div>
<h2 className="body2 mb-2 text-main1">{label}</h2>
<select
{...register(name)}
className="h-12 w-full rounded-lg border border-solid border-gray3 px-2.5 py-2">
{options.map((option) => (
<AuthDropDownOption option={option} />
))}
</select>
</div>
<Select.Root
value={value}
onValueChange={(e) => {
setValue(name, e);
}}>
<Select.Trigger className="data-[placeholder]:body5 relative flex h-12 w-full items-center justify-center rounded-lg border border-solid border-gray3 bg-white hover:bg-gray1 data-[state=open]:rounded-b-none data-[placeholder]:text-gray4">
<Select.Value placeholder={`${label}을 선택해주세요`} />
<Select.Icon className="absolute right-2.5">
<AuthDropDownIcon />
</Select.Icon>
</Select.Trigger>

// <div className="z-10 flex flex-col">
// <h2 className="body2 mb-2 text-main1">{label}</h2>
// <div
// onClick={() => setIsShow(!isShow)}
// className={`${
// isShow ? 'h-48' : 'h-12'
// } relative w-full overflow-hidden rounded-lg border border-solid border-gray3`}>
// <AuthDropDownOption
// clickHandler={() => {
// setIsShow(!isShow);
// }}
// showDownIcon>
// {isSelected}
// </AuthDropDownOption>
// {isShow && (
// <ul className="absolute top-12 z-20 h-36 w-full overflow-auto rounded-b-lg bg-white">
// {options.map((option) => (
// <li className="h-12 ">
// <AuthDropDownOption
// clickHandler={() => {
// setIsSelected(option.value);
// setIsShow(!isShow);
// }}>
// {option.value}
// </AuthDropDownOption>
// </li>
// ))}
// </ul>
// )}
// </div>
// </div>
// <div className="w-full">
// <Select.Root onValueChange={onSelectClick} {...register(name)}>
// <h2 className="body2 mb-2 text-main1">{label}</h2>
// <Select.Trigger className="data-[placeholder]:body5 relative flex h-12 w-full items-center justify-center rounded-lg border border-solid border-gray3 bg-white hover:bg-gray1 data-[state=open]:rounded-b-none data-[placeholder]:text-gray4">
// <Select.Value className="body5 text-gray6" placeholder={text} />
// <Select.Icon className="absolute right-[10px] top-4">
// <DownIcon size={20} color="#888888" />
// </Select.Icon>
// </Select.Trigger>
// <Select.Portal>
// <Select.Content
// position={'popper'}
// collisionPadding={0}
// className="h-36 overflow-hidden rounded-b-lg border-x border-b border-solid border-gray3 bg-white">
// <Select.Viewport>
// {options.map((option) => (
// <AuthDropDownOption key={option.id} value={option.id}>
// {option.value}
// </AuthDropDownOption>
// ))}
// </Select.Viewport>
// </Select.Content>
// </Select.Portal>
// </Select.Root>
// </div>
<Select.Portal>
<Select.Content
position={'popper'}
collisionPadding={0}
className="h-36 w-[var(--radix-select-trigger-width)] overflow-hidden rounded-b-lg border-x border-b border-solid border-gray3 bg-white">
<Select.Viewport>
{options.map((option) => (
<AuthDropDownOption key={option.id} id={option.id}>
{option.value}
</AuthDropDownOption>
))}
</Select.Viewport>
</Select.Content>
</Select.Portal>
</Select.Root>
</div>
);
};

Expand Down
82 changes: 12 additions & 70 deletions src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,18 @@
// interface Props {
// children: string;
// clickHandler?: VoidFunction;
// showDownIcon?: boolean;
// }

// const AuthDropDownOption = ({
// children,
// clickHandler,
// showDownIcon = false,
// }: Props) => {
// return (
// <button
// onClick={clickHandler}
// className="relative h-12 w-full border-b border-solid border-gray3 hover:bg-gray1">
// {children}
// {showDownIcon && (
// <div className="absolute right-2 top-4">
// <DownIcon size={20} color="#888888" />
// </div>
// )}
// </button>
// );
// };

// export default AuthDropDownOption;

// const AuthDropDownOption = ({ children }: Props) => {
// return (
// <Select.Item>
// <Select.ItemText>{children}</Select.ItemText>
// <Select.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
// {/* <CheckIcon /> */}
// </Select.ItemIndicator>
// </Select.Item>
// );
// };

// export default AuthDropDownOption;

// interface SelectItemProps {
// value: string;
// children: ReactNode;
// className?: string;
// disabled?: boolean;
// }

// const AuthDropDownOption = React.forwardRef(
// (
// { children, className, ...props }: SelectItemProps,
// forwardedRef: Ref<HTMLDivElement>,
// ) => {
// return (
// <Select.Item
// className="body5 relative flex h-12 w-full select-none items-center border-b border-solid border-gray3 pl-[25px] pr-[35px] text-gray6 hover:bg-gray1"
// {...props}
// ref={forwardedRef}>
// <Select.ItemText>{children}</Select.ItemText>
// <Select.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
// <CheckIcon />
// </Select.ItemIndicator>
// </Select.Item>
// );
// },
// );

// export default AuthDropDownOption;
import * as Select from '@radix-ui/react-select';

interface Props {
option: SelectOption;
id: string;
children: string;
}

const AuthDropDownOption = ({ option }: Props) => {
return <option value={option.id}>{option.value}</option>;
const AuthDropDownOption = ({ id, children }: Props) => {
return (
<Select.Item
value={id}
className="flex h-12 items-center justify-center border-b border-solid border-gray3">
<Select.ItemText className="body5 text-gray6">{children}</Select.ItemText>
</Select.Item>
);
};

export default AuthDropDownOption;
6 changes: 4 additions & 2 deletions src/components/Auth/SignupInfo/SignupInfoForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,15 @@ const SignupInfoForm = () => {
label="성별"
options={genderArr}
name={'genderType'}
register={register}
setValue={setValue}
value={watch('genderType')}
/>
<AuthDropDown
label="연령대"
options={ageArr}
name={'ageType'}
register={register}
setValue={setValue}
value={watch('ageType')}
/>
</div>
</div>
Expand Down
Loading

0 comments on commit e4139c8

Please sign in to comment.