내 기업정보 수정 모달 구현

apps/company/src/app/company/page.tsx

@@ -7,9 +7,21 @@ import SeeMoreIcon from "../../../public/seemore.svg";
 import { themes } from "@jobis/design-token";
 import { CompanyContentTemplate } from "@/components/companyContentTemplate";
 import { useMyCompanyInfo } from "@/hooks/apis/useCompanyApi";
+import { useModal } from "@/hooks/useModal";
+import EditModal from "@/components/modal/editModal/editModal";
 
 export default function Company() {
   const { data: myCompanyInfo } = useMyCompanyInfo();
+  const { modalState, closeModal, openModal } = useModal();
+
+  const handleIconClick = () => {
+    if (modalState === "EDIT_COMPANY_INFO") {
+      closeModal();
+    } else {
+      openModal("EDIT_COMPANY_INFO");
+    }
+  };
+
   return (
     <S.Container>
       <S.Title>
@@ -33,7 +45,17 @@ export default function Company() {
             </Text>
           </div>
         </Flex>
-        <Image src={SeeMoreIcon} alt="더보기" style={{ cursor: "pointer" }} />
+        <S.IconWrapper>
+          <Image
+            src={SeeMoreIcon}
+            alt="더보기"
+            style={{ cursor: "pointer" }}
+            onClick={() => handleIconClick()}
+          />
+          {modalState === "EDIT_COMPANY_INFO" && (
+            <EditModal closeModal={closeModal} />
+          )}
+        </S.IconWrapper>
       </S.Title>
       <S.Line />
       <Flex gap={128} justify={"space-between"}>
@@ -47,7 +69,7 @@ export default function Company() {
             content={myCompanyInfo?.company_introduce}
           />
           <CompanyContentTemplate
-            title={myCompanyInfo?.headquarter === true ? "본사(주소)" : "주소"}
+            title={myCompanyInfo?.headquarter === true ? "주소(본사)" : "주소"}
             content={myCompanyInfo?.main_address}
           />
           <CompanyContentTemplate

apps/company/src/app/company/style.ts

@@ -35,3 +35,8 @@ export const Line = styled.div`
     width: 960px;
   }
 `;
+
+export const IconWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`;

apps/company/src/app/my/page.tsx

@@ -16,7 +16,6 @@ export default function My() {
   const router = useRouter();
   const { data: myCompanyInfo } = useMyCompanyInfo();
   const { data: myRecruitmentList } = useMyRecruitmentList();
-
   const hasRecruitments = myRecruitmentList?.my_recruitments;
 
   return (

apps/company/src/components/modal/editModal/editModal.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import React 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";
+
+interface PropsType {
+  closeModal: () => void;
+}
+
+const EditModal: React.FC<PropsType> = () => {
+  const { data: myCompanyInfo } = useMyCompanyInfo();
+  useEffect(() => {
+    document.body.style.overflow = "auto";
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
+
+  return (
+    <S.Container>
+      <Link
+        href={`/registration?name=${myCompanyInfo?.name}&business-number=${myCompanyInfo?.biz_no}&type=edit`}
+      >
+        <Text fontSize="caption" color={themes.Color.grayScale[60]}>
+          수정
+        </Text>
+      </Link>
+      <Text fontSize="caption" color={themes.Color.grayScale[60]}>
+        로그아웃
+      </Text>
+    </S.Container>
+  );
+};
+
+export default EditModal;

apps/company/src/components/modal/editModal/style.ts

@@ -0,0 +1,21 @@
+import { themes } from "@jobis/design-token";
+import { styled } from "styled-components";
+
+export const Container = styled.div`
+  position: absolute;
+  right: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 120px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  border: 1px solid ${themes.Color.grayScale[30]};
+  border-radius: 8px;
+
+  background-color: white;
+  cursor: pointer;
+  gap: 16px;
+  box-shadow: 0 4px 20px 0 rgb(112 144 176 / 12%);
+`;

apps/company/src/store/modalStore.ts

@@ -10,6 +10,7 @@ export type ModalType =
   | "LICENSE"
   | "EDIT_RECRUIT_AREA"
   | "ADD_RECRUIT_AREA"
+  | "EDIT_COMPANY_INFO"
   | "";
 
 export interface IModalState {