[Feature] 와우온보딩 3차 MVP 수정

src/components/myPage/ApproveBox.tsx

@@ -29,7 +29,7 @@ export const ApproveBox = ({
     return (
       <Box
         variant="arrow"
-        text="WOW CLASS"
+        text="정회원 가입 완료"
         subText="GDSC Hongik의 스터디 서비스인 WOW CLASS를 이용할 수 있어요."
         status="success"
         onClick={() => {

src/components/myPage/AssociateRequirementCheck.tsx

@@ -11,8 +11,7 @@ const AssociateRequirementCheck = ({
 }: {
   associateRequirement: AssociateRequirement;
 }) => {
-  const { infoStatus, discordStatus, bevyStatus, univStatus } =
-    associateRequirement;
+  const { infoStatus, discordStatus, univStatus } = associateRequirement;
   const navigate = useNavigate();
 
   const univStatusContent = (univStatus: UnivEmailStatus) => {
@@ -95,52 +94,6 @@ const AssociateRequirementCheck = ({
         status={univStatus === 'SATISFIED' ? 'success' : 'error'}
         variant={univStatus === 'SATISFIED' ? 'text' : 'arrow'}
       />
-      <Box
-        text={
-          bevyStatus === 'UNSATISFIED' ? (
-            <Flex
-              direction="column"
-              gap="xs"
-              justify="flex-start"
-              align="flex-start">
-              <Text typo="h3" color="textBlack">
-                GDSC Bevy 가입이 마무리되지 않았어요.
-              </Text>
-              <Text typo="body1" color="sub">
-                전체 GDSC 이벤트를 확인할 수 있는
-                <br />
-                플랫폼이에요. 지금 가입해볼까요?
-              </Text>
-            </Flex>
-          ) : (
-            <Flex
-              direction="column"
-              gap="xs"
-              justify="flex-start"
-              align="flex-start">
-              <Text typo="h3" color="textBlack">
-                GDSC Bevy 가입을 완료했어요.
-              </Text>
-              <Text typo="body1" color="sub">
-                이제 전체 GDSC 이벤트에 대한 정보를
-                <br />
-                확인하고 참여할 수 있어요.
-              </Text>
-            </Flex>
-          )
-        }
-        variant="arrow"
-        status={bevyStatus === 'UNSATISFIED' ? 'error' : 'success'}
-        onClick={() => {
-          if (bevyStatus === 'UNSATISFIED') {
-            navigate(RoutePath.Bevy);
-          } else {
-            window.open(
-              'https://gdsc.community.dev/hongik-university-seoul-south-korea/'
-            );
-          }
-        }}
-      />
     </Flex>
   );
 };

src/components/myPage/MemberStatusInfoBox.tsx

@@ -30,12 +30,14 @@ const MemberStatusInfoBox = forwardRef(
           Q. 준회원, 정회원이 무엇이고, 어떤 차이인가요?
         </Text>
         <Text typo="body1" color="textWhite">
-          준회원은 가입 후 디스코드 연동, 재학생 인증, Bevy 가입을 완료한
-          회원이에요. 정회원 활동 기간이 끝나면, 다시 준회원으로 변경돼요.
+          <strong>준회원</strong>은 가입 후 디스코드 연동, 재학생 인증, Bevy
+          가입을 완료한 회원이에요. 정회원 활동 기간이 끝나면, 다시 준회원으로
+          변경돼요.
         </Text>
         <Text typo="body1" color="textWhite">
-          정회원은 정회원 모집 신청을 통해 회비 납부까지 완료한 회원이에요. 이번
-          학기 열리는 각종 학술 프로그램과 이벤트에 참여할 수 있어요.
+          <strong>정회원</strong>은 정회원 모집 신청을 통해 회비 납부까지 완료한
+          회원이에요. 이번 학기 열리는 각종 학술 프로그램과 이벤트에 참여할 수
+          있어요.
         </Text>
         <Text typo="body1" color="textWhite">
           회원 상태에 대한 자세한 정보는{' '}
@@ -44,7 +46,7 @@ const MemberStatusInfoBox = forwardRef(
               window.open('https://gdschongik.com/guide/member-status');
             }}
             style={{ cursor: 'pointer' }}>
-            가이드라인
+            <strong>가이드라인</strong>
           </u>
           을 참고해주세요.
         </Text>

src/components/payments/CouponDropDown.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { useRef, type ReactNode, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
 import DropDown from 'wowds-ui/DropDown';
@@ -9,6 +9,10 @@ import { CouponResponse } from '@/apis/coupon/couponType';
 import { useProduct } from '@/hooks/zustand/useProduct';
 
 import { Flex, Text } from '../common/Wrapper';
+import { space } from 'wowds-tokens';
+import styled from '@emotion/styled';
+import { Help } from 'wowds-icons';
+import CouponInfoBox from './CouponInfoBox';
 
 export const CouponDropDown = () => {
   const { data: coupons } = useQuery({
@@ -17,6 +21,8 @@ export const CouponDropDown = () => {
   });
 
   const { issuedCouponId, strDiscount, setDiscount } = useProduct();
+  const helpButtonRef = useRef<HTMLDivElement>(null);
+  const [openInfo, setOpenInfo] = useState(false);
 
   const handleChange = (value: {
     selectedValue: string;
@@ -32,9 +38,27 @@ export const CouponDropDown = () => {
 
   return (
     <Flex justify="flex-start" direction="column" align="flex-start" gap="sm">
-      <Text typo="h2" color="black">
-        할인 쿠폰
-      </Text>
+      <Container>
+        <Text typo="h2" color="black">
+          할인 쿠폰
+        </Text>
+        <div
+          ref={helpButtonRef}
+          onClick={() => {
+            setOpenInfo(!openInfo);
+          }}>
+          <Help
+            width={24}
+            height={24}
+            fill="sub"
+            stroke="sub"
+            style={{ cursor: 'pointer' }}
+          />
+        </div>
+        {openInfo && (
+          <CouponInfoBox setOpenInfo={setOpenInfo} expectRef={helpButtonRef} />
+        )}
+      </Container>
       <DropDown
         style={{ width: '100%' }}
         placeholder="목록을 눌러 선택하세요"
@@ -63,3 +87,12 @@ export const CouponDropDown = () => {
     </Flex>
   );
 };
+
+const Container = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  gap: ${space.xxs};
+  justify-content: 'flex-start';
+  align-items: 'center';
+`;

src/components/payments/CouponInfoBox.tsx

@@ -0,0 +1,52 @@
+import useClickOutside from '@/hooks/useClickOutSide';
+import { SetStateAction, useRef } from 'react';
+import styled from '@emotion/styled';
+import { Flex, Text } from '../common/Wrapper';
+import { space, color } from 'wowds-tokens';
+import { css } from '@emotion/react';
+
+interface CouponInfoBoxProps {
+  setOpenInfo: (value: SetStateAction<boolean>) => void;
+  expectRef: React.RefObject<HTMLElement>;
+}
+
+function CouponInfoBox({ setOpenInfo, expectRef }: CouponInfoBoxProps) {
+  const infoBoxRef = useRef<HTMLDivElement>(null);
+  useClickOutside(infoBoxRef, () => setOpenInfo(false), expectRef);
+
+  return (
+    <Wrapper
+      direction="column"
+      gap="sm"
+      align="flex-start"
+      ref={infoBoxRef}
+      css={css`
+        position: absolute;
+        top: 30px;
+      `}>
+      <Text typo="body1" color="textWhite">
+        회비 할인 쿠폰은 다음과 같은 경로로 발급받을 수 있어요.
+      </Text>
+      <Text typo="body1" color="textWhite">
+        <li>지난 학기 정규 스터디 수료</li>
+        <li>GDGoC Hongik 코어 멤버</li>
+        <br />
+        본인이 해당사항이 있음에도 쿠폰이 없는 경우 카카오톡 채널로
+        문의해주세요.
+      </Text>
+    </Wrapper>
+  );
+}
+
+export default CouponInfoBox;
+
+const Wrapper = styled(Flex)`
+  position: absolute;
+  background-color: ${color.blackOpacity60};
+  border-radius: 8px;
+  box-shadow: 0px 4px 8px 0px ${color.shadowMedium};
+  backdrop-filter: blur(15px);
+  padding: ${space.xl};
+  height: fit-content;
+  z-index: 99;
+`;

src/pages/Auth.tsx

@@ -1,12 +1,15 @@
 import { GitHubButton } from '@/components/auth/GitHubButton';
-import { Text } from '@/components/common/Wrapper';
+import { Flex, Space, Text } from '@/components/common/Wrapper';
 import RoutePath from '@/routes/routePath';
 import { color, space } from 'wowds-tokens';
 import { media } from '@/styles';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import GlobalSize from '@/constants/globalSize';
 import { Link } from 'react-router-dom';
+import Box from 'wowds-ui/Box';
+import { DownArrow } from 'wowds-icons';
+import { useState } from 'react';
 
 /** 깃허브 로그인 및 가입하기 */
 export const Auth = () => {
@@ -17,6 +20,11 @@ export const Auth = () => {
     }, 250);
   };
 
+  const [accordionState, setAccordionState] = useState({
+    githubInfo: false,
+    githubDetail: false
+  });
+
   return (
     <Container>
       <div>
@@ -32,6 +40,88 @@ export const Auth = () => {
             새로 가입해야 해요.
           </Text>
         </TextContainer>
+        <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. GitHub가 무엇인가요?
+                </Text>
+                <div
+                  style={{
+                    cursor: 'pointer',
+                    position: 'absolute',
+                    right: '24px'
+                  }}>
+                  <DownArrow
+                    width={20}
+                    height={20}
+                    stroke="sub"
+                    onClick={() => {
+                      setAccordionState({
+                        ...accordionState,
+                        githubInfo: !accordionState.githubInfo
+                      });
+                    }}
+                  />
+                </div>
+                {accordionState.githubInfo && (
+                  <Text color="sub">
+                    GitHub는 Git을 이용하여 파일을 자유롭게 업로드 및 공유할 수
+                    있는 사이트예요. 개발자라면 누구나 이용하는 사이트로, GDGoC
+                    Hongik에서도 학회 운영을 위해 이용하고 있어요.
+                  </Text>
+                )}
+              </AccordionContainer>
+            }
+          />
+          <Box
+            text={
+              <AccordionContainer>
+                <Text
+                  css={css`
+                    font-weight: 700;
+                  `}>
+                  Q. GitHub는 왜 사용하나요?
+                </Text>
+                <div
+                  style={{
+                    cursor: 'pointer',
+                    position: 'absolute',
+                    right: '24px'
+                  }}>
+                  <DownArrow
+                    width={20}
+                    height={20}
+                    stroke="sub"
+                    onClick={() => {
+                      setAccordionState({
+                        ...accordionState,
+                        githubDetail: !accordionState.githubDetail
+                      });
+                    }}
+                  />
+                </div>
+                {accordionState.githubDetail && (
+                  <Text color="sub">
+                    GDGoC Hongik에서는 정규 스터디의 과제를 GitHub를 통해
+                    관리해요. 매 스터디, 혹은 여러 학술 프로그램에서 이용하기에
+                    GitHub를 통한 로그인 방식을 채택했어요.
+                  </Text>
+                )}
+              </AccordionContainer>
+            }
+          />
+        </Flex>
       </div>
       <ButtonContainer>
         <GitHubButton onClick={handleClick}>
@@ -101,3 +191,10 @@ const GithubGuideLink = styled(Link)`
     color: ${color.black};
   }
 `;
+
+const AccordionContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: ${space.sm};
+`;

src/pages/JoinDiscord.tsx

@@ -17,25 +17,33 @@ export const JoinDiscord = () => {
         <Text typo="h1">지금 바로 디스코드를 연동하세요.</Text>
         <Space height="lg" />
         <Text typo="body1">
-          현재 GDSC Hongik은 디스코드를 메인 커뮤니케이션 플랫폼으로 사용하고
-          있어요. 따라서 반드시 연동 절차를 완료해야만 정상적인 활동이 가능해요.
+          현재 GDGoC Hongik은 디스코드를 <br />
+          메인 커뮤니케이션 플랫폼으로 사용하고 있어요. <br />
+          따라서 반드시 연동 절차를 완료해야만 <br />
+          정상적인 활동이 가능해요.
+        </Text>
+        <Space height="lg" />
+        <Text typo="body1">
+          디스코드가 처음이거나 사용법을 확인하고 싶은 분들은 <br />
+          아래 디스코드 가이드라인을 참고해주세요.
         </Text>
       </Flex>
       <Flex direction="column">
+        <TextButton
+          text="디스코드 가이드라인↗︎"
+          onClick={() => {
+            navigate(RoutePath.DiscordGuide);
+          }}
+          style={{ color: color.discord }}
+        />
+        <Space height="xs" />
         <Button
           onClick={() => {
             navigate(RoutePath.DiscordConnect);
           }}
           style={{ maxWidth: '100%' }}>
-          연동하기
+          연동 정보 입력하기
         </Button>
-        <Space height="xs" />
-        <TextButton
-          text="가입은 처음이신가요?"
-          onClick={() => {
-            navigate(RoutePath.DiscordGuide);
-          }}
-        />
       </Flex>
     </Wrapper>
   );