From 3e82ac3dbabb5ba5366d0465a3971f63317ba949 Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Thu, 18 Jul 2024 20:45:38 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=20Bevy=20?= =?UTF-8?q?=EB=B7=B0=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- pnpm-lock.yaml | 8 +- src/assets/Circle.tsx | 12 - .../joinDiscord/StepInformation.tsx | 39 ---- src/pages/Bevy.tsx | 215 +++++++++++++----- src/styles/GlobalStyles.ts | 6 +- 6 files changed, 165 insertions(+), 118 deletions(-) delete mode 100644 src/assets/Circle.tsx delete mode 100644 src/components/joinDiscord/StepInformation.tsx diff --git a/package.json b/package.json index 00e7a29..d5ac1f7 100644 --- a/package.json +++ b/package.json @@ -25,11 +25,10 @@ "react-router-dom": "^6.22.1", "react-spinners": "^0.13.8", "react-toastify": "^10.0.4", - "wowds-icons": "^0.0.4", "zustand": "^4.5.0", "wowds-tokens": "^0.0.9", "wowds-ui": "^0.1.3", - "wowds-icons": "^0.0.4" + "wowds-icons": "^0.1.0" }, "devDependencies": { "@storybook/addon-essentials": "^7.6.14", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e4c779..791c09f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -42,8 +42,8 @@ dependencies: specifier: ^10.0.4 version: 10.0.4(react-dom@18.2.0)(react@18.2.0) wowds-icons: - specifier: ^0.0.4 - version: 0.0.4 + specifier: ^0.1.0 + version: 0.1.0 wowds-tokens: specifier: ^0.0.9 version: 0.0.9 @@ -9951,10 +9951,6 @@ packages: resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==} dev: true - /wowds-icons@0.0.4: - resolution: {integrity: sha512-/3E+Wgavc8Bvx+ktgiGe/P4OkxWrfZ4Afx2WNKlpGXU3U34ZCyYkdKVZkbVRziaxwrTEQhqY8Y7RKCwl0gNkwQ==} - dev: false - /wowds-icons@0.1.0: resolution: {integrity: sha512-gb8Op3qS8OpXlvZCw8ZpDkSt1SUkBa5eb9s0C8WpgX2XlajpxXTm8daNpMvsPYnR/v+yGNu2MCFqBE2HhrBpjQ==} dev: false diff --git a/src/assets/Circle.tsx b/src/assets/Circle.tsx deleted file mode 100644 index 105db09..0000000 --- a/src/assets/Circle.tsx +++ /dev/null @@ -1,12 +0,0 @@ -export const Circle = () => { - return ( - - - - ); -}; diff --git a/src/components/joinDiscord/StepInformation.tsx b/src/components/joinDiscord/StepInformation.tsx deleted file mode 100644 index 2b70270..0000000 --- a/src/components/joinDiscord/StepInformation.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Flex, Text } from '@/components/common/Wrapper'; -import { css } from '@emotion/react'; -import { ReactNode } from 'react'; - -interface StepInformationProps { - title: string; - description: string | ReactNode; -} - -export const StepInformation = ({ - title, - description -}: StepInformationProps) => { - const command = '/인증코드'; - - return ( - - - {title} - - - {typeof description === 'string' - ? description - .split(command) - .reduce((prev, current, index) => { - if (index) prev.push({command}); - prev.push(current); - return prev; - }, []) - : description} - - - ); -}; diff --git a/src/pages/Bevy.tsx b/src/pages/Bevy.tsx index c3d28ee..1d005b2 100644 --- a/src/pages/Bevy.tsx +++ b/src/pages/Bevy.tsx @@ -1,9 +1,10 @@ import bevyApi from '@/apis/bevy/bevyApi'; -import { Circle } from '@/assets/Circle'; -import { Button } from '@/components/common/Button'; +import Button from 'wowds-ui/Button'; import { Flex, Space, Text } from '@/components/common/Wrapper'; -import { StepInformation } from '@/components/joinDiscord/StepInformation'; -import { color } from 'wowds-tokens'; +import { DownArrow } from 'wowds-icons'; +import { space, color } from 'wowds-tokens'; +import { useState } from 'react'; +import Box from 'wowds-ui/Box'; import GlobalSize from '@/constants/globalSize'; import { media } from '@/styles'; import { css } from '@emotion/react'; @@ -15,6 +16,10 @@ import RoutePath from '@/routes/routePath'; export const Bevy = () => { const navigate = useNavigate(); + const [accordionState, setAccordionState] = useState({ + bevyInfo: false, + bevyDetail: false + }); const postBevyLinkMutation = useMutation({ mutationFn: bevyApi.POST_LINK_BEVY, @@ -31,80 +36,182 @@ export const Bevy = () => { return ( - + GDSC Bevy 가입하기 - - -
- - -
- - - - - - 가입하러 가기↗ - - - - - - - - Q. GDSC Bevy에 어떻게 가입하나요? + + + + 아래 링크를 통해 GDSC Bevy에 가입해주세요! - - 위 페이지에서 구글 로그인 후 ‘Join Us’ 버튼을 누르면 돼요. 자세한 - 내용은 아래 가이드라인을 참고해주세요. + + 자세한 가입 절차 및 설명은{' '} + { + window.open('https://www.gdschongik.com/guide/gdsc-bevy'); + }} + style={{ cursor: 'pointer' }}> + 가이드라인 + + 을 참고해주세요. + + + + + + Q. GDSC Bevy가 무엇인가요? + +
+ { + setAccordionState({ + ...accordionState, + bevyInfo: !accordionState.bevyInfo + }); + }} + /> +
+ {accordionState.bevyInfo && ( + + GDSC Hongik의 회원 및 다양한 행사를 관리할 수 있는{' '} + 커뮤니티 이벤트 관리 플랫폼 + 이에요. +
+
전 세계 GDSC 커뮤니티가 이벤트를 만들고, 공유할 수 있는 + 플랫폼이기에 다른 GDSC의 활동을 둘러보고 참여할 수도 있어요. + + )} + + } + /> + + + Q. GDSC Bevy에 어떤 정보가 올라오나요? + +
+ { + setAccordionState({ + ...accordionState, + bevyDetail: !accordionState.bevyDetail + }); + }} + /> +
+ {accordionState.bevyDetail && ( + + 1. GDSC Hongik 커뮤니티 내부 이벤트 (파트별 + 오프라인 밋업, 데브렐 행사 등) +
+ 2. 현직 구글러가 진행하는 개발 세미나 +
+
+ 1번의 경우, 커뮤니티 내에서 진행하는 행사에 참여하고 + 싶으시다면 Bevy에서 RSVP를 발급받아야 해요. + 참여 등록 과정을 거쳐야 커뮤니티 행사 참여 기록이 남게 돼요! +
+
+ 2번의 경우, 코어 멤버가 디스코드 + #개발-정보 + {' '} + 채널에 업로드해드릴 예정이에요. + + )} + + } + /> + + + + - - 가이드라인 보기↗ + + 가입하러 가기↗ - - - + + ); }; const Wrapper = styled(Flex)` - min-height: 100vh; width: ${GlobalSize.width}; margin: 0px -16px; padding: 0px 16px; - - background-color: ${color.mono150}; + min-height: calc(100vh - 54px); + background-color: ${color.mono50}; ${media.mobile} { width: 100vw; } `; -const InformationWrapper = styled(Flex)` - padding: 24px; - background-color: ${color.white}; - border-radius: 8px; - border: 1px solid ${color.mono400}; +const ButtonContainer = styled.div` + position: fixed; + bottom: 1.75rem; + padding: 0px 0.75rem; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: ${space.xs}; +`; + +const TextField = styled.div` + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + overflow: hidden; +`; + +const AccordionContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: ${space.sm}; `; diff --git a/src/styles/GlobalStyles.ts b/src/styles/GlobalStyles.ts index b87562b..749aa9f 100644 --- a/src/styles/GlobalStyles.ts +++ b/src/styles/GlobalStyles.ts @@ -55,11 +55,7 @@ export const GlobalStyle = css` } strong { - color: ${color.discord}; - background-color: ${color.white}; - border: 1px solid ${color.discord}; - border-radius: 4px; - padding: 0px 4px; + font-weight: 700; } input:-webkit-autofill { From 98d8cc9d6f908385752676ecb337d89f91e01b6b Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Thu, 18 Jul 2024 20:57:02 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20useMutation=EC=9C=BC=EB=A1=9C=20API?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/mutation/usePostBevyLink.ts | 27 +++++++++++++++++++++++++++ src/pages/Bevy.tsx | 18 +++--------------- 2 files changed, 30 insertions(+), 15 deletions(-) create mode 100644 src/hooks/mutation/usePostBevyLink.ts diff --git a/src/hooks/mutation/usePostBevyLink.ts b/src/hooks/mutation/usePostBevyLink.ts new file mode 100644 index 0000000..91a75df --- /dev/null +++ b/src/hooks/mutation/usePostBevyLink.ts @@ -0,0 +1,27 @@ +import { useMutation } from '@tanstack/react-query'; +import bevyApi from '@/apis/bevy/bevyApi'; +import { toast } from 'react-toastify'; +import RoutePath from '@/routes/routePath'; +import { useNavigate } from 'react-router-dom'; + +const usePostBevyLink = () => { + const navigate = useNavigate(); + const { + mutate: postBevyLink, + error, + ...rest + } = useMutation({ + mutationFn: bevyApi.POST_LINK_BEVY, + onSuccess: () => { + toast('bevy 연동이 완료되었습니다.'); + navigate(RoutePath.Dashboard); + }, + onError: () => { + toast(error?.message); + } + }); + + return { postBevyLink, ...rest }; +}; + +export default usePostBevyLink; diff --git a/src/pages/Bevy.tsx b/src/pages/Bevy.tsx index 1d005b2..23186cb 100644 --- a/src/pages/Bevy.tsx +++ b/src/pages/Bevy.tsx @@ -1,4 +1,3 @@ -import bevyApi from '@/apis/bevy/bevyApi'; import Button from 'wowds-ui/Button'; import { Flex, Space, Text } from '@/components/common/Wrapper'; import { DownArrow } from 'wowds-icons'; @@ -9,28 +8,17 @@ import GlobalSize from '@/constants/globalSize'; import { media } from '@/styles'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { useMutation } from '@tanstack/react-query'; -import { useNavigate } from 'react-router-dom'; -import { toast } from 'react-toastify'; -import RoutePath from '@/routes/routePath'; +import usePostBevyLink from '@/hooks/mutation/usePostBevyLink'; export const Bevy = () => { - const navigate = useNavigate(); + const { postBevyLink } = usePostBevyLink(); const [accordionState, setAccordionState] = useState({ bevyInfo: false, bevyDetail: false }); - const postBevyLinkMutation = useMutation({ - mutationFn: bevyApi.POST_LINK_BEVY, - onSuccess: () => { - toast('bevy 연동이 완료되었습니다.'); - navigate(RoutePath.Dashboard); - } - }); - const handleLinkButtonClick = () => { - postBevyLinkMutation.mutate(); + postBevyLink(); }; return ( From f60315fff26243a80015c04dd6a619755960b786 Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Sat, 20 Jul 2024 12:56:30 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80?= =?UTF-8?q?=20=EC=95=8A=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/joinDiscord/StepSection.tsx | 30 ---------------------- 1 file changed, 30 deletions(-) delete mode 100644 src/components/joinDiscord/StepSection.tsx diff --git a/src/components/joinDiscord/StepSection.tsx b/src/components/joinDiscord/StepSection.tsx deleted file mode 100644 index fd5bcf7..0000000 --- a/src/components/joinDiscord/StepSection.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Flex, Space } from '@/components/common/Wrapper'; -import { color } from 'wowds-tokens'; -import { css } from '@emotion/react'; -import { ReactNode } from 'react'; -export const StepSection = ({ - icon, - height -}: { - icon: ReactNode; - height: number; -}) => { - return ( - - - {icon} - - - ); -};