[Feature] Bevy 가입 인증 절차를 생성해요.

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",

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;

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 (
     <Wrapper direction="column" justify="flex-start">
       <Space height={40} />
-      <Text typo="h3" color="black">
+      <Text typo="h1" color="textBlack">
         GDSC Bevy 가입하기
       </Text>
-      <Space height={48} />
-      <Flex justify="flex-start" align="flex-start" gap="xs">
-        <div>
-          <Space height={4} />
-          <Circle />
-        </div>
-        <Flex direction="column" align="flex-start" justify="flex-start">
-          <StepInformation
-            title="GDSC Bevy에 가입해주세요."
-            description="아래 링크를 통해 가입하신 뒤, 맨 하단의 ‘가입 완료하기’ 버튼을 눌러주세요."
-          />
-          <Space height={8} />
-          <Text
-            typo="label1"
-            color="blue100"
-            css={css`
-              cursor: pointer;
-              text-decoration: underline;
-            `}>
-            <a
-              href="https://gdsc.community.dev/hongik-university/"
-              target="_blank"
-              rel="noreferrer">
-              가입하러 가기&#8599;
-            </a>
-          </Text>
-        </Flex>
-      </Flex>
-      <Space height={48} />
-      <InformationWrapper direction="column" align="flex-start" gap="sm">
-        <Text typo="body3" color="black">
-          Q. GDSC Bevy에 어떻게 가입하나요?
+      <Space height={20} />
+      <TextField>
+        <Text color="textBlack">
+          아래 링크를 통해 GDSC Bevy에 가입해주세요!
         </Text>
-        <Text typo="body1" color="sub">
-          위 페이지에서 구글 로그인 후 ‘Join Us’ 버튼을 누르면 돼요. 자세한
-          내용은 아래 가이드라인을 참고해주세요.
+        <Text color="textBlack">
+          자세한 가입 절차 및 설명은{' '}
+          <u
+            onClick={() => {
+              window.open('https://www.gdschongik.com/guide/gdsc-bevy');
+            }}
+            style={{ cursor: 'pointer' }}>
+            가이드라인
+          </u>
+          을 참고해주세요.
         </Text>
+      </TextField>
+      <Space height={40} />
+      <Flex
+        direction="column"
+        align="flex-start"
+        justify="flex-start"
+        gap="lg"
+        style={{ position: 'relative' }}>
+        <Box
+          text={
+            <AccordionContainer>
+              <Text
+                css={css`
+                  font-weight: 700;
+                `}>
+                Q. GDSC Bevy가 무엇인가요?
+              </Text>
+              <div
+                style={{
+                  cursor: 'pointer',
+                  position: 'absolute',
+                  right: '24px'
+                }}>
+                <DownArrow
+                  width={20}
+                  height={20}
+                  stroke="sub"
+                  onClick={() => {
+                    setAccordionState({
+                      ...accordionState,
+                      bevyInfo: !accordionState.bevyInfo
+                    });
+                  }}
+                />
+              </div>
+              {accordionState.bevyInfo && (
+                <Text color="sub">
+                  GDSC Hongik의 회원 및 다양한 행사를 관리할 수 있는{' '}
+                  <strong>커뮤니티 이벤트 관리 플랫폼</strong>
+                  이에요.
+                  <br />
+                  <br />전 세계 GDSC 커뮤니티가 이벤트를 만들고, 공유할 수 있는
+                  플랫폼이기에 다른 GDSC의 활동을 둘러보고 참여할 수도 있어요.
+                </Text>
+              )}
+            </AccordionContainer>
+          }
+        />
+        <Box
+          text={
+            <AccordionContainer>
+              <Text
+                css={css`
+                  font-weight: 700;
+                `}>
+                Q. GDSC Bevy에 어떤 정보가 올라오나요?
+              </Text>
+              <div
+                style={{
+                  cursor: 'pointer',
+                  position: 'absolute',
+                  right: '24px'
+                }}>
+                <DownArrow
+                  width={20}
+                  height={20}
+                  stroke="sub"
+                  onClick={() => {
+                    setAccordionState({
+                      ...accordionState,
+                      bevyDetail: !accordionState.bevyDetail
+                    });
+                  }}
+                />
+              </div>
+              {accordionState.bevyDetail && (
+                <Text color="sub">
+                  <strong>1. GDSC Hongik 커뮤니티 내부 이벤트</strong> (파트별
+                  오프라인 밋업, 데브렐 행사 등)
+                  <br />
+                  <strong>2. 현직 구글러가 진행하는 개발 세미나</strong>
+                  <br />
+                  <br />
+                  1번의 경우, 커뮤니티 내에서 진행하는 행사에 참여하고
+                  싶으시다면 Bevy에서 <strong>RSVP</strong>를 발급받아야 해요.
+                  참여 등록 과정을 거쳐야 커뮤니티 행사 참여 기록이 남게 돼요!
+                  <br />
+                  <br />
+                  2번의 경우, 코어 멤버가 디스코드 <strong>
+                    #개발-정보
+                  </strong>{' '}
+                  채널에 업로드해드릴 예정이에요.
+                </Text>
+              )}
+            </AccordionContainer>
+          }
+        />
+        <Space height={8} />
+      </Flex>
+      <Space height={120} />
+      <ButtonContainer>
         <Text
           typo="label1"
-          color="sub"
+          color="primary"
           css={css`
             cursor: pointer;
             text-decoration: underline;
+            padding: 12px 20px;
           `}>
-          <a href="https://www.gdschongik.com/guide/gdsc-bevy">
-            가이드라인 보기&#8599;
+          <a
+            href="https://gdsc.community.dev/hongik-university/"
+            target="_blank"
+            rel="noreferrer">
+            가입하러 가기&#8599;
           </a>
         </Text>
-      </InformationWrapper>
-      <Space height={48} />
-      <Button onClick={handleLinkButtonClick}>가입 완료하기</Button>
+        <Button onClick={handleLinkButtonClick}>가입 완료하기</Button>
+      </ButtonContainer>
     </Wrapper>
   );
 };
 
 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};
 `;