Merge pull request #102 from DevKor-github/feat/#97/filter-control

[#97] 필터 만들기 1편

Author: halionaz

package.json

@@ -20,6 +20,7 @@
     "date-fns": "^4.1.0",
     "mingcute_icon": "^2.9.6",
     "motion": "^12.23.3",
+    "qs": "^6.14.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.6.3",
@@ -32,6 +33,7 @@
     "@pandacss/dev": "^0.53.7",
     "@tanstack/eslint-plugin-query": "^5.78.0",
     "@types/node": "^24.0.13",
+    "@types/qs": "^6.14.0",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
@@ -56,4 +58,4 @@
       "eslint --fix"
     ]
   }
-}
+}

src/common/components/Drawer/DrawerBody.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState, type PropsWithChildren } from 'react';
 import { cx } from '@styled-system/css';
-import { motion, type PanInfo } from 'framer-motion';
+import { motion, type PanInfo } from 'motion/react';
 
 import * as s from './style.css';
 
@@ -44,7 +44,7 @@ const DrawerBody = ({ children, title, description, close }: DrawerBodyProps) =>
       className={s.Container}
       drag={'y'}
       dragConstraints={{ top: 0, bottom: 0 }}
-      transition={{ duration: 0.2 }}
+      transition={{ duration: 0.35 }}
       dragElastic={0.4}
       variants={{
         opened: { top: `calc(100dvh - ${height}px)` },
@@ -55,15 +55,15 @@ const DrawerBody = ({ children, title, description, close }: DrawerBodyProps) =>
       exit={'closed'}
       onDragEnd={onDragEnd}
     >
-      <header className={s.Header}>
-        <div className={s.HeaderTitle}>
-          <span className={s.Title}>{title}</span>
-          {description && <span className={s.Description}>{description}</span>}
-        </div>
-        <button className={cx('mgc_close_line', s.CloseButton)} onClick={close} />
-      </header>
-      <div ref={contentRef} className={s.Content}>
-        {children}
+      <div ref={contentRef} className={s.Wrapper}>
+        <header className={s.Header}>
+          <div className={s.HeaderTitle}>
+            <span className={s.Title}>{title}</span>
+            {description && <span className={s.Description}>{description}</span>}
+          </div>
+          <button className={cx('mgc_close_line', s.CloseButton)} onClick={close} />
+        </header>
+        <div className={s.Content}>{children}</div>
       </div>
     </motion.div>
   );

src/common/components/Drawer/style.css.ts

@@ -11,7 +11,7 @@ export const BackLayerStyle = css({
 });
 
 export const Container = css({
-  pos: 'fixed',
+  pos: 'absolute',
   top: '100dvh',
   left: 0,
   w: 'full',
@@ -24,6 +24,10 @@ export const Container = css({
   flexDir: 'column',
   borderTop: '1px solid {colors.systemGray4}',
   boxShadow: '0px 0px 30px 0px rgba(0, 0, 0, 0.25)',
+});
+
+export const Wrapper = css({
+  w: 'full',
   pt: '1.5rem',
   pb: '2.625rem',
 });

src/common/components/SelectButton/style.css.ts

@@ -14,6 +14,7 @@ export const Container = cva({
     color: '100',
     border: '1px solid',
     lineHeight: '0.87788rem',
+    flexShrink: 0,
   },
   variants: {
     active: {

src/common/utils/client.ts

@@ -1,3 +1,4 @@
+import qs from 'qs';
 import axios, { AxiosError } from 'axios';
 
 const client = axios.create({
@@ -6,6 +7,8 @@ const client = axios.create({
     'Content-Type': 'application/json',
   },
   withCredentials: true,
+  // 같은 쿼리 파라미터를 배열로 감싸 중복해서 보내기위해서 qs 사용
+  paramsSerializer: params => qs.stringify(params, { arrayFormat: 'repeat' }),
 });
 
 const REFRESH_URL = '/api/v1/refresh-token';

src/features/home/components/DatePickButton/DatePicker.tsx

@@ -0,0 +1,18 @@
+// TODO: 디자인 확정나면 구현
+// 이거 근데 Pick 페이지랑 공유될 거 같음
+// 개발 진척도 보고 Common으로 빼든가 하기
+
+import * as s from './style.css';
+
+const DatePicker = () => {
+  return (
+    <div className={s.DatePickerContainer}>
+      <h1>대충 달력</h1>
+      <p>일년은삼백육십오일일년은삼백육십오일</p>
+      <p>일년은삼백육십오일일년은삼백육십오일</p>
+      <p>일년은삼백육십오일일년은삼백육십오일</p>
+      <p>사실은삼백육십오일쩜이사이이일</p>
+    </div>
+  );
+};
+export default DatePicker;

src/features/home/components/DatePickButton/index.tsx

@@ -0,0 +1,22 @@
+import { cx } from '@styled-system/css';
+import * as s from './style.css';
+import useDrawer from '@/common/hooks/useDrawer';
+import Drawer from '@/common/components/Drawer';
+import DatePicker from '@/features/home/components/DatePickButton/DatePicker';
+
+const DatePickButton = () => {
+  const { open, drawerState } = useDrawer();
+  // TODO: 디자인 확정, 백엔드 API 나오면 디자인 및 로직 추가
+  return (
+    <>
+      <button className={s.Container} onClick={open}>
+        <span className={cx('mgc_calendar_fill', s.Icon)} />
+        날짜선택
+      </button>
+      <Drawer title="대여 및 반납 일자" drawerState={drawerState}>
+        <DatePicker />
+      </Drawer>
+    </>
+  );
+};
+export default DatePickButton;

src/features/home/components/DatePickButton/style.css.ts

@@ -0,0 +1,27 @@
+import { css } from '@styled-system/css';
+
+export const Container = css({
+  display: 'flex',
+  p: '0.25rem 0.625rem 0.25rem 0.5rem',
+  alignItems: 'center',
+  gap: '0.1875rem',
+  rounded: '0.625rem',
+  bg: 'systemGray5',
+  color: '100',
+  fontSize: '0.75rem',
+  fontWeight: 500,
+  lineHeight: '0.87788rem',
+});
+
+export const Icon = css({
+  fontSize: '1rem',
+});
+
+export const DatePickerContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+  alignItems: 'center',
+  px: '1rem',
+  pt: '1.875rem',
+});

src/features/home/components/Filter/FilterContents/index.tsx

@@ -0,0 +1,43 @@
+import { useSearchParams } from 'react-router';
+
+import * as s from './style.css';
+
+import { FilterTypeToList, type FilterType } from '@/features/home/types';
+import { type TagType } from '@/libs/types/item';
+import TagOptionBtn from '@/common/components/TagOptionBtn';
+
+interface Props {
+  type: FilterType;
+}
+const FilterContents = ({ type }: Props) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selected = searchParams.getAll(type) as TagType[];
+
+  const handleTOBClick = (t: TagType, isSelected: boolean) => {
+    if (isSelected) {
+      searchParams.delete(type, t);
+    } else {
+      searchParams.append(type, t);
+    }
+    setSearchParams(searchParams);
+  };
+
+  return (
+    <div className={s.Container}>
+      {type === 'price' ? (
+        <div>아 만들기 개귀찮네</div>
+      ) : (
+        <div key={type} className={s.TagOptionButtonWrapper}>
+          {FilterTypeToList[type].map(t => {
+            const isSelected = selected.includes(t);
+            return (
+              <TagOptionBtn key={t} type={t} isSelected={isSelected} onClick={() => handleTOBClick(t, isSelected)} />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FilterContents;

src/features/home/components/Filter/FilterContents/style.css.ts

@@ -0,0 +1,13 @@
+import { css } from '@styled-system/css';
+
+export const Container = css({
+  width: 'full',
+  pt: '1.3125rem',
+  height: 'full',
+});
+
+export const TagOptionButtonWrapper = css({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(2, 1fr)',
+  gap: '0.625rem',
+});