Merge branch 'techCodeFilter' into develop

.vscode/settings.json

@@ -5,5 +5,8 @@
   },
   "eslint.nodePath": ".yarn/sdks",
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "editor.fontFamily": "Fira Code, 'Courier New', monospace",
+  "editor.fontLigatures": true
 }
+

src/app/companies/detail/page.tsx

@@ -1,9 +1,6 @@
 "use client";
 
-import {
-  useRouter,
-  useSearchParams,
-} from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useToastStore } from "@team-return/design-system";
 import CompanyTable from "@/components/company/CompanyTable";
 import CompanyTitle from "@/components/company/CompanyTitle";
@@ -15,7 +12,7 @@ export default function CompanyDetailPage() {
   const params = useSearchParams();
   const { append } = useToastStore();
 
-  const { data } = GetCompaniesDetail(params.get('id')!);
+  const { data } = GetCompaniesDetail(params.get("id")!);
 
   if (data) {
     const {
@@ -28,7 +25,7 @@ export default function CompanyDetailPage() {
 
     const onClickRecruitments = () => {
       if (recruitment_id) {
-        navigator.push(`/recruitments/${recruitment_id}`);
+        navigator.push(`/recruitments/detail?id=${recruitment_id}`);
       } else {
         append({
           title: "",

src/app/companies/page.tsx

@@ -37,7 +37,7 @@ export default function CompanyListPage() {
           onChange={onChangeSearch}
           name="search"
           customType="Search"
-          iconClick={onSearch}
+          EnterEvent={onSearch}
         />
       </div>
       <CompanyCard />

src/app/recruitments/detail/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { GetRecruitmentsDetail } from "@/apis/recruitments";
-import RegisterBtn from "@/components/common/Button/RegisterBtn";
+import GhostBtn from "@/components/common/Button/GhostBtn";
 import CompanyTitle from "@/components/company/CompanyTitle";
 import RecruitmentsTable from "@/components/recruitments/RecruitmentsTable";
 import { useSearchParams } from "next/navigation";
@@ -19,7 +19,7 @@ export default function RecruitmentsDetailPage() {
           company_name={company_name}
           company_profile_url={company_profile_url}
         >
-          <RegisterBtn>지원하기</RegisterBtn>
+          <GhostBtn>지원하기</GhostBtn>
         </CompanyTitle>
         <RecruitmentsTable {...rest} />
       </div>

src/components/account/login/loginInputsComponents.tsx

@@ -30,7 +30,7 @@ function LoginInputs({ inputStates, handleChange }: PropsType) {
         name="password"
         label="비밀번호"
         placeholder="비밀번호를 입력해주세요"
-        iconClick={() => {
+        EnterEvent={() => {
           setIsHidden((prev) => !prev);
         }}
         customType={isHidden ? "EyesClose" : "EyesOpen"}

src/components/common/Button/RegisterBtn.tsx → src/components/common/Button/GhostBtn.tsx

@@ -1,13 +1,13 @@
-'use client'
+"use client";
 
 import React from "react";
 
 interface PropsType {
   children: React.ReactNode;
-  onClick?: () => void;
+  onClick?: (e: MouseEvent | React.MouseEvent) => void;
 }
 
-function RegisterBtn({ children, onClick }: PropsType) {
+function GhostBtn({ children, onClick }: PropsType) {
   return (
     <button
       className="h-[36px] py-2 px-3 text-b3 leading-b3 font-m text-[#135C9D] bg-white border border-solid border-[#135C9D] rounded-[8px] hover:bg-[#135C9D] hover:text-white"
@@ -18,4 +18,4 @@ function RegisterBtn({ children, onClick }: PropsType) {
   );
 }
 
-export default React.memo(RegisterBtn);
+export default React.memo(GhostBtn);

src/components/common/Chip.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { TechCodeResponensType } from "@/util/type";
+import React from "react";
+
+interface PropsType {
+  value: TechCodeResponensType[];
+  setSelect: React.Dispatch<React.SetStateAction<TechCodeResponensType[]>>;
+  select: TechCodeResponensType[];
+}
+
+function Chip({ value, setSelect, select }: PropsType) {
+  return (
+    <div className="flex flex-wrap w-full max-h-full gap-2 overflow-y-scroll">
+      {value.map((item, idx) => {
+        const isSelect = select.some(
+          (cookieItem) => item.code === cookieItem.code
+        );
+        return (
+          <div
+            key={idx}
+            className="px-4 py-[6px] rounded-[30px] text-caption leading-caption cursor-pointer h-[30px]"
+            style={
+              isSelect
+                ? {
+                    backgroundColor: "rgba(35,123,201,0.12)",
+                    color: "rgba(35,123,201,0.8)",
+                  }
+                : { backgroundColor: "#f7f7f7", color: "#7f7f7f" }
+            }
+            onClick={() => {
+              if (!isSelect) {
+                setSelect((prev) => [...prev, item]);
+              } else
+                setSelect((prev) => {
+                  return prev.filter((select) => select.code !== item.code);
+                });
+            }}
+          >
+            {item.keyword}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default React.memo(Chip);

src/components/common/DropDown.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import useMoadl from "@/hook/useModal";
+import { useDropDown } from "@/hook/useDropDown";
 import { Icon } from "@team-return/design-system";
 import React from "react";
 
@@ -12,28 +12,31 @@ type DropDownItemsType = {
 interface PropsType {
   title: string;
   items?: DropDownItemsType[];
-  onItemClick: (itemCode: string | number, name: "job_code" | "tech_code") => void;
+  onItemClick: (
+    itemCode: string | number,
+    name: "job_code" | "tech_code"
+  ) => void;
   selected: number | string;
 }
 
 function DropDown({ title, items, onItemClick, selected }: PropsType) {
-  const { Modal, toggleModal, closeModal } = useMoadl();
+  const { toggleDropdown, DropDownComponent, closeDropDown } = useDropDown();
 
   return (
     <div
-      onClick={toggleModal}
+      onClick={toggleDropdown}
       className="h-10 pr-[12px] pl-4 border border-solid border-[#cccccc] rounded-[8px] flex items-center gap-[23px] text-b3 leading-b3 font-r text-[#7f7f7f] relative"
     >
       <p>{title}</p>
       <Icon icon="Chevron" color="gray60" />
-      <Modal className="absolute left-0 min-w-full top-11">
+      <DropDownComponent className="absolute left-0 min-w-full top-11">
         <div className="min-w-full max-h-40 py-2 px-2 bg-white shadow-elevaiton rounded-[8px] overflow-scroll">
           {items?.map((item, index) => (
             <div
               key={index}
               onClick={() => {
                 onItemClick(item.code, "job_code");
-                closeModal();
+                closeDropDown();
               }}
               className={`text-caption leading-caption ${
                 selected == item.code
@@ -45,7 +48,7 @@ function DropDown({ title, items, onItemClick, selected }: PropsType) {
             </div>
           ))}
         </div>
-      </Modal>
+      </DropDownComponent>
     </div>
   );
 }

src/components/common/SearchDropDown.tsx

@@ -1,23 +1,118 @@
-import useMoadl from "@/hook/useModal";
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useDropDown } from "@/hook/useDropDown";
 import { Icon } from "@team-return/design-system";
-import React from "react";
+import TextFiled from "./TextFiled";
+import useForm from "@/hook/useForm";
+import Chip from "./Chip";
+import { GetCode } from "@/apis/code";
+import { TechCodeResponensType } from "@/util/type";
+import GhostBtn from "./Button/GhostBtn";
+import { setQueryStringType, useQueryString } from "@/hook/useQueryString";
 
 interface PropsType {
   title: string;
 }
 
 function SearchDropDown({ title }: PropsType) {
-  const { Modal, toggleModal } = useMoadl();
+  const { DropDownComponent, toggleDropdown, closeDropDown } = useDropDown();
+
+  const { setQueryString, get } = useQueryString({
+    page: "1",
+    job_code: "",
+    tech_code: "",
+    name: "",
+  });
+
   return (
     <div
       className="h-10 pr-[12px] pl-4 border border-solid border-[#cccccc] rounded-[8px] flex items-center gap-[23px] text-b3 leading-b3 font-r text-[#7f7f7f] relative"
-      onClick={toggleModal}
+      onClick={toggleDropdown}
     >
       <p>{title}</p>
       <Icon icon="Chevron" color="gray60" />
-      <Modal className="absolute left-0 min-w-full top-11">
-        <>hi</>
-      </Modal>
+      <DropDownComponent className="absolute left-0 min-w-full top-11">
+        <TechCodeDropDownComponent
+          closeDropDown={closeDropDown}
+          setQueryString={setQueryString}
+          getQuerySteing={get}
+        />
+      </DropDownComponent>
+    </div>
+  );
+}
+
+function TechCodeDropDownComponent({
+  closeDropDown,
+  setQueryString,
+  getQuerySteing: get,
+}: {
+  closeDropDown: () => void;
+  setQueryString: (newValue: setQueryStringType) => void;
+  getQuerySteing: (key: keyof setQueryStringType) => string;
+}) {
+  const [select, setSelect] = useState<TechCodeResponensType[]>([]);
+  const [searchKeyword, setSearch] = useState<string>("");
+  const { state: techSearchState, onChange } = useForm<{
+    techCodeSearch: string;
+  }>({
+    techCodeSearch: "",
+  });
+
+  const { data } = GetCode("TECH", searchKeyword);
+
+  useEffect(() => {
+    const techArray = get("tech_code")
+      .split(",")
+      .map((item) => Number(item));
+    setSelect(() => {
+      return (
+        data?.data.codes.filter((item: TechCodeResponensType) =>
+          techArray?.some((techItem) => item.code === techItem)
+        ) || []
+      );
+    });
+  }, [get("tech_code"), data?.data.codes]);
+
+  return (
+    <div
+      className="bg-white w-[400px] h-[430px] shadow-elevaiton rounded-[8px] p-5 flex flex-col"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <TextFiled
+        placeholder="검색어를 입력해주세요."
+        onChange={onChange}
+        value={techSearchState.techCodeSearch}
+        name="techCodeSearch"
+        width="100%"
+        EnterEvent={() => {
+          setSearch(techSearchState.techCodeSearch);
+        }}
+      />
+      <hr className="mx-2 my-4" />
+      <div className="mb-5">
+        <Chip value={select} select={select} setSelect={setSelect} />
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <Chip
+          value={data?.data.codes || []}
+          select={select}
+          setSelect={setSelect}
+        />
+      </div>
+      <div className="flex justify-end h-8 mt-2">
+        <GhostBtn
+          onClick={() => {
+            setQueryString({
+              tech_code: select.map((item) => item.code).toString(),
+            });
+            closeDropDown();
+          }}
+        >
+          저장
+        </GhostBtn>
+      </div>
     </div>
   );
 }

src/components/common/TextFiled.tsx

@@ -5,7 +5,7 @@ import React, { KeyboardEvent, useState } from "react";
 
 interface PropsType extends React.ComponentProps<"input"> {
   customType?: "Text" | "Search" | "EyesClose" | "EyesOpen";
-  iconClick?: () => void;
+  EnterEvent?: () => void;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   label?: string;
   width: string | number;
@@ -18,15 +18,15 @@ function TextFiled({
   onChange,
   customType = "Text",
   name,
-  iconClick,
+  EnterEvent,
   width,
   height,
   label,
   type,
 }: PropsType) {
   const [focus, setFocuse] = useState<boolean>(false);
   const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") if (iconClick) iconClick();
+    if (e.key === "Enter") if (EnterEvent) EnterEvent();
   };
 
   return (
@@ -63,7 +63,7 @@ function TextFiled({
         {customType !== "Text" && (
           <div
             className="flex justify-center items-center mr-[14px] cursor-pointer  "
-            onClick={iconClick}
+            onClick={EnterEvent}
           >
             <Icon icon={customType} size={20} color="gray60" />
           </div>