diff --git a/src/assets/no-friend-result.png b/src/assets/no-friend-result.png new file mode 100644 index 00000000..1d432390 Binary files /dev/null and b/src/assets/no-friend-result.png differ diff --git a/src/assets/no-search-result.png b/src/assets/no-search-result.png new file mode 100644 index 00000000..71d76def Binary files /dev/null and b/src/assets/no-search-result.png differ diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 7fd29088..73fbfffa 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -38,13 +38,7 @@ const Footer = () => { const [modalContent, setModalContent] = useState(HEADER_MESSAGE.NOT_VERIFIED_USER) const handleNavClick = useCallback( - (e: React.MouseEvent, route: string) => { - if (route === 'matching') { - e.preventDefault() - setModalContent(HEADER_MESSAGE.NOT_READY) - handleModalOpen() - return - } + (e: React.MouseEvent) => { if (!isAuthenticated) return // 미로그인 유저 if (!authState) { // 인증 안 된 유저 @@ -129,7 +123,7 @@ const Footer = () => { })} > {footerRouteConfig.map(nav => ( - handleNavClick(e, nav.route)}> + {nav.navName} ))} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 59249fbe..f8387b51 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -46,11 +46,6 @@ const Header = () => { const handleNavClick = useCallback( (e: React.MouseEvent, navName: string) => { - if (navName === '1:1 Matching') { - e.preventDefault() - setModalContent(HEADER_MESSAGE.NOT_READY) - handleModalOpen() - } if (!isAuthenticated) return if (navName === 'mypage' && !authState) { diff --git a/src/components/timetable/Friend/SearchResult.tsx b/src/components/timetable/Friend/SearchResult.tsx index e9790ba2..9671fa2b 100644 --- a/src/components/timetable/Friend/SearchResult.tsx +++ b/src/components/timetable/Friend/SearchResult.tsx @@ -2,6 +2,7 @@ import { css } from '@styled-system/css' import { memo, useMemo } from 'react' import { useGetSearchUser } from '@/api/hooks/friends' +import NoFriendImage from '@/assets/no-friend-result.png' import FriendCard from '@/components/timetable/Friend/FriendCard' import { SearchFriend } from '@/components/timetable/Friend/FriendsManage' import { useQueryParams } from '@/util/hooks/useQueryParams' @@ -11,9 +12,15 @@ const SearchResult = memo(() => { const { data: searchResultData } = useGetSearchUser({ username: queryParam?.username ?? '' }) - const resultText = useMemo(() => { - if (queryParam.username === undefined) return `Enter your friend's username to search` - else if (searchResultData === '') return 'No search results' + const resultJSX = useMemo(() => { + if (queryParam.username === undefined) return <>Enter your friend's username to search + if (searchResultData === '') + return ( + <> + No Search Result +

No search results

+ + ) }, [queryParam.username, searchResultData]) return ( @@ -33,11 +40,14 @@ const SearchResult = memo(() => { fontSize: 16, color: 'lightGray.1', display: 'flex', + flexDir: 'column', + alignItems: 'center', justifyContent: 'center', + gap: '1rem', pt: 5, })} > - {resultText} + {resultJSX} {searchResultData && } diff --git a/src/components/timetable/Grid/NullTable/index.tsx b/src/components/timetable/Grid/NullTable/index.tsx index 08cfabc4..2f688d67 100644 --- a/src/components/timetable/Grid/NullTable/index.tsx +++ b/src/components/timetable/Grid/NullTable/index.tsx @@ -1,10 +1,12 @@ import * as s from './style.css' +import NoTimetableImage from '@/assets/no-search-result.png' import { Typography } from '@/ui/Typography' const NullTable = () => { return (
+ Timetable hasn't been created yet! Timetable hasn't been created yet! diff --git a/src/components/timetable/Grid/NullTable/style.css.ts b/src/components/timetable/Grid/NullTable/style.css.ts index a2962ced..15451da9 100644 --- a/src/components/timetable/Grid/NullTable/style.css.ts +++ b/src/components/timetable/Grid/NullTable/style.css.ts @@ -7,11 +7,18 @@ export const Wrapper = style([ f.wFull, f.hFull, f.flexCenter, + f.flexColumn, { height: '30rem', backgroundColor: vars.color.bgGray, borderRadius: '10px', border: '1px solid', borderColor: vars.color.lightGray1, + gap: '1rem', }, ]) + +export const Image = style({ + width: '7rem', + opacity: 0.7, +}) diff --git a/src/components/timetable/LectureBottomSheet/AddClass/CourseSearchDataList.tsx b/src/components/timetable/LectureBottomSheet/AddClass/CourseSearchDataList.tsx index 7ea00286..d045051a 100644 --- a/src/components/timetable/LectureBottomSheet/AddClass/CourseSearchDataList.tsx +++ b/src/components/timetable/LectureBottomSheet/AddClass/CourseSearchDataList.tsx @@ -2,6 +2,7 @@ import { css } from '@styled-system/css' import { forwardRef, useCallback } from 'react' import { usePostCourse } from '@/api/hooks/timetable' +import NoSearchResult from '@/assets/no-search-result.png' import { CourseQueryInterface } from '@/components/timetable/LectureBottomSheet/AddClass/constants' import SearchLectureCard from '@/components/timetable/LectureBottomSheet/AddClass/SearchLectureCard' import { useSearchCourse } from '@/domain/Timetable/hooks/useSearchCourse' @@ -9,15 +10,6 @@ import { SemesterType } from '@/types/timetable' import useIntersect from '@/util/hooks/useIntersect' import { useQueryParams } from '@/util/hooks/useQueryParams' -const SearchMessageStyle = css({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - color: 'darkGray.2', - fontSize: 16, - fontWeight: 600, -}) - interface Props { year: string semester: SemesterType @@ -66,7 +58,27 @@ const CourseSearchDataList = forwardRef(({ year, semester
) - return
There are no classes available for exchange students.
+ return ( +
+ There are no classes available for exchange students +

There are no classes available for exchange students.

+
+ ) }) export default CourseSearchDataList diff --git a/src/features/Club/components/ClubList/index.tsx b/src/features/Club/components/ClubList/index.tsx index 485e25fa..4b37ed91 100644 --- a/src/features/Club/components/ClubList/index.tsx +++ b/src/features/Club/components/ClubList/index.tsx @@ -3,6 +3,7 @@ import { toast } from 'sonner' import * as s from './style.css' +import NoSearchResult from '@/assets/no-search-result.png' import { Responsive } from '@/common/Responsive' import Toast from '@/components/ui/toast' import { useGetClubSearch } from '@/domain/Club/hooks/useGetClubSearch' @@ -43,18 +44,21 @@ const ClubList = () => { return (
{isDesktop && query.keyword &&
{`'${query.keyword}' Search Results`}
} -
- {data?.length ? ( - data.map((club, index) => ( + {data?.length ? ( +
+ {data.map((club, index) => ( {index !== 0 && } />} - )) - ) : ( -
No search results
- )} -
+ ))} +
+ ) : ( +
+ No club search result +

No search results

+
+ )}
) } diff --git a/src/features/Club/components/ClubList/style.css.ts b/src/features/Club/components/ClubList/style.css.ts index 77a94ad1..0f6529bc 100644 --- a/src/features/Club/components/ClubList/style.css.ts +++ b/src/features/Club/components/ClubList/style.css.ts @@ -24,13 +24,26 @@ export const KeywordForDesktop = style([ ]) export const NoSearchResult = style([ + f.flexColumn, + f.alignCenter, vars.typography.desktop.heading2R, { color: vars.color.darkGray1, + gap: '1rem', }, f.mdDown(vars.typography.mobile.headingR), ]) +export const NoSearchResultImage = style([ + { + width: '7rem', + opacity: 0.7, + }, + f.mdDown({ + width: '4rem', + }), +]) + export const ClubLine = style([ f.wFull, { diff --git a/src/lib/router/footer-route.ts b/src/lib/router/footer-route.ts index 76a1d156..f536ba2b 100644 --- a/src/lib/router/footer-route.ts +++ b/src/lib/router/footer-route.ts @@ -2,6 +2,6 @@ export const footerRouteConfig = [ { route: 'mypage', navName: 'MY PAGE' }, { route: 'timetable', navName: 'TIMETABLE' }, { route: 'timetable/friend', navName: 'FRIENDS' }, - { route: 'community', navName: 'COMMUNITY' }, - { route: 'matching', navName: '1:1 MATCHING' }, + { route: 'community/all?board=All&boardId=0', navName: 'COMMUNITY' }, + { route: 'club', navName: 'CLUB' }, ] diff --git a/src/lib/router/header-route.ts b/src/lib/router/header-route.ts index 3b3fece4..4a2c4594 100644 --- a/src/lib/router/header-route.ts +++ b/src/lib/router/header-route.ts @@ -1,6 +1,6 @@ export const headerRouteConfig = [ { route: 'home', navName: 'Home' }, { route: 'timetable', navName: 'Timetable', innerTab: ['timetable', 'timetable/friend'] }, - { route: 'community', navName: 'Community' }, - { route: 'matching', navName: '1:1 Matching' }, + { route: 'community/all?board=All&boardId=0', navName: 'Community' }, + { route: 'club', navName: 'Club' }, ]