diff --git a/src/components/discordConnect/CompleteDiscordConnect.tsx b/src/components/discordConnect/CompleteDiscordConnect.tsx index 5f9d361..f8c2541 100644 --- a/src/components/discordConnect/CompleteDiscordConnect.tsx +++ b/src/components/discordConnect/CompleteDiscordConnect.tsx @@ -11,8 +11,9 @@ export const CompleteDiscordConnect = () => { 디스코드 연동이 완료되었어요! - 회비 납부, Bevy 가입 등 모든 절차가 완료되면 자동으로 승인될 - 예정이에요! + 재학생 인증 및 회비 납부과 완료되면 +
+ 커뮤니티 멤버로 디스코드에서 활동할 수 있어요. { diff --git a/src/components/myPage/AssociateRequirementCheck.tsx b/src/components/myPage/AssociateRequirementCheck.tsx index e0206de..2649bc3 100644 --- a/src/components/myPage/AssociateRequirementCheck.tsx +++ b/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'} /> - - - GDSC Bevy 가입이 마무리되지 않았어요. - - - 전체 GDSC 이벤트를 확인할 수 있는 -
- 플랫폼이에요. 지금 가입해볼까요? - - - ) : ( - - - GDSC Bevy 가입을 완료했어요. - - - 이제 전체 GDSC 이벤트에 대한 정보를 -
- 확인하고 참여할 수 있어요. - - - ) - } - 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/' - ); - } - }} - /> ); }; diff --git a/src/components/myPage/MemberStatusInfoBox.tsx b/src/components/myPage/MemberStatusInfoBox.tsx index a5b19ab..4303d98 100644 --- a/src/components/myPage/MemberStatusInfoBox.tsx +++ b/src/components/myPage/MemberStatusInfoBox.tsx @@ -30,12 +30,14 @@ const MemberStatusInfoBox = forwardRef( Q. 준회원, 정회원이 무엇이고, 어떤 차이인가요? - 준회원은 가입 후 디스코드 연동, 재학생 인증, Bevy 가입을 완료한 - 회원이에요. 정회원 활동 기간이 끝나면, 다시 준회원으로 변경돼요. + 준회원은 가입 후 디스코드 연동, 재학생 인증, Bevy + 가입을 완료한 회원이에요. 정회원 활동 기간이 끝나면, 다시 준회원으로 + 변경돼요. - 정회원은 정회원 모집 신청을 통해 회비 납부까지 완료한 회원이에요. 이번 - 학기 열리는 각종 학술 프로그램과 이벤트에 참여할 수 있어요. + 정회원은 정회원 모집 신청을 통해 회비 납부까지 완료한 + 회원이에요. 이번 학기 열리는 각종 학술 프로그램과 이벤트에 참여할 수 + 있어요. 회원 상태에 대한 자세한 정보는{' '} @@ -44,7 +46,7 @@ const MemberStatusInfoBox = forwardRef( window.open('https://gdschongik.com/guide/member-status'); }} style={{ cursor: 'pointer' }}> - 가이드라인 + 가이드라인 을 참고해주세요. diff --git a/src/components/payments/CouponDropDown.tsx b/src/components/payments/CouponDropDown.tsx index e010046..1d2ce18 100644 --- a/src/components/payments/CouponDropDown.tsx +++ b/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(null); + const [openInfo, setOpenInfo] = useState(false); const handleChange = (value: { selectedValue: string; @@ -32,9 +38,27 @@ export const CouponDropDown = () => { return ( - - 할인 쿠폰 - + + + 할인 쿠폰 + +
{ + setOpenInfo(!openInfo); + }}> + +
+ {openInfo && ( + + )} + { ); }; + +const Container = styled.div` + position: relative; + width: 100%; + display: flex; + gap: ${space.xxs}; + justify-content: 'flex-start'; + align-items: 'center'; +`; diff --git a/src/components/payments/CouponInfoBox.tsx b/src/components/payments/CouponInfoBox.tsx new file mode 100644 index 0000000..05dff4a --- /dev/null +++ b/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) => void; + expectRef: React.RefObject; +} + +function CouponInfoBox({ setOpenInfo, expectRef }: CouponInfoBoxProps) { + const infoBoxRef = useRef(null); + useClickOutside(infoBoxRef, () => setOpenInfo(false), expectRef); + + return ( + + + 회비 할인 쿠폰은 다음과 같은 경로로 발급받을 수 있어요. + + +
  • 지난 학기 정규 스터디 수료
    • +
  • GDGoC Hongik 코어 멤버
    • +
    + 본인이 해당사항이 있음에도 쿠폰이 없는 경우 카카오톡 채널로 + 문의해주세요. +     +     + ); +} + +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; +`; diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx index 63923f8..2e2e5fc 100644 --- a/src/pages/Auth.tsx +++ b/src/pages/Auth.tsx @@ -1,5 +1,5 @@ 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'; @@ -7,6 +7,9 @@ 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 (
    @@ -32,6 +40,89 @@ export const Auth = () => { 새로 가입해야 해요. + + + + + Q. GitHub가 무엇인가요? + +
    + { + setAccordionState({ + ...accordionState, + githubInfo: !accordionState.githubInfo + }); + }} + /> +
    + {accordionState.githubInfo && ( + + GitHub는 Git을 이용하여 파일을 자유롭게 업로드 및 공유할 수 + 있는 사이트예요. 개발자라면 누구나 이용하는 사이트로, GDGoC + Hongik에서도 학회 운영을 위해 이용하고 있어요. + + )} + + } + /> + + + Q. GitHub는 왜 사용하나요? + +
    + { + setAccordionState({ + ...accordionState, + githubDetail: !accordionState.githubDetail + }); + }} + /> +
    + {accordionState.githubDetail && ( + + GDGoC Hongik에서는 + 정규 스터디의 과제를 GitHub를 통해 관리 + 해요. 매 스터디, 혹은 여러 학술 프로그램에서 이용하기에 + GitHub를 통한 로그인 방식을 채택했어요. + + )} + + } + /> +
    @@ -78,9 +169,7 @@ const TextContainer = styled.div` `; const ButtonContainer = styled.div` - position: absolute; - bottom: 1.75rem; - padding: 0px 0.75rem; + padding-top: 1rem; width: 100%; display: flex; flex-direction: column; @@ -101,3 +190,10 @@ const GithubGuideLink = styled(Link)` color: ${color.black}; } `; + +const AccordionContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: ${space.sm}; +`; diff --git a/src/pages/JoinDiscord.tsx b/src/pages/JoinDiscord.tsx index 833f2cc..700d345 100644 --- a/src/pages/JoinDiscord.tsx +++ b/src/pages/JoinDiscord.tsx @@ -14,28 +14,39 @@ export const JoinDiscord = () => { return ( - 지금 바로 디스코드를 연동하세요. + + 지금 바로
    + 디스코드를 연동하세요. +     + + + 현재 GDGoC Hongik은 디스코드를
    + 메인 커뮤니케이션 플랫폼으로 사용하고 있어요.
    + 따라서 반드시 연동 절차를 완료해야만
    + 정상적인 활동이 가능해요. +     - 현재 GDSC Hongik은 디스코드를 메인 커뮤니케이션 플랫폼으로 사용하고 - 있어요. 따라서 반드시 연동 절차를 완료해야만 정상적인 활동이 가능해요. + 디스코드가 처음이거나 사용법을 확인하고 싶은 분들은
    + 아래 디스코드 가이드라인을 참고해주세요.     + { + navigate(RoutePath.DiscordGuide); + }} + style={{ color: color.discord }} + /> + - - { - navigate(RoutePath.DiscordGuide); - }} - />     ); diff --git a/src/routes/index.tsx b/src/routes/index.tsx index dccc10c..f271f8c 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -13,7 +13,7 @@ import { SignUp, Dashboard, JoinDiscord, - Bevy, + // Bevy, PaymentsSuccess, PaymentsFail, PaymentsCheckout @@ -118,19 +118,6 @@ const router = sentryCreateBrowserRouter([ { path: RoutePath.DiscordGuide, element: - }, - { - path: RoutePath.Bevy, - children: [ - { - index: true, - element: ( - - - - ) - } - ] } ] }, diff --git a/src/routes/routePath.ts b/src/routes/routePath.ts index 9c706aa..d67f8a9 100644 --- a/src/routes/routePath.ts +++ b/src/routes/routePath.ts @@ -5,7 +5,7 @@ const RoutePath = { Home: '/', Dashboard: '/dashboard', - Bevy: '/bevy', + // Bevy: '/bevy', Discord: '/discord', DiscordConnect: '/discord/connect', DiscordGuide: '/discord/guide',