v1.0.9 업데이트 (#187)

## 💡 이슈 resolve #186 ## 🤩 개요 v1.0.9 업데이트 ## 🧑‍💻 작업 사항 [[Feat] Swiper, ImgSwiper 리팩토링, 모듈화 및 웹 접근성 개선](9597b42) ## 📖 참고 사항 공유할 내용, 레퍼런스, 추가로 발생할 것으로 예상되는 이슈, 스크린샷 등을 넣어 주세요.
SWM-re-pashion · Dec 3, 2022 · fb0fdc8 · fb0fdc8
2 parents 4897db3 + 9597b42
commit fb0fdc8
Show file tree

Hide file tree

Showing 33 changed files with 594 additions and 333 deletions.
diff --git a/src/components/MyPage/organisms/StatusMenuList/index.tsx b/src/components/MyPage/organisms/StatusMenuList/index.tsx
@@ -4,7 +4,8 @@ import { DefaultData } from '#types/index';
 import { NoService } from '@atoms/icon';
 import MenuBtn from '@molecules/MenuBtn';
 import ProductItemList from 'src/components/Shop/Organisms/ProductItemList';
-import { useDragScroll, useSearch } from 'src/hooks';
+import { useSearch } from 'src/hooks';
+import useSwiper from 'src/hooks/useSwiper';
 
 import $ from './style.module.scss';
 
@@ -19,23 +20,25 @@ function StatusMenuList(listProps: Props) {
   const { isMe, data, selectedMenu, onClick } = listProps;
   const listRef = useRef<HTMLDivElement | null>(null);
   const status = useSearch('status') || data[0].code;
-  useDragScroll(listRef);
+  useSwiper(listRef);
 
   return (
     <>
-      <div className={$['status-menu-list']} ref={listRef}>
-        {data.map(({ name, code }) => {
-          const isSelected = selectedMenu === code;
+      <div className={$['status-menu-list']}>
+        <div className={$['status-list-wrapper']} ref={listRef}>
+          {data.map(({ name, code }) => {
+            const isSelected = selectedMenu === code;
 
-          return (
-            <MenuBtn
-              value={code}
-              key={name}
-              {...{ name, onClick, isSelected }}
-              className={$['menu-btn']}
-            />
-          );
-        })}
+            return (
+              <MenuBtn
+                value={code}
+                key={name}
+                {...{ name, onClick, isSelected }}
+                className={$['menu-btn']}
+              />
+            );
+          })}
+        </div>
       </div>
       {isMe ? (
         <ProductItemList

diff --git a/src/components/MyPage/organisms/StatusMenuList/style.module.scss b/src/components/MyPage/organisms/StatusMenuList/style.module.scss
@@ -1,5 +1,8 @@
-.status-menu-list {
+.status-list-wrapper {
   overflow: hidden;
+}
+
+.status-menu-list {
   display: flex;
   margin: 41px 0 4px;
   padding: 0 23px;

diff --git a/src/components/Product/organisms/ProductDetail/index.tsx b/src/components/Product/organisms/ProductDetail/index.tsx
@@ -10,6 +10,8 @@ import ProfileInfo from 'src/components/Product/organisms/ProfileInfo';
 import { useProdutDetail } from 'src/hooks/api/product';
 import { useSearchStore } from 'src/store/useSearchStore';
 
+import $ from './style.module.scss';
+
 function ProductDetail({ id }: { id: string }) {
   const { data } = useProdutDetail(id);
   const addProduct = useSearchStore(
@@ -33,7 +35,7 @@ function ProductDetail({ id }: { id: string }) {
       />
       <ProfileInfo {...{ userId, profileImage, name, title: basic.title }} />
 
-      <section style={{ padding: '16px 23px 20px' }}>
+      <section className={$['product-detail-wrapper']}>
         <ProductBasic basic={basic} {...{ id, isMe, isSoldOut }} />
         <ProductNotice sellerNotice={sellerNotice} />
         {measure && <ProductSize size={measure} kind={basic.classification} />}

diff --git a/src/components/Product/organisms/ProductDetail/style.module.scss b/src/components/Product/organisms/ProductDetail/style.module.scss
@@ -1,3 +1,7 @@
+.product-detail-wrapper {
+  padding: 16px 23px 20px;
+}
+
 .skeleton-img-slide {
   min-width: 100%;
   height: 100vw;

diff --git a/src/components/Product/organisms/ProductRecommend/index.tsx b/src/components/Product/organisms/ProductRecommend/index.tsx
@@ -4,8 +4,8 @@ import { StyleProps } from '#types/props';
 import { NoProduct } from '@atoms/icon';
 import StrongLabel from 'src/components/Product/atoms/StrongLabel';
 import ProductItem from 'src/components/Shop/molecules/ProductItem';
-import { useDragScroll } from 'src/hooks';
 import { useProductRecommendItemList } from 'src/hooks/api/recommend';
+import useSwiper from 'src/hooks/useSwiper';
 
 import $ from './style.module.scss';
 
@@ -16,18 +16,20 @@ type Props = {
 export default function ProductRecommend({ id }: Props) {
   const { data } = useProductRecommendItemList(id);
   const ref = useRef<HTMLDivElement>(null);
-  useDragScroll(ref);
+  useSwiper(ref);
   const recommendData = data?.data;
   const isNoData = recommendData && recommendData.length === 0;
 
   return (
     <article className={$['product-recommend']}>
       <StrongLabel label="이런 옷이 어울릴 것 같아요" mid />
-      <div className={$['item-list']} ref={ref}>
-        {recommendData?.map((item) => (
-          <ProductItem isUnknown key={item.id} {...item} />
-        ))}
-        {isNoData && <NoProduct className={$['no-product']} />}
+      <div className={$['item-list-wrapper']}>
+        <div className={$['item-list']} ref={ref}>
+          {recommendData?.map((item) => (
+            <ProductItem isUnknown key={item.id} {...item} />
+          ))}
+          {isNoData && <NoProduct className={$['no-product']} />}
+        </div>
       </div>
     </article>
   );

diff --git a/src/components/Product/organisms/ProductRecommend/style.module.scss b/src/components/Product/organisms/ProductRecommend/style.module.scss
@@ -1,12 +1,14 @@
 .product-recommend {
   padding: 0 23px 20px;
-  .item-list {
+  .item-list-wrapper {
     overflow: hidden;
-    min-height: 200px;
-    display: flex;
     border-radius: 10px;
     background-color: rgba($primary, 0.2);
   }
+  .item-list {
+    min-height: 200px;
+    display: flex;
+  }
 
   .no-product {
     margin: auto;

diff --git a/src/components/Search/organisms/LatestProducts/index.tsx b/src/components/Search/organisms/LatestProducts/index.tsx
@@ -4,7 +4,7 @@ import { SearchStoreState } from '#types/storeType/search';
 import Span from '@atoms/Span';
 import classnames from 'classnames';
 import ImgCard from 'src/components/Upload/molecules/ImgCard';
-import { useDragScroll } from 'src/hooks';
+import useSwiper from 'src/hooks/useSwiper';
 
 import $ from './style.module.scss';
 
@@ -17,22 +17,19 @@ type Props = {
 function LatestProducts(inputProps: Props) {
   const { products, removeProduct, moveProduct } = inputProps;
   const containerRef = useRef<HTMLUListElement | null>(null);
-  useDragScroll(containerRef);
+  useSwiper(containerRef);
 
   return (
     <div className={$['products-box']}>
       <Span fontSize={18}>최근 본 상품</Span>
-
-      <ul
-        className={$['current-products']}
-        role="listbox"
-        aria-label="최근 본 상품 목록"
-        ref={containerRef}
-      >
-        <div
+      <div className={$['current-products']}>
+        <ul
           className={classnames($['current-products-box'], {
             [$['no-products']]: !products.length,
           })}
+          role="listbox"
+          aria-label="최근 본 상품 목록"
+          ref={containerRef}
         >
           {products.length ? (
             products.map(({ id, img }) => (
@@ -46,8 +43,8 @@ function LatestProducts(inputProps: Props) {
           ) : (
             <Span fontWeight={500}>최근 본 상품이 존재하지 않습니다.</Span>
           )}
-        </div>
-      </ul>
+        </ul>
+      </div>
     </div>
   );
 }

diff --git a/src/components/Search/organisms/LatestProducts/style.module.scss b/src/components/Search/organisms/LatestProducts/style.module.scss
@@ -3,7 +3,6 @@
 
   .current-products {
     overflow: hidden;
-    display: flex;
     &-box {
       display: grid;
       grid-template-columns: repeat(5, 1fr);

diff --git a/src/components/Shop/molecules/SortBox/index.tsx b/src/components/Shop/molecules/SortBox/index.tsx
@@ -1,10 +1,7 @@
-import { useRef } from 'react';
-
 import { DefaultData } from '#types/index';
 import Span from '@atoms/Span';
 import CheckBtn from '@molecules/CheckBtn';
 import SelectBox from '@molecules/SelectBox';
-import { useDragScroll } from 'src/hooks';
 
 import $ from './style.module.scss';
 
@@ -18,14 +15,12 @@ type Props = {
 
 function SortBox(boxProps: Props) {
   const { data, selectedMenu, hideSold, onSoldClick, onOrderClick } = boxProps;
-  const btnBoxRef = useRef<HTMLDivElement>(null);
-  useDragScroll(btnBoxRef);
 
   const isHideSold = hideSold === 'true';
   const handleClick = () => onSoldClick((!isHideSold).toString());
 
   return (
-    <section ref={btnBoxRef} className={$['sort-box']}>
+    <section className={$['sort-box']}>
       <div
         role="button"
         tabIndex={0}

diff --git a/src/components/Upload/organisms/ImgUpload/ImgUploadView.tsx b/src/components/Upload/organisms/ImgUpload/ImgUploadView.tsx
@@ -37,15 +37,17 @@ function ImgUploadView(viewProps: Props) {
         <Loading />
       ) : (
         <>
-          <div className={$['img-upload']} ref={uploadRef}>
-            <ImgUploadBtn
-              {...{ inputRef, onUploadClick }}
-              num={state.length}
-              onUpload={onUploadImg}
-            />
-            {state.map(({ id, src }, idx) => (
-              <ImgCard key={id + src} first={!idx} {...{ id, src, remove }} />
-            ))}
+          <div className={$['img-upload-wrapper']}>
+            <div className={$['img-upload']} ref={uploadRef}>
+              <ImgUploadBtn
+                {...{ inputRef, onUploadClick }}
+                num={state.length}
+                onUpload={onUploadImg}
+              />
+              {state.map(({ id, src }, idx) => (
+                <ImgCard key={id + src} first={!idx} {...{ id, src, remove }} />
+              ))}
+            </div>
           </div>
           <ErrorMsg
             isValid={isImgValid}

diff --git a/src/components/Upload/organisms/ImgUpload/index.tsx b/src/components/Upload/organisms/ImgUpload/index.tsx
@@ -9,7 +9,7 @@ import {
 import { recognitionResult } from '#types/upload';
 import { getCategoryIds } from 'src/api/category';
 import { useImgUpload } from 'src/hooks/api/upload';
-import useDragScroll from 'src/hooks/useDragScroll';
+import useSwiper from 'src/hooks/useSwiper';
 
 import ImgUploadView from './ImgUploadView';
 import { getFormData, imageList } from './utils';
@@ -31,7 +31,7 @@ function ImgUpload(imgProps: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
   const uploadRef = useRef<HTMLDivElement>(null);
   const { isLoading, mutate } = useImgUpload();
-  useDragScroll(uploadRef);
+  useSwiper(uploadRef);
 
   const onUploadClick = useCallback(() => {
     if (inputRef.current) inputRef.current.click();

diff --git a/src/components/Upload/organisms/ImgUpload/style.module.scss b/src/components/Upload/organisms/ImgUpload/style.module.scss
@@ -7,8 +7,11 @@
   }
 }
 
-.img-upload {
+.img-upload-wrapper {
   overflow: hidden;
+}
+
+.img-upload {
   height: 116px;
   display: flex;
   align-items: flex-end;

diff --git a/src/components/shared/atoms/HeadMeta.tsx b/src/components/shared/atoms/HeadMeta.tsx
@@ -14,11 +14,9 @@ function HeadMeta({ title, description, url, image, creator }: Props) {
   return (
     <Head>
       <title>{title ?? seoData.title}</title>
+      <meta name="keywords" content={seoData.keywords} />
+      <meta name="author" content={seoData.author} />
       <meta name="description" content={description ?? seoData.description} />
-      <meta
-        name="viewport"
-        content="width=device-width, initial-scale=1, maximum-scale=1"
-      />
       <meta property="og:title" content={title ?? seoData.title} />
       <meta property="og:type" content="website" />
       <meta property="og:url" content={url ?? seoData.url} />

diff --git a/src/components/shared/molecules/DropDown/index.tsx b/src/components/shared/molecules/DropDown/index.tsx
@@ -48,11 +48,12 @@ function DropDown(selectProps: Props) {
     <div className={classnames(className, $['dropdown-btn'])}>
       <button
         {...{ className }}
-        id={`${name}-select-box`}
+        id={`${name}-dropdown-button`}
         ref={labelRef}
         type="button"
-        aria-haspopup="true"
-        aria-expanded="true"
+        aria-label={`${name} 버튼`}
+        aria-haspopup={isClicked ? 'true' : 'false'}
+        aria-expanded={isClicked ? 'true' : 'false'}
         aria-controls={`${name}-dropdown-list`}
         onClick={handleMouseDown}
       >
@@ -62,7 +63,7 @@ function DropDown(selectProps: Props) {
       {isClicked && (
         <ul
           id={`${name}-dropdown-list`}
-          aria-labelledby={`${name}-select-box`}
+          aria-labelledby={`${name} 드롭다운 리스트`}
           role="menu"
           tabIndex={0}
           className={$['dropdown-menulist']}

diff --git a/src/components/shared/molecules/SelectBox/SelectBox.view.tsx b/src/components/shared/molecules/SelectBox/SelectBox.view.tsx
@@ -37,11 +37,12 @@ function SelectBoxView(
       style={{ ...{ width, height } }}
     >
       <button
-        id={`${name}-select-box`}
+        id={`${name}-select-button`}
         ref={ref}
         type="button"
-        aria-haspopup="true"
-        aria-expanded="true"
+        aria-label={`${name} 버튼`}
+        aria-haspopup={isClicked ? 'true' : 'false'}
+        aria-expanded={isClicked ? 'true' : 'false'}
         aria-controls={`${name}-select-list`}
         onClick={handleMouseDown}
       >
@@ -64,7 +65,7 @@ function SelectBoxView(
       {isClicked && (
         <ul
           id={`${name}-select-list`}
-          aria-labelledby={`${name}-select-box`}
+          aria-labelledby={`${name} 선택 리스트`}
           role="menu"
           tabIndex={0}
           style={{ top: height ? `calc(${height} + 6px)` : '56px' }}