Merge remote-tracking branch 'origin/develop' into feature/#102

.eslintrc.json

@@ -1,49 +1,42 @@
 {
-	"env": {
-		"browser": true,
-		"es6": true
-	},
-	"extends": [
-		"airbnb",
-		"airbnb/hooks",
-		"airbnb-typescript"
-	],
-	"globals": {
-		"Atomics": "readonly",
-		"SharedArrayBuffer": "readonly"
-	},
-	"parser": "@typescript-eslint/parser",
-	"parserOptions": {
-		"ecmaFeatures": {
-			"jsx": true
-		},
-		"ecmaVersion": 2018,
-		"project": "./tsconfig.json"
-	},
-	"plugins": [
-		"react",
-		"@typescript-eslint"
-	],
-	"rules": {
-		"react/react-in-jsx-scope": "off",
-		"linebreak-style" : "off",
-		"react/jsx-props-no-spreading": "off",
-		"react/require-default-props": "off",
-		"no-restricted-imports": [
-			"error",
-			{
-				"patterns": [
-					{
-						"group": ["../../*"],
-						"message": "Usage of relative parent imports is not allowed."
-					}
-				]
-			}
-		]
-	},
-	"settings": {
-		"import/resolver": {
-			"typescript": {}
-		}
-	}
-}
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": ["airbnb", "airbnb/hooks", "airbnb-typescript"],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "linebreak-style": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/require-default-props": "off",
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          {
+            "group": ["../../*"],
+            "message": "Usage of relative parent imports is not allowed."
+          }
+        ]
+      }
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {}
+    }
+  }
+}

.stylelint.json

@@ -1,12 +1,8 @@
 {
-  "extends": [
-    "stylelint-config-standard-scss"
-  ],
-  "plugin": [
-    "stylelint-selector-bem-pattern"
-  ],
+  "extends": ["stylelint-config-standard-scss"],
+  "plugin": ["stylelint-selector-bem-pattern"],
   "rules": {
     "selector-class-pattern": null,
     "color-hex-length": null
   }
-}
+}

src/App.tsx

@@ -23,6 +23,7 @@ import Notice from 'pages/Notice';
 import KakaoLogin from 'pages/Auth/OAuth/KakaoLogin';
 import NaverLogin from 'pages/Auth/OAuth/NaverLogin';
 import GoogleLogin from 'pages/Auth/OAuth/GoogleLogin';
+import NotFoundPage from 'pages/Search/components/NotFoundPage';
 import FollowProfile from 'pages/Follow/components/FollowProfile';
 
 export default function App(): JSX.Element {
@@ -32,6 +33,7 @@ export default function App(): JSX.Element {
         <Route path="/" element={<DefaultLayout />}>
           <Route path="/search" element={<Search />} />
           <Route path="/search/:keyword" element={<SearchDetails />} />
+          <Route path="/search/not-found" element={<NotFoundPage />} />
           <Route path="/inquiry" element={<Inquiry />} />
           <Route path="/myinquiry" element={<Myinquiry />} />
           <Route path="/notice" element={<Notice />} />

src/api/search/entity.ts

@@ -0,0 +1,41 @@
+export interface FetchTrendingsResponse {
+  trendings: string[]
+}
+
+export interface SearchQueryParams {
+  searchText : string;
+}
+
+export interface ShopsParams {
+  keyword: string;
+  location: Coords;
+}
+
+export interface FetchShopsResponse {
+  content: Shop[];
+}
+
+interface Shop {
+  address: string,
+  dist: 0,
+  placeId: string,
+  placeName: string,
+  score: number,
+  shopId: number,
+  x: string,
+  y: string,
+}
+
+export interface Coords {
+  latitude: number,
+  longitude: number
+}
+
+export interface FetchAutoCompleteParams {
+  query: string;
+  location?: Coords;
+}
+
+export interface FetchAutoCompleteResponse {
+  data: string[];
+}

src/api/search/index.ts

@@ -0,0 +1,33 @@
+import {
+  FetchShopsResponse,
+  FetchTrendingsResponse,
+  ShopsParams,
+  FetchAutoCompleteParams,
+  FetchAutoCompleteResponse,
+} from './entity';
+import searchApi from './searchApiClient';
+
+export const fetchTrendings = () => searchApi.get<FetchTrendingsResponse>('/trending');
+
+export const fetchShop = (shopId: string) => searchApi.get(`/shop?place_id=${shopId}`);
+
+export const fetchShops = (params: ShopsParams) => {
+  const { keyword, location } = params;
+  const url = `/shops?keyword=${keyword}`;
+  const requestBody = {
+    x: location?.latitude,
+    y: location?.longitude,
+  };
+
+  return searchApi.post<FetchShopsResponse>(url, requestBody);
+};
+
+export const fetchAutoComplete = (params: FetchAutoCompleteParams) => {
+  const { query, location } = params;
+  const url = `/shops/auto-complete?query=${query}`;
+  const requestBody = {
+    x: location?.latitude,
+    y: location?.longitude,
+  };
+  return searchApi.post<FetchAutoCompleteResponse>(url, requestBody);
+};

src/api/search/searchApiClient.ts

@@ -0,0 +1,18 @@
+import axios from 'axios';
+import { API_PATH } from 'config/constants';
+
+const searchApi = axios.create({
+  baseURL: `${API_PATH}`,
+  timeout: 2000,
+});
+
+searchApi.interceptors.request.use(
+  (config) => {
+    const accessToken = sessionStorage.getItem('accessToken');
+    // eslint-disable-next-line no-param-reassign
+    if (config.headers && accessToken) config.headers.Authorization = `Bearer ${accessToken}`;
+    return config;
+  },
+);
+
+export default searchApi;

src/pages/Search/components/NotFoundPage/NotFoundPage.module.scss

@@ -0,0 +1,37 @@
+@use "src/utils/styles/mediaQuery.scss" as media;
+
+.not-found-page__container {
+  padding-top: 180px;
+  max-width: 980px;
+  margin: 0 auto;
+
+  &__title {
+    width: 544px;
+    height: 100px;
+    color: #000;
+    font-family: SUIT, system-ui;
+    font-size: 40px;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  &__description {
+    margin-top: 22px;
+    width: 240px;
+    height: 30px;
+    color: #666;
+    font-family: SUIT, system-ui;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  &__image {
+    display: flex;
+    margin-left: auto;
+    margin-top: 55px;
+    width: 676px;
+    height: 451px;
+  }
+}

src/pages/Search/components/NotFoundPage/index.tsx

@@ -0,0 +1,23 @@
+import styles from 'pages/Search/components/NotFoundPage/NotFoundPage.module.scss';
+import img from 'assets/images/search/not-found-img.jpeg';
+
+export default function NotFoundPage() {
+  return (
+    <section>
+      <div className={styles['not-found-page__container']}>
+        <div className={styles['not-found-page__container__title']}>
+          해당 검색어와 관련된
+          {' '}
+          <br />
+          {' '}
+          음식점/게시물을 찾을 수 없습니다.
+        </div>
+        <div className={styles['not-found-page__container__description']}>
+          <div className="not-found-page__container__description__text">다시 한 번 검색해 보세요!</div>
+        </div>
+        <img className={styles['not-found-page__container__image']} src={img} alt="not-found" />
+      </div>
+    </section>
+
+  );
+}

src/pages/Search/components/RelatedSearches/RelatedSearches.module.scss

@@ -2,20 +2,31 @@
 
 .search {
   width: 100%;
-  height: 100vh;
   font-size: 32px;
+  position: relative;
 
   @include media.media-breakpoint-up(mobile) {
     max-width: 767px;
     margin: 0 auto;
   }
 }
 
-// 검색창 결과 리스트
 .search-related-list {
-  height: calc(100vh - 180px);
+  position: absolute;
+  width: 890px;
   overflow: scroll;
   padding-top: 24px;
+  background-color: white;
+  border-radius: 24px;
+  box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%);
+  padding-bottom: 15px;
+  top: -40px;
+  left: 15px;
+  z-index: 1;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   &__wrapper {
     text-decoration-line: none;
@@ -25,18 +36,52 @@
   &__item {
     display: flex;
     justify-content: space-between;
-    font-size: 14px;
-    height: 34px;
+    font-size: 20px;
+    height: 48px;
     padding-left: 52px;
     padding-right: 57.14px;
     align-items: center;
     cursor: pointer;
 
     &:hover {
       background: #eeeeee;
+      border-radius: 24px;
+      color: #ff7f23;
     }
   }
 
+  &__title {
+    display: flex;
+  }
+
+  &__icon {
+    display: flex;
+    margin-right: 16px;
+  }
+
+  &__autoController {
+    display: flex;
+    flex-direction: row-reverse;
+    margin-top: 25px;
+    align-items: center;
+  }
+
+  &__autoButtonTitle {
+    display: flex;
+    font-size: 20px;
+    color: #ff7f23;
+    padding: 24px 40px 18px 13px;
+
+    &.active {
+      color: #c4c4c4;
+    }
+  }
+
+  &__toggleButton {
+    display: flex;
+    padding-top: 8px;
+  }
+
   &__text--not-found {
     word-break: keep-all;
     width: 275px;