From 00969c88ba0121c8269452771b5c1266ac9a92e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=ED=98=B8?= Date: Mon, 18 Nov 2024 12:12:55 +0900 Subject: [PATCH 01/15] =?UTF-8?q?feat:=20kakao=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/assets/image/kakao.svg | 3 +++ .../components/Design/components/Button/Button.style.ts | 6 ++++++ .../components/Design/components/Button/Button.type.ts | 2 +- .../Design/components/FixedButton/FixedButton.style.ts | 6 ++++++ .../src/components/Design/components/Icon/Icon.style.ts | 1 + client/src/components/Design/components/Icon/Icon.tsx | 2 ++ client/src/components/Design/token/colors.ts | 9 ++++++++- 7 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 client/src/assets/image/kakao.svg diff --git a/client/src/assets/image/kakao.svg b/client/src/assets/image/kakao.svg new file mode 100644 index 000000000..ad4ac81ca --- /dev/null +++ b/client/src/assets/image/kakao.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/components/Design/components/Button/Button.style.ts b/client/src/components/Design/components/Button/Button.style.ts index e17c9db92..9a4ebe26c 100644 --- a/client/src/components/Design/components/Button/Button.style.ts +++ b/client/src/components/Design/components/Button/Button.style.ts @@ -115,6 +115,12 @@ const getButtonVariantsStyle = (variants: ButtonVariants, theme: Theme) => { }), getHoverAndActiveBackground(theme.colors.tertiary), ], + kakao: [ + css({ + backgroundColor: theme.colors.kakao, + color: theme.colors.onKakao, + }), + ], }; return style[variants]; diff --git a/client/src/components/Design/components/Button/Button.type.ts b/client/src/components/Design/components/Button/Button.type.ts index 512e81105..9c31990d7 100644 --- a/client/src/components/Design/components/Button/Button.type.ts +++ b/client/src/components/Design/components/Button/Button.type.ts @@ -1,7 +1,7 @@ import {Theme} from '@theme/theme.type'; export type ButtonSize = 'small' | 'medium' | 'semiLarge' | 'large'; -export type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'loading'; +export type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'loading' | 'kakao'; export interface ButtonStyleProps { variants?: ButtonVariants; diff --git a/client/src/components/Design/components/FixedButton/FixedButton.style.ts b/client/src/components/Design/components/FixedButton/FixedButton.style.ts index 3698c2b52..2dfff4a72 100644 --- a/client/src/components/Design/components/FixedButton/FixedButton.style.ts +++ b/client/src/components/Design/components/FixedButton/FixedButton.style.ts @@ -152,6 +152,12 @@ const getFixedButtonVariantsStyle = (variants: ButtonVariants, theme: Theme) => }), getHoverAndActiveBackground(theme.colors.tertiary), ], + kakao: [ + css({ + backgroundColor: theme.colors.kakao, + color: theme.colors.onKakao, + }), + ], }; return style[variants]; diff --git a/client/src/components/Design/components/Icon/Icon.style.ts b/client/src/components/Design/components/Icon/Icon.style.ts index 1ffd6f473..ae7df3a45 100644 --- a/client/src/components/Design/components/Icon/Icon.style.ts +++ b/client/src/components/Design/components/Icon/Icon.style.ts @@ -20,6 +20,7 @@ const ICON_DEFAULT_COLOR: Record = { heundeut: 'gray', photoButton: 'white', chevronDown: 'tertiary', + kakao: 'kakao', }; export const iconStyle = ({iconType, theme, iconColor}: IconStylePropsWithTheme) => { diff --git a/client/src/components/Design/components/Icon/Icon.tsx b/client/src/components/Design/components/Icon/Icon.tsx index 4f55abcac..d13f6da2d 100644 --- a/client/src/components/Design/components/Icon/Icon.tsx +++ b/client/src/components/Design/components/Icon/Icon.tsx @@ -3,6 +3,7 @@ import InputDelete from '@assets/image/inputDelete.svg'; import Error from '@assets/image/error.svg'; import Confirm from '@assets/image/confirm.svg'; +import Kakao from '@assets/image/kakao.svg'; import Trash from '@assets/image/trash.svg'; import TrashMini from '@assets/image/trash_mini.svg'; import Search from '@assets/image/search.svg'; @@ -41,6 +42,7 @@ export const ICON = { ), photoButton: , chevronDown: , + kakao: , } as const; export const Icon = ({iconColor, iconType, ...htmlProps}: IconProps) => { diff --git a/client/src/components/Design/token/colors.ts b/client/src/components/Design/token/colors.ts index 38eea4de7..0b40b6295 100644 --- a/client/src/components/Design/token/colors.ts +++ b/client/src/components/Design/token/colors.ts @@ -35,6 +35,7 @@ const PRIMITIVE_COLORS = { 700: '#c9d323', 800: '#b9bb17', 900: '#9e9305', + kakao: '#FEE500', }, green: { 50: '#f4ffe8', @@ -59,6 +60,7 @@ const PRIMITIVE_COLORS = { 700: '#56555A', 800: '#38373B', 900: '#18171B', + kakao: '#181600', }, }; @@ -81,7 +83,9 @@ export type ColorKeys = | 'errorContainer' | 'onErrorContainer' | 'warn' - | 'complete'; + | 'complete' + | 'kakao' + | 'onKakao'; export type ColorTokens = Record; // TODO: (@soha) 대괄호 사용에 대해 논의 @@ -106,6 +110,9 @@ export const COLORS: ColorTokens = { onErrorContainer: PRIMITIVE_COLORS.pink[300], warn: PRIMITIVE_COLORS.yellow[400], complete: PRIMITIVE_COLORS.green[300], + + kakao: PRIMITIVE_COLORS.yellow['kakao'], + onKakao: PRIMITIVE_COLORS.gray['kakao'], }; export const PRIMARY_COLORS = PRIMITIVE_COLORS.purple; From eb8cca30b987303b64ceba833e5c09c1ffd91286 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=ED=98=B8?= Date: Mon, 18 Nov 2024 12:18:37 +0900 Subject: [PATCH 02/15] =?UTF-8?q?feat:=20=EC=A0=95=EC=82=B0=20=EC=8B=9C?= =?UTF-8?q?=EC=9E=91=ED=95=98=EA=B8=B0=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?=EB=B0=8F=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/constants/routerUrls.ts | 1 + client/src/hooks/useMainSection.ts | 16 ------ client/src/pages/LoginPage/LoginPage.style.ts | 11 ++++ client/src/pages/LoginPage/index.tsx | 52 +++++++++++++++++++ client/src/pages/MainPage/MainPage.tsx | 7 +-- client/src/pages/MainPage/Nav/Nav.tsx | 13 ++--- .../Section/MainSection/MainSection.tsx | 16 +++--- client/src/router.tsx | 5 ++ 8 files changed, 84 insertions(+), 37 deletions(-) delete mode 100644 client/src/hooks/useMainSection.ts create mode 100644 client/src/pages/LoginPage/LoginPage.style.ts create mode 100644 client/src/pages/LoginPage/index.tsx diff --git a/client/src/constants/routerUrls.ts b/client/src/constants/routerUrls.ts index af3305706..a28cd4525 100644 --- a/client/src/constants/routerUrls.ts +++ b/client/src/constants/routerUrls.ts @@ -12,4 +12,5 @@ export const ROUTER_URLS = { addImages: '/event/:eventId/admin/add-images', send: 'event/:eventId/:memberId/send', qrCode: 'event/:eventId/qrcode', + login: '/login', }; diff --git a/client/src/hooks/useMainSection.ts b/client/src/hooks/useMainSection.ts deleted file mode 100644 index 9503674bc..000000000 --- a/client/src/hooks/useMainSection.ts +++ /dev/null @@ -1,16 +0,0 @@ -import {useNavigate} from 'react-router-dom'; - -import {ROUTER_URLS} from '@constants/routerUrls'; - -const useMainSection = (trackStartCreateEvent: () => void) => { - const navigate = useNavigate(); - - const handleClick = () => { - trackStartCreateEvent(); - navigate(ROUTER_URLS.createEvent); - }; - - return {handleClick}; -}; - -export default useMainSection; diff --git a/client/src/pages/LoginPage/LoginPage.style.ts b/client/src/pages/LoginPage/LoginPage.style.ts new file mode 100644 index 000000000..9f27351bf --- /dev/null +++ b/client/src/pages/LoginPage/LoginPage.style.ts @@ -0,0 +1,11 @@ +import {css} from '@emotion/react'; + +import {Theme} from '@components/Design/theme/theme.type'; + +export const hrStyle = (theme: Theme) => + css({ + width: '100%', + height: 1, + + backgroundColor: theme.colors.tertiary, + }); diff --git a/client/src/pages/LoginPage/index.tsx b/client/src/pages/LoginPage/index.tsx new file mode 100644 index 000000000..375b9c2c3 --- /dev/null +++ b/client/src/pages/LoginPage/index.tsx @@ -0,0 +1,52 @@ +import {useNavigate} from 'react-router-dom'; + +import Image from '@components/Design/components/Image/Image'; + +import {Button, Flex, FunnelLayout, Icon, MainLayout, Text, TopNav, useTheme} from '@components/Design'; + +import getImageUrl from '@utils/getImageUrl'; + +import {ROUTER_URLS} from '@constants/routerUrls'; + +import {hrStyle} from './LoginPage.style'; + +const LoginPage = () => { + const {theme} = useTheme(); + const navigate = useNavigate(); + + const goNonLoginCreateEvent = () => { + navigate(ROUTER_URLS.createEvent); + }; + + return ( + + + + + + + + + + {`로그인을 사용하면\n더 편하게 사용할 수 있어요`} + + + + +
+ + + + + + ); +}; + +export default LoginPage; diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx index 87c4ed344..af1bec564 100644 --- a/client/src/pages/MainPage/MainPage.tsx +++ b/client/src/pages/MainPage/MainPage.tsx @@ -1,6 +1,5 @@ import Image from '@components/Design/components/Image/Image'; -import useAmplitude from '@hooks/useAmplitude'; import usePageBackground from '@hooks/usePageBackground'; import getImageUrl from '@utils/getImageUrl'; @@ -13,16 +12,14 @@ import {backgroundImageStyle, backgroundStyle, mainContainer} from './MainPage.s import CreatorSection from './Section/CreatorSection/CreatorSection'; const MainPage = () => { - const {trackStartCreateEvent} = useAmplitude(); const {isVisible} = usePageBackground(); return (
-