[#345] 인증제 입력 페이지 추가 (#346)

packages/app/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.4.2",
     "@reduxjs/toolkit": "^1.9.3",
     "@sms/shared": "workspace:*",

packages/app/src/features/global/Header/index.tsx

@@ -6,7 +6,8 @@ import useLogout from '@features/auth/hook/useLogout'
 import useMyPage from '@features/student/hooks/useMyPage'
 import useProfileImgQuery from '@features/auth/queries/useProfileImgQuery'
 import useLoggedInQuery from '@features/auth/queries/useLoggedInQuery'
-// import useGSMInfo from '@features/student/hooks/useGSMInfo'
+import useAuthenticationRedirect from '@features/student/hooks/useAuthenticationRedirect'
+import Role from 'types/Role'
 
 import * as S from './style'
 
@@ -18,7 +19,7 @@ interface Props {
 const Header = ({ onFilter }: Props) => {
   const { onLogout } = useLogout()
   const { redirectMyPage } = useMyPage()
-  // const { redirectGSMInfo } = useGSMInfo()
+  const { redirectAuthentication } = useAuthenticationRedirect()
   const [isShow, setIsShow] = useState<boolean>(false)
   const { data: loggedInData } = useLoggedInQuery()
   const { data } = useProfileImgQuery()
@@ -59,16 +60,22 @@ const Header = ({ onFilter }: Props) => {
             </S.UserCircle>
 
             <S.DropdownMenu isShow={isShow} onClose={() => setIsShow(false)}>
-              {/* <S.DropdownItem onClick={redirectGSMInfo}>
-                <Icon.Document color='var(--N50)' /> 인증제
-              </S.DropdownItem> */}
-
               <S.DropdownItem onClick={redirectMyPage}>
                 <Icon.Person color='var(--N50)' /> 마이페이지
               </S.DropdownItem>
 
               <S.Line />
 
+              {loggedInData.role === Role.ROLE_STUDENT && (
+                <>
+                  <S.DropdownItem onClick={redirectAuthentication}>
+                    <Icon.Bag color='var(--N50)' /> 인증제
+                  </S.DropdownItem>
+
+                  <S.Line />
+                </>
+              )}
+
               <S.DropdownItem onClick={onLogout}>
                 <Icon.Out color='var(--N50)' /> 로그아웃
               </S.DropdownItem>

packages/app/src/features/register/molecules/index.ts

@@ -6,4 +6,3 @@ export { default as CertificateInputs } from './CertificateInputs'
 export { default as LanguageInputs } from './LanguageInputs'
 export { default as ProjectsInput } from './ProjectsInput'
 export { default as PrizeInputs } from './PrizeInputs'
-export { default as AuthenticationInputs } from './AuthenticationInputs'

packages/app/src/features/register/queries/usePostFileMutation.tsx

@@ -0,0 +1,21 @@
+import { UseMutationOptions, useMutation } from '@tanstack/react-query'
+import { PostFileService } from '@features/register/services'
+
+interface Param {
+  file: File
+  isImage?: boolean
+}
+
+interface Props
+  extends UseMutationOptions<string | undefined, Error, Param, unknown> {}
+
+const usePostFileMutation = ({ ...props }: Props) => {
+  return useMutation({
+    mutationKey: ['post-file'],
+    mutationFn: ({ file, isImage }: Param) =>
+      PostFileService(file, isImage ?? false),
+    ...props,
+  })
+}
+
+export default usePostFileMutation

packages/app/src/features/register/services/PostFileService/index.tsx

@@ -5,19 +5,15 @@ const PostFileService = async (file: File, isImage: boolean) => {
   const formData = new FormData()
   formData.append('file', file)
 
-  try {
-    const { data } = await axiosApi.post<Response>(
-      `/api/server/file${isImage ? '/image' : ''}`,
-      formData,
-      {
-        headers: { 'Content-Type': 'multipart/form-data' },
-      }
-    )
+  const { data } = await axiosApi.post<Response>(
+    `/api/server/file${isImage ? '/image' : ''}`,
+    formData,
+    {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    }
+  )
 
-    return data.fileUrl
-  } catch (e) {
-    return
-  }
+  return data.fileUrl
 }
 
 export default PostFileService

packages/app/src/features/student/atoms/ArrayController/index.tsx

@@ -0,0 +1,25 @@
+import { Chip, DeleteButton } from '@sms/shared'
+import * as S from './style'
+
+interface Props {
+  onAddClick?: () => void
+  onRemoveClick?: () => void
+  disableAdd?: boolean
+}
+
+const ArrayController = ({ onAddClick, onRemoveClick, disableAdd }: Props) => {
+  return (
+    <S.Wrapper>
+      <Chip
+        disabled={disableAdd}
+        style={{ opacity: disableAdd ? 0 : undefined }}
+        onClick={onAddClick}
+      >
+        추가
+      </Chip>
+      <DeleteButton type='button' onClick={onRemoveClick} />
+    </S.Wrapper>
+  )
+}
+
+export default ArrayController

packages/app/src/features/student/atoms/ArrayController/style.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled'
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`

packages/app/src/features/student/atoms/BooleanInput/index.tsx

@@ -0,0 +1,36 @@
+import { SegmentedControl } from '@sms/shared'
+import { useFormContext } from 'react-hook-form'
+import ErrorWrapper from '@sms/shared/src/atoms/ErrorWrapper'
+import { ErrorMessage } from '@hookform/error-message'
+import type { Field } from '@features/student/dtos/res/AuthenticationFromResDto'
+
+interface Props {
+  field: Field
+  name: string
+}
+
+const BooleanInput = ({ field, name }: Props) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext()
+
+  return (
+    <ErrorWrapper error={<ErrorMessage name={name} errors={errors} />}>
+      <SegmentedControl.Root {...register(name)}>
+        {
+          field.values?.map((value) => (
+            <SegmentedControl.Option
+              key={value.selectId}
+              value={value.selectId}
+            >
+              {value.value}
+            </SegmentedControl.Option>
+          )) as []
+        }
+      </SegmentedControl.Root>
+    </ErrorWrapper>
+  )
+}
+
+export default BooleanInput