Merge branch 'GDSC-Hongik:dev' into dev

src/App.tsx

@@ -4,6 +4,7 @@ import {
   OnboardingLogo1,
   OnboardingLogo2
 } from '@/assets/Onboarding';
+import { isAuthenticated } from '@/utils/auth';
 import { Flex, Space, Text } from '@/components/common/Wrapper';
 import { InformationBox } from '@/components/onboarding/InformationBox';
 import { color, typography } from 'wowds-tokens';
@@ -160,7 +161,11 @@ function App() {
         <JoinText />
         <OnboardingLogo2 />
         <Space height={25} />
-        <ApplyButton onClick={() => navigate(RoutePath.Dashboard)}>
+        <ApplyButton
+          onClick={() => {
+            if (isAuthenticated()) navigate(RoutePath.Dashboard);
+            else navigate(RoutePath.GithubSignin);
+          }}>
           가입하기
         </ApplyButton>
         <Space height={40} />

src/components/myPage/JoinRegularMember.tsx

@@ -33,7 +33,7 @@ const JoinRegularMember = ({ paymentStatus }: { paymentStatus: Status }) => {
         status={paymentStatus === 'UNSATISFIED' ? 'error' : 'success'}
         subText={
           paymentStatus === 'UNSATISFIED'
-            ? '이제 카드·계좌이체 등 여러 결제수단을 지원해요.'
+            ? '카드·계좌이체 등 여러 결제수단을 지원해요.'
             : undefined
         }
       />

src/components/payments/PaymentsWidget.tsx

@@ -34,7 +34,7 @@ export function PaymentsWidget() {
 
   const { name, amount, discount, issuedCouponId, totalAmount } = useProduct();
 
-  const { postPrevOrder } = usePostPrevOrder(amount);
+  const { postPrevOrder } = usePostPrevOrder(totalAmount);
 
   const [ready, setReady] = useState(false);
 

src/hooks/mutation/usePostFreeOrder.ts

@@ -0,0 +1,22 @@
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import ordersApi from '@/apis/orders/ordersApi';
+import RoutePath from '@/routes/routePath';
+import { toast } from 'react-toastify';
+
+const usePostFreeOrder = (amount: number) => {
+  const navigate = useNavigate();
+
+  const { mutate: postFreeOrder, ...rest } = useMutation({
+    onMutate: () => {
+      if (amount) toast('결제를 실패했어요. 문제가 지속되면 문의해주세요.');
+    },
+    mutationFn: ordersApi.POST_PREV_FREE_ORDER,
+    onError: () => navigate(RoutePath.PaymentsCheckout),
+    onSuccess: () => navigate(RoutePath.Dashboard)
+  });
+
+  return { postFreeOrder, ...rest };
+};
+
+export default usePostFreeOrder;

src/hooks/mutation/usePostPrevOrder.ts

@@ -1,11 +1,19 @@
 import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+
 import ordersApi from '@/apis/orders/ordersApi';
+import RoutePath from '@/routes/routePath';
+import { toast } from 'react-toastify';
 
 const usePostPrevOrder = (amount: number) => {
+  const navigate = useNavigate();
+
   const { mutate: postPrevOrder, ...rest } = useMutation({
-    mutationFn: amount
-      ? ordersApi.POST_PREV_ORDER
-      : ordersApi.POST_PREV_FREE_ORDER
+    onMutate: () => {
+      if (!amount) toast('결제를 실패했어요. 문제가 지속되면 문의해주세요.');
+    },
+    mutationFn: ordersApi.POST_PREV_ORDER,
+    onError: () => navigate(RoutePath.PaymentsCheckout)
   });
 
   return { postPrevOrder, ...rest };

src/pages/PaymentsCheckout.tsx

@@ -1,14 +1,38 @@
+import { nanoid } from 'nanoid';
+import { useQuery } from '@tanstack/react-query';
+
+import memberApi from '@/apis/member/memberApi';
 import { useFunnel } from '@/hooks/common/useFunnel';
 import { Payments } from '@/components/payments/Payments';
 import { PaymentsWidget } from '@/components/payments/PaymentsWidget';
 import useCustomBack from '@/hooks/common/useCutomBack';
+import { useProduct } from '@/hooks/zustand/useProduct';
+import usePostFreeOrder from '@/hooks/mutation/usePostFreeOrder';
 
 const steps = ['회비 납부', '결제 위젯'];
 
 export const PaymentsCheckout = () => {
   const { Funnel, Step, setStep, currentStep } = useFunnel(steps[0]);
+  const { amount, discount, totalAmount, issuedCouponId } = useProduct();
+  const { postFreeOrder } = usePostFreeOrder(totalAmount);
+  const { data: dashboard } = useQuery({
+    queryKey: ['member'],
+    queryFn: memberApi.GET_DASHBOARD
+  });
 
   const nextClickHandler = (step: string) => {
+    if (!totalAmount && dashboard) {
+      const id = nanoid();
+      postFreeOrder({
+        orderNanoId: id,
+        membershipId: dashboard.currentMembership.membershipId,
+        issuedCouponId: issuedCouponId,
+        totalAmount: amount,
+        discountAmount: discount,
+        finalPaymentAmount: totalAmount
+      });
+      return;
+    }
     setStep(step);
   };
 

src/pages/PaymentsSuccess.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Flex, Text, Space } from '@/components/common/Wrapper';
 import { media } from '@/styles';
+import { useQueryClient } from '@tanstack/react-query';
 import styled from '@emotion/styled';
 
 import Button from 'wowds-ui/Button';
@@ -13,6 +14,7 @@ import usePostOrder from '@/hooks/mutation/usePostOrder';
 
 export function PaymentsSuccess() {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const [searchParams] = useSearchParams();
 
   const { postOrder } = usePostOrder();
@@ -58,7 +60,13 @@ export function PaymentsSuccess() {
         </Flex>
       </Flex>
       <Flex direction="column">
-        <Button onClick={() => navigate(RoutePath.Dashboard)}>완료하기</Button>
+        <Button
+          onClick={() => {
+            navigate(RoutePath.Dashboard);
+            queryClient.invalidateQueries({ queryKey: ['member'] });
+          }}>
+          완료하기
+        </Button>
         <Space height={28} />
       </Flex>
     </Wrapper>

src/pages/StudentVerification.tsx

@@ -74,12 +74,13 @@ export const StudentVerification = () => {
             <EmailContainer>
               <TextFieldWrapper>
                 <TextField
+                  style={{ minWidth: '100%' }}
                   ref={field.ref}
                   onChange={field.onChange}
                   onBlur={field.onBlur}
                   value={field.value}
                   error={fieldState.invalid}
-                  placeholder="로컬파트 작성"
+                  placeholder="이메일 작성"
                   label="학교 이메일"
                   helperText={fieldState.error?.message}
                 />
@@ -176,12 +177,12 @@ const ButtonContainer = styled.div`
 const EmailContainer = styled.div`
   display: flex;
   flex-direction: row;
+  max-width: 260px;
   align-items: center;
   gap: ${space.xs};
 `;
 
 const TextFieldWrapper = styled.div`
   flex: 1;
   height: 84.8px;
-  width: 50%;
 `;

src/pages/redirect/StudentVerificationServerRedirect.tsx

@@ -1,27 +1,23 @@
 import { Text, Flex } from '@/components/common/Wrapper';
 import { useVerifyStudentEmail } from '@/hooks/mutation';
 import { color } from 'wowds-tokens';
-import Button from 'wowds-ui/Button';
 import GlobalSize from '@/constants/globalSize';
 import { media } from '@/styles';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import RoutePath from '@/routes/routePath';
+import { useSearchParams } from 'react-router-dom';
 import { useLayoutEffect } from 'react';
 import LoadingSpinner from '@/components/common/LoadingSpinner';
 
 export const StudentVerificationServerRedirect = () => {
   const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
   const token = searchParams.get('token');
   const { isSuccess, isPending, verifyStudentMail } = useVerifyStudentEmail();
 
   useLayoutEffect(() => {
     if (token) verifyStudentMail(token);
   }, [token, verifyStudentMail]);
 
-  //TODO: 추후 로딩 스피너 추가 필요
   return (
     <Wrapper direction="column">
       {isPending ? (
@@ -46,16 +42,6 @@ export const StudentVerificationServerRedirect = () => {
               </Text>
             )}
           </TextContainer>
-          <ButtonContainer>
-            <Button
-              type="submit"
-              role="button"
-              onClick={() => {
-                navigate(RoutePath.Dashboard);
-              }}>
-              대시보드로 바로가기
-            </Button>
-          </ButtonContainer>
         </Container>
       )}
     </Wrapper>
@@ -90,13 +76,3 @@ const TextContainer = styled.div`
   flex-direction: column;
   align-items: center;
 `;
-
-const ButtonContainer = styled.div`
-  position: absolute;
-  bottom: 1.75rem;
-  padding: 0px 0.75rem;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;