Feat/#77 회사 등록 페이지 구현

src/pages/contract/EmployeeContract/EmployeeContract.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { EmployeeContract } from './EmployeeContract';
+import EmployeeContract from './EmployeeContract';
 
 const meta: Meta<typeof EmployeeContract> = {
   title: 'pages/EmployeeContract',

src/pages/contract/EmployeeContract/EmployeeContract.tsx

@@ -2,7 +2,7 @@ import { Button, Flex, Input, Typo } from '@/components/common';
 import Layout from '@/features/layout';
 import styled from '@emotion/styled';
 
-export const EmployeeContract = () => {
+export default function EmployeeContract() {
   return (
     <Layout>
       <section>
@@ -151,7 +151,7 @@ export const EmployeeContract = () => {
       </section>
     </Layout>
   );
-};
+}
 
 const LineWrapper = styled.div`
   border: 1px solid #e9e9e9;

src/pages/contract/EmployerContract/EmployerContract.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { EmployerContract } from './EmployerContract';
+import EmployerContract from './EmployerContract';
 
 const meta: Meta<typeof EmployerContract> = {
   title: 'pages/EmployerContract',

src/pages/contract/EmployerContract/EmployerContract.tsx

@@ -2,7 +2,7 @@ import { Button, Flex, Input, Typo } from '@/components/common';
 import Layout from '@/features/layout';
 import styled from '@emotion/styled';
 
-export const EmployerContract = () => {
+export default function EmployerContract() {
   return (
     <Layout>
       <section>
@@ -152,7 +152,7 @@ export const EmployerContract = () => {
       </section>
     </Layout>
   );
-};
+}
 
 const LineWrapper = styled.div`
   border: 1px solid #e9e9e9;

src/pages/registerCompany/RegisterCompany.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import RegisterCompany from './RegisterCompany';
+
+const meta: Meta<typeof RegisterCompany> = {
+  title: 'pages/RegisterCompany',
+  component: RegisterCompany,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RegisterCompany>;
+
+export const Default: Story = {};

src/pages/registerCompany/RegisterCompany.tsx

@@ -0,0 +1,74 @@
+import { Button, Flex, Input, Typo } from '@/components/common';
+import Layout from '@/features/layout';
+import styled from '@emotion/styled';
+
+export default function RegisterCompany() {
+  return (
+    <Layout>
+      <section>
+        <Flex direction="column" alignItems="center">
+          <LineWrapper>
+            <Flex direction="column" justifyContent="space-between" alignItems="center" style={{ width: '100%' }}>
+              <Typo element="h1" size="24px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
+                회사 등록
+              </Typo>
+              <InputWrapper>
+                <InputContainer>
+                  <Input
+                    label="회사 이미지 업로드(선택)"
+                    type="file"
+                    // style={{ width: '570px', height: '48px' }}
+                  ></Input>
+                </InputContainer>
+                <InputContainer>
+                  <Input label="회사명" style={{ width: '570px', height: '48px' }}></Input>
+                </InputContainer>
+                <InputContainer>
+                  <Input label="업직종" style={{ width: '570px', height: '48px' }}></Input>
+                </InputContainer>
+                <InputContainer>
+                  <Input label="브랜드" style={{ width: '570px', height: '48px' }}></Input>
+                </InputContainer>
+                <InputContainer>
+                  <Input label="연 평균 매출액" style={{ width: '570px', height: '48px' }}></Input>
+                </InputContainer>
+              </InputWrapper>
+              <ButtonWrapper>
+                <Button design="default" style={{}}>
+                  등록하기
+                </Button>
+              </ButtonWrapper>
+            </Flex>
+          </LineWrapper>
+        </Flex>
+      </section>
+    </Layout>
+  );
+}
+
+const LineWrapper = styled.div`
+  border: 1px solid #e9e9e9;
+  border-radius: 3px;
+  padding: 100px 200px;
+  margin: 52px 0;
+`;
+
+const InputWrapper = styled.div`
+  margin-top: 28px;
+`;
+
+const InputContainer = styled.div`
+  width: 700px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 24px 0;
+`;
+
+const ButtonWrapper = styled.div`
+  width: 700px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 52px;
+`;

src/routes/path.ts

@@ -31,6 +31,7 @@ const ROUTE_PATH = {
   VISA_REGISTRATION: '/visa-registration',
   MY_ACCOUNT,
   REGISTERSIGN: '/registersign',
+  REGISTERCOMPANY: '/register-company',
 } as const;
 
 export default ROUTE_PATH;

src/routes/router.tsx

@@ -16,6 +16,7 @@ import Resume from '@/pages/resume/Resume';
 import EmployerMyAccount from '@/pages/myAccount/employer';
 import EmployeeMyPage from '@/pages/employee/myPage/EmployeeMyPage';
 import RegisterSign from '@/pages/registerSign/RegisterSign';
+import RegisterCompany from '@/pages/registerCompany/RegisterCompany';
 
 export const router = createBrowserRouter([
   {
@@ -46,6 +47,7 @@ export const router = createBrowserRouter([
       { path: ROUTE_PATH.RESUME, element: <Resume /> },
       { path: ROUTE_PATH.MY_ACCOUNT.EMPLOYER, element: <EmployerMyAccount /> },
       { path: ROUTE_PATH.REGISTERSIGN, element: <RegisterSign /> },
+      { path: ROUTE_PATH.REGISTERCOMPANY, element: <RegisterCompany /> },
     ],
   },
 ]);