Merge branch 'develop' into feature-community

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/main/ToyPreview.tsx

@@ -10,7 +10,6 @@ import { MainToyData } from '../../types/toy';
 export default function ToyPreview(props: MainToyData) {
   const { image, month, price, siteName, siteUrl, title } = props;
   const [isMark, setIsMark] = useState(false);
-  console.log(image);
   const handleToySite = (e: React.MouseEvent<HTMLElement>) => {
     if (!(e.target instanceof SVGElement)) window.open(siteUrl);
   };
@@ -44,6 +43,8 @@ const StToyWrapper = styled.article`
   width: 27.5rem;
   height: 42.4rem;
   margin: 0rem 1.25rem;
+
+  cursor: pointer;
 `;
 const StImgWrapper = styled.div`
   position: relative;

components/viewProduct/FilterDropdown.tsx

@@ -57,8 +57,14 @@ export default function FilterDropdown(props: FilterDropdownProps) {
   };
 
   return (
-    <StDropdownWrapper isDrop={isDrop} isExcept={isExcept}>
-      {categoryKey === '장난감 종류' && toyKindList.length !== 0
+    <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 (
               <StLabel
@@ -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,59 +19,62 @@ 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}
               isExcept={
-                idx == 3 || (idx == 4 && toyKindList.length !== 0)
+                idx == 3 || (idx == 0 && toyKindList.length !== 0)
                   ? true
                   : false
               }

components/viewProduct/ToyList.tsx

@@ -11,15 +11,15 @@ export default function ToyList(props: ToyListProps) {
 
   return (
     <StToyListWrapper>
-      {toyList.map(({ image, title, price, month, siteUrl }, idx) => (
+      {toyList.map(({ image, title, price, month, link, toySite }, idx) => (
         <ToyPreview
           key={idx}
           src={image}
-          store="그린키드그린키드그린키드그린키드그린키드그린키드그린키드그린키드그린키드그린키드"
+          store={toySite.toySite}
           title={title}
           price={price}
-          age="36개월이상"
-          siteUrl={siteUrl}
+          age={month}
+          siteUrl={link}
         />
       ))}
     </StToyListWrapper>

components/viewProduct/ToyPreview.tsx

@@ -29,7 +29,9 @@ export default function ToyPreview(props: ToyPreviewProps) {
   return (
     <StToyWrapper onClick={handleToySite}>
       <StImgWrapper>
-        <StToyImg src="https://www.littlebaby.co.kr:14019/shop/data/goods/1632018070797m0.jpg" />
+        <StToyImg
+          src={`https://nori-image.s3.ap-northeast-2.amazonaws.com/${src}`}
+        />
         <StToyMarkWrapper onClick={handleToyMark}>
           <StToyMark />
           {isMark && <StFillToyMark />}

core/api/user.ts

@@ -1,25 +1,27 @@
 import LocalStorage from '../localStorage';
 import { baseInstance } from '../axios';
-import {
-  PostLoginBody,
-  PostSignUpBody,
-  ResponseLoginDto,
-} from '../../types/user';
+import { PostLoginBody, SignUpBody, ResponseLoginDto } from '../../types/user';
 
 export const loginUser = async (userLoginData: PostLoginBody) => {
   const data = (await baseInstance.post(
     '/auth/login',
     userLoginData,
   )) as ResponseLoginDto;
 
-  if (data) {
-    LocalStorage.setUserSession(data.data.accessToken, data.data.refreshToken);
+  if (data.status === 200) {
+    LocalStorage.setUserSession(
+      data.data.data.accessToken,
+      data.data.data.refreshToken,
+    );
+    return data.data.data.isSignup;
   }
-  return data.data.isSignup;
 };
 export const getRefreshToken = () => {
   return baseInstance.get('/auth/refresh');
 };
-export const putSignup = (signUpBody: PostSignUpBody) => {
+export const postNickname = (nicknameBody: SignUpBody) => {
+  return baseInstance.post('/auth/nickname', nicknameBody);
+};
+export const putSignup = (signUpBody: SignUpBody) => {
   return baseInstance.put('/auth/signup', signUpBody);
 };

core/api/viewProduct.ts

@@ -15,5 +15,5 @@ export const useGetBannerViewProduct = (params: { category: number }) => {
   };
 };
 export const getBannerViewProduct = () => {
-  return;
+  return baseInstance.get('/toy/list');
 };

core/atom.ts

@@ -42,30 +42,7 @@ export const filterListState = atom({
   key: 'filterListState',
   default: {
     filterList: {
-      스토어: [
-        '국민장난감',
-        '그린키드',
-        '러브로',
-        '리틀베이비',
-        '빌리바바',
-        '어텐션홈이벤트',
-        '장난감점빵',
-        '젤리바운스',
-        '해피장난감',
-      ],
-      '사용 연령': [
-        '0~5개월',
-        '6~11개월',
-        '12~17개월',
-        '18~23개월',
-        '24~35개월',
-        '36~47개월',
-        '48~60개월',
-        '기타',
-      ],
-      가격: ['1만원 미만', '1-3만원', '3-5만원', '5-8만원', '8만원이상'],
-      특성: ['타고 노는', '만지고 노는', '기타'],
-      '장난감 종류': [
+      종류: [
         '아기체육관',
         '모빌',
         '바운서',
@@ -87,6 +64,29 @@ export const filterListState = atom({
         '역할놀이',
         '기타',
       ],
+      '사용 연령': [
+        '0~5개월',
+        '6~11개월',
+        '12~17개월',
+        '18~23개월',
+        '24~35개월',
+        '36~47개월',
+        '48~60개월',
+        '기타',
+      ],
+      가격: ['1만원 미만', '1-3만원', '3-5만원', '5-8만원', '8만원이상'],
+      특성: ['타고 노는', '만지고 노는', '기타'],
+      스토어: [
+        '국민장난감',
+        '그린키드',
+        '러브로',
+        '리틀베이비',
+        '빌리바바',
+        '어텐션홈이벤트',
+        '장난감점빵',
+        '젤리바운스',
+        '해피장난감',
+      ],
     },
   },
 });