[Fix]: 0807 QA 반영 (#95)

* fix: navigate 정상화

* fix: 모집 차수 깨져 보이는 현상 개선

* fix: 모집 기간 아닐 때 에러 화면 제거

* fix: signup화면 제출 문구 수정

* refac: 이메일 도메인 직접 입력할 수 있도록 변경

* feat: 로그아웃 로직 붙임

* fix: wowds-ui 버전 업데이트

package.json

@@ -30,7 +30,7 @@
     "wowds-icons": "^0.1.0",
     "wowds-tokens": "^0.0.9",
     "zustand": "^4.5.0",
-    "wowds-ui": "^0.1.8"
+    "wowds-ui": "^0.1.9"
   },
   "devDependencies": {
     "@sentry/react": "^8.22.0",

src/apis/auth/authApi.ts

@@ -0,0 +1,9 @@
+import apiClient from '..';
+
+const authApi = {
+  LOGOUT: async () => {
+    const response = await apiClient.get(`/auth/logout`);
+    return response.data;
+  }
+};
+export default authApi;

src/components/bottomsheet/JoinRegularMemberBottomSheet.tsx

@@ -19,7 +19,10 @@ const JoinRegularMemberBottomSheet = ({
   currentRecruitment: CurrentRecruitmentType;
 }) => {
   const { joinRegularMember } = useJoinRegularMember();
-  const bottomSheetTitle = convertRecruitmentName(currentRecruitment.name);
+  const bottomSheetTitle = convertRecruitmentName(
+    currentRecruitment.name,
+    currentRecruitment.roundTypeValue
+  );
   const recruitmentPeriod = convertRecruitmentPeriod(currentRecruitment.period);
   return (
     <BottomSheet>

src/components/myPage/ApproveBox.tsx

@@ -19,6 +19,17 @@ export const ApproveBox = ({
   currentRecruitment: CurrentRecruitmentType;
 }) => {
   const { handleBottomSheet } = useBottomSheet();
+
+  if (!currentRecruitment) {
+    return (
+      <Box
+        variant="warn"
+        text="지금은 모집 기간이 아니에요."
+        subText="모집 기간에 다시 확인해주세요!"
+        status="error"
+      />
+    );
+  }
   const boxContent: Record<
     UserRoleType,
     {
@@ -29,13 +40,13 @@ export const ApproveBox = ({
     }
   > = {
     GUEST: {
-      title: `${convertRecruitmentName(currentRecruitment.name)}`,
+      title: `${convertRecruitmentName(currentRecruitment.name, currentRecruitment.roundTypeValue)}`,
       description: '하단의 준회원 가입 조건을 완료해주세요.',
       boxVariant: 'warn',
       status: 'error'
     },
     ASSOCIATE: {
-      title: `${convertRecruitmentName(currentRecruitment.name)}`,
+      title: `${convertRecruitmentName(currentRecruitment.name, currentRecruitment.roundTypeValue)}`,
       description: `${convertRecruitmentPeriod(currentRecruitment.period)}`,
       boxVariant: 'arrow',
       status: 'error'
@@ -47,31 +58,20 @@ export const ApproveBox = ({
     }
   };
   return (
-    <>
-      {currentRecruitment ? (
-        <BoxWrapper
-          onClick={() => {
-            if (role === 'ASSOCIATE') handleBottomSheet();
-            else {
-              return;
-            }
-          }}>
-          <Box
-            variant={boxContent[role].boxVariant}
-            text={boxContent[role].title}
-            subText={boxContent[role].description}
-            status={boxContent[role].status}
-          />
-        </BoxWrapper>
-      ) : (
-        <Box
-          variant="warn"
-          text="지금은 모집 기간이 아니에요."
-          subText="모집 기간에 다시 확인해주세요!"
-          status="error"
-        />
-      )}
-    </>
+    <BoxWrapper
+      onClick={() => {
+        if (role === 'ASSOCIATE') handleBottomSheet();
+        else {
+          return;
+        }
+      }}>
+      <Box
+        variant={boxContent[role].boxVariant}
+        text={boxContent[role].title}
+        subText={boxContent[role].description}
+        status={boxContent[role].status}
+      />
+    </BoxWrapper>
   );
 };
 

src/components/myPage/BasicUserInfo.tsx

@@ -1,17 +1,12 @@
 import { Flex, Text } from '@/components/common/Wrapper';
 import { User } from '@/types/user';
-import { logout } from '@/utils/auth';
+import { useLogout } from '@/hooks/mutation';
 import { typography, color } from 'wowds-tokens';
 
-import { useNavigate } from 'react-router-dom';
-
 const BasicUserInfo = ({ member }: { member: User }) => {
-  const navigate = useNavigate();
-
+  const { mutate } = useLogout();
   const handleLogoutClick = () => {
-    logout();
-    navigate('/');
-    location.reload();
+    mutate();
   };
 
   return (

src/components/signup/EmailInputField.tsx

@@ -0,0 +1,139 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { Control, Controller } from 'react-hook-form';
+import DropDown from 'wowds-ui/DropDown';
+import DropDownOption from 'wowds-ui/DropDownOption';
+import { space } from 'wowds-tokens';
+import TextField from 'wowds-ui/TextField';
+
+type DepartmentSelectProps = {
+  control:
+    | Control<{
+        name: string;
+        studentId: string;
+        phone: string;
+        department: string;
+        email: string;
+        emailDomain: string;
+        terms: boolean;
+        personalPrivacy: boolean;
+      }>
+    | undefined;
+};
+
+const EmailInputField = ({ control }: DepartmentSelectProps) => {
+  const [customEmail, setCustomEmail] = useState(false);
+  return (
+    <EmailFieldWrapper>
+      <Controller
+        name="email"
+        control={control}
+        defaultValue=""
+        rules={{
+          required: {
+            value: true,
+            message: '* 정보를 입력해주세요.'
+          }
+        }}
+        render={({ field, fieldState }) => (
+          <TextFieldWrapper>
+            <TextField
+              style={{ minWidth: '100%' }}
+              label="이메일"
+              error={fieldState.invalid}
+              ref={field.ref}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              placeholder="내용을 입력하세요"
+              helperText={fieldState.error ? fieldState.error?.message : ''}
+            />
+          </TextFieldWrapper>
+        )}
+      />
+      <Controller
+        name="emailDomain"
+        control={control}
+        defaultValue=""
+        rules={{
+          required: {
+            value: true,
+            message: '* 도메인을 입력해주세요.'
+          },
+          pattern: {
+            value: /^@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/,
+            message: '* 이메일 도메인 형식을 지켜주세요.'
+          }
+        }}
+        render={({ field, fieldState }) => (
+          <TextFieldWrapper>
+            {customEmail ? (
+              <TextFieldWrapper>
+                <TextField
+                  style={{ minWidth: '100%' }}
+                  label="도메인"
+                  error={fieldState.invalid}
+                  ref={field.ref}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                  value={field.value}
+                  placeholder="내용을 입력하세요"
+                  helperText={fieldState.error ? fieldState.error?.message : ''}
+                />
+              </TextFieldWrapper>
+            ) : (
+              <DropDown
+                placeholder="선택하세요"
+                {...field}
+                onChange={({ selectedValue }) => {
+                  if (selectedValue === 'custom') {
+                    setCustomEmail(true);
+                  } else {
+                    field.onChange(selectedValue);
+                  }
+                }}
+                style={{ marginTop: '22px', flex: 1, width: '100%' }}>
+                <DropDownOption
+                  key="gmail"
+                  text="@gmail.com"
+                  value="@gmail.com"
+                />
+                <DropDownOption
+                  key="naver"
+                  text="@naver.com"
+                  value="@naver.com"
+                />
+                <DropDownOption
+                  key="hongik"
+                  text="@g.hongik.ac.kr"
+                  value="@g.hongik.ac.kr"
+                />
+                <DropDownOption key="daum" text="@daum.net" value="@daum.net" />
+                <DropDownOption
+                  key="custom"
+                  text="직접 입력하기"
+                  value="custom"
+                />
+              </DropDown>
+            )}
+          </TextFieldWrapper>
+        )}
+      />
+    </EmailFieldWrapper>
+  );
+};
+
+export default EmailInputField;
+
+const TextFieldWrapper = styled.div`
+  flex: 1;
+  height: 84.8px;
+`;
+
+const EmailFieldWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  gap: ${space.sm};
+  align-items: center;
+  justify-content: space-between;
+`;

src/hooks/auth/useStudentVerification.ts

@@ -24,7 +24,7 @@ export default function useStudentVerification() {
   const onSubmit = async ({ univEmail }: FieldValues) => {
     event?.preventDefault();
     updateUnivEmail(univEmail);
-    sendStudentEmail(univEmail);
+    sendStudentEmail(`${univEmail}@g.hongik.ac.kr`);
   };
 
   const onVerifyStudent = () => {

src/hooks/mutation/index.ts

@@ -1,2 +1,3 @@
 export { default as useSendStudentEmail } from './useSendStudentEmail';
 export { default as useVerifyStudentEmail } from './useVerifyStudentEmail';
+export { default as useLogout } from './useLogout';

src/hooks/mutation/useLogout.ts

@@ -0,0 +1,23 @@
+import { useMutation } from '@tanstack/react-query';
+import authApi from '@/apis/auth/authApi';
+import { useNavigate } from 'react-router-dom';
+import RoutePath from '@/routes/routePath';
+import { toast } from 'react-toastify';
+
+export default function useLogout() {
+  const navigate = useNavigate();
+
+  const mutation = useMutation({
+    mutationFn: authApi.LOGOUT,
+    onSuccess: () => {
+      sessionStorage.clear();
+      navigate(RoutePath.Home);
+      location.reload();
+    },
+    onError: () => {
+      toast.error('로그아웃에 실패했어요.');
+    }
+  });
+
+  return mutation;
+}

src/pages/Auth.tsx

@@ -11,9 +11,6 @@ import { Link } from 'react-router-dom';
 /** 깃허브 로그인 및 가입하기 */
 export const Auth = () => {
   const handleClick = () => {
-    //TODO: QA용으로 임시로 설정
-    sessionStorage.setItem('isLogin', 'true');
-
     // GitHub 로그인 페이지로 직접 리다이렉트
     setTimeout(function () {
       document.location.href = RoutePath.AuthGithubLoginRedirect;