Merge branch 'develop' into comment/#138

nori-dongsan · Jul 21, 2022 · 4915278 · 4915278
2 parents f26c3ff + c0bfb19
commit 4915278
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 88 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/main/ToyPreview.tsx b/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);
   };

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/core/api/user.ts b/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);
 };
diff --git a/core/localStorage.ts b/core/localStorage.ts
@@ -2,23 +2,15 @@ class LocalStorage {
   constructor() {}
 
   static setItem(key: string, item: string) {
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(key, item);
-    }
+    localStorage.setItem(key, item);
   }
 
   static getItem(key: string) {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem(key) as string;
-    }
-
-    return '';
+    return localStorage.getItem(key) as string;
   }
 
   static removeItem(key: string) {
-    if (typeof window !== 'undefined') {
-      localStorage.removeItem(key);
-    }
+    localStorage.removeItem(key);
   }
 
   static setUserSession(accessToken: string, refreshToken: string) {

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -6,7 +6,7 @@ import { PostLoginBody } from '../types/user';
 import { useEffect, useState } from 'react';
 import LocalStorage from '../core/localStorage';
 import Router from 'next/router';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useResetRecoilState } from 'recoil';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import {
   IcLoginNori,
@@ -20,18 +20,21 @@ export default function login({
   data,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const [userInfo, setUserInfo] = useRecoilState(userInfoState);
-
+  useResetRecoilState(userInfoState);
   useEffect(() => {
     const handleLogin = async () => {
-      const userLoginData = {
-        snsId: data.session?.user.email,
-        provider: userInfo.provider,
-        email: data.session?.user.email,
-      } as PostLoginBody;
+      if (data.session?.user) {
+        const userLoginData = {
+          snsId: data.session?.user.email,
+          provider: userInfo.provider,
+          email: data.session?.user.email,
+        } as PostLoginBody;
 
-      const login = await loginUser(userLoginData);
-      if (login) {
-        setUserInfo(userLoginData);
+        const login = await loginUser(userLoginData);
+        console.log(login);
+        if (!login) {
+          setUserInfo(userLoginData);
+        }
       }
     };
     if (userInfo.provider !== '') handleLogin();

diff --git a/pages/signup.tsx b/pages/signup.tsx
@@ -3,7 +3,7 @@ import Router from 'next/router';
 
 import { useState, useEffect, useRef } from 'react';
 import { useRecoilState } from 'recoil';
-import { putSignup } from '../core/api/user';
+import { postNickname, putSignup } from '../core/api/user';
 import { userInfoState } from '../core/atom';
 import {
   IcSignupCheckboxSelected,
@@ -21,7 +21,6 @@ export default function signup() {
   const [isNickname, setIsNickname] = useState<boolean>(true);
   const signupBtnRef = useRef<HTMLButtonElement>(null);
   const [userInfo, setUserInfo] = useRecoilState(userInfoState);
-  console.log(userInfo);
 
   useEffect(() => {
     if (signupBtnRef.current)
@@ -50,16 +49,17 @@ export default function signup() {
         '한, 영, 숫자 조합만 가능합니다. 2글자 이상 10글자 이하로 입력해주세요.',
       );
     } else {
-      const data = await putSignup({ nickname: nickName });
+      const data = await postNickname({ nickname: nickName });
       if (data.status === 409) setNotice('사용중인 닉네임입니다');
-      else if (data.status === 200) {
+      else if (data.status === 201) {
         setNotice('사용가능한 닉네임입니다');
         setIsNickname(true);
       }
     }
   };
   const handleSignupBtn = () => {
     if (isNickname && isChecked) {
+      putSignup({ nickname: nickName });
       Router.push('/');
     }
   };
@@ -152,7 +152,9 @@ const StNoticeSpan = styled.span<{ isNickname: boolean; notice: string }>`
   color: ${({ isNickname, notice, theme: { colors } }) =>
     !isNickname &&
     notice !== '사용중인 닉네임입니다' &&
-    notice !== '사용가능한 닉네임입니다'
+    notice !== '사용가능한 닉네임입니다' &&
+    notice ===
+      '한, 영, 숫자 조합만 가능합니다. 2글자 이상 10글자 이하로 입력해주세요.'
       ? 'red'
       : notice === '사용중인 닉네임입니다'
       ? colors.orange
@@ -191,6 +193,7 @@ const StSignupBtn = styled.button`
 
   border: 0.1rem solid ${({ theme }) => theme.colors.gray005};
   border-radius: 0.5rem;
+
   background: ${({ theme }) => theme.colors.gray004};
   color: ${({ theme }) => theme.colors.white};
   ${({ theme }) => theme.fonts.b2_18_medium_130};