Merge pull request #414 from Bamdoliro/feat/#413

어드민 원서 상세조회 지원자 페이지 개발

apps/admin/package.json

@@ -42,6 +42,7 @@
     "@maru/utils": "workspace:*",
     "@tanstack/react-query": "^4.32.6",
     "@tanstack/react-query-devtools": "^4.32.6",
+    "@toss/react": "^1.5.0",
     "@toss/use-overlay": "^1.3.6",
     "axios": "^1.4.0",
     "next": "13.4.6",

apps/admin/src/components/form/FormDetailContent/FormDetailContent.tsx

@@ -2,10 +2,12 @@ import { FORM_DETAIL_STEP_LIST } from '@/constants/form/data';
 import { color } from '@maru/theme';
 import { Column, Row, UnderlineButton } from '@maru/ui';
 import { flex } from '@maru/utils';
+import { SwitchCase } from '@toss/react';
 import { useState } from 'react';
 import styled from 'styled-components';
 import FormStatus from './FormStatus/FormStatus';
 import Profile from './Profile/Profile';
+import 지원자정보 from './지원자정보/지원자정보';
 
 interface Props {
     id: number;
@@ -36,6 +38,12 @@ const FormDetailContent = ({ id }: Props) => {
                             </UnderlineButton>
                         ))}
                     </NavigationBar>
+                    <SwitchCase
+                        value={currentFormDetailStep}
+                        caseBy={{
+                            '지원자 정보': <지원자정보 id={id} />,
+                        }}
+                    />
                 </Column>
             </Row>
         </StyledFormDetailContent>

apps/admin/src/components/form/FormDetailContent/Profile/Profile.tsx

@@ -17,9 +17,9 @@ const Profile = ({ id }: Props) => {
     return (
         <StyledProfile>
             <ProfileImageBox>
-                {formDetailData?.applicant.identificationPictureUri ? (
+                {formDetailData ? (
                     <ProfileImage
-                        src={formDetailData?.applicant.identificationPictureUri}
+                        src={formDetailData.applicant.identificationPictureUri}
                         alt="profile-image"
                         width={280}
                         height={280}

apps/admin/src/components/form/FormDetailContent/지원자정보/지원자정보.tsx

@@ -0,0 +1,76 @@
+import DataBox from '@/components/common/DataBox/DataBox';
+import { useFormDetailQuery } from '@/services/form/queries';
+import { color } from '@maru/theme';
+import { Column, Row, Text } from '@maru/ui';
+import { flex } from '@maru/utils';
+import Image from 'next/image';
+import styled from 'styled-components';
+
+interface Props {
+    id: number;
+}
+
+const 지원자정보 = ({ id }: Props) => {
+    const { data: formDetailData } = useFormDetailQuery(id);
+
+    const birthday = formDetailData?.applicant.birthday;
+
+    const formatBirthday = (birthday?: string) => {
+        if (!birthday) return '';
+        const splitBirthday = birthday.split('-');
+        splitBirthday.splice(1, 0, '년 ');
+        splitBirthday.splice(3, 0, '월 ');
+        splitBirthday.push('일');
+        return splitBirthday.join('');
+    };
+
+    return (
+        <Column gap={24}>
+            <Row gap={24}>
+                <DataBox label="이름" data={formDetailData?.applicant.name ?? ''} />
+                <DataBox
+                    label="생년월일"
+                    data={formatBirthday(formDetailData?.applicant.birthday)}
+                />
+            </Row>
+            <Row gap={24}>
+                <DataBox label="이름" data={formDetailData?.applicant.name ?? ''} />
+                <DataBox
+                    label="생년월일"
+                    data={formatBirthday(formDetailData?.applicant.birthday)}
+                />
+            </Row>
+            <ProfileImageDataBox>
+                <Text fontType="H4">증명사진</Text>
+                <ProfileImageBox>
+                    {formDetailData ? (
+                        <Image
+                            src={formDetailData.applicant.identificationPictureUri ?? ''}
+                            alt="profile-image"
+                            width={225}
+                            height={300}
+                        />
+                    ) : null}
+                </ProfileImageBox>
+            </ProfileImageDataBox>
+        </Column>
+    );
+};
+
+export default 지원자정보;
+
+const ProfileImageDataBox = styled.div`
+    ${flex({ flexDirection: 'column' })}
+    gap: 16px;
+    width: 604px;
+    height: 392px;
+    padding: 24px;
+    border-radius: 12px;
+    border: 1px solid ${color.gray200};
+    background: ${color.white};
+`;
+
+const ProfileImageBox = styled.div`
+    width: 225px;
+    height: 300px;
+`;