Deploy: 배포

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<HTMLAnchorElement, MouseEvent>, route: string) => {
-      if (route === 'matching') {
-        e.preventDefault()
-        setModalContent(HEADER_MESSAGE.NOT_READY)
-        handleModalOpen()
-        return
-      }
+    (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
       if (!isAuthenticated) return // 미로그인 유저
       if (!authState) {
         // 인증 안 된 유저
@@ -129,7 +123,7 @@ const Footer = () => {
         })}
       >
         {footerRouteConfig.map(nav => (
-          <Link key={nav.route} to={`/${nav.route}`} className={tabs} onClick={e => handleNavClick(e, nav.route)}>
+          <Link key={nav.route} to={`/${nav.route}`} className={tabs} onClick={handleNavClick}>
             {nav.navName}
           </Link>
         ))}

src/components/Header.tsx

@@ -46,11 +46,6 @@ const Header = () => {
 
   const handleNavClick = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, navName: string) => {
-      if (navName === '1:1 Matching') {
-        e.preventDefault()
-        setModalContent(HEADER_MESSAGE.NOT_READY)
-        handleModalOpen()
-      }
       if (!isAuthenticated) return
 
       if (navName === 'mypage' && !authState) {

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 (
+        <>
+          <img src={NoFriendImage} alt="No Search Result" className={css({ height: '5rem', opacity: 0.7 })} />
+          <p>No search results</p>
+        </>
+      )
   }, [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}
       </div>
       {searchResultData && <FriendCard type="search" data={searchResultData} />}
     </div>

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 (
     <div className={s.Wrapper}>
+      <img src={NoTimetableImage} className={s.Image} alt="Timetable hasn't been created yet!" />
       <Typography typography="heading2SB" mobileTypography="headingSB" color="darkGray1">
         Timetable hasn't been created yet!
       </Typography>

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,
+})

src/components/timetable/LectureBottomSheet/AddClass/CourseSearchDataList.tsx

@@ -2,22 +2,14 @@ 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'
 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<HTMLDivElement, Props>(({ year, semester
       </div>
     )
 
-  return <div className={SearchMessageStyle}>There are no classes available for exchange students.</div>
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        flexDir: 'column',
+        gap: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: 'darkGray.2',
+        fontSize: 16,
+        fontWeight: 600,
+      })}
+    >
+      <img
+        src={NoSearchResult}
+        className={css({ height: '5rem', opacity: 0.7 })}
+        alt="There are no classes available for exchange students"
+      />
+      <p>There are no classes available for exchange students.</p>
+    </div>
+  )
 })
 
 export default CourseSearchDataList

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 (
     <div className={s.SearchResultWrapper}>
       {isDesktop && query.keyword && <div className={s.KeywordForDesktop}>{`'${query.keyword}' Search Results`}</div>}
-      <div className={s.ClubCardWrapper}>
-        {data?.length ? (
-          data.map((club, index) => (
+      {data?.length ? (
+        <div className={s.ClubCardWrapper}>
+          {data.map((club, index) => (
             <Fragment key={index}>
               {index !== 0 && <Responsive mobile={<div className={s.ClubLine} />} />}
               <ClubCard clubData={club} handleLikeClick={handleLikeClick} />
             </Fragment>
-          ))
-        ) : (
-          <div className={s.NoSearchResult}>No search results</div>
-        )}
-      </div>
+          ))}
+        </div>
+      ) : (
+        <div className={s.NoSearchResult}>
+          <img src={NoSearchResult} alt="No club search result" className={s.NoSearchResultImage} />
+          <p>No search results</p>
+        </div>
+      )}
     </div>
   )
 }

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,
   {

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' },
 ]

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' },
 ]