Merge pull request #129 from kakao-tech-campus-2nd-step3/fix/#127-api…

…-bugs

검색 리팩토링, API 관련 버그 수정 #126 #127

package.json

@@ -27,6 +27,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react-hook-form": "^7.53.1",
+    "react-masonry-css": "^1.0.16",
     "react-router-dom": "^6.26.2",
     "sockjs-client": "^1.6.1",
     "swiper": "^11.1.14",

src/apis/fetchInstance.ts

@@ -12,6 +12,7 @@ const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
     },
   });
 
+  // todo: 검색 등은 토큰 넣지 말기
   // API 요청 시마다 최신 토큰을 가져옴
   instance.interceptors.request.use((config) => {
     const token = localStorage.getItem('accessToken');

src/apis/products/useGetFeed.ts

@@ -20,9 +20,8 @@ type GetFeedResponse = {
 async function getFeed(size: number): Promise<GetFeedResponse> {
   try {
     const response = await fetchInstance().get(`/products/feed?size=${size}`);
-    // console.log('getFeed response: ', response);
 
-    return response.data;
+    return response.data.data;
   } catch (error) {
     if (isAxiosError(error)) {
       if (error.response) {

src/components/common/CategoryTabBar/index.tsx

@@ -2,6 +2,8 @@ import { Z_INDEX } from '@/styles/constants';
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
 
+import { HEIGHTS } from '@/styles/constants';
+
 type TapWrapperProps = {
   isActive: boolean;
 };
@@ -41,13 +43,12 @@ export default CategoryTabBar;
 
 const Wrapper = styled.div`
   z-index: ${Z_INDEX.Header};
-  position: fixed;
+  position: sticky;
+  top: ${HEIGHTS.HEADER};
   width: 100%;
   height: 41px;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
   border-bottom: 1px solid var(--color-gray-md);
   background: var(--color-white);
   font-size: var(--font-size-sm);
@@ -57,9 +58,11 @@ const Wrapper = styled.div`
 const TabWrapper = styled.div<TapWrapperProps>`
   width: 100%;
   height: 100%;
-  padding: 11px;
   cursor: pointer;
   text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   color: ${({ isActive }) => (isActive ? 'var(--color-black)' : 'var(--color-gray-dk)')};
   border-bottom: ${({ isActive }) => (isActive ? '2px solid var(--color-black)' : 'none')};

src/components/common/Chip/index.tsx

@@ -1,21 +1,23 @@
 import styled from '@emotion/styled';
-
-import CancelDefault from '@/assets/icons/cancel-default.svg?react';
 import { useNavigate } from 'react-router-dom';
 
+import CancelIcon from '@/assets/icons/cancel-filled.svg?react';
+import { RouterPath } from '@/routes/path';
+
 interface ChipProps {
   tag: string;
-  onClick: () => void;
+  onDeleteClick: () => void;
 }
 
-const Chip = ({ tag, onClick }: ChipProps) => {
+const Chip = ({ tag, onDeleteClick }: ChipProps) => {
   const navigate = useNavigate();
+
   return (
     <Wrapper>
-      <button onClick={() => navigate(`/results?query=${tag}`)}>{tag}</button>
-      <CancelIconButton onClick={onClick}>
-        <CancelDefault />
-      </CancelIconButton>
+      <a onClick={() => navigate(`/${RouterPath.results}?query=${tag}`)}>{tag}</a>
+      <DeleteButton onClick={onDeleteClick}>
+        <CancelIcon />
+      </DeleteButton>
     </Wrapper>
   );
 };
@@ -26,28 +28,21 @@ const Wrapper = styled.div`
   border: 1px solid var(--color-gray-md);
   border-radius: var(--border-radius);
   font-size: var(--font-size-sm);
-  padding: 0.6rem;
-  gap: 0.6rem;
-  height: 2.3rem;
+  background-color: var(--color-white);
+  padding: 4px 8px;
+  gap: 6px;
   display: inline-flex;
   align-items: center;
-  justify-content: space-between;
 `;
 
-const CancelIconButton = styled.button`
-  cursor: pointer;
-  width: 15px;
-  height: 15px;
-  background-color: var(--color-white);
+const DeleteButton = styled.button`
+  width: 14px;
+  height: 14px;
   transition: fill 0.3s ease;
 
-  & svg {
+  svg {
     width: 100%;
     height: 100%;
-  }
-
-  &:hover {
-    stroke: var(--color-black);
-    fill: var(--color-black);
+    color: var(--color-black);
   }
 `;

src/components/common/FakeSearchBar/index.tsx

@@ -2,18 +2,17 @@ import styled from '@emotion/styled';
 
 import SearchIcon from '@/assets/icons/search.svg?react';
 import IconButton from '@/components/common/IconButton';
+import useSearchModalStore from '@/store/useSearchModalStore';
 import { HEIGHTS } from '@/styles/constants';
 
 const SEARCH_PLACEHOLDER = '작품/작가 외 검색은 #을 붙여주세요';
 
-interface FakeSearchBarProps {
-  modalOpen: () => void;
-}
+const FakeSearchBar = () => {
+  const { isModalOpen, setIsModalOpen } = useSearchModalStore();
 
-const FakeSearchBar = ({ modalOpen }: FakeSearchBarProps) => {
   return (
     <SearchBarWrapper>
-      <InputBox onClick={modalOpen}>
+      <InputBox onClick={() => setIsModalOpen(!isModalOpen)}>
         <StyledSearchIcon />
         <Input type="text" placeholder={SEARCH_PLACEHOLDER} />
       </InputBox>

src/components/common/PopularSearchItem/index.tsx

@@ -2,15 +2,15 @@ import styled from '@emotion/styled';
 import { Text } from '@chakra-ui/react';
 
 interface PopularSearchItemProps {
-  text: string;
+  name: string;
   rank: number;
 }
 
-const PopularSearchItem = ({ text, rank }: PopularSearchItemProps) => {
+const PopularSearchItem = ({ name, rank }: PopularSearchItemProps) => {
   return (
     <Wrapper>
       <Rank isTop3={rank <= 3}>{rank}</Rank>
-      <Text>#{text}</Text>
+      <Text>{name}</Text>
     </Wrapper>
   );
 };

src/components/common/ProfileImage/index.tsx

@@ -24,7 +24,9 @@ const StyledProfileImage = styled.div<{ width: number }>`
   border: 1px solid var(--color-gray-md);
   background-color: var(--color-gray-lt);
 
-  .img {
+  img {
     object-fit: cover;
+    width: 100%;
+    height: 100%;
   }
 `;

src/components/common/SearchModal/Ad.tsx

@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+
+import { AD_LIST } from '@/constants/search';
+import * as S from './styles';
+
+const SearchAd = () => {
+  return (
+    <S.SectionWrapper>
+      <S.SectionTitle>
+        <span className="section-title-highlight">요즘 뜨는</span> 작품
+      </S.SectionTitle>
+      <AdTag>광고</AdTag>
+      <AdWrapper>
+        {AD_LIST.map((ad, index) => (
+          <AdImage key={index}>
+            <img src={ad.imageUrl} alt="Ad image" />
+          </AdImage>
+        ))}
+      </AdWrapper>
+    </S.SectionWrapper>
+  );
+};
+
+export default SearchAd;
+
+const AdWrapper = styled.div`
+  display: flex;
+  gap: 12px;
+`;
+
+const AdTag = styled.p`
+  background: var(--color-gray-md);
+  border-radius: 50px;
+  padding: 3px 7px;
+  font-size: var(--font-size-xs);
+  color: var(--color-white);
+  font-weight: 500;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+`;
+
+const AdImage = styled.div`
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  background-color: var(--color-gray-lt);
+
+  img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+`;

src/components/common/SearchModal/PopularSearch.tsx

@@ -1,63 +1,31 @@
-import { Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 import { POPULAR_SEARCH_LIST } from '@/constants/search';
-import * as G from '@/styles/globalStyles';
 import PopularSearchItem from '../PopularSearchItem';
+import * as S from './styles';
 
 const PopularSearch = () => {
-  const midPoint = Math.ceil(POPULAR_SEARCH_LIST.length / 2);
-
   return (
-    <Wrapper>
-      <TitleWrapper>
-        <TitleText>
-          <RedText>인기</RedText> 검색어
-        </TitleText>
-      </TitleWrapper>
-      <G.Grid col={2} style={{ justifyItems: 'flex-start' }}>
-        <Column>
-          {POPULAR_SEARCH_LIST.slice(0, midPoint).map((item, index) => (
-            <PopularSearchItem key={item.id} text={item.text} rank={index + 1} />
-          ))}
-        </Column>
-        <Column>
-          {POPULAR_SEARCH_LIST.slice(midPoint).map((item, index) => (
-            <PopularSearchItem key={item.id} text={item.text} rank={midPoint + index + 1} />
-          ))}
-        </Column>
-      </G.Grid>
-    </Wrapper>
+    <S.SectionWrapper>
+      <S.SectionTitle>
+        <span className="section-title-highlight">인기</span> 검색어
+      </S.SectionTitle>
+      <PopularSearchGrid>
+        {POPULAR_SEARCH_LIST.map((item, index) => (
+          <PopularSearchItem key={index} name={item} rank={index + 1} />
+        ))}
+      </PopularSearchGrid>
+    </S.SectionWrapper>
   );
 };
 
 export default PopularSearch;
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-`;
-
-const TitleWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
-const TitleText = styled(Text)`
-  color: var(--color-black, #020715);
-  font-size: var(--font-size-md);
-  font-weight: 700;
-  line-height: normal;
-`;
-
-const Column = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-`;
-
-const RedText = styled.span`
-  color: var(--color-red);
+const PopularSearchGrid = styled.div`
+  display: grid;
+  grid-auto-flow: column; // 세로 방향 배치
+  grid-template-rows: repeat(5, 1fr);
+  justify-items: flex-start;
+  gap: 8px 12px;
+  font-size: var(--font-size-sm);
 `;