Merge pull request #163 from DizzyCode2024/feature/162

[Feature/162] explore page 방 추천

src/components/explore/ExploreMenu/index.tsx

@@ -1,3 +1,4 @@
+import { spacing } from '@/lib/constants';
 import { Text } from '@chakra-ui/react';
 
 const ExploreMenu = () => {
@@ -9,7 +10,7 @@ const ExploreMenu = () => {
         h={'4rem'}
         display={'flex'}
         alignItems={'center'}
-        pl={2}
+        pl={spacing.padding}
         fontWeight={'bold'}
       >
         {'Discover'}

src/components/explore/Home/SearchInput.tsx

@@ -0,0 +1,41 @@
+import { spacing } from '@/lib/constants';
+import { Button, Flex, Input } from '@chakra-ui/react';
+import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+const SearchInput = () => {
+  const [value, setValue] = useState<string>('');
+
+  const [, setSearchParams] = useSearchParams();
+
+  const handleSubmit = () => {
+    setSearchParams({ keyword: value });
+  };
+
+  return (
+    <Flex
+      mt={spacing.gutter}
+      mb={spacing.offset}
+      mx={'10rem'}
+      alignItems={'center'}
+      gap={spacing.padding}
+    >
+      <Input
+        variant={'filled'}
+        placeholder={'Explore communities and join them!'}
+        height={'3rem'}
+        bg={'gray.700'}
+        fontSize={'md'}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onSubmit={handleSubmit}
+        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>
+          e.key === 'Enter' && handleSubmit()
+        }
+      />
+      <Button onClick={handleSubmit}>{'Search'}</Button>
+    </Flex>
+  );
+};
+
+export default SearchInput;

src/components/explore/exploreBody/ExploreBody.tsx → src/components/explore/Home/index.tsx

@@ -1,13 +1,14 @@
 import { spacing } from '@/lib/constants';
-import { Box, Heading } from '@chakra-ui/react';
+import { Box, Heading, Text } from '@chakra-ui/react';
 import { useEffect } from 'react';
 import useRoomStore from '@/lib/stores/useRoomStore';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { QUERY_KEYS, getAllRooms } from '@/lib/api';
 import { IRoom } from '@/types';
-import RoomBox from './RoomBox';
+import SearchInput from './SearchInput';
+import RoomBox from '../RoomBox';
 
-const ExploreBody = () => {
+const ExploreHome = () => {
   const { setCurrentChannelPath } = useRoomStore();
   useEffect(() => {
     setCurrentChannelPath({
@@ -34,6 +35,15 @@ const ExploreBody = () => {
 
   return (
     <>
+      <Text
+        mt={spacing.offset}
+        textAlign={'center'}
+        color={'white'}
+        fontSize={'2xl'}
+      >
+        {'DizzyCode에서 커뮤니티 찾기'}
+      </Text>
+      <SearchInput />
       <Heading ml={spacing.offset} size={'md'} color={'white'}>
         {'추천 커뮤니티'}
       </Heading>
@@ -51,12 +61,11 @@ const ExploreBody = () => {
             roomId={room.roomId}
             roomName={room.roomName}
             open={room.open}
-            isMember={room.isMember}
           />
         ))}
       </Box>
     </>
   );
 };
 
-export default ExploreBody;
+export default ExploreHome;

src/components/explore/Recommend/index.tsx

@@ -0,0 +1,40 @@
+import { QUERY_KEYS, getRecommendations } from '@/lib/api';
+import { spacing } from '@/lib/constants';
+import { IRoom } from '@/types';
+import { ChevronLeftIcon } from '@chakra-ui/icons';
+import { Box, Flex } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import RoomBox from '../RoomBox';
+
+const Recommend = ({ keyword }: { keyword: string }) => {
+  const { data } = useQuery<IRoom[]>({
+    queryKey: QUERY_KEYS.ROOM_RECOMMENDATION(keyword),
+    queryFn: () => getRecommendations(keyword, 5),
+    enabled: keyword !== '',
+  });
+
+  return (
+    <Box h={'100vh'} overflowY={'scroll'} overflowX={'hidden'}>
+      <ChevronLeftIcon
+        w={'2rem'}
+        h={'2rem'}
+        color={'white'}
+        ml={spacing.padding}
+        mt={spacing.padding}
+        onClick={() => window.history.back()}
+      />
+      <Flex p={spacing.padding} direction={'column'} gap={spacing.padding}>
+        {data?.map((room) => (
+          <RoomBox
+            key={room.roomId}
+            roomId={room.roomId}
+            roomName={room.roomName}
+            open
+          />
+        ))}
+      </Flex>
+    </Box>
+  );
+};
+
+export default Recommend;

src/components/explore/exploreBody/RoomBox.tsx → src/components/explore/RoomBox.tsx

@@ -2,17 +2,23 @@ import { QUERY_KEYS, getCategories } from '@/lib/api';
 import { spacing } from '@/lib/constants';
 import useEnterRoom from '@/lib/hooks/explore/useEnterRoom';
 import { useCustomToast } from '@/lib/hooks/useCustomToast';
-import { IRoomBox } from '@/types';
+import { IRoom } from '@/types';
 import { Box, Heading, Icon, Text } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { FaGlobeAmericas, FaLock } from 'react-icons/fa';
 import { useNavigate } from 'react-router-dom';
 
-const RoomBox = ({ roomId, roomName, open, isMember }: IRoomBox) => {
+const RoomBox = ({ roomId, roomName, open }: IRoom) => {
   const toast = useCustomToast();
   const navigate = useNavigate();
 
+  // check if the user is a member of the room
+  const queryClient = useQueryClient();
+  const joinedRooms = queryClient.getQueryData<IRoom[]>(QUERY_KEYS.ROOMS) || [];
+
+  const isMember = joinedRooms.some((room) => room.roomId === roomId);
+
   // roomId의 첫 번째 채널로 이동
   const { data: roomInfo } = useQuery({
     queryKey: QUERY_KEYS.CATWCHANNELS(roomId),

src/components/room/RoomList/index.tsx

@@ -7,19 +7,23 @@ import DMButton from './DMButton';
 import ExploreButton from './ExploreButton';
 import RoomButton from './RoomButton';
 
-const Container = ({ children }: { children: React.ReactNode }) => (
-  <Box minWidth={'4rem'} height={'100vh'} bg={'gray.800'}>
-    {children}
-  </Box>
-);
-
 const RoomList = () => {
   const queryClient = useQueryClient();
   const rooms: IRoom[] =
     queryClient.getQueryData<IRoom[]>(QUERY_KEYS.ROOMS) || [];
 
   return (
-    <Container>
+    <Box
+      minWidth={'4rem'}
+      bg={'gray.800'}
+      overflowY={'scroll'}
+      height={'100vh'}
+      sx={{
+        '::-webkit-scrollbar': {
+          display: 'none',
+        },
+      }}
+    >
       <Stack
         display={'flex'}
         justifyContent={'center'}
@@ -32,6 +36,7 @@ const RoomList = () => {
         <Divider borderColor={'gray.500'} w={'3rem'} />
 
         {/* Room */}
+
         {rooms?.map((room) => (
           <RoomButton
             key={room.roomId}
@@ -47,7 +52,7 @@ const RoomList = () => {
         {/* Explore Rooms */}
         <ExploreButton />
       </Stack>
-    </Container>
+    </Box>
   );
 };
 

src/lib/api/afterLogin/exploreApi.ts

@@ -6,3 +6,10 @@ export const getAllRooms = async (): Promise<IRoom[]> => {
   const response = await axiosInstance.get('/rooms/all');
   return response.data;
 };
+
+export const getRecommendations = async (value: string, k: number) => {
+  const response = await axiosInstance.get(
+    `/recommend?keyword=${value}&topN=${k}`,
+  );
+  return response.data;
+};

src/lib/api/afterLogin/queryKeys.ts

@@ -8,4 +8,5 @@ export const QUERY_KEYS = {
   MEMBERS: (roomId: RoomId) => ['members', roomId],
   DM_ROOMS: ['dmRooms'],
   DM_CHATS: (currentChannelPath: IChannelPath) => ['chats', currentChannelPath],
+  ROOM_RECOMMENDATION: (value: string) => ['roomRecommendation', value],
 };

src/pages/ExplorePage.tsx

@@ -1,8 +1,9 @@
 import ExploreMenu from '@/components/explore/ExploreMenu';
-import ExploreBody from '@/components/explore/exploreBody/ExploreBody';
-import ExploreSearch from '@/components/explore/exploreHeader/ExploreSearch';
+import ExploreHome from '@/components/explore/Home';
+import Recommend from '@/components/explore/Recommend';
 import { Box } from '@chakra-ui/react';
 import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 const ExplorePage = ({
   setMenu,
@@ -13,10 +14,12 @@ const ExplorePage = ({
     setMenu(<ExploreMenu />);
   }, []);
 
+  const [searchParams] = useSearchParams();
+  const keyword = searchParams.get('keyword');
+
   return (
     <Box flex={1} bg={'gray.600'}>
-      <ExploreSearch />
-      <ExploreBody />
+      {keyword ? <Recommend keyword={keyword} /> : <ExploreHome />}
     </Box>
   );
 };