검색 기능 페이지 구현

src/apis/search/searchAll.ts

@@ -0,0 +1,39 @@
+import { SEARCH_ALL_PATH } from '@/utils/api_paths'
+import axiosInstance from '../api'
+
+interface SearchResponse {
+  posts: Post[]
+  users: User[]
+}
+
+interface SearchParams {
+  query: string
+}
+
+async function searchAll({ query }: SearchParams): Promise<SearchResponse> {
+  try {
+    const response = await axiosInstance.get(`${SEARCH_ALL_PATH}/${query}`)
+    const data = response.data
+
+    const filteredPost: Post[] = data.filter(
+      (item: Post | User): item is Post => {
+        return item instanceof Object && 'title' in item
+      }
+    )
+
+    const filteredUser: User[] = data.filter(
+      (item: Post | User): item is User => {
+        return item instanceof Object && 'role' in item
+      }
+    )
+
+    return {
+      posts: filteredPost,
+      users: filteredUser
+    }
+  } catch (error) {
+    throw new Error('Error while searching')
+  }
+}
+
+export default searchAll

src/apis/search/searchUser.ts

@@ -0,0 +1,24 @@
+import { SEARCH_USERS_PATH } from '@/utils/api_paths'
+import axiosInstance from '../api'
+
+interface SearchResponse {
+  users: User[]
+}
+
+interface SearchParams {
+  query: string
+}
+
+async function searchUser({ query }: SearchParams): Promise<SearchResponse> {
+  try {
+    const response = await axiosInstance.get(`${SEARCH_USERS_PATH}/${query}`)
+
+    return {
+      users: response.data
+    }
+  } catch (error) {
+    throw new Error('Error while searching')
+  }
+}
+
+export default searchUser

src/hooks/useSearch.ts

@@ -0,0 +1,63 @@
+import { useState } from 'react'
+
+interface IUseSearch {
+  initialValue: string
+  onSearch: (value: string) => Promise<void>
+  validate?: (value: string) => string
+}
+
+const useSearch = ({ initialValue, onSearch, validate }: IUseSearch) => {
+  const [value, setValue] = useState(initialValue)
+  const [type, setType] = useState('all') // ['all', 'user']
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target
+    if (value.length > 1) setError('')
+    setValue(value)
+  }
+
+  const handleClickFilter = (type: string) => {
+    setType(type)
+  }
+
+  const handleSearch = async (
+    value: string,
+    e?: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    setIsLoading(true)
+    if (e) {
+      if (e.key === 'Enter') {
+        const newError = validate ? validate(value) : ''
+        if (newError.length === 0) {
+          await onSearch(value)
+          setValue('')
+        }
+        setError(newError)
+        setIsLoading(false)
+      }
+      return
+    }
+
+    const newError = validate ? validate(value) : ''
+    if (newError.length === 0) {
+      await onSearch(value)
+      setValue('')
+    }
+    setError(newError)
+    setIsLoading(false)
+  }
+
+  return {
+    value,
+    type,
+    error,
+    isLoading,
+    handleChange,
+    handleSearch,
+    handleClickFilter
+  }
+}
+
+export default useSearch

src/pages/search/components/CommentIcon.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+function CommentIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      height="1em"
+      width="1em"
+      {...props}>
+      <path d="M12 2A10 10 0 002 12a9.89 9.89 0 002.26 6.33l-2 2a1 1 0 00-.21 1.09A1 1 0 003 22h9a10 10 0 000-20zm0 18H5.41l.93-.93a1 1 0 000-1.41A8 8 0 1112 20z" />
+    </svg>
+  )
+}
+
+export default CommentIcon

src/pages/search/components/Filter.tsx

@@ -0,0 +1,34 @@
+import tw, { styled } from 'twin.macro'
+
+const FilterContainer = styled.div`
+  ${tw`flex items-center gap-3`}
+`
+
+const FilterItem = styled.button(({ isSelected }) => [
+  tw`rounded-3xl bg-[#eee] text-brand-primary py-2 px-4 font-bold`,
+  isSelected && tw`bg-brand-primary text-white`
+])
+
+interface FilterProps {
+  selectedFilterItem: 'user' | 'all'
+  onClickFilter: (type: 'user' | 'all') => void
+}
+
+const Filter = ({ selectedFilterItem, onClickFilter }: FilterProps) => {
+  return (
+    <FilterContainer>
+      <FilterItem
+        onClick={() => onClickFilter('all')}
+        isSelected={selectedFilterItem === 'all'}>
+        전체
+      </FilterItem>
+      <FilterItem
+        onClick={() => onClickFilter('user')}
+        isSelected={selectedFilterItem === 'user'}>
+        사용자
+      </FilterItem>
+    </FilterContainer>
+  )
+}
+
+export default Filter

src/pages/search/components/FilteredList.tsx

@@ -0,0 +1,73 @@
+import tw, { styled } from 'twin.macro'
+import FilteredUser from './FilteredUser'
+import FilteredPost from './FilteredPost'
+import NoResult from './NoResult'
+
+interface FilteredListProps {
+  type: 'user' | 'all'
+  users?: User[]
+  posts?: Post[]
+  isSearched?: boolean
+}
+
+const Container = styled.div`
+  ${tw`flex flex-col gap-3 grow`}
+`
+
+const HorizontalSlide = styled.div`
+  ${tw`pb-3 flex items-center gap-3 overflow-x-scroll`}
+`
+
+const GridPostSection = styled.div`
+  ${tw`grid grid-cols-2 gap-2`}
+`
+
+const FilteredList = ({
+  type,
+  users,
+  posts,
+  isSearched
+}: FilteredListProps) => {
+  return (
+    <Container>
+      {type === 'user' &&
+        users?.map(({ image, fullName, email }) => (
+          <FilteredUser
+            image={image}
+            fullName={fullName}
+            email={email}
+          />
+        ))}
+      {type === 'all' && (
+        <>
+          <HorizontalSlide>
+            {users?.map(({ image, fullName, email }) => (
+              <FilteredUser
+                image={image}
+                fullName={fullName}
+                email={email}
+                isHidden
+              />
+            ))}
+          </HorizontalSlide>
+          {users!.length > 0 ||
+            (posts!.length > 0 && (
+              <GridPostSection>
+                {posts?.map(({ image, title, comments, likes }) => (
+                  <FilteredPost
+                    thumbnail={image}
+                    title={title}
+                    commentsNum={comments.length}
+                    likesNum={likes.length}
+                  />
+                ))}
+              </GridPostSection>
+            ))}
+        </>
+      )}
+      {isSearched && users!.length === 0 && posts!.length === 0 && <NoResult />}
+    </Container>
+  )
+}
+
+export default FilteredList

src/pages/search/components/FilteredPost.tsx

@@ -0,0 +1,98 @@
+import tw, { styled } from 'twin.macro'
+import CommentIcon from './CommentIcon'
+import HeartIcon from './HeartIcon'
+import { useCallback } from 'react'
+
+interface FilteredPostProps {
+  thumbnail?: string
+  title: string
+  commentsNum: number
+  likesNum: number
+}
+
+const Container = styled.section`
+  ${tw`h-[280px]`}
+`
+
+const Wrapper = styled.div`
+  ${tw`relative h-full rounded-xl overflow-hidden shadow-md`}
+`
+
+const Content = styled.div`
+  ${tw`absolute w-3/4 bottom-2 left-2 p-3 bg-white/30 backdrop-blur-md rounded-lg`}
+`
+
+const Title = styled.h1`
+  ${tw`w-full text-[14px] font-bold truncate`}
+`
+
+const Social = styled.div`
+  ${tw`flex items-center gap-2 text-xs`}
+`
+
+const SocialButton = styled.button`
+  ${tw`flex items-center gap-1`}
+`
+
+const Thumbnail = styled.div`
+  ${tw`w-full h-full flex justify-center items-center`}
+`
+
+const FilteredPost = ({
+  thumbnail,
+  title,
+  commentsNum,
+  likesNum
+}: FilteredPostProps) => {
+  const formatTitle = useCallback((title: string) => {
+    if (title === '[object FormData]') {
+      return 'FormData 형식 오류'
+    } else {
+      const tmp = JSON.parse(title)
+      if (tmp === 'undefined') {
+        return title
+      } else {
+        return tmp.title
+      }
+    }
+  }, [])
+
+  return (
+    // TODO: 추후 라우터를 이용하여 해당 포스트의 상세 페이지로 이동하는 기능 추가
+    <Container>
+      <Wrapper>
+        <Thumbnail>
+          {thumbnail && (
+            <img
+              src={thumbnail}
+              alt="썸네일"
+              className="bg-cover rounded-xl"
+            />
+          )}
+          {!thumbnail && (
+            <img
+              src={'src/assets/NoThumbnail.png'}
+              alt="썸네일"
+              className="w-20 h-20 rounded-xl"
+            />
+          )}
+        </Thumbnail>
+        <Content>
+          <Title>{formatTitle(title)}</Title>
+          <Social>
+            <SocialButton>
+              <CommentIcon />
+              <span>{commentsNum}</span>
+            </SocialButton>
+            <SocialButton>
+              <HeartIcon />
+              <span>{likesNum}</span>
+            </SocialButton>
+          </Social>
+        </Content>
+      </Wrapper>
+    </Container>
+  )
+}
+
+export default FilteredPost