Merge pull request #140 from nori-dongsan/view_product/#130

[ ViewProduct ] 필터 섹션 애니메이션
nori-dongsan · Jul 21, 2022 · 52b35e5 · 52b35e5
2 parents 8b70a79 + 5bb6558
commit 52b35e5
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 54 deletions.
diff --git a/community.ts b/community.ts
@@ -0,0 +1,45 @@
+// 댓글
+export interface ReplyData {
+  author: boolean;
+  userNickname?: string;
+  content: string;
+  createdAt: string;
+}
+// 커뮤니티 데이터
+export interface CommunityData {
+  id: string;
+  author: boolean;
+  category: string;
+  title: string;
+  content: string;
+  userNickname: string;
+  replyCount: number;
+  createdAt: string;
+  image?: string;
+  imageList: string[];
+  replyList: ReplyData[];
+}
+// 커뮤니티 게시글 작성 post body
+export interface PostCommunityBody {
+  category: string;
+  title: string;
+  content: string;
+  imageList?: FormData;
+}
+// 커뮤니티 댓글
+export interface PostCommentBody {
+  boardId?: string;
+  content: string;
+}
+
+export interface GetCommunityList {
+  communityList: CommunityData[];
+  isLoading: boolean;
+  isError: string;
+}
+// 커뮤니티 글 작성 이미지 데이터
+export interface ImgData {
+  id: number;
+  src: string;
+  file: File;
+}
diff --git a/components/collectionProduct/CollectionList.tsx b/components/collectionProduct/CollectionList.tsx
@@ -10,15 +10,15 @@ export default function CollectionList(props: CollectionListProps) {
   const { toyList } = props;
   return (
     <StToyListWrapper>
-      {toyList.map(({ image, title, price, month, siteUrl }, idx) => (
+      {toyList.map(({ image, siteName, title, price, month, siteUrl }, idx) => (
         <ToyPreview
           key={idx}
-          src={toy.image}
-          store={toy.siteName}
-          title={toy.title}
-          price={toy.price}
-          age={toy.month}
-          siteUrl={toy.siteUrl}
+          src={image}
+          store={siteName}
+          title={title}
+          price={price}
+          age={month}
+          siteUrl={siteUrl}
         />
       ))}
     </StToyListWrapper>

diff --git a/components/landing/main/LandingFooter.tsx b/components/landing/main/LandingFooter.tsx
@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import { loading } from '../../common/styled/animation';
+
+export default function LandingFooter() {
+  return (
+    <StLandingWrapper>
+      <span></span>
+    </StLandingWrapper>
+  );
+}
+const StLandingWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  bottom: 0;
+
+  width: 100%;
+  height: 24.9rem;
+
+  background: ${({ theme }) => theme.colors.gray001};
+  /* animation: ${loading} 2s infinite linear; */
+
+  z-index: 4;
+
+  span {
+    width: 117.6rem;
+    top: 18.4rem;
+    left: 37.2rem;
+  }
+`;
diff --git a/components/landing/main/LandingHeader.tsx b/components/landing/main/LandingHeader.tsx
@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+export default function LandingHeader() {
+  return <StLandingWrapper></StLandingWrapper>;
+}
+const StLandingWrapper = styled.div`
+  position: sticky;
+
+  position: absolute;
+  top: 0;
+
+  width: 100%;
+  height: 11.4rem;
+
+  background: ${({ theme }) => theme.colors.white};
+
+  z-index: 4;
+`;
diff --git a/components/landing/main/index.ts b/components/landing/main/index.ts
@@ -5,3 +5,5 @@ export { default as LandingMiddleBanner } from './LandingMiddleBanner';
 export { default as LandingToyList } from './LandingToyList';
 export { default as LandingToyPreview } from './LandingToyPreview';
 export { default as LandingConceptTitle } from './LandingConceptTitle';
+export { default as LandingFooter } from './LandingFooter';
+export { default as LandingHeader } from './LandingHeader';
diff --git a/components/viewProduct/FilterDropdown.tsx b/components/viewProduct/FilterDropdown.tsx
@@ -57,7 +57,13 @@ export default function FilterDropdown(props: FilterDropdownProps) {
   };
 
   return (
-    <StDropdownWrapper isDrop={isDrop} isExcept={isExcept}>
+    <StDropdownWrapper
+      isDrop={isDrop}
+      isExcept={isExcept}
+      className={`${
+        isDrop ? 'slide-fade-in-dropdown' : 'slide-fade-out-dropdown'
+      }`}
+    >
       {categoryKey === '장난감 종류' && toyKindList.length !== 0
         ? toyKindList.map((tagText: string, elementIdx: number) => {
             return (
@@ -135,8 +141,6 @@ const StFilterElement = styled.p`
   width: 15.2rem;
   height: 2rem;
 
-  // color: {({ checked, theme: { colors } }) =>
-  //   checked ? colors.black : colors.gray008};
   ${({ theme }) => theme.fonts.b5_14_medium_140};
 `;
 const StDropdownWrapper = styled.div<{ isExcept: boolean; isDrop: boolean }>`
@@ -172,36 +176,40 @@ const StDropdownWrapper = styled.div<{ isExcept: boolean; isDrop: boolean }>`
       theme.colors.gray002}; /*스크롤바 뒷 배경 색상*/
   }
 
-  // @keyframes slide-fade-in-dropdown-animation {
-  //   0% {
-  //     transform: translateY(-1rem);
-  //   }
+  @keyframes slide-fade-in-dropdown-animation {
+    0% {
+      max-height: 14.8rem;
+      overflow: hidden;
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
+    }
+  }
 
-  //   100% {
-  //     transform: translateY(0);
-  //   }
-  // }
   /* fade out */
 
   @keyframes slide-fade-out-dropdown-animation {
     0% {
-      transform: translateY(0);
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
     }
 
     100% {
-      transform: translateY(-100%);
+      opacity: 1;
+      max-height: 14.8rem;
+      overflow: hidden;
     }
   }
 
   animation: ${({ isDrop }) =>
     isDrop
-      ? 'slide-fade-in-dropdown-animation 0.4s ease'
-      : 'slide-fade-out-dropdown-animation 0.4s ease'};
-
-  // .slide-fade-out-dropdown {
-  //   animation: slide-fade-out-dropdown-animation 0.4s ease;
-  //   animation-fill-mode: forwards;
-  // }
+      ? 'slide-fade-in-dropdown-animation 0.2s ease-out'
+      : 'slide-fade-out-dropdown-animation 0.2s ease-out'};
 `;
 // display `-객체의 노출여부/표현방식--`
 // ( justify-content / align-items)

diff --git a/components/viewProduct/ProductFilter.tsx b/components/viewProduct/ProductFilter.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import {
   checkedItemsState,
@@ -19,54 +19,57 @@ export default function ProductFilter() {
     false,
     false,
   ]);
-
+  const [visibilityAnimation, setVisibilityAnimation] = useState<boolean[]>([
+    false,
+    false,
+    false,
+    false,
+    false,
+  ]);
   const filterListData = Object.values(filterlist.filterList);
   const filterListKeys = Object.keys(filterlist.filterList);
   const [checkedItems, setcheckedItems] =
     useRecoilState<Set<number>[]>(checkedItemsState);
   const toyKindList = useRecoilValue<string[]>(toyKindState);
+  const [repeat, setRepeat] = useState<any>(null);
   const handleDropdown = (idx: number) => {
+    if (visibility[idx]) {
+      let timeoutId = repeat;
+      window.clearTimeout(timeoutId);
+      setRepeat(null);
+      setVisibilityAnimation({
+        ...visibilityAnimation,
+        [idx]: true,
+      });
+    } else {
+      setRepeat(
+        setTimeout(() => {
+          setVisibilityAnimation({
+            ...visibilityAnimation,
+            [idx]: false,
+          });
+        }, 190),
+      );
+    }
     setVisibility({
       ...visibility,
       [idx]: !visibility[idx],
     });
   };
 
-  //const [repeat, setRepeat] = useState<null | number | void | string>();
-  // const handleDrop = (idx: number) => {
-  //   if (visibility[idx]) {
-  //     clearTimeout(repeat);
-  //     setRepeat(null);
-  //     setVisibility({
-  //       ...visibility,
-  //       [idx]: !visibility[idx],
-  //     });
-  //   } else {
-  //     setRepeat(
-  //       setTimeout(() => {
-  //         setVisibility({
-  //           ...visibility,
-  //           [0]: !visibility[0],
-  //         });
-  //         return 0;
-  //       }, 400),
-  //     );
-  //   }
-  // };
-
   return (
     <StFilterWrapper>
       {filterListKeys.map((title: string, idx: number) => (
-        <StFilterSection isDrop={visibility[idx]} key={title}>
+        <StFilterSection isDrop={visibilityAnimation[idx]} key={title}>
           <StFilterTitle
             onClick={() => {
               handleDropdown(idx);
             }}
           >
             <h2>{title}</h2>
-            {visibility[idx] ? <IcClose /> : <IcOpen />}
+            {visibilityAnimation[idx] ? <IcClose /> : <IcOpen />}
           </StFilterTitle>
-          {visibility[idx] && (
+          {visibilityAnimation[idx] && (
             <FilterDropdown
               categoryInfo={filterListData[idx]}
               categoryIdx={idx}

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -15,6 +15,8 @@ import {
   LandingCollectionCard,
   LandingMiddleBanner,
   LandingBottomBanner,
+  LandingFooter,
+  LandingHeader,
 } from '../components/landing/main';
 
 export default function index({
@@ -39,6 +41,7 @@ export default function index({
     <div>
       {!mainData ? (
         <>
+          {/* <LandingHeader /> */}
           <LandingMainBanner />
           <StMainSection>
             <article className="trending">
@@ -62,6 +65,7 @@ export default function index({
             </article>
             <LandingBottomBanner />
           </StMainSection>
+          {/* <LandingFooter /> */}
         </>
       ) : (
         <>

diff --git a/types/viewProduct.ts b/types/viewProduct.ts
@@ -1,3 +1,5 @@
+import { MutableRefObject, RefObject } from 'react';
+
 export interface FilterDropdownProps {
   categoryInfo: string[];
   categoryIdx: number;