+
{children}
);
diff --git a/src/components/common/List/index.tsx b/src/components/common/List/index.tsx
index 78f0ec8..ba0efc0 100644
--- a/src/components/common/List/index.tsx
+++ b/src/components/common/List/index.tsx
@@ -6,5 +6,5 @@ interface Props
{
}
export default function List({ items, renderItem }: Props) {
- return <>{items.map((item) => renderItem(item))};
+ return <>{items.map(renderItem)};
}
diff --git a/src/components/common/Modal/Modals.tsx b/src/components/common/Modal/Modals.tsx
new file mode 100644
index 0000000..ff21b81
--- /dev/null
+++ b/src/components/common/Modal/Modals.tsx
@@ -0,0 +1,30 @@
+import { useContext } from 'react';
+import { ModalsDispatchContext, ModalsStateContext } from './index.context';
+import loadable from '@loadable/component';
+
+export interface ModalProps {
+ [key: string]: unknown;
+}
+
+export const modals = {
+ roleModal: loadable(() => import('@features/auth/SignUp/components/common/RoleModal')),
+};
+
+export default function Modals() {
+ const openedModals = useContext(ModalsStateContext);
+ const { close } = useContext(ModalsDispatchContext);
+
+ return openedModals.map((modal, index) => {
+ const { Component, props } = modal;
+ const { onSubmit, ...restProps } = props;
+
+ const handleClose = () => close(Component);
+
+ const handleSubmit = async () => {
+ if (typeof onSubmit === 'function') await onSubmit();
+ handleClose();
+ };
+
+ return ;
+ });
+}
diff --git a/src/components/common/Modal/hooks/useModals.ts b/src/components/common/Modal/hooks/useModals.ts
new file mode 100644
index 0000000..a56575d
--- /dev/null
+++ b/src/components/common/Modal/hooks/useModals.ts
@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import { ModalsDispatchContext } from '../index.context';
+
+export default function useModals() {
+ const { open, close } = useContext(ModalsDispatchContext);
+
+ const openModal = (Component: React.ComponentType, props: any) => {
+ open(Component, props);
+ };
+
+ const closeModal = (Component: React.ComponentType) => {
+ close(Component);
+ };
+
+ return {
+ openModal,
+ closeModal,
+ };
+}
diff --git a/src/components/common/Modal/index.context.tsx b/src/components/common/Modal/index.context.tsx
new file mode 100644
index 0000000..572c9d0
--- /dev/null
+++ b/src/components/common/Modal/index.context.tsx
@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+interface ModalsDispatchContextProps {
+ open: (Component: React.ComponentType, props: any) => void;
+ close: (Component: React.ComponentType) => void;
+}
+
+export const ModalsDispatchContext = createContext({
+ open: () => {},
+ close: () => {},
+});
+
+interface ModalState {
+ Component: React.ComponentType;
+ props: any;
+}
+
+export const ModalsStateContext = createContext([]);
diff --git a/src/components/common/Modal/index.tsx b/src/components/common/Modal/index.tsx
index ae0e2df..6e60a74 100644
--- a/src/components/common/Modal/index.tsx
+++ b/src/components/common/Modal/index.tsx
@@ -4,14 +4,13 @@ import { ReactNode } from 'react';
export type Props = {
textChildren: ReactNode;
buttonChildren: ReactNode;
- borderRadius?: string;
onClose: () => void;
} & React.HTMLAttributes;
-const Modal = ({ textChildren, buttonChildren, borderRadius = '12px', onClose, ...props }: Props) => {
+const Modal = ({ textChildren, buttonChildren, onClose, ...props }: Props) => {
return (
- e.stopPropagation()}>
+ e.stopPropagation()}>
{textChildren}
{buttonChildren}
diff --git a/src/components/common/Select/hooks/useGlobalSelect.ts b/src/components/common/Select/hooks/useGlobalSelect.ts
new file mode 100644
index 0000000..41e22fc
--- /dev/null
+++ b/src/components/common/Select/hooks/useGlobalSelect.ts
@@ -0,0 +1,25 @@
+import { useSelectStore } from '@/store/selectStore';
+import { SelectOptionType } from '@/types/select';
+import { useEffect } from 'react';
+
+const useGlobalSelect = (initialOption: SelectOptionType) => {
+ const { selectedOption, setSelectedOption, initializeOption } = useSelectStore();
+
+ useEffect(() => {
+ if (!selectedOption) {
+ initializeOption(initialOption);
+ }
+ }, [selectedOption, initializeOption, initialOption]);
+
+ const handleSelect = (option: SelectOptionType) => {
+ setSelectedOption(option);
+ option.action();
+ };
+
+ return {
+ selectedOption: selectedOption || initialOption,
+ handleSelect,
+ };
+};
+
+export default useGlobalSelect;
diff --git a/src/components/common/Select/hooks/useSelect.ts b/src/components/common/Select/hooks/useSelect.ts
new file mode 100644
index 0000000..be47d81
--- /dev/null
+++ b/src/components/common/Select/hooks/useSelect.ts
@@ -0,0 +1,20 @@
+import { SelectOptionType } from '@/types/select';
+import { useState } from 'react';
+
+const useSelect = (defaultOption: SelectOptionType) => {
+ const [selectedOption, setSelectedOption] = useState(defaultOption);
+
+ const handleSelect = (option: SelectOptionType) => {
+ if (option.value !== selectedOption.value) {
+ setSelectedOption(option);
+ option.action();
+ }
+ };
+
+ return {
+ selectedOption,
+ handleSelect,
+ };
+};
+
+export default useSelect;
diff --git a/src/components/common/Select/index.context.tsx b/src/components/common/Select/index.context.tsx
new file mode 100644
index 0000000..8b1207f
--- /dev/null
+++ b/src/components/common/Select/index.context.tsx
@@ -0,0 +1,35 @@
+import useToggle from '@/hooks/useToggle';
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
+
+interface SelectContextProps {
+ isOpen: boolean;
+ toggle: () => void;
+ selectedValue?: string;
+ onItemSelect: (value: string) => void;
+}
+
+const SelectContext = createContext(undefined);
+
+export const useSelectContext = () => {
+ const context = useContext(SelectContext);
+ if (!context) {
+ throw new Error('useSelectContext must be used within a useSelectContext');
+ }
+ return context;
+};
+
+export const SelectProvider = ({ children }: PropsWithChildren) => {
+ const [isOpen, toggle] = useToggle();
+ const [selectedValue, setSelectedValue] = useState(undefined);
+
+ const handleItemSelect = (value: string) => {
+ setSelectedValue(value);
+ toggle();
+ };
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/components/common/Select/index.stories.tsx b/src/components/common/Select/index.stories.tsx
new file mode 100644
index 0000000..0775338
--- /dev/null
+++ b/src/components/common/Select/index.stories.tsx
@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Select from '.';
+import { SelectOptionType } from '@/types/select';
+import useGlobalSelect from './hooks/useGlobalSelect';
+import { Icon } from '@/components/common';
+
+const options: SelectOptionType[] = [
+ { value: 'korean', text: '한국어', action: () => console.log('한국어 선택') },
+ { value: 'english', text: '영어', action: () => console.log('영어 선택') },
+ { value: 'vietnamese', text: '베트남어', action: () => console.log('베트남어 선택') },
+];
+
+const meta: Meta = {
+ title: 'common/Select',
+ component: Select,
+ tags: ['autodocs'],
+ argTypes: {
+ icon: {
+ control: 'boolean',
+ description: '아이콘을 표시할지 여부를 결정',
+ },
+ options: {
+ control: 'object',
+ description: '선택할 수 있는 옵션 목록',
+ },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: (args) => {
+ const { selectedOption, handleSelect } = useGlobalSelect(options[0]);
+
+ return (
+
+ }>
+ {selectedOption.text}
+
+
+ {options.map((option) => (
+ handleSelect(option)}>
+ {option.text}
+
+ ))}
+
+
+ );
+ },
+ args: {
+ icon: true,
+ options,
+ },
+};
+
+export const NoIcon: Story = {
+ render: (args) => {
+ const { selectedOption, handleSelect } = useGlobalSelect(options[0]);
+
+ return (
+
+ {selectedOption.text}
+
+ {options.map((option) => (
+ handleSelect(option)}>
+ {option.text}
+
+ ))}
+
+
+ );
+ },
+ args: {
+ icon: false,
+ options,
+ },
+};
+
+export const WithMultipleOptions: Story = {
+ render: (args) => {
+ const { selectedOption, handleSelect } = useGlobalSelect(options[0]);
+
+ return (
+
+ }>
+ {selectedOption.text}
+
+
+ {options.map((option) => (
+ handleSelect(option)}>
+ {option.text}
+
+ ))}
+
+
+ );
+ },
+ args: {
+ icon: true,
+ options: [
+ { value: 'korean', text: '한국어', action: () => console.log('한국어 선택') },
+ { value: 'english', text: '영어', action: () => console.log('영어 선택') },
+ { value: 'vietnamese', text: '베트남어', action: () => console.log('베트남어 선택') },
+ { value: 'japanese', text: '일본어', action: () => console.log('일본어 선택') },
+ ],
+ },
+};
diff --git a/src/components/common/Select/index.tsx b/src/components/common/Select/index.tsx
new file mode 100644
index 0000000..6c9f845
--- /dev/null
+++ b/src/components/common/Select/index.tsx
@@ -0,0 +1,13 @@
+import { SelectRoot as Root } from './sub-components/Root';
+import { SelectTrigger as Trigger } from './sub-components/Trigger';
+import { SelectContent as Content } from './sub-components/Content';
+import { SelectOption as Option } from './sub-components/Option';
+
+const Select = Object.assign({
+ Root,
+ Trigger,
+ Content,
+ Option,
+});
+
+export default Select;
diff --git a/src/components/common/Select/sub-components/Content.tsx b/src/components/common/Select/sub-components/Content.tsx
new file mode 100644
index 0000000..e0cfbed
--- /dev/null
+++ b/src/components/common/Select/sub-components/Content.tsx
@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import { useSelectContext } from '../index.context';
+
+export const SelectContent = ({ children }: { children: React.ReactNode }) => {
+ const { isOpen } = useSelectContext();
+
+ return {children};
+};
+
+export const Content = styled.div<{ isOpen: boolean }>`
+ position: absolute;
+ top: 100%;
+ left: 0;
+ background: ${({ theme }) => theme.palettes.white};
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
+ min-width: 160px;
+ z-index: 1000;
+`;
diff --git a/src/components/common/Select/sub-components/Option.tsx b/src/components/common/Select/sub-components/Option.tsx
new file mode 100644
index 0000000..aef7a87
--- /dev/null
+++ b/src/components/common/Select/sub-components/Option.tsx
@@ -0,0 +1,36 @@
+import { PropsWithChildren } from 'react';
+import { useSelectContext } from '../index.context';
+import styled from '@emotion/styled';
+
+type Props = {
+ value: string;
+ onClick?: () => void;
+} & PropsWithChildren;
+
+export const SelectOption = ({ children, value, onClick, ...rest }: Props) => {
+ const { selectedValue, onItemSelect } = useSelectContext();
+
+ const handleOptionClick = () => {
+ if (onClick) onClick();
+ onItemSelect(value);
+ };
+
+ return (
+
+ );
+};
+
+export const Option = styled.div<{ isSelected: boolean }>`
+ padding: 8px 12px;
+ cursor: pointer;
+ color: ${({ theme, isSelected }) => (isSelected ? theme.palettes.blue : theme.palettes.black)};
+ font-weight: ${({ isSelected }) => (isSelected ? 700 : 400)};
+
+ &:hover {
+ background-color: #f1f1f1;
+ color: ${({ theme }) => theme.palettes.blue};
+ font-weight: 700;
+ }
+`;
diff --git a/src/components/common/Select/sub-components/Root.tsx b/src/components/common/Select/sub-components/Root.tsx
new file mode 100644
index 0000000..e1c6736
--- /dev/null
+++ b/src/components/common/Select/sub-components/Root.tsx
@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+import { SelectProvider } from '../index.context';
+
+export const SelectRoot = ({ children }: { children: React.ReactNode }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export const Root = styled.div`
+ position: relative;
+ display: inline-block;
+`;
diff --git a/src/components/common/Select/sub-components/Trigger.tsx b/src/components/common/Select/sub-components/Trigger.tsx
new file mode 100644
index 0000000..e67dcb2
--- /dev/null
+++ b/src/components/common/Select/sub-components/Trigger.tsx
@@ -0,0 +1,26 @@
+import { Flex } from '@components/common';
+import { useSelectContext } from '../index.context';
+import { PropsWithChildren, ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type Props = {
+ icon?: ReactNode;
+} & PropsWithChildren;
+
+export const SelectTrigger = ({ icon, children, ...rest }: Props) => {
+ const { toggle } = useSelectContext();
+
+ return (
+
+ );
+};
+
+const Icon = styled.div`
+ display: flex;
+ align-items: center;
+`;
diff --git a/src/components/common/Spinner/index.stories.tsx b/src/components/common/Spinner/index.stories.tsx
new file mode 100644
index 0000000..6cde837
--- /dev/null
+++ b/src/components/common/Spinner/index.stories.tsx
@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Spinner from '.';
+
+const meta: Meta = {
+ title: 'common/Spinner',
+ component: Spinner,
+ tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/common/Spinner/index.tsx b/src/components/common/Spinner/index.tsx
new file mode 100644
index 0000000..909c4e7
--- /dev/null
+++ b/src/components/common/Spinner/index.tsx
@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+
+const spinnerStyle = css`
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border: 4px solid rgba(0, 0, 0, 0.1);
+ border-left-color: #09f;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ animation: spin 1s linear infinite;
+
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+`;
+
+export default function Spinner() {
+ return ;
+}
diff --git a/src/components/common/Table/index.stories.tsx b/src/components/common/Table/index.stories.tsx
new file mode 100644
index 0000000..19a068e
--- /dev/null
+++ b/src/components/common/Table/index.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Table, Td, Th } from '.';
+
+const meta: Meta = {
+ title: 'common/Table',
+ component: Table,
+ tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: (args) => (
+
+
+
+ | heading 1 |
+ heading 2 |
+ heading 3 |
+
+
+
+
+ | data 1 |
+ data 2 |
+ data 3 |
+
+
+ | data 4 |
+ data 5 |
+ data 6 |
+
+
+
+ ),
+};
diff --git a/src/components/common/Table/index.style.ts b/src/components/common/Table/index.style.ts
new file mode 100644
index 0000000..163f117
--- /dev/null
+++ b/src/components/common/Table/index.style.ts
@@ -0,0 +1,33 @@
+import { palettes } from '@/assets/styles/global/palettes';
+import { responsiveStyle } from '@/utils/responsive';
+import { css } from '@emotion/react';
+
+export const TableStyle = css`
+ ${responsiveStyle({
+ default: {
+ width: '100%',
+ fontSize: '16px',
+ borderCollapse: 'collapse',
+ wordWrap: 'break-word',
+ },
+ tablet: {
+ fontSize: '15px',
+ },
+ })}
+`;
+
+export const ThStyle = css`
+ padding: 10px 30px;
+ background-color: ${palettes.backgroundGray};
+ border: none;
+ border-top: 1px solid ${palettes.black};
+ border-bottom: 1px solid ${palettes.black};
+ text-align: left;
+`;
+
+export const TdStyle = css`
+ padding: 20px 30px;
+ border: none;
+ border-bottom: 1px solid ${palettes.borderGray};
+ text-align: left;
+`;
diff --git a/src/components/common/Table/index.tsx b/src/components/common/Table/index.tsx
new file mode 100644
index 0000000..7b81a38
--- /dev/null
+++ b/src/components/common/Table/index.tsx
@@ -0,0 +1,38 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { TableStyle, TdStyle, ThStyle } from './index.style';
+
+type TableProps = {
+ children: ReactNode;
+} & HTMLAttributes;
+
+type ThProps = {
+ children?: ReactNode;
+} & HTMLAttributes;
+
+type TdProps = {
+ children: ReactNode;
+} & HTMLAttributes;
+
+export function Table({ children, ...rest }: TableProps) {
+ return (
+
+ );
+}
+
+export function Th({ children, ...rest }: ThProps) {
+ return (
+
+ {children}
+ |
+ );
+}
+
+export function Td({ children, ...rest }: TdProps) {
+ return (
+
+ {children}
+ |
+ );
+}
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index cfae363..3d45851 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -8,3 +8,7 @@ export { default as Typo } from './Typo';
export { default as Icon } from './Icon';
export { default as List } from './List';
export { default as Image } from './Image';
+export { default as Select } from './Select';
+export { default as AsyncBoundary } from './AsyncBoundary';
+export { default as Spinner } from './Spinner';
+export { Table, Th, Td } from './Table';
diff --git a/src/components/providers/Modals.provider.tsx b/src/components/providers/Modals.provider.tsx
new file mode 100644
index 0000000..7beca6b
--- /dev/null
+++ b/src/components/providers/Modals.provider.tsx
@@ -0,0 +1,29 @@
+import { ModalsDispatchContext, ModalsStateContext } from '../common/Modal/index.context';
+import { PropsWithChildren, useState, useMemo } from 'react';
+
+interface ModalState {
+ Component: React.ComponentType;
+ props: any;
+}
+
+const ModalsProvider = ({ children }: PropsWithChildren) => {
+ const [openedModals, setOpenedModals] = useState([]);
+
+ const open = (Component: React.ComponentType, props: any) => {
+ setOpenedModals((modals) => [...modals, { Component, props }]);
+ };
+
+ const close = (Component: React.ComponentType) => {
+ setOpenedModals((modals) => modals.filter((modal) => modal.Component !== Component));
+ };
+
+ const dispatch = useMemo(() => ({ open, close }), []);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default ModalsProvider;
diff --git a/src/components/providers/index.provider.tsx b/src/components/providers/index.provider.tsx
index 4b12809..36597b8 100644
--- a/src/components/providers/index.provider.tsx
+++ b/src/components/providers/index.provider.tsx
@@ -1,6 +1,19 @@
import { ReactNode } from 'react';
import GlobalStylesProvider from './GlobalStylesProvider/index.provider';
+import ModalsProvider from './Modals.provider';
+import Modals from '../common/Modal/Modals';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from '@/apis/instance';
export default function AppProviders({ children }: { children: ReactNode }) {
- return {children};
+ return (
+
+
+
+ {children}
+
+
+
+
+ );
}
diff --git a/src/features/applicants/ApplicantList/ApplicantsTable/index.styles.ts b/src/features/applicants/ApplicantList/ApplicantsTable/index.styles.ts
new file mode 100644
index 0000000..41faa55
--- /dev/null
+++ b/src/features/applicants/ApplicantList/ApplicantsTable/index.styles.ts
@@ -0,0 +1,37 @@
+import { responsiveStyle } from '@/utils/responsive';
+import { css } from '@emotion/react';
+
+export const buttonsCellStyle = css`
+ ${responsiveStyle({
+ default: {
+ width: '600px',
+ },
+ tablet: {
+ width: '280px',
+ },
+ mobile: {
+ width: '200px',
+ },
+ })}
+`;
+
+export const buttonGroupStyle = css`
+ ${responsiveStyle({
+ tablet: {
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ gap: '10px',
+ },
+ })}
+`;
+
+export const buttonStyle = css`
+ ${responsiveStyle({
+ default: {
+ whiteSpace: 'nowrap',
+ },
+ mobile: {
+ fontSize: '15px',
+ },
+ })}
+`;
diff --git a/src/features/applicants/ApplicantList/ApplicantsTable/index.tsx b/src/features/applicants/ApplicantList/ApplicantsTable/index.tsx
new file mode 100644
index 0000000..945bedc
--- /dev/null
+++ b/src/features/applicants/ApplicantList/ApplicantsTable/index.tsx
@@ -0,0 +1,58 @@
+import { Button, Flex, List, Table, Td, Th } from '@/components/common';
+import { useState } from 'react';
+import ContractModal from '../ContractModal';
+import { ApplicantData } from '@/types';
+import { buttonGroupStyle, buttonsCellStyle, buttonStyle } from './index.styles';
+
+type Props = {
+ applicantList: ApplicantData[];
+};
+
+export default function ApplicantsTable({ applicantList }: Props) {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const handleOpenModal = () => {
+ setIsModalOpen(true);
+ };
+
+ const handleCloseModal = () => {
+ setIsModalOpen(false);
+ };
+
+ return (
+ <>
+
+
+
+ | 이름 |
+ 국적 |
+ 한국어 실력 |
+ |
+
+
+
+ (
+
+ | {applicant.name} |
+ {applicant.applicantNation} |
+ {applicant.korean} |
+
+
+
+
+
+
+ |
+
+ )}
+ />
+
+
+
+
+ );
+}
diff --git a/src/features/applicants/ApplicantList/ContractModal/ModalText/index.styles.ts b/src/features/applicants/ApplicantList/ContractModal/ModalText/index.styles.ts
new file mode 100644
index 0000000..5966ad7
--- /dev/null
+++ b/src/features/applicants/ApplicantList/ContractModal/ModalText/index.styles.ts
@@ -0,0 +1,13 @@
+export const titleStyle = {
+ fontWeight: 'bold',
+ marginBottom: '20px',
+};
+
+export const paragraphStyle = {
+ marginBottom: '20px',
+};
+
+export const headingStyle = {
+ ...titleStyle,
+ marginTop: '20px',
+};
diff --git a/src/features/applicants/ApplicantList/ContractModal/ModalText/index.tsx b/src/features/applicants/ApplicantList/ContractModal/ModalText/index.tsx
new file mode 100644
index 0000000..6b8dcce
--- /dev/null
+++ b/src/features/applicants/ApplicantList/ContractModal/ModalText/index.tsx
@@ -0,0 +1,44 @@
+import { palettes } from '@/assets/styles/global/palettes';
+import { ForeignerData } from '@/types';
+import { Typo } from '@/components/common';
+import { headingStyle, paragraphStyle, titleStyle } from './index.styles';
+
+type Props = Pick;
+
+export default function ModalText({ foreignerIdNumber, visaGenerateDate }: Props) {
+ return (
+ <>
+
+ ✅ 고용주님께 드리는 주의사항
+
+
+ 불법 체류자를 고용할 시 최대 200만원의 범칙금이 부과될 수 있습니다.
+
+
+
+ 지원자 정보
+
+
+ 외국인 등록 번호 : {foreignerIdNumber}
+
+ 비자 발급 일자 : {visaGenerateDate}
+
+
이 지원자의 정보를 활용하여
+
+ 하이코리아
+
+ 에서 지원자에 대한
+
+ 불법 체류 여부를 검증할 수 있습니다.
+
+
+ 안전한 고용을 위해 확인 후 진행하는 것을 권장합니다.
+
+
+ );
+}
diff --git a/src/features/applicants/ApplicantList/ContractModal/index.mock.ts b/src/features/applicants/ApplicantList/ContractModal/index.mock.ts
new file mode 100644
index 0000000..8093bf3
--- /dev/null
+++ b/src/features/applicants/ApplicantList/ContractModal/index.mock.ts
@@ -0,0 +1,5 @@
+export const foreigner = {
+ foreignerIdNumber: '123456-1234567',
+ visaGenerateDate: '2000-00-00',
+ visaExpiryDate: '2000-00-00',
+};
diff --git a/src/features/applicants/ApplicantList/ContractModal/index.styles.ts b/src/features/applicants/ApplicantList/ContractModal/index.styles.ts
new file mode 100644
index 0000000..42599dd
--- /dev/null
+++ b/src/features/applicants/ApplicantList/ContractModal/index.styles.ts
@@ -0,0 +1,15 @@
+import { palettes } from '@/assets/styles/global/palettes';
+import { css } from '@emotion/react';
+
+export const modalStyle = {
+ padding: '15px',
+};
+
+export const customButtonStyle = css`
+ background-color: ${palettes.blue};
+ color: ${palettes.white};
+`;
+
+export const buttonTextStyle = {
+ color: `${palettes.white}`,
+};
diff --git a/src/features/applicants/ApplicantList/ContractModal/index.tsx b/src/features/applicants/ApplicantList/ContractModal/index.tsx
new file mode 100644
index 0000000..0afbe7b
--- /dev/null
+++ b/src/features/applicants/ApplicantList/ContractModal/index.tsx
@@ -0,0 +1,39 @@
+import { Button, Flex, Icon, Modal, Typo } from '@/components/common';
+import ModalText from './ModalText';
+import { foreigner } from './index.mock';
+import { buttonTextStyle, customButtonStyle, modalStyle } from './index.styles';
+
+interface ContractModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export default function ContractModal({ isOpen, onClose }: ContractModalProps) {
+ return (
+ <>
+ {isOpen && (
+
+ }
+ buttonChildren={
+
+
+
+
+ }
+ /* onClose 부분 추후 수정 예정 */
+ onClose={onClose}
+ style={modalStyle}
+ />
+ )}
+
+ );
+}
diff --git a/src/features/applicants/ApplicantList/index.tsx b/src/features/applicants/ApplicantList/index.tsx
new file mode 100644
index 0000000..a355b49
--- /dev/null
+++ b/src/features/applicants/ApplicantList/index.tsx
@@ -0,0 +1,23 @@
+import { Flex, Typo } from '@/components/common';
+import ApplicantsTable from './ApplicantsTable';
+import { ApplicantData } from '@/types';
+
+type Props = {
+ applicantList: ApplicantData[];
+};
+
+export default function ApplicantList({ applicantList }: Props) {
+ return (
+
+
+
+ 지원자 목록
+
+
+ 총 {applicantList.length}건
+
+
+
+
+ );
+}
diff --git a/src/features/auth/RoleModal.tsx b/src/features/auth/RoleModal.tsx
deleted file mode 100644
index 52e9cac..0000000
--- a/src/features/auth/RoleModal.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Modal, Typo, Flex, Button } from '@components/common';
-import { ReactNode } from 'react';
-
-type Props = {
- content: ReactNode;
- onClose: () => void;
-};
-
-export default function RoleModal({ content, onClose }: Props) {
- return (
-
-
- 정보를 입력해주세요.
-
- {content}
-
-
- * 추후 마이페이지에서 수정 할 수 있습니다.
-
-
-