[김민찬] Sprint9

apis/getArticles.ts

@@ -22,24 +22,32 @@ interface ArticlesResponse {
   totalCount: number;
 }
 
-export interface GetArticlesProps {
-  page?: string;
+export interface GetArticlesParams {
+  page?: number;
+  size?: number;
   order?: orderType;
   keyword?: string;
-  size?: string;
 }
 
 const getArticles = async ({
-  page = '1',
+  page = 1,
   order = 'recent',
-  size = '10',
+  size = 10,
   keyword = '',
-}: GetArticlesProps): Promise<ArticlesResponse> => {
-  const { data } = await axiosInstance.get(
-    `/${ARTICLES_QUERY_KEY}?page=${page}&pageSize=${size}&orderBy=${order}&keyword=${keyword}`
-  );
+}: GetArticlesParams): Promise<ArticlesResponse> => {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    pageSize: size.toString(),
+    orderBy: order,
+    keyword,
+  });
 
-  return data;
+  try {
+    const { data } = await axiosInstance.get(`/${ARTICLES_QUERY_KEY}?${params.toString()}`);
+    return data;
+  } catch {
+    return { list: [], totalCount: 0 };
+  }
 };
 
 export default getArticles;

components/@shared/Button.tsx

@@ -12,17 +12,11 @@ interface ButtonProps {
   type?: 'submit' | 'button' | 'reset';
 }
 
-function Button({
-  children,
-  category = 'medium',
-  onClick,
-  type,
-  disabled = false,
-}: ButtonProps) {
+function Button({ children, category = 'medium', onClick, type, disabled = false }: ButtonProps) {
   return (
     <button
       className={classNames(styles.button, styles[category], {
-        [styles.disabled]: disabled
+        [styles.disabled]: disabled,
       })}
       type={type}
       onClick={onClick}

components/@shared/Header.module.scss

@@ -17,19 +17,19 @@
   background-color: var(--white);
   border-bottom: 1px solid var(--border-gray);
 
-  @media #{$tabletSize} {
+  @include tablet {
     padding: 0 24px;
   }
 
-  @media #{$mobileSize} {
+  @include mobile {
     padding: 0 16px;
   }
 
   button {
     width: 128px;
     height: 48px;
 
-    @media #{$mobileSize} {
+    @include mobile {
       width: 60px;
     }
   }

components/@shared/HeaderLinkSection.module.scss

@@ -10,7 +10,7 @@
     cursor: pointer;
   }
 
-  @media #{$mobileSize} {
+  @include mobile {
     gap: 15px;
   }
 }
@@ -21,16 +21,17 @@
   line-height: 26px;
   color: var(--cool-gray-600);
 
+  @include mobile {
+    font-size: 16px;
+  }
+
   &:not(:last-child) {
     margin-right: 32px;
-    @media #{$mobileSize} {
+
+    @include mobile {
       margin-right: 8px;
     }
   }
-
-  @media #{$mobileSize} {
-    font-size: 16px;
-  }
 }
 
 .matched {

components/@shared/HeaderLinkSection.tsx

@@ -1,29 +1,24 @@
 import logoImg from '@/public/images/home/logoAndTypo.png';
 import typoImg from '@/public/images/home/typo.png';
 import Link from 'next/link';
-import CustomImage from './CustomImage';
 import { useRouter } from 'next/router';
-import useWindowSize from '@/hooks/useWindowSize';
-import {
-  PATH_ADD_ITEM,
-  PATH_BOARDS,
-  PATH_HOME,
-  PATH_ITEMS,
-} from '@/constants/paths';
+import { PATH_ADD_ITEM, PATH_BOARDS, PATH_HOME, PATH_ITEMS } from '@/constants/paths';
 import classNames from 'classnames';
 import styles from './HeaderLinkSection.module.scss';
 import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize';
+import Image from 'next/image';
+import useInnerWidth from '@/hooks/customs/useInnerWidth';
 
 function HeaderLinkSection() {
-  const { innerWidth } = useWindowSize();
+  const innerWidth = useInnerWidth();
   const { pathname } = useRouter();
   const needLinkHeaderPaths = [PATH_BOARDS, PATH_ITEMS, PATH_ADD_ITEM];
   const isWiderMobileSize = innerWidth > DEVICE_MAX_WIDTH.mobile;
 
   return (
     <section className={classNames(styles.linkSection)}>
       <Link href={PATH_HOME}>
-        <CustomImage
+        <Image
           src={isWiderMobileSize ? logoImg : typoImg}
           alt={'로고 이미지'}
           height={isWiderMobileSize ? 51 : 40}

components/@shared/Layout.module.scss

@@ -7,7 +7,8 @@
   margin: 0 auto;
 
   padding: calc(var(--header-height) + 24px) 24px 24px 24px;
-  @media #{$mobileSize} {
+
+  @include mobile {
     padding: calc(var(--header-height) + 16px) 16px 16px 16px;
   }
 }

components/@shared/Layout.tsx

@@ -4,10 +4,13 @@ import styles from './Layout.module.scss';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 function Layout({ children }: { children: React.ReactNode }) {
+  const queryClient = new QueryClient();
   return (
     <>
       <Header />
-      <main className={classNames(styles.mainContainer)}>{children}</main>
+      <QueryClientProvider client={queryClient}>
+        <main className={classNames(styles.mainContainer)}>{children}</main>
+      </QueryClientProvider>
     </>
   );
 }

components/@shared/OrderByDropdown.module.scss

@@ -0,0 +1,68 @@
+@import '/styles/variables';
+
+.dropdownWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+
+  position: relative;
+  height: 42px;
+  width: 130px;
+
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  border-radius: 12px;
+
+  color: var(--cool-gray-800);
+  background-color: var(--white);
+  border: 1px solid var(--cool-gray-200);
+
+  cursor: pointer;
+
+  @include underTablet {
+    width: 120px;
+  }
+
+  @include mobile {
+    width: 42px;
+    border-radius: 12px;
+  }
+}
+
+.dropdownTrigger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & span {
+    width: 66px;
+  }
+}
+
+.dropdownMenu {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+
+  width: 130px;
+  height: 84px;
+  top: 46px;
+  right: 0;
+  border-radius: 12px;
+
+  background-color: var(--white);
+  border: 1px solid var(--cool-gray-200);
+
+  & li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--cool-gray-200);
+    }
+  }
+}

components/@shared/OrderByDropdown.tsx

@@ -0,0 +1,58 @@
+import styles from './OrderByDropdown.module.scss';
+import sortIcon from '@/public/images/market/sort-icon.png';
+import dropDownIcon from '@/public/images/market/order-dropdown.png';
+import { DEVICE_MAX_WIDTH } from '@/constants/mediaQuerySize';
+import Image from 'next/image';
+
+import useToggle from '@/hooks/customs/useToggle';
+import { useState } from 'react';
+import useInnerWidth from '@/hooks/customs/useInnerWidth';
+
+interface OrderByDropdownProps {
+  onMenuClick: (orderBy: string) => void;
+}
+
+const orderByList = [
+  { name: '최신순', value: 'recent' },
+  { name: '좋아요순', value: 'like' },
+];
+
+function OrderByDropdown({ onMenuClick }: OrderByDropdownProps) {
+  const innerWidth = useInnerWidth();
+  const [isDropdownOpen, toggleDropdown] = useToggle();
+  const [selectedItem, setSelectedItem] = useState(orderByList[0]);
+
+  const handleMenuClick = (event: React.MouseEvent<HTMLUListElement>) => {
+    const { name, value } = (event.target as HTMLUListElement).dataset;
+    if (name && value) {
+      onMenuClick(value);
+      setSelectedItem({ name, value });
+    }
+    toggleDropdown();
+  };
+
+  return (
+    <div className={styles.dropdownWrapper}>
+      <div className={styles.dropdownTrigger} onClick={toggleDropdown}>
+        {innerWidth > DEVICE_MAX_WIDTH.mobile && <span>{selectedItem.name}</span>}
+        <Image
+          src={innerWidth > DEVICE_MAX_WIDTH.mobile ? dropDownIcon : sortIcon}
+          alt={'드롭다운 열기 아이콘'}
+          height={24}
+          width={24}
+        />
+      </div>
+      {isDropdownOpen && (
+        <ul className={styles.dropdownMenu} onClick={handleMenuClick}>
+          {orderByList.map((item) => (
+            <li key={item.value} data-name={item.name} data-value={item.value}>
+              {item.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default OrderByDropdown;