TeamPiickle · joohaem · Jul 22, 2022 · Jul 21, 2022 · Jul 21, 2022 · Jul 22, 2022
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "axios": "^0.26.0",
+    "qs": "^6.11.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-range": "^1.8.13",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,9 +2,8 @@
 <html lang="ko">
   <head>
     <meta charset="utf-8" />
-    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
-    <link rel="icon" href="www.piickle.link" />
-    <link rel="favicon" href="../src/asset/image/favicon-96x96.png" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="favicon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -20,18 +19,17 @@
 
   <!-- 구글 사이트 등록 -->
   <!-- <meta name="google-site-verification" content="0RPXb4zNEZ0EqIyVxmEuJIgNVg46GEQ4ej-o8RQIf4A" /> -->
-  <!-- 네이버 사이트 등록 -->
-  <!-- <meta name="naver-site-verification" content="0fb581e72c635a438e442262152cd8a5318886a4" /> -->
+  <meta name="naver-site-verification" content="9a8c5ca76d6e313ad212de30ccc608c95ebf17b7" />
 
   <meta property="og:type" content="website" />
   <meta property="og:url" content="www.piickle.link" />
   <meta property="og:title" content="내게 필요한 대화주제 추천, Piickle" />
   <meta property="og:description" content="대화주제 추천, Piickle" />
-  <meta property="og:image" content="" />
+  <meta property="og:image" content="https://piiklebucket11.s3.ap-northeast-2.amazonaws.com/mainbanner01.jpg" />
   <meta property="twitter:card" content="summary">
   <meta property="twitter:title" content="내게 필요한 대화주제 추천, Piickle">
   <meta property="twitter:description" content="대화주제 추천, Piickle">
-  <meta property="twitter:image" content="">
+  <meta property="twitter:image" content="https://piiklebucket11.s3.ap-northeast-2.amazonaws.com/mainbanner01.jpg">
 
   <link rel="canonical" href="www.piickle.link"/>
 

diff --git a/src/asset/image/banner_1.jpg b/src/asset/image/banner_1.jpg
diff --git a/src/asset/image/banner_2.jpg b/src/asset/image/banner_2.jpg
diff --git a/src/asset/image/banner_3.jpg b/src/asset/image/banner_3.jpg
diff --git a/src/asset/image/banner_4.jpg b/src/asset/image/banner_4.jpg
diff --git a/src/asset/image/favicon-96x96.png b/src/asset/image/favicon-96x96.png
diff --git a/src/asset/image/index.tsx b/src/asset/image/index.tsx
@@ -1,5 +1,7 @@
+export { default as ImgBanner1 } from "./banner_1.jpg";
+export { default as ImgBanner2 } from "./banner_2.jpg";
+export { default as ImgBanner3 } from "./banner_3.jpg";
+export { default as ImgBanner4 } from "./banner_4.jpg";
 export { default as ImgCategoryBanner } from "./categoryBanner.png";
 export { default as ImgDefaultProfile } from "./defaultProfile.png";
-export { default as ImgBanner1 } from "./mainbanner01.jpg";
-export { default as ImgBanner2 } from "./mainbanner02.jpg";
 export { default as ImgPiickleLoading } from "./piickleLoading.gif";
diff --git a/src/asset/image/mainbanner01.jpg b/src/asset/image/mainbanner01.jpg
diff --git a/src/asset/image/mainbanner02.jpg b/src/asset/image/mainbanner02.jpg
diff --git a/src/components/CardCollection/Card/LastCard/index.tsx b/src/components/CardCollection/Card/LastCard/index.tsx
@@ -10,7 +10,7 @@ export default function LastCard() {
         나누셨나요?
       </St.ContentTitle>
       <St.Content>
-        오른쪽에서 왼쪽으로 스와이핑 해서
+        화살표를 터치해서
         <br />
         새로운 대화 주제를 둘러보세요
       </St.Content>

diff --git a/src/components/CardCollection/FilterModal/index.tsx b/src/components/CardCollection/FilterModal/index.tsx
@@ -44,8 +44,19 @@ export default function FilterModal(props: FilterModalProps) {
     });
     closeHandler();
 
+    // 남 -> 남자, 여 -> 여자
+    const tempCheckedTags = new Set([...checkedTags]);
+    if (tempCheckedTags.has("남")) {
+      tempCheckedTags.delete("남");
+      tempCheckedTags.add("남자");
+    }
+    if (tempCheckedTags.has("여")) {
+      tempCheckedTags.delete("여");
+      tempCheckedTags.add("여자");
+    }
+
     // 태그 정보 저장
-    const _checkedTagsArr = [...checkedTags];
+    const _checkedTagsArr = [...tempCheckedTags];
     _checkedTagsArr.push(intimacyTags[intimacyValues[0]]);
     setFilterTags({ tags: _checkedTagsArr, intimacy: [intimacyValues[0]], isActive: true });
 

diff --git a/src/components/Main/Banner/index.tsx b/src/components/Main/Banner/index.tsx
@@ -4,21 +4,29 @@ import "slick-carousel/slick/slick-theme.css";
 import { useState } from "react";
 import Slider from "react-slick";
 
-import { ImgBanner1, ImgBanner2 } from "../../../asset/image";
+import { ImgBanner1, ImgBanner2, ImgBanner3, ImgBanner4 } from "../../../asset/image";
 import { St } from "./style";
 
 type BannerImage = {
   src: string;
   alt: string;
 };
-const BannerImage: BannerImage[] = [
+const bannerImage: BannerImage[] = [
   {
-    src: "https://piiklebucket11.s3.ap-northeast-2.amazonaws.com/mainbanner01.jpg",
-    alt: "피클 소개 이미지",
+    src: ImgBanner1,
+    alt: "지금 내게 필요한 대화주제 추천 서비스 피클 시작하기",
   },
   {
-    src: "https://piiklebucket11.s3.ap-northeast-2.amazonaws.com/mainbanner02.jpg",
-    alt: "피클 소개 이미지",
+    src: ImgBanner2,
+    alt: "헬로우 피클 피플",
+  },
+  {
+    src: ImgBanner3,
+    alt: "무드 피클",
+  },
+  {
+    src: ImgBanner4,
+    alt: "렛츠 피클",
   },
 ];
 
@@ -39,13 +47,15 @@ export default function Banner() {
   return (
     <St.BannerSlider>
       <Slider {...settings}>
-        {BannerImage.map((img, index) => (
+        {bannerImage.map((img, index) => (
           <St.ImageWrapper key={index} src={img.src} alt={img.alt} />
         ))}
       </Slider>
 
       <St.ContentsPages>
-        <St.CurrentPage>{currentSlide + 1} / 2</St.CurrentPage>
+        <St.CurrentPage>
+          {currentSlide + 1} / {bannerImage.length}
+        </St.CurrentPage>
       </St.ContentsPages>
     </St.BannerSlider>
   );

diff --git a/src/components/MyPage/MyInfo/index.tsx b/src/components/MyPage/MyInfo/index.tsx
@@ -40,7 +40,7 @@ export default function MyInfo() {
 
     const selectedImg = e.target.files[0];
     const formData = new FormData();
-    formData.append("img", selectedImg);
+    formData.append("file", selectedImg);
     console.log(formData);
 
     handlePatch(formData);

diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 
 import { St } from "./style";
 
@@ -8,7 +8,7 @@ export default function Footer() {
 
   type serviceInfo = {
     title: string;
-    detail: string;
+    detail: string | ReactElement;
   };
 
   const ServiceInfo: serviceInfo[] = [
@@ -18,11 +18,11 @@ export default function Footer() {
     },
     {
       title: "Info",
-      detail: "공식 노션 바로가기",
+      detail: <a href="https://www.notion.so/piickle-a44992440f3b4e808a175f7fc1a4fe25">공식 노션 바로가기</a>,
     },
     {
       title: "Instagram",
-      detail: "piickle_official",
+      detail: <a href="https://www.instagram.com/piickle_official/">@piickle_official</a>,
     },
   ];
 

diff --git a/src/components/common/Loading/index.tsx b/src/components/common/Loading/index.tsx
@@ -1,5 +1,4 @@
 import { ImgPiickleLoading } from "../../../asset/image";
-import Header from "../Header";
 import { St } from "./style";
 
 interface LoadingProps {
@@ -11,7 +10,6 @@ export default function Loading(props: LoadingProps) {
 
   return (
     <St.Root backgroundcolor={backgroundColor}>
-      <Header />
       <St.ImageWrapper>
         <img src={ImgPiickleLoading} alt="피클 로딩" />
       </St.ImageWrapper>

diff --git a/src/core/api/cardCollection.ts b/src/core/api/cardCollection.ts
@@ -1,3 +1,5 @@
+import qs from "qs";
+
 import { realReq } from "./common/axios";
 import { PATH } from "./common/constants";
 
@@ -13,13 +15,14 @@ function fetchCardsWithBest<T>() {
 
 // 필터로 카드 리스트 조회
 function fetchCardsWithFilter<T>(types: string[]) {
-  let params = "?search=태그";
-
-  types.forEach((type) => {
-    params += `&search=${type}`;
-  });
+  const searchParams = qs.stringify(
+    {
+      search: types.length === 0 ? ["태그"] : types,
+    },
+    { arrayFormat: "repeat" },
+  );
 
-  return realReq.GET<T>(`${PATH.CATEGORIES}/cards${params}`);
+  return realReq.GET<T>(`${PATH.CATEGORIES}/cards?${searchParams}`);
 }
 
 // 북마크 생성

diff --git a/src/core/api/common/axios.ts b/src/core/api/common/axios.ts
@@ -21,8 +21,8 @@ export const realReq = {
     return real.get(path);
   },
 
-  async GET<T>(path: string) {
-    const data = await real.get<T>(path);
+  async GET<T>(path: string, option?: { params: string }) {
+    const data = await real.get<T>(path, option);
     return data.data;
   },
 

diff --git a/src/style/globalStyle.ts b/src/style/globalStyle.ts
@@ -59,6 +59,8 @@ export const GlobalStyle = createGlobalStyle`
     box-sizing: border-box;
   } 
   html {
+    scroll-behavior: smooth;
+
     font-family: sans-serif;
     font-size: 62.5%;
     user-select: none;

diff --git a/yarn.lock b/yarn.lock
@@ -12275,7 +12275,7 @@ qs@6.10.3:
   dependencies:
     side-channel "^1.0.4"
 
-qs@^6.10.0:
+qs@^6.10.0, qs@^6.11.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
   integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==