{isLogin &&
{userInfo?.university}}
diff --git a/src/components/inputDropdown/inputRole/InputRoleForm.styled.ts b/src/components/inputDropdown/inputRole/InputRoleForm.styled.ts
index 5332102d..e00774c7 100644
--- a/src/components/inputDropdown/inputRole/InputRoleForm.styled.ts
+++ b/src/components/inputDropdown/inputRole/InputRoleForm.styled.ts
@@ -56,7 +56,6 @@ const InputRoleForm = styled.article
`
.dropdown-loading {
width: 100%;
- height: 5rem;
}
.option {
diff --git a/src/components/inputDropdown/inputRole/InputRoleForm.tsx b/src/components/inputDropdown/inputRole/InputRoleForm.tsx
index 3cc1c497..64ceff6f 100644
--- a/src/components/inputDropdown/inputRole/InputRoleForm.tsx
+++ b/src/components/inputDropdown/inputRole/InputRoleForm.tsx
@@ -49,7 +49,7 @@ const InputRoleForm = (props: InputRoleObj) => {
const dropdownRef = useRef(null);
const { isValid } = useValid(info);
- const { data: dataRole, isLoading: isLoadingRoleQuery } = useQuery({
+ const { data: dataRole, isFetching: isFetchingRole } = useQuery({
queryKey: ['searchRole', keywordRole],
queryFn: () => getRoleKeyword(keywordRole as string),
staleTime: Infinity,
@@ -57,7 +57,7 @@ const InputRoleForm = (props: InputRoleObj) => {
enabled: !!keywordRole,
});
- const { data: dataSkill, isLoading: isLoadingSkill } = useQuery({
+ const { data: dataSkill, isFetching: isFetchingSkill } = useQuery({
queryKey: ['searchSkill', keywordSkill],
queryFn: () => getSkillKeyword(keywordSkill),
staleTime: Infinity,
@@ -81,7 +81,7 @@ const InputRoleForm = (props: InputRoleObj) => {
...role,
skills: role.skills?.filter(skill => skill.id !== deletedId),
skillIds: role.skillIds.filter(id => id !== deletedId),
- }
+ }
: role
),
}));
@@ -104,12 +104,13 @@ const InputRoleForm = (props: InputRoleObj) => {
const onChangeRole = (event: React.ChangeEvent) => {
event.preventDefault();
+ const roleKeyword = event.target.value;
setRoleData(prev => ({
...prev,
- roleName: event.target.value,
+ roleName: roleKeyword,
count: prev.count,
}));
- if (event.target.value === '') {
+ if (roleKeyword === '') {
setRoleData(prev => ({
...prev,
roleName: '',
@@ -121,13 +122,13 @@ const InputRoleForm = (props: InputRoleObj) => {
role.roleId === id
? {
...role,
- roleName: event.target.value,
- }
+ roleName: roleKeyword,
+ }
: role
),
}));
}
- setDropdown(prev => ({ ...prev, role: true }));
+ setDropdown(prev => ({ ...prev, role: roleKeyword.length > 0 }));
};
const onChangeCount = (event: React.ChangeEvent) => {
event.preventDefault();
@@ -241,7 +242,7 @@ const InputRoleForm = (props: InputRoleObj) => {
...role.skillIds,
...(role.skillIds.includes(Number(target.id)) ? [] : [Number(target.id)]),
],
- }
+ }
: role
),
}));
@@ -274,7 +275,7 @@ const InputRoleForm = (props: InputRoleObj) => {
...role.skillIds,
...(role.skillIds.includes(Number(target.id)) ? [] : [Number(target.id)]),
],
- }
+ }
: role
),
}));
@@ -391,11 +392,11 @@ const InputRoleForm = (props: InputRoleObj) => {
/>
{dropdown.role && (
- {isLoadingRoleQuery ? (
+ {isFetchingRole ? (
검색중...
- ) : (
+ ) : dataRole && dataRole.length > 0 ? (
dataRole?.map((keyword: Keyword) => (
{
{keyword.name}
))
+ ) : (
+
+ 검색결과가 없습니다.
+
)}
)}
@@ -480,7 +485,7 @@ const InputRoleForm = (props: InputRoleObj) => {
{dropdown.skill && (
- {!isLoadingSkill &&
+ {!isFetchingSkill &&
dataSkill?.map(elem => (
{
{elem.name}
))}
- {!isLoadingSkill && dataSkill?.length === 0 && (
+ {!isFetchingSkill && keywordSkill?.length === 0 && (
+
+ )}
+ {!isFetchingSkill && dataSkill?.length === 0 && (
diff --git a/src/components/recruit/create/basicInformation/containers/ContainerCourse.tsx b/src/components/recruit/create/basicInformation/containers/ContainerCourse.tsx
index bdb52a9e..a3ea03db 100644
--- a/src/components/recruit/create/basicInformation/containers/ContainerCourse.tsx
+++ b/src/components/recruit/create/basicInformation/containers/ContainerCourse.tsx
@@ -26,14 +26,14 @@ const ContainerCourse = ({ course, professor }: ContainerCourseProps) => {
});
const keywordCourse = useDebounce(name.course, 500);
const keywordProfessor = useDebounce(name.professor, 500);
- const { data: dataCourse, isLoading: isLoadingCourse } = useQuery({
+ const { data: dataCourse, isFetching: isFetchingCourse } = useQuery({
queryKey: ['searchCourse', keywordCourse],
queryFn: () => getCourseKeyword(keywordCourse ?? ''),
enabled: !!keywordCourse,
staleTime: Infinity,
gcTime: Infinity,
});
- const { data: dataProfessor, isLoading: isLoadingProfessor } = useQuery({
+ const { data: dataProfessor, isFetching: isFetchingProfessor } = useQuery({
queryKey: ['searchProfessor', keywordProfessor],
queryFn: () => getProfessorKeyword(keywordProfessor ?? ''),
enabled: !!keywordProfessor,
@@ -42,8 +42,9 @@ const ContainerCourse = ({ course, professor }: ContainerCourseProps) => {
});
const onChangeCourse = useCallback((event: React.ChangeEvent) => {
- setName(prev => ({ ...prev, course: event.target.value }));
- setDropdown({ course: true, professor: false });
+ const keyword = event.target.value;
+ setName(prev => ({ ...prev, course: keyword }));
+ setDropdown({ course: keyword.length > 0, professor: false });
}, []);
const onChangeProfessor = useCallback((event: React.ChangeEvent) => {
@@ -118,12 +119,15 @@ const ContainerCourse = ({ course, professor }: ContainerCourseProps) => {
/>
{dropdown.course && (
- {!isLoadingCourse &&
+ {isFetchingCourse ? (
+ 검색중입니다...
+ ) : (
dataCourse?.map((keyword: Keyword) => (
{keyword.name}
- ))}
+ ))
+ )}
)}
@@ -139,12 +143,15 @@ const ContainerCourse = ({ course, professor }: ContainerCourseProps) => {
/>
{dropdown.professor && (
- {!isLoadingProfessor &&
+ {isFetchingProfessor ? (
+ 검색중입니다...
+ ) : (
dataProfessor?.map((keyword: Keyword) => (
{keyword.name}
- ))}
+ ))
+ )}
)}
diff --git a/src/components/tag/MeeteamTag.tsx b/src/components/tag/MeeteamTag.tsx
index 218b68ca..2e2f3e8a 100644
--- a/src/components/tag/MeeteamTag.tsx
+++ b/src/components/tag/MeeteamTag.tsx
@@ -20,7 +20,7 @@ const MeeteamTag = ({ tags }: RecruitTagListProps) => {
const dropdownRef = useRef(null);
const keywordTag = useDebounce(tagItem, 500);
- const { data, isSuccess } = useQuery({
+ const { data, isSuccess, isFetching } = useQuery({
queryKey: ['keywordTag', keywordTag],
queryFn: () => getTagKeyword(keywordTag),
staleTime: Infinity,
@@ -30,6 +30,11 @@ const MeeteamTag = ({ tags }: RecruitTagListProps) => {
const onKeyPress = (event: React.KeyboardEvent) => {
const target = event.currentTarget;
+
+ if (target.value.length > 0) {
+ setIsDropdownVisible(true);
+ }
+
if (target.value.length !== 0 && event.key === 'Enter') {
event.preventDefault();
submitTagItem();
@@ -61,10 +66,6 @@ const MeeteamTag = ({ tags }: RecruitTagListProps) => {
});
};
- const onClickInput = () => {
- setIsDropdownVisible(true);
- };
-
const onClickTagOptions = (selectedTag: string, event: React.MouseEvent) => {
event.stopPropagation();
if (!tagList.includes(selectedTag) && tagList.length < 5) {
@@ -100,7 +101,7 @@ const MeeteamTag = ({ tags }: RecruitTagListProps) => {
return (
-
)}
+ {isFetching && keywordTag.length === 0 && (
+
+ )}
)}