Merge branch 'develop'

Team-return · Nov 6, 2024 · 4c7798b · 4c7798b
2 parents 9ca7ee2 + 0cd9c47
commit 4c7798b
Show file tree

Hide file tree

Showing 11 changed files with 237 additions and 26 deletions.
diff --git a/apps/company/src/apis/company/types.ts b/apps/company/src/apis/company/types.ts
@@ -16,6 +16,7 @@ export interface IUpdateCompanyInfoRequest {
   company_profile_url?: string;
   service_name: string;
   business_area_code: number | string;
+  manager_phone_no: string;
 }
 export interface ICompanyRegisterRequest extends IUpdateCompanyInfoRequest {
   name: string;

diff --git a/apps/company/src/app/company/page.tsx b/apps/company/src/app/company/page.tsx
@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import * as S from "./style";
-import { Text, Flex } from "@jobis/ui";
+import { Text, Flex, Icon } from "@jobis/ui";
 import SeeMoreIcon from "../../../public/seemore.svg";
 import { themes } from "@jobis/design-token";
 import { CompanyContentTemplate } from "@/components/companyContentTemplate";
@@ -114,6 +114,65 @@ export default function Company() {
             title="대표 번호"
             content={myCompanyInfo?.representative_phone_no}
           />
+          <CompanyContentTemplate
+            title="사업자 등록증"
+            content={
+              myCompanyInfo?.biz_registration_url ? (
+                <S.FileWrapper type="button">
+                  <Flex align="center" gap={4}>
+                    <Icon
+                      icon="FileEarmarkArrowDown"
+                      size={16}
+                      color={themes.Color.grayScale[60]}
+                    />
+                    <Text
+                      fontSize="body3"
+                      fontWeight="regular"
+                      color={themes.Color.grayScale[60]}
+                      whiteSpace="nowrap"
+                      style={{ textOverflow: "ellipsis", maxWidth: 500 }}
+                    >
+                      {myCompanyInfo.biz_registration_url
+                        .split("/")
+                        .pop()
+                        ?.replace(/^[\w-]+-/, "")}
+                    </Text>
+                  </Flex>
+                </S.FileWrapper>
+              ) : null
+            }
+          />
+          <CompanyContentTemplate
+            title="파일첨부"
+            content={
+              myCompanyInfo?.attachment_urls &&
+              myCompanyInfo.attachment_urls.length > 0
+                ? myCompanyInfo.attachment_urls.map((file, idx) => (
+                    <S.FileWrapper type="button" key={idx}>
+                      <Flex align="center" gap={4}>
+                        <Icon
+                          icon="FileEarmarkArrowDown"
+                          size={16}
+                          color={themes.Color.grayScale[60]}
+                        />
+                        <Text
+                          fontSize="body3"
+                          fontWeight="regular"
+                          color={themes.Color.grayScale[60]}
+                          whiteSpace="nowrap"
+                          style={{ textOverflow: "ellipsis", maxWidth: 500 }}
+                        >
+                          {file
+                            .split("/")
+                            .pop()
+                            ?.replace(/^[\w-]+-/, "")}
+                        </Text>
+                      </Flex>
+                    </S.FileWrapper>
+                  ))
+                : null
+            }
+          />
         </Flex>
       </Flex>
     </S.Container>

diff --git a/apps/company/src/app/company/style.ts b/apps/company/src/app/company/style.ts
@@ -40,3 +40,15 @@ export const IconWrapper = styled.div`
   position: relative;
   display: inline-block;
 `;
+
+export const FileWrapper = styled.button`
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 88px;
+
+  background-color: ${themes.Color.grayScale[30]};
+  outline: none;
+  gap: 12px;
+`;
diff --git a/apps/company/src/app/my/page.tsx b/apps/company/src/app/my/page.tsx
@@ -18,7 +18,9 @@ export default function My() {
 
   return (
     <S.Container>
-      {hasRecruitments ? (
+      {isLoading ? (
+        <></>
+      ) : hasRecruitments ? (
         <>
           <SubTitleTemplate
             title="모집의뢰서"

diff --git a/apps/company/src/app/registration/page.tsx b/apps/company/src/app/registration/page.tsx
@@ -17,14 +17,7 @@ import {
 import { themes } from "@jobis/design-token";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { ICompanyRegisterRequest } from "@/apis/company/types";
-import {
-  RefObject,
-  TextareaHTMLAttributes,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { RefObject, useCallback, useEffect, useRef, useState } from "react";
 import { useModal } from "@/hooks/useModal";
 import { Address } from "react-daum-postcode";
 import DaumPostcode from "react-daum-postcode";
@@ -42,7 +35,6 @@ import {
 } from "@/hooks/apis/useCompanyApi";
 import { useGetCode } from "@/hooks/apis/useCodeApi";
 import { AxiosError } from "axios";
-import { Background } from "@/components/modal/style";
 
 export default function Registration() {
   const searchParams = useSearchParams();
@@ -85,6 +77,7 @@ export default function Registration() {
       manager_name: myCompanyInfo?.manager_name || "",
       company_profile_url: myCompanyInfo?.company_logo_url,
       headquarter: myCompanyInfo?.headquarter || false,
+      manager_phone_no: myCompanyInfo?.manager_phone_no || "",
     },
   });
   const { toast } = useToast();
@@ -365,6 +358,36 @@ export default function Registration() {
               errorMessage={errors.business_number?.message}
             />
           </InputTemplate>,
+          <InputTemplate
+            key="representative_phone_no"
+            title="기업 대표번호"
+            required
+          >
+            <Controller
+              control={control}
+              name="representative_phone_no"
+              rules={{
+                required: "필수 입력 항목입니다.",
+                pattern: {
+                  value: /^\d{2,3}-\d{3,4}-\d{4}$/,
+                  message: "유효한 전화번호 형식이 아닙니다.",
+                },
+              }}
+              render={({ field }) => (
+                <Input
+                  {...field}
+                  type="tel"
+                  width={604}
+                  placeholder="nnn-nnnn-nnnn"
+                  maxLength={13}
+                  onChange={e =>
+                    field.onChange(regex.phone_number(e.target.value))
+                  }
+                  errorMessage={errors.representative_phone_no?.message}
+                />
+              )}
+            />
+          </InputTemplate>,
           <InputTemplate key="representative-name" title="대표자" required>
             <Input
               width={604}
@@ -559,14 +582,10 @@ export default function Registration() {
                 errorMessage={errors.manager_name?.message}
               />
             </InputTemplate>
-            <InputTemplate
-              key="representative_phone_no"
-              title="대표 연락처"
-              required
-            >
+            <InputTemplate key="manager_phone_no" title="전화번호" required>
               <Controller
                 control={control}
-                name="representative_phone_no"
+                name="manager_phone_no"
                 rules={{
                   required: "필수 입력 항목입니다.",
                   pattern: {
@@ -584,7 +603,7 @@ export default function Registration() {
                     onChange={e =>
                       field.onChange(regex.phone_number(e.target.value))
                     }
-                    errorMessage={errors.representative_phone_no?.message}
+                    errorMessage={errors.manager_phone_no?.message}
                   />
                 )}
               />

diff --git a/apps/company/src/components/companyContentTemplate/index.tsx b/apps/company/src/components/companyContentTemplate/index.tsx
@@ -2,7 +2,7 @@ import * as S from "./style";
 
 interface PropType {
   title: string;
-  content?: string | number;
+  content?: React.ReactNode;
 }
 
 export const CompanyContentTemplate = ({ title, content }: PropType) => {

diff --git a/apps/company/src/components/modal/editModal/editModal.tsx b/apps/company/src/components/modal/editModal/editModal.tsx
@@ -1,38 +1,60 @@
+// EditModal.tsx
 "use client";
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import * as S from "./style";
 import { Text } from "@jobis/ui";
 import { themes } from "@jobis/design-token";
 import Link from "next/link";
 import { useMyCompanyInfo } from "@/hooks/apis/useCompanyApi";
-import { useEffect } from "react";
+import Modal from "..";
+import LogoutModal from "../logout/logoutModal";
 
 interface PropsType {
   closeModal: () => void;
 }
 
 const EditModal: React.FC<PropsType> = () => {
   const { data: myCompanyInfo } = useMyCompanyInfo();
+  const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
+
   useEffect(() => {
     document.body.style.overflow = "auto";
     return () => {
       document.body.style.overflow = "auto";
     };
   }, []);
 
+  const handleLogoutClick = () => {
+    setIsLogoutModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsLogoutModalOpen(false);
+  };
+
   return (
     <S.Container>
       <Link
+        style={{ width: "100%", height: "100%" }}
         href={`/registration?name=${myCompanyInfo?.name}&business-number=${myCompanyInfo?.biz_no}&type=edit`}
       >
+        <S.Box>
+          <Text fontSize="caption" color={themes.Color.grayScale[60]}>
+            수정
+          </Text>
+        </S.Box>
+      </Link>
+      <S.Box onClick={handleLogoutClick}>
         <Text fontSize="caption" color={themes.Color.grayScale[60]}>
-          수정
+          로그아웃
         </Text>
-      </Link>
-      <Text fontSize="caption" color={themes.Color.grayScale[60]}>
-        로그아웃
-      </Text>
+      </S.Box>
+      {isLogoutModalOpen && (
+        <Modal width={380} onClose={handleCloseModal}>
+          <LogoutModal />
+        </Modal>
+      )}
     </S.Container>
   );
 };

diff --git a/apps/company/src/components/modal/editModal/style.ts b/apps/company/src/components/modal/editModal/style.ts
@@ -19,3 +19,17 @@ export const Container = styled.div`
   gap: 16px;
   box-shadow: 0 4px 20px 0 rgb(112 144 176 / 12%);
 `;
+
+export const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+export const Box = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 50%;
+  cursor: pointer;
+`;
diff --git a/apps/company/src/components/modal/logout/logoutModal.tsx b/apps/company/src/components/modal/logout/logoutModal.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import * as S from "./style";
+import { Text, Button } from "@jobis/ui";
+import { themes } from "@jobis/design-token";
+import { useModal } from "@/hooks/useModal";
+import { Cookies } from "react-cookie";
+
+const LogoutModal = () => {
+  const { closeModal } = useModal();
+  const cookies = new Cookies();
+
+  const handleLogout = () => {
+    cookies.remove("access_token");
+    cookies.remove("refresh_token");
+
+    window.location.href = "/";
+
+    closeModal();
+  };
+  return (
+    <S.Container>
+      <S.TextWrapper>
+        <Text fontSize="body1" fontWeight="bold">
+          로그아웃
+        </Text>
+        <Text
+          fontSize="body2"
+          fontWeight="regular"
+          color={themes.Color.grayScale[60]}
+        >
+          로그아웃 시 다음 접속 때 로그인 해야합니다.
+        </Text>
+      </S.TextWrapper>
+      <S.ButtonWrapper>
+        <Button
+          onClick={closeModal}
+          style={{ width: "112px", height: "48px" }}
+          variant="outline"
+        >
+          취소
+        </Button>
+        <Button
+          onClick={handleLogout}
+          style={{ width: "112px", height: "48px" }}
+        >
+          확인
+        </Button>
+      </S.ButtonWrapper>
+    </S.Container>
+  );
+};
+
+export default LogoutModal;
diff --git a/apps/company/src/components/modal/logout/style.ts b/apps/company/src/components/modal/logout/style.ts
@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 203px;
+  padding: 24px;
+  border-radius: 8px;
+
+  background-color: white;
+`;
+
+export const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  margin-top: 32px;
+  gap: 8px;
+`;
diff --git a/apps/company/src/store/modalStore.ts b/apps/company/src/store/modalStore.ts
@@ -11,6 +11,7 @@ export type ModalType =
   | "EDIT_RECRUIT_AREA"
   | "ADD_RECRUIT_AREA"
   | "EDIT_COMPANY_INFO"
+  | "LOGOUT_AREA"
   | "";
 
 export interface IModalState {