v1.0.5 업데이트 (#176)

## 💡 이슈
resolve #175 

## 🤩 개요
v1.0.5 업데이트

## 🧑‍💻 작업 사항
- 작은 UI 이슈 해결

## 📖 참고 사항
공유할 내용, 레퍼런스, 추가로 발생할 것으로 예상되는 이슈, 스크린샷 등을 넣어 주세요.

src/components/Main/organisms/TodayRecommend/style.module.scss

@@ -4,14 +4,17 @@
   left: 50%;
   transform: translateX(-50%);
   max-width: 500px;
+  min-height: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
   margin: 71px 0 15px;
   padding-top: 20px;
   border-radius: 19px;
   background-color: rgba($second, 0.25);
+  @include mobile() {
+    border-radius: 0;
+  }
 }
 
 .circle {

src/components/Product/atoms/ProductCell/style.module.scss

@@ -19,6 +19,7 @@
     font-weight: 400;
     text-align: right;
     word-break: keep-all;
+    word-wrap: break-word;
   }
 }
 

src/components/Shop/Organisms/ShopHeader/index.tsx

@@ -17,6 +17,7 @@ type Props = {
   genderSelectMenu: res.CategoryTreeChildren[];
   selectData: res.CategoryTreeChildren[];
   breadCrumb: string;
+  isRecommend: boolean;
 };
 
 function ShopHeader(headerProps: Props) {
@@ -26,7 +27,7 @@ function ShopHeader(headerProps: Props) {
   const queryHideSold = useQueryRouter('hideSold', 'REPLACE');
   const { categoryQuery, orderQuery, hideSoldQuery } = headerProps;
   const { genderSelectMenu, selectData } = headerProps;
-  const { genderQuery, breadCrumb } = headerProps;
+  const { genderQuery, breadCrumb, isRecommend } = headerProps;
   const isSelectedSub = categoryQuery.length === 7;
   const selectedMenu = categoryQuery;
   const mainCategory = judgeMainCategory(breadCrumb);
@@ -37,7 +38,7 @@ function ShopHeader(headerProps: Props) {
     <header className={$.header}>
       <HeaderTool
         {...{ onClick: queryCategory, breadCrumb }}
-        {...{ isSelectedSub, mainCategory }}
+        {...{ isSelectedSub, mainCategory, isRecommend }}
         data={genderSelectMenu}
         selectedMenu={genderQuery}
       />

src/components/Shop/molecules/CategoryBox/style.module.scss

@@ -4,6 +4,7 @@
   justify-content: center;
   padding: 0 12px;
   word-break: keep-all;
+  word-wrap: break-word;
 
   .category-list {
     overflow: hidden;
@@ -22,6 +23,7 @@
 .sub-box {
   background-color: $category-box;
   word-break: keep-all;
+  word-wrap: break-word;
 }
 
 .arrow {

src/components/Shop/molecules/HeaderTool/index.tsx

@@ -21,11 +21,12 @@ type Props = {
   isSelectedSub: boolean;
   breadCrumb: string;
   mainCategory: FilterType;
+  isRecommend: boolean;
   onClick: (value: string) => void;
 };
 
 function HeaderTool(headerProps: Props) {
-  const { data, selectedMenu, onClick } = headerProps;
+  const { data, selectedMenu, onClick, isRecommend } = headerProps;
   const { isSelectedSub, breadCrumb, mainCategory } = headerProps;
   const [filterOpen, setFilterOpen] = useState(false);
 
@@ -50,45 +51,49 @@ function HeaderTool(headerProps: Props) {
         {!isSelectedSub && (
           <SelectBox
             {...{ onQueryChange: onClick }}
+            isGender
+            hasId
+            isSameCodeName
             options={data}
             selected={selectedMenu}
-            name="category"
-            width="100px"
+            name="gender"
+            width="fit-content"
             height="33px"
+            fontSize={13}
             fontWeight={700}
-            isGender
-            hasId
           />
         )}
 
         <Link href="/search">
           <button
             type="button"
             aria-label="상품 검색 버튼"
-            className={$['btn-search']}
+            className={$.search}
           >
             <Search />
           </button>
         </Link>
 
-        <AsyncBoundary
-          suspenseFallback={<FilterSkeleton />}
-          errorFallback={ErrorFallback}
-        >
-          <Button
-            iconBtn
-            label="상품 필터 버튼"
-            className={$.btn}
-            onClick={openFilterModal}
+        {!isRecommend && (
+          <AsyncBoundary
+            suspenseFallback={<FilterSkeleton />}
+            errorFallback={ErrorFallback}
           >
-            <Filter fill="#C9B6FF" stroke="#936DFF" />
-          </Button>
-          <FilterModal
-            {...{ mainCategory }}
-            isOpen={filterOpen}
-            onClose={closeFilterModal}
-          />
-        </AsyncBoundary>
+            <Button
+              iconBtn
+              label="상품 필터 버튼"
+              className={$.filter}
+              onClick={openFilterModal}
+            >
+              <Filter fill="#C9B6FF" stroke="#936DFF" />
+            </Button>
+            <FilterModal
+              {...{ mainCategory }}
+              isOpen={filterOpen}
+              onClose={closeFilterModal}
+            />
+          </AsyncBoundary>
+        )}
       </section>
     </section>
   );

src/components/Shop/molecules/HeaderTool/style.module.scss

@@ -17,12 +17,14 @@
     height: 34px;
     display: flex;
     align-items: center;
-    .btn {
+
+    .search {
       display: flex;
-      &-search {
-        display: flex;
-        margin: 0 20px 0 auto;
-      }
+      margin: 0 0 0 auto;
+    }
+    .filter {
+      display: flex;
+      margin-left: 20px;
     }
   }
 }

src/components/shared/atoms/ErrorFallback/style.module.scss

@@ -5,6 +5,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
+  margin: auto;
   &-box {
     display: flex;
     flex-direction: column;

src/components/shared/atoms/TextArea/style.module.scss

@@ -5,6 +5,7 @@
   @include border(border, 5px, $gray-280);
   padding: 16px 19px;
   word-break: break-all;
+  word-wrap: break-word;
   &::placeholder {
     color: $gray-280;
   }

src/components/shared/atoms/icon/Home.tsx

@@ -4,14 +4,14 @@ function Home({ className, style, fill }: IconProps) {
   return (
     <svg
       {...{ className, style }}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="20"
+      height="17"
+      viewBox="0 0 20 17"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10 20V14H14V20H19V12H22L12 3L2 12H5V20H10Z"
+        d="M8 17V11H12V17H17V9H20L10 0L0 9H3V17H8Z"
         fill={fill || 'black'}
         fillOpacity="0.87"
       />

src/components/shared/molecules/SelectBox/SelectBox.view.tsx

@@ -0,0 +1,82 @@
+import { forwardRef, LegacyRef } from 'react';
+
+import { SelectArrow } from '@atoms/icon';
+import Span from '@atoms/Span';
+import classnames from 'classnames';
+
+import $ from './style.module.scss';
+
+type Props = {
+  name: string;
+  isClicked: boolean;
+  labelName: string;
+  isGender?: boolean;
+  width?: string;
+  height?: string;
+  fontSize?: number;
+  fontWeight?: number;
+  children?: React.ReactNode;
+  handleMouseDown: (
+    e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
+  ) => void;
+};
+
+function SelectBoxView(
+  viewProps: Props,
+  ref: LegacyRef<HTMLButtonElement> | null,
+) {
+  const { name, width, height, fontSize, fontWeight, labelName } = viewProps;
+  const { isGender, isClicked, handleMouseDown, children } = viewProps;
+
+  return (
+    <div
+      className={classnames($['select-box'], {
+        [$['select-box-clicked']]: isClicked,
+        [$['gender-box']]: isGender,
+      })}
+      style={{ ...{ width, height } }}
+    >
+      <button
+        id={`${name}-select-box`}
+        ref={ref}
+        type="button"
+        aria-haspopup="true"
+        aria-expanded="true"
+        aria-controls={`${name}-select-list`}
+        onClick={handleMouseDown}
+      >
+        <Span
+          fontSize={fontSize || 16}
+          fontWeight={fontWeight || 400}
+          className={classnames($.text, {
+            [$['gender-text']]: isGender,
+          })}
+        >
+          {labelName || '선택'}
+        </Span>
+        <SelectArrow
+          className={classnames($.arrow, {
+            [$['arrow-clicked']]: isClicked,
+          })}
+        />
+      </button>
+
+      {isClicked && (
+        <ul
+          id={`${name}-select-list`}
+          aria-labelledby={`${name}-select-box`}
+          role="menu"
+          tabIndex={0}
+          style={{ top: height ? `calc(${height} + 6px)` : '56px' }}
+          className={classnames($['select-wrapper'], {
+            [$['select-wrapper-clicked']]: isClicked,
+          })}
+        >
+          {children}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default forwardRef(SelectBoxView);

src/components/shared/molecules/SelectBox/SelectMenu.view.tsx

@@ -0,0 +1,41 @@
+import { Check } from '@atoms/icon';
+import classnames from 'classnames';
+
+import $ from './style.module.scss';
+
+type Props = {
+  isGender?: boolean;
+  isItemSelected: boolean;
+  isGenderItemSelected?: boolean;
+  optionName: string;
+  height?: string;
+  fontSize?: string;
+  handleSelectMenu: () => void;
+};
+
+function SelectMenuView(viewProps: Props) {
+  const { height, fontSize, isGender, isGenderItemSelected } = viewProps;
+  const { isItemSelected, optionName, handleSelectMenu } = viewProps;
+
+  return (
+    <li
+      tabIndex={0}
+      role="menuitem"
+      style={{ ...{ height } }}
+      className={classnames($['select-item'], {
+        [$['select-item-gender']]: isGender,
+        [$['select-item-clicked']]: isItemSelected,
+        [$['select-hover']]: !isGender,
+        [$['gender-item-clicked']]: isGenderItemSelected,
+        [$['gender-hover']]: isGender,
+      })}
+      onClick={handleSelectMenu}
+      onKeyPress={handleSelectMenu}
+    >
+      <span style={{ fontSize }}>{optionName}</span>
+
+      {isGenderItemSelected && <Check className={$['check-icon']} />}
+    </li>
+  );
+}
+export default SelectMenuView;