From 44094a8e3b56e4628c35faeccb989bfb78bb5230 Mon Sep 17 00:00:00 2001 From: seohee0112 Date: Thu, 21 Jul 2022 13:40:23 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[=20feat=20]=20=EB=A9=94=EC=9D=B8=20?= =?UTF-8?q?=ED=97=A4=EB=8D=94,=20=ED=91=B8=ED=84=B0=20=EB=9E=9C=EB=94=A9?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/landing/main/LandingFooter.tsx | 30 +++++++++++++++++++++++ components/landing/main/LandingHeader.tsx | 18 ++++++++++++++ components/landing/main/index.ts | 2 ++ pages/index.tsx | 7 +++++- 4 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 components/landing/main/LandingFooter.tsx create mode 100644 components/landing/main/LandingHeader.tsx diff --git a/components/landing/main/LandingFooter.tsx b/components/landing/main/LandingFooter.tsx new file mode 100644 index 0000000..8fc18eb --- /dev/null +++ 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 ( + + + + ); +} +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 new file mode 100644 index 0000000..c4fb59a --- /dev/null +++ b/components/landing/main/LandingHeader.tsx @@ -0,0 +1,18 @@ +import styled from '@emotion/styled'; + +export default function LandingHeader() { + return ; +} +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 index f42e748..e77e1c8 100644 --- 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/pages/index.tsx b/pages/index.tsx index 56b955d..cc21378 100755 --- 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({ @@ -37,8 +39,9 @@ export default function index({ return (
- {!mainData ? ( + {true ? ( <> + {/* */}
@@ -62,6 +65,7 @@ export default function index({
+ {/* */} ) : ( <> @@ -104,6 +108,7 @@ export default function index({ + )}
From 1b631ac91f17440ae0557d6b322a15e37f392618 Mon Sep 17 00:00:00 2001 From: seohee0112 Date: Thu, 21 Jul 2022 13:41:42 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[=20docs=20]=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index cc21378..5ce95be 100755 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -39,7 +39,7 @@ export default function index({ return (
- {true ? ( + {!mainData ? ( <> {/* */} @@ -108,7 +108,6 @@ export default function index({ - )}
From cbc4fdf3f8318dea69d797c53b5a2456dc06d67c Mon Sep 17 00:00:00 2001 From: aeuna <4294psy@naver.com> Date: Thu, 21 Jul 2022 13:55:30 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[=20fix=20]=20=EC=BB=AC=EB=A0=89=EC=85=98?= =?UTF-8?q?=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/collectionProduct/CollectionList.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/components/collectionProduct/CollectionList.tsx b/components/collectionProduct/CollectionList.tsx index d67db38..54c3241 100644 --- a/components/collectionProduct/CollectionList.tsx +++ b/components/collectionProduct/CollectionList.tsx @@ -10,15 +10,15 @@ export default function CollectionList(props: CollectionListProps) { const { toyList } = props; return ( - {toyList.map(({ image, title, price, month, siteUrl }, idx) => ( + {toyList.map(({ image, siteName, title, price, month, siteUrl }, idx) => ( ))} From 4200f80b0a7aae9814e3bf9706df7122078ab100 Mon Sep 17 00:00:00 2001 From: say-young516 Date: Thu, 21 Jul 2022 16:26:15 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[=20feat=20]=20=EC=97=B4=EA=B3=A0=20?= =?UTF-8?q?=EB=8B=AB=EC=9D=84=20=EB=95=8C=20=EB=8F=99=EC=9E=91=EB=90=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- community.ts | 45 ++++++++++++++++++ components/viewProduct/FilterDropdown.tsx | 40 ++++++++-------- components/viewProduct/ProductFilter.tsx | 58 ++++++++++++----------- types/viewProduct.ts | 2 + 4 files changed, 98 insertions(+), 47 deletions(-) create mode 100644 community.ts diff --git a/community.ts b/community.ts new file mode 100644 index 0000000..147231d --- /dev/null +++ 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/viewProduct/FilterDropdown.tsx b/components/viewProduct/FilterDropdown.tsx index 6419eae..0c58739 100644 --- a/components/viewProduct/FilterDropdown.tsx +++ b/components/viewProduct/FilterDropdown.tsx @@ -57,7 +57,13 @@ export default function FilterDropdown(props: FilterDropdownProps) { }; return ( - + {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,32 @@ 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% { + transform: translateY(0%); + } + + 100% { + transform: translateY(-100%); + } + } - // 100% { - // transform: translateY(0); - // } - // } /* fade out */ @keyframes slide-fade-out-dropdown-animation { 0% { - transform: translateY(0); + transform: translateY(0%); } 100% { - transform: translateY(-100%); + transform: translateY(0%); } } 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 3s ease' + : 'slide-fade-out-dropdown-animation 3s ease'}; `; // display `-객체의 노출여부/표현방식--` // ( justify-content / align-items) diff --git a/components/viewProduct/ProductFilter.tsx b/components/viewProduct/ProductFilter.tsx index d188ec2..98ccfc9 100644 --- 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,58 @@ export default function ProductFilter() { false, false, ]); - + const [visibilityAnimation, setVisibilityAnimation] = useState([ + false, + false, + false, + false, + false, + ]); const filterListData = Object.values(filterlist.filterList); const filterListKeys = Object.keys(filterlist.filterList); const [checkedItems, setcheckedItems] = useRecoilState[]>(checkedItemsState); const toyKindList = useRecoilValue(toyKindState); + const [repeat, setRepeat] = useState(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, + }); + }, 400), + ); + } + setVisibility({ ...visibility, [idx]: !visibility[idx], }); }; - //const [repeat, setRepeat] = useState(); - // 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 ( {filterListKeys.map((title: string, idx: number) => ( - + { handleDropdown(idx); }} >

{title}

- {visibility[idx] ? : } + {visibilityAnimation[idx] ? : } - {visibility[idx] && ( + {visibilityAnimation[idx] && ( Date: Thu, 21 Jul 2022 17:07:31 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[=20feat=20]=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/viewProduct/FilterDropdown.tsx | 20 ++++++++++++++------ components/viewProduct/ProductFilter.tsx | 3 +-- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/components/viewProduct/FilterDropdown.tsx b/components/viewProduct/FilterDropdown.tsx index 0c58739..3e20528 100644 --- a/components/viewProduct/FilterDropdown.tsx +++ b/components/viewProduct/FilterDropdown.tsx @@ -178,11 +178,15 @@ const StDropdownWrapper = styled.div<{ isExcept: boolean; isDrop: boolean }>` @keyframes slide-fade-in-dropdown-animation { 0% { - transform: translateY(0%); + max-height: 14.8rem; + overflow: hidden; + opacity: 1; } 100% { - transform: translateY(-100%); + opacity: 0; + max-height: 0; + overflow: hidden; } } @@ -190,18 +194,22 @@ const StDropdownWrapper = styled.div<{ isExcept: boolean; isDrop: boolean }>` @keyframes slide-fade-out-dropdown-animation { 0% { - transform: translateY(0%); + opacity: 0; + max-height: 0; + overflow: hidden; } 100% { - transform: translateY(0%); + opacity: 1; + max-height: 14.8rem; + overflow: hidden; } } animation: ${({ isDrop }) => isDrop - ? 'slide-fade-in-dropdown-animation 3s ease' - : 'slide-fade-out-dropdown-animation 3s ease'}; + ? '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 index 98ccfc9..ba3734c 100644 --- a/components/viewProduct/ProductFilter.tsx +++ b/components/viewProduct/ProductFilter.tsx @@ -48,10 +48,9 @@ export default function ProductFilter() { ...visibilityAnimation, [idx]: false, }); - }, 400), + }, 190), ); } - setVisibility({ ...visibility, [idx]: !visibility[idx],