Merge pull request #141 from nori-dongsan/feature-view_product

Feature view product

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;
+}

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)

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}

types/viewProduct.ts

@@ -1,3 +1,5 @@
+import { MutableRefObject, RefObject } from 'react';
+
 export interface FilterDropdownProps {
   categoryInfo: string[];
   categoryIdx: number;