From baf5161c3903c2e8545694b00cd1948bedb14d59 Mon Sep 17 00:00:00 2001 From: 1ilsang <1ilsang@naver.com> Date: Sun, 20 Aug 2023 03:28:59 +0900 Subject: [PATCH] feat(event): Add event layout --- public/svg/gift1.svg | 15 ++++++ public/svg/gift2.svg | 36 +++++++++++++ src/features/event/Container.tsx | 24 ++++++++- src/features/event/event.scss | 50 +++++++++++++++++++ .../event/hooks/useEventContainer.tsx | 12 ++++- 5 files changed, 134 insertions(+), 3 deletions(-) create mode 100644 public/svg/gift1.svg create mode 100644 public/svg/gift2.svg diff --git a/public/svg/gift1.svg b/public/svg/gift1.svg new file mode 100644 index 0000000..fcc0eb0 --- /dev/null +++ b/public/svg/gift1.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/svg/gift2.svg b/public/svg/gift2.svg new file mode 100644 index 0000000..61d65e1 --- /dev/null +++ b/public/svg/gift2.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/features/event/Container.tsx b/src/features/event/Container.tsx index 5273abe..df1953a 100644 --- a/src/features/event/Container.tsx +++ b/src/features/event/Container.tsx @@ -1,11 +1,31 @@ import { FunctionComponent } from 'react'; import useEventContainer from './hooks/useEventContainer'; + +import giftLogo from '/svg/gift1.svg'; +import giftOpenLogo from '/svg/gift2.svg'; import './event.scss'; const EventContainer: FunctionComponent = () => { - useEventContainer(); - return
; + const { open, handleImageClick } = useEventContainer(); + return ( +
+
+
+ JUNCTION Event +
+ Who is the lucky one who got the winning gift? +
+
+
+ gift +
+
+ Press the gift box and check the winning results +
+
+
+ ); }; export default EventContainer; diff --git a/src/features/event/event.scss b/src/features/event/event.scss index e41085a..8c10118 100644 --- a/src/features/event/event.scss +++ b/src/features/event/event.scss @@ -1,3 +1,53 @@ .event-container { height: calc(100vh - 77px); + + .wrap { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .content { + padding-top: 183px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .label { + color: #ffffff; + background-color: #000000; + padding: 3px 8px; + font-size: 14px; + font-weight: 500; + line-height: 24px; + letter-spacing: 0em; + text-align: center; + } + .title { + padding: 8px 0px 24px 0px; + font-size: 24px; + font-weight: 700; + line-height: 36px; + letter-spacing: 0em; + text-align: center; + } + } + .gift { + cursor: pointer; + + :hover { + // TODO: 좌우 애니메이션 + } + } + .description { + padding-top: 14px; + color: #9797AE; + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0em; + text-align: center; + } + } } \ No newline at end of file diff --git a/src/features/event/hooks/useEventContainer.tsx b/src/features/event/hooks/useEventContainer.tsx index c381813..1fc07b1 100644 --- a/src/features/event/hooks/useEventContainer.tsx +++ b/src/features/event/hooks/useEventContainer.tsx @@ -1,14 +1,24 @@ import { useAtom } from 'jotai'; -import { useLayoutEffect } from 'react'; +import { useLayoutEffect, useState } from 'react'; import { titleAtom } from '../../shared/layout/atom'; const useEventContainer = () => { + const [open, setOpen] = useState(false); const [, setTitle] = useAtom(titleAtom); useLayoutEffect(() => { setTitle({ back: true, title: 'Event' }); }, []); + + const handleImageClick = () => { + setOpen(true); + }; + + return { + open, + handleImageClick, + }; }; export default useEventContainer;