diff --git a/package.json b/package.json index caf40fe..951f613 100644 --- a/package.json +++ b/package.json @@ -26,10 +26,10 @@ "react-router-dom": "^6.22.1", "react-spinners": "^0.13.8", "react-toastify": "^10.0.4", - "wowds-icons": "^0.1.0", "zustand": "^4.5.0", "wowds-tokens": "^0.0.9", - "wowds-ui": "^0.1.3" + "wowds-ui": "^0.1.3", + "wowds-icons": "^0.1.0" }, "devDependencies": { "@storybook/addon-essentials": "^7.6.14", 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/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} - - - ); -}; 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 c3d28ee..23186cb 100644 --- a/src/pages/Bevy.tsx +++ b/src/pages/Bevy.tsx @@ -1,110 +1,205 @@ -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'; 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 postBevyLinkMutation = useMutation({ - mutationFn: bevyApi.POST_LINK_BEVY, - onSuccess: () => { - toast('bevy 연동이 완료되었습니다.'); - navigate(RoutePath.Dashboard); - } + const { postBevyLink } = usePostBevyLink(); + const [accordionState, setAccordionState] = useState({ + bevyInfo: false, + bevyDetail: false }); const handleLinkButtonClick = () => { - postBevyLinkMutation.mutate(); + postBevyLink(); }; 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 29a9e70..884f92b 100644 --- a/src/styles/GlobalStyles.ts +++ b/src/styles/GlobalStyles.ts @@ -61,11 +61,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 {