[FE] 사용자 검색 기능 구현

frontend/src/components/ProfileCard/ProfileCard.style.tsx

@@ -4,7 +4,7 @@ export const Container = styled.div`
   display: flex;
   background-color: white;
   padding: 1rem;
-  width: 360px;
+  width: 380px;
   border-radius: 0.4rem;
   box-shadow: 4px 4px 10px ${({ theme }) => theme.colors.secondary};
 `;
@@ -20,7 +20,7 @@ export const RightSection = styled.div`
 
 export const ProfileImageWrapper = styled.div`
   position: absolute;
-  left: -5.5rem;
+  left: -6rem;
   top: 1.6rem;
   width: 9.5rem;
   height: 9.5rem;
@@ -60,7 +60,7 @@ export const UserName = styled.span``;
 export const InventoryWrapper = styled.div`
   display: flex;
   justify-content: space-between;
-  height: 5rem;
+  height: 5.2rem;
 `;
 
 export const LeftButton = styled.button`
@@ -110,7 +110,7 @@ export const ProductImage = styled.img`
 `;
 
 export const ProductTitle = styled.p`
-  font-size: 0.5rem;
+  font-size: 0.3rem;
 `;
 
 export const ProductImageWrapper = styled.div`

frontend/src/components/ProfileCard/ProfileCard.tsx

@@ -1,14 +1,48 @@
 import { useState } from 'react';
 
 import * as S from '@/components/ProfileCard/ProfileCard.style';
-import sampleProfile from '@/mocks/sample_profile.jpg';
-import sampleKeyboard from '@/mocks/sample_keyboard.jpg';
 import GithubIcon from '@/assets/github.svg';
 import Chip from '@/components/common/Chip/Chip';
 
 const DISTANCE_DIFFERENCE = 116;
 
-function ProfileCard() {
+type ProfileProduct = {
+  id: number;
+  name: string;
+  imageUrl: string;
+  reviewCount: number;
+  rating: number;
+  category: string;
+};
+
+type Props = {
+  id: number;
+  gitHubId: string;
+  imageUrl: string;
+  careerLevel: string;
+  jobType: string;
+  profileProducts: ProfileProduct[];
+};
+
+const chipMapper = {
+  frontend: '프론트엔드',
+  backend: '백엔드',
+  mobile: '모바일',
+  etc: '기타',
+  none: '경력 없음',
+  junior: '0-2년차',
+  midlevel: '3-5년차',
+  senior: '6년차 이상',
+};
+
+function ProfileCard({
+  id,
+  gitHubId,
+  imageUrl,
+  careerLevel,
+  jobType,
+  profileProducts,
+}: Props) {
   const [positionX, setPositionX] = useState(0);
 
   const handleLeftButtonClick = () => {
@@ -27,39 +61,53 @@ function ProfileCard() {
     setPositionX(positionX + DISTANCE_DIFFERENCE * -1);
   };
 
+  const keyboard = profileProducts.find(
+    (product) => product.category === 'keyboard'
+  );
+
+  console.log(keyboard);
+
   return (
     <S.Container>
       <S.LeftSection>
         <S.ProfileImageWrapper>
-          <S.ProfileImage src={sampleProfile} />
+          <S.ProfileImage src={imageUrl} />
         </S.ProfileImageWrapper>
       </S.LeftSection>
       <S.RightSection>
         <S.UserInfoWrapper>
           <S.UserNameWrapper>
-            <S.UserName>칙촉</S.UserName>
-            <GithubIcon />
+            <S.UserName>{gitHubId}</S.UserName>
+            <a
+              href={`https://github.com/${gitHubId}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <GithubIcon />
+            </a>
           </S.UserNameWrapper>
           <S.UserCareer>
             <Chip paddingTopBottom={0.2} paddingLeftRight={0.4} fontSize={0.7}>
-              0-3년차
+              {chipMapper[careerLevel]}
             </Chip>
             <Chip paddingTopBottom={0.2} paddingLeftRight={0.4} fontSize={0.7}>
-              프론트엔드
+              {chipMapper[jobType]}
             </Chip>
           </S.UserCareer>
         </S.UserInfoWrapper>
         <S.InventoryWrapper>
           <S.LeftButton onClick={handleLeftButtonClick}>{`<`}</S.LeftButton>
           <S.InventoryListWrapper>
             <S.InventoryList positionX={positionX}>
-              {['키보드', '마우스', '모니터', '거치대'].map(
-                (product, index) => {
+              {[keyboard.name, '마우스', '모니터', '거치대'].map(
+                (productCategory, index) => {
                   return (
                     <S.InventoryItem key={index}>
                       <S.ProductImageWrapper>
-                        <S.ProductImage src={sampleKeyboard}></S.ProductImage>
-                        <S.ProductTitle>{product}</S.ProductTitle>
+                        <S.ProductImage
+                          src={keyboard.imageUrl}
+                        ></S.ProductImage>
+                        <S.ProductTitle>{productCategory}</S.ProductTitle>
                       </S.ProductImageWrapper>
                     </S.InventoryItem>
                   );

frontend/src/components/ProfileSearchResult/ProfileSearchResult.style.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 3rem 12rem;
+  justify-items: center;
+  margin-top: 5rem;
+`;

frontend/src/components/ProfileSearchResult/ProfileSearchResult.tsx

@@ -0,0 +1,51 @@
+import * as S from '@/components/ProfileSearchResult/ProfileSearchResult.style';
+import AsyncWrapper from '@/components/common/AsyncWrapper/AsyncWrapper';
+import Loading from '@/components/common/Loading/Loading';
+import InfiniteScroll from '@/components/common/InfiniteScroll/InfiniteScroll';
+import ProfileCard from '@/components/ProfileCard/ProfileCard';
+
+type Props = {
+  data: ProfileSearchResult[];
+  getNextPage: () => void;
+  isLoading: boolean;
+  isReady: boolean;
+  isError: boolean;
+};
+
+function ProfileSearchResult({
+  data: profileSearchData,
+  getNextPage,
+  isLoading,
+  isReady,
+  isError,
+}: Props) {
+  const profileSearchDataList = profileSearchData.map(
+    ({ id, gitHubId, imageUrl, careerLevel, jobType, profileProducts }) => {
+      return (
+        <ProfileCard
+          id={id}
+          key={id}
+          gitHubId={gitHubId}
+          imageUrl={imageUrl}
+          careerLevel={careerLevel}
+          jobType={jobType}
+          profileProducts={profileProducts}
+        />
+      );
+    }
+  );
+
+  return (
+    <AsyncWrapper fallback={<Loading />} isReady={isReady} isError={isError}>
+      <InfiniteScroll
+        handleContentLoad={getNextPage}
+        isLoading={isLoading}
+        isError={isError}
+      >
+        <S.Container>{profileSearchDataList}</S.Container>
+      </InfiniteScroll>
+    </AsyncWrapper>
+  );
+}
+
+export default ProfileSearchResult;

frontend/src/components/SearchFilter/SearchFilter.style.tsx

@@ -12,6 +12,6 @@ export const Wrapper = styled.div`
 `;
 
 export const FilterTitle = styled.span`
-  font-size: 0.7rem;
+  font-size: 0.9rem;
   margin-right: 0.2rem;
 `;

frontend/src/components/SearchFilter/SearchFilter.tsx

@@ -1,38 +1,66 @@
 import ChipFilter from '@/components/common/ChipFilter/ChipFilter';
 import * as S from '@/components/SearchFilter/SearchFilter.style';
 
-function SearchFilter() {
+type Props = {
+  careerLevelFilter: string;
+  jobTypeFilter: string;
+  handleCareerLevelFilterClick: (e) => void;
+  handleJobTypeFilterClick: (e) => void;
+};
+
+const careerLevels = {
+  none: '경력 없음',
+  junior: '0-2년차',
+  midlevel: '3-5년차',
+  senior: '6년차 이상',
+} as const;
+
+const jobTypes = {
+  frontend: '프론트엔드',
+  backend: '백엔드',
+  mobile: '모바일',
+  etc: '기타',
+} as const;
+
+function SearchFilter({
+  careerLevelFilter,
+  jobTypeFilter,
+  handleCareerLevelFilterClick,
+  handleJobTypeFilterClick,
+}: Props) {
   return (
     <S.Container>
       <S.Wrapper>
         <S.FilterTitle>경력</S.FilterTitle>
-        <ChipFilter fontSize={10} clicked>
-          경력 없음
-        </ChipFilter>
-        <ChipFilter fontSize={10} clicked={false}>
-          0-3년차
-        </ChipFilter>
-        <ChipFilter fontSize={10} clicked={false}>
-          3-5년차
-        </ChipFilter>
-        <ChipFilter fontSize={10} clicked={false}>
-          5년차 이상
-        </ChipFilter>
+        {Object.entries(careerLevels).map(([value, content], index: number) => {
+          return (
+            <ChipFilter
+              key={index}
+              fontSize={14}
+              value={value}
+              careerLevelFilter={careerLevelFilter}
+              handleClick={handleCareerLevelFilterClick}
+            >
+              {content}
+            </ChipFilter>
+          );
+        })}
       </S.Wrapper>
       <S.Wrapper>
         <S.FilterTitle>직무</S.FilterTitle>
-        <ChipFilter fontSize={10} clicked>
-          경력 없음
-        </ChipFilter>
-        <ChipFilter fontSize={10} clicked={false}>
-          0-3년차
-        </ChipFilter>
-        <ChipFilter fontSize={10} clicked={false}>
-          3-5년차
-        </ChipFilter>
-        <ChipFilter fontSize={10} clicked={false}>
-          5년차 이상
-        </ChipFilter>
+        {Object.entries(jobTypes).map(([value, content], index: number) => {
+          return (
+            <ChipFilter
+              key={index}
+              fontSize={14}
+              value={value}
+              jobTypeFilter={jobTypeFilter}
+              handleClick={handleJobTypeFilterClick}
+            >
+              {content}
+            </ChipFilter>
+          );
+        })}
       </S.Wrapper>
     </S.Container>
   );

frontend/src/components/common/ChipFilter/ChipFilter.style.tsx

@@ -13,4 +13,8 @@ export const Button = styled.button<{
   border-radius: 2rem;
   border: none;
   font-weight: 500;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primary};
+  }
 `;

frontend/src/components/common/ChipFilter/ChipFilter.tsx

@@ -2,13 +2,28 @@ import * as S from '@/components/common/ChipFilter/ChipFilter.style';
 
 type Props = {
   fontSize: number;
-  clicked: boolean;
+  value: string;
   children: React.ReactNode;
+  careerLevelFilter?: string;
+  jobTypeFilter?: string;
+  handleClick: (e) => void;
 };
 
-function ChipFilter({ fontSize, clicked, children }: Props) {
+function ChipFilter({
+  fontSize,
+  value,
+  children,
+  careerLevelFilter,
+  jobTypeFilter,
+  handleClick,
+}: Props) {
   return (
-    <S.Button fontSize={fontSize} clicked={clicked}>
+    <S.Button
+      fontSize={fontSize}
+      clicked={careerLevelFilter === value || jobTypeFilter === value}
+      value={value}
+      onClick={handleClick}
+    >
       {children}
     </S.Button>
   );

frontend/src/components/common/HeaderNav/HeaderNav.tsx

@@ -47,6 +47,7 @@ function HeaderNav() {
           <Link to={{ pathname: ROUTES.PRODUCTS, hash: '#popular' }}>
             인기 상품 목록
           </Link>
+          <Link to={ROUTES.PROFILE_SEARCH}>다른 회원의 프로필</Link>
         </S.FlexLeftUl>
         <S.FlexRightUl>
           {isLoggedIn ? (

frontend/src/components/common/SearchBar/SearchBar.style.tsx

@@ -11,10 +11,15 @@ export const Input = styled.input`
   height: 2.8rem;
   background: #ffffff;
   outline: none;
-  border: none;
+  border: 1px solid ${({ theme }) => theme.colors.primary};
   border-radius: 1.625rem;
   padding: 0 3.5rem 0 1.5rem;
   font-size: 1rem;
+
+  &:focus {
+    border: 2px solid ${({ theme }) => theme.colors.primary};
+    transition: 0.3s linear;
+  }
 `;
 
 export const Button = styled.button`
@@ -25,3 +30,5 @@ export const Button = styled.button`
   border: none;
   outline: none;
 `;
+
+export const Form = styled.form``;