+
([]);
+ const [urlList, setUrlList] = useState([]);
+ const [applyRequest, setApplyRequest] = useState([]);
+ const [isClickedApplyBtn, setIsClickedApplyBtn] = useState(false);
+
+ const [isApply, setIsApply] = useState(false);
+
+ const addRequestFileList = (fileList: File[]) => {
+ setFileList((prev) => [...prev, ...fileList]);
+ };
+
+ const addRequestUrlList = (urlList: string[]) => {
+ setUrlList((prev) => [...prev, ...urlList]);
+ if (urlList.length)
+ setApplyRequest((prev) => [
+ ...prev,
+ ...urlList.map((url) => ({
+ url,
+ type: "URL" as AttachmentsType,
+ })),
+ ]);
+ };
+
+ useEffect(() => {
+ if (isClickedApplyBtn) {
+ if (fileList.length) {
+ openModal();
+ } else {
+ append({
+ title: "",
+ message: "파일이 존재하지 않습니다.",
+ type: "RED",
+ });
+ setIsClickedApplyBtn(false);
+ setApplyRequest([]);
+ }
+ }
+ }, [fileList]);
+
+ useEffect(() => {
+ if (isSuccess) {
+ setIsApply(true);
+ setApplyRequest((prev: ApplyRequestItmeType[]) => [
+ ...prev,
+ ...fileResponse.urls.map((url) => ({
+ url,
+ type: "FILE" as AttachmentsType,
+ })),
+ ]);
+ }
+ }, [fileResponse]);
+
+ useEffect(() => {
+ if (isApply) {
+ onApplyToCompany(applyRequest);
+ //openModal();
+ }
+ }, [applyRequest]);
+
+ //==============================
+ // 모집의뢰서
+
+ const { data: recruitmentsDetial } = useGetRecruitmentsDetail(param.get("id")!);
+
+ return (
+ <>
+ {(isLoading || applyIsLoading) && (
+
+
+
+ );
+}
diff --git a/src/app/recruitments/detail/page.tsx b/src/app/recruitments/detail/page.tsx
index d29c528..5874036 100644
--- a/src/app/recruitments/detail/page.tsx
+++ b/src/app/recruitments/detail/page.tsx
@@ -1,17 +1,18 @@
"use client";
-import { GetRecruitmentsDetail } from "@/apis/recruitments";
+import { useGetRecruitmentsDetail } from "@/apis/recruitments";
import GhostBtn from "@/components/common/Button/GhostBtn";
import CompanyTitle from "@/components/company/CompanyTitle";
import RecruitmentsTable from "@/components/recruitments/RecruitmentsTable";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
export default function RecruitmentsDetailPage() {
const param = useSearchParams();
- const { data } = GetRecruitmentsDetail(param.get("id")!);
- if (data) {
+ const navigator = useRouter();
+ const { data: RecruitmentsDetial } = useGetRecruitmentsDetail(param.get("id")!);
+ if (RecruitmentsDetial) {
const { company_id, company_name, company_profile_url, ...rest } =
- data.data;
+ RecruitmentsDetial;
return (
{
+ e.stopPropagation();
+ }}
+ >
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {recruitmentsDetial?.company_name} +
++ 제출서류 : {recruitmentsDetial?.submit_document} +
+
+
+
+
+
+
+
+
+
+ {
+ setIsClickedApplyBtn(true);
+ }}
+ >
+ 지원하기
+
+
+
+
+
+
+ 첨부파일
+
+ {fileList.map((file, idx) => (
+
+ URL
+
+ {urlList.length ? (
+ urlList.map((url, idx) =>
+ + 등록된 URL이 존재하지 않습니다. +
+ )} +
+ {
+ onUploadFile(fileList);
+ }}
+ >
+ 지원하기
+
+
+
+
@@ -19,7 +20,13 @@ export default function RecruitmentsDetailPage() {
company_name={company_name}
company_profile_url={company_profile_url}
>
- 지원하기
+ {
+ navigator.push(`/recruitments/apply/?id=${param.get("id")}`);
+ }}
+ >
+ 지원하기
+
diff --git a/src/components/BandBanner.tsx b/src/components/BandBanner.tsx
index 0a1374e..e42ceb8 100644
--- a/src/components/BandBanner.tsx
+++ b/src/components/BandBanner.tsx
@@ -1,19 +1,27 @@
"use client";
-import { Icon } from "@team-return/design-system";
+import { Icon, useToastStore } from "@team-return/design-system";
import Image from "next/image";
-import BannerBackground from "@public/BannerBackground.png";
+import BannerBackground from "@public/BannerBackground.webp";
import Guy from "@public/Guy.webp";
import Link from "next/link";
export default function BandBanner() {
+ const { append } = useToastStore();
return (
{
+ append({
+ title: "",
+ message: "개발 중인 기능입니다.",
+ type: "YELLOW",
+ });
+ }}
>
-
-
+
+
우리학교 학생들은 얼마나 취업했을까?
diff --git a/src/components/BookmarkCard.tsx b/src/components/BookmarkCard.tsx
new file mode 100644
index 0000000..db262a0
--- /dev/null
+++ b/src/components/BookmarkCard.tsx
@@ -0,0 +1,39 @@
+import { useGetBookmarks } from "@/apis/bookmarks";
+import { Icon } from "@team-return/design-system";
+import Link from "next/link";
+import HoverPrefetchLink from "./common/HoverPrefetchLink";
+
+export default function BookmarkCard() {
+ const { data: bookmarks } = useGetBookmarks();
+
+ return (
+ (0);
const BannerRefs = useRef([]);
+ const navigator = useRouter();
const handleChangeNext = () => {
setSelected((prev) => {
- if (test.length - 1 === prev) {
+ if (BannerList.length - 1 === prev) {
return 0;
}
return ++prev;
@@ -45,7 +36,7 @@ export default function Banner() {
const handleChangePrev = () => {
setSelected((prev) => {
if (prev === 0) {
- return test.length - 1;
+ return BannerList.length - 1;
}
return --prev;
});
@@ -62,15 +53,15 @@ export default function Banner() {
return (
+ {!bookmarks?.bookmarks.length && (
+
+
+ ))}
+
+ );
+}
diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx
index d4f1701..eccf58a 100644
--- a/src/components/CardList.tsx
+++ b/src/components/CardList.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import CompanyCard from "./CompanyCard";
+import CompanyCard from "./company/CompanyCard";
import RecruitmentsCard from "./recruitments/RecruitmentsCard";
interface PropsType {
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
index 8e3ac1e..80383ab 100644
--- a/src/components/Carousel.tsx
+++ b/src/components/Carousel.tsx
@@ -5,27 +5,17 @@ import React, { useEffect, useRef, useState } from "react";
import CircleBtn from "./CircleBtn";
//=======================================================================================================
-import TeatBannerImg from "@public/test-banner-1.png";
-const test = [
+import PopularCompanyBanner from "@public/PopularCompanyBanner.webp";
+import WinterIntrenBanner from "@public/WinterIntrenBanner.webp";
+import { useRouter } from "next/navigation";
+const BannerList = [
{
- img: TeatBannerImg,
- url: "https://www.naver.com",
+ img: WinterIntrenBanner,
+ url: "/recruitments/?page=1&winter_intern=true",
},
{
- img: TeatBannerImg,
- url: "https://www.naver.com",
- },
- {
- img: TeatBannerImg,
- url: "https://www.naver.com",
- },
- {
- img: TeatBannerImg,
- url: "https://www.naver.com",
- },
- {
- img: TeatBannerImg,
- url: "https://www.naver.com",
+ img: PopularCompanyBanner,
+ url: "/companies/detail/?id=9",
},
];
//=======================================================================================================
@@ -33,10 +23,11 @@ const test = [
export default function Banner() {
const [selected, setSelected] = useState
+
+ )}
+ {bookmarks?.bookmarks.map(({ company_name, recruitment_id }) => (
+ ⚠ 저장한 모집의뢰서가 존재하지 않습니다.
+ + 모집의뢰서 보러가기 +
+
+
+
+ + {company_name} +
+ +
- {test.map((item, index) => (
+ {BannerList.map((item, index) => (
({
+ page: "1",
+ job_code: "",
+ tech_code: "",
+ name: "",
+ winter_intern: "",
+ });
return (
(BannerRefs.current[index] = el)}
onClick={() => {
- window.open(item.url);
+ navigator.push(item.url);
}}
>
- {test.map((_, index: number) => (
+ {BannerList.map((_, index: number) => (
diff --git a/src/components/common/SearchDropDown.tsx b/src/components/common/SearchDropDown.tsx
index 008c7cb..ecab39a 100644
--- a/src/components/common/SearchDropDown.tsx
+++ b/src/components/common/SearchDropDown.tsx
@@ -1,15 +1,16 @@
"use client";
-import React, { useEffect, useState } from "react";
+import { useGetCode } from "@/apis/code";
import { useDropDown } from "@/hook/useDropDown";
-import { Icon } from "@team-return/design-system";
-import TextFiled from "./TextFiled";
import useForm from "@/hook/useForm";
-import Chips from "./Chips";
-import { GetCode } from "@/apis/code";
-import { TechCodeResponensType } from "@/util/type";
+import { RecruitmentsQueryType } from "@/hook/useQueryString/type";
+import { useQueryString } from "@/hook/useQueryString/useQueryString";
+import { TechCodeResponensType } from "@/util/type/type";
+import { Icon } from "@team-return/design-system";
+import React, { useEffect, useState } from "react";
import GhostBtn from "./Button/GhostBtn";
-import { setQueryStringType, useQueryString } from "@/hook/useQueryString";
+import Chips from "./Chips";
+import TextFiled from "./TextFiled";
interface PropsType {
title: string;
@@ -18,12 +19,14 @@ interface PropsType {
function SearchDropDown({ title }: PropsType) {
const { DropDownComponent, toggleDropdown, closeDropDown } = useDropDown();
- const { setQueryString, getQueryString } = useQueryString({
- page: "1",
- job_code: "",
- tech_code: "",
- name: "",
- });
+ const { setQueryString, getQueryString } =
+ useQueryString
diff --git a/src/components/Provider.tsx b/src/components/Provider.tsx
index 6664c0b..9962444 100644
--- a/src/components/Provider.tsx
+++ b/src/components/Provider.tsx
@@ -4,7 +4,6 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ToastContainer } from "@team-return/design-system";
import { CookiesProvider } from "react-cookie";
import SignupContextProvider from "./account/singup/ContextProvider";
-import ModalContainer from "./modal/ModalContainer";
import ModalContextProvider from "./modal/ModalContextProvider";
interface PropsType {
@@ -19,7 +18,6 @@ export default function Provider({ children }: PropsType) {
diff --git a/src/components/Suggestion.tsx b/src/components/Suggestion.tsx
index c011b73..dbb6927 100644
--- a/src/components/Suggestion.tsx
+++ b/src/components/Suggestion.tsx
@@ -1,17 +1,31 @@
-import CompanyCard from "./CompanyCard";
+import { useEffect } from "react";
+import BookmarkCard from "./BookmarkCard";
+import CompanyCard from "./company/CompanyCard";
import RecruitmentsCard from "./recruitments/RecruitmentsCard";
import SuggestionHeader from "./SuggestionHeader";
interface PropsType {
- listType: "Company" | "Recruitments" | "BookMark";
+ listType: "Company" | "Recruitments" | "Bookmark";
}
export default function Suggestion({ listType }: PropsType) {
+ function windowResize() {
+ console.log("resize");
+ }
+ useEffect(() => {
+ document.addEventListener(`resize`, windowResize);
+
+ return () => {
+ document.removeEventListener(`resize`, windowResize);
+ };
+ }, []);
+
return (
);
}
diff --git a/src/components/account/login/loginStateManagement.tsx b/src/components/account/login/loginStateManagement.tsx
index 5d37bd3..2b4ec4e 100644
--- a/src/components/account/login/loginStateManagement.tsx
+++ b/src/components/account/login/loginStateManagement.tsx
@@ -5,7 +5,7 @@ import { RequestBody } from "@/apis/user/type";
import LoginInputs from "@/components/account/login/loginInputsComponents";
import SubmitBtn from "@/components/account/login/submitBtn";
import { useCallback, useState } from "react";
-import { Login } from "@/apis/user";
+import { useLogin } from "@/apis/user";
import useForm from "@/hook/useForm";
export default function LoginStateMenagement() {
@@ -14,7 +14,7 @@ export default function LoginStateMenagement() {
account_id: "",
password: "",
});
- const { mutate: loginClick } = Login(inputStates, isChecked);
+ const { mutate: loginClick } = useLogin(inputStates, isChecked);
const allIsInputState = useCallback(
(): boolean => inputStates.account_id !== "" && inputStates.password !== "",
[inputStates]
diff --git a/src/components/account/singup/signupPages/FirstSignupPage.tsx b/src/components/account/singup/signupPages/FirstSignupPage.tsx
index bdd6ee2..447a9de 100644
--- a/src/components/account/singup/signupPages/FirstSignupPage.tsx
+++ b/src/components/account/singup/signupPages/FirstSignupPage.tsx
@@ -1,6 +1,6 @@
"use client";
-import { CheckAuthCode, SendAuthCode } from "@/apis/auth";
+import { useCheckAuthCode, useSendAuthCode } from "@/apis/auth";
import LargeBtn from "@/components/common/Button/LargeBtn";
import TextFiled from "@/components/common/TextFiled";
import useSignUpContext from "@/hook/useSignupContext";
@@ -13,8 +13,8 @@ function FirstSignupPage() {
const { email, auth_code, password, passwordCheck } = signupState;
const { append } = useToastStore();
const navigator = useRouter();
- const { mutate: SandAuthCodeAPI } = SendAuthCode();
- const { mutate: CheckAuthCodeAPI } = CheckAuthCode(
+ const { mutate: SandAuthCodeAPI } = useSendAuthCode();
+ const { mutate: CheckAuthCodeAPI } = useCheckAuthCode(
{
email,
auth_code,
diff --git a/src/components/account/singup/signupPages/SecondSignupPage.tsx b/src/components/account/singup/signupPages/SecondSignupPage.tsx
index 8d24548..db7ada7 100644
--- a/src/components/account/singup/signupPages/SecondSignupPage.tsx
+++ b/src/components/account/singup/signupPages/SecondSignupPage.tsx
@@ -1,4 +1,4 @@
-import { Signup } from "@/apis/students";
+import { useSignup } from "@/apis/students";
import LargeBtn from "@/components/common/Button/LargeBtn";
import RadioBtn from "@/components/common/RadioBtn";
import TextFiled from "@/components/common/TextFiled";
@@ -16,7 +16,7 @@ function SecondSignupPage() {
setSignupState((prev) => ({ ...prev, ["gender"]: select }));
}, [select]);
- const { mutate } = Signup();
+ const { mutate } = useSignup();
const SignupAPI = () => {
const RequestBody = {
diff --git a/src/components/common/Button/FIleDownload.tsx b/src/components/common/Button/FIleDownload.tsx
new file mode 100644
index 0000000..4f05a22
--- /dev/null
+++ b/src/components/common/Button/FIleDownload.tsx
@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { file_name_regex } from "@/util/regex";
+import { Icon } from "@team-return/design-system";
+
+interface PropsType {
+ fileURL: string;
+ onClick?: (props: any) => void;
+}
+
+export default function FileDownload({ fileURL, onClick }: PropsType) {
+ return (
+
+ (false);
+
return (
diff --git a/src/components/common/Chips.tsx b/src/components/common/Chips.tsx
index b1dc358..467fde4 100644
--- a/src/components/common/Chips.tsx
+++ b/src/components/common/Chips.tsx
@@ -1,6 +1,6 @@
"use client";
-import { TechCodeResponensType } from "@/util/type";
+import { TechCodeResponensType } from "@/util/type/type";
import React from "react";
interface PropsType {
diff --git a/src/components/common/DropDown.tsx b/src/components/common/DropDown.tsx
index 9e43fa0..cf0e038 100644
--- a/src/components/common/DropDown.tsx
+++ b/src/components/common/DropDown.tsx
@@ -4,22 +4,19 @@ import { useDropDown } from "@/hook/useDropDown";
import { Icon } from "@team-return/design-system";
import React from "react";
-type DropDownItemsType = {
- code: number;
- keyword: string;
-};
+interface DropdownItemsType {
+ code: string;
+ label: string;
+}
interface PropsType {
title: string;
- items?: DropDownItemsType[];
- onItemClick: (
- itemCode: string | number,
- name: "job_code" | "tech_code"
- ) => void;
+ items: DropdownItemsType[];
+ onClickItem: (itemId: string) => void;
selected: number | string;
}
-function DropDown({ title, items, onItemClick, selected }: PropsType) {
+function DropDown({ title, items, onClickItem, selected }: PropsType) {
const { toggleDropdown, DropDownComponent, closeDropDown } = useDropDown();
return (
@@ -31,11 +28,11 @@ function DropDown({ title, items, onItemClick, selected }: PropsType) {
({
+ page: "1",
+ job_code: "",
+ tech_code: "",
+ name: "",
+ winter_intern: "",
+ });
const currentPageNumber = getQueryString("page");
+ const recruitmentQuery = [
+ getQueryStringEntry("job_code"),
+ getQueryStringEntry("tech_code"),
+ getQueryStringEntry("name"),
+ getQueryStringEntry("winter_intern"),
+ ]
+ .filter((item) => item)
+ .join("&");
+
const numberOfPages =
pathname === "/recruitments/"
- ? GetNumberOfRecruitmentRequestListPages(
- `${getQueryStringEntry("job_code")}&${getQueryStringEntry("tech_code")}&${getQueryStringEntry("name")}`
- )?.data
- : GetNumberOfCompaniesListPages(`${getQueryStringEntry("name")}`)?.data;
+ ? useGetNumberOfRecruitmentRequestListPages(recruitmentQuery)?.data
+ : useGetNumberOfCompaniesListPages(`${getQueryStringEntry("name")}`)
+ ?.data;
const [pagesArray, setPagesArray] = useState([]);
useEffect(() => {
@@ -73,7 +84,11 @@ export default function Pagination() {
icon="Chevron"
direction="right"
size={16}
- color={getQueryString("page") === String(pagesArray.length) ? "gray50" : "gray90"}
+ color={
+ getQueryString("page") === String(pagesArray.length)
+ ? "gray50"
+ : "gray90"
+ }
/>
-
-
+ {listType !== "Bookmark" && (
+
+ 전체보기
+ {fix_data[listType].title}
+{suggestionHeaderDummy[listType].title}
+
+
+ );
+}
diff --git a/src/components/common/Button/GhostBtn.tsx b/src/components/common/Button/GhostBtn.tsx
index dfb25ce..868b589 100644
--- a/src/components/common/Button/GhostBtn.tsx
+++ b/src/components/common/Button/GhostBtn.tsx
@@ -1,17 +1,35 @@
"use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
interface PropsType {
children: React.ReactNode;
onClick?: () => void;
+ disabled?: boolean;
}
-function GhostBtn({ children, onClick }: PropsType) {
+function GhostBtn({ children, onClick, disabled = false }: PropsType) {
+ const [isHover, setIsHover] = useState+ {file_name_regex(fileURL)} +
+
- {items?.map((item, index) => (
+ {items?.map((item, idx) => (
diff --git a/src/components/common/Dropdown/Dropdown.tsx b/src/components/common/Dropdown/Dropdown.tsx
new file mode 100644
index 0000000..75d36bb
--- /dev/null
+++ b/src/components/common/Dropdown/Dropdown.tsx
@@ -0,0 +1,7 @@
+export default function Dropdown() {
+ return (
+ <>
+ <>
+
+ );
+}
diff --git a/src/components/common/Dropdown/KebabMenu.tsx b/src/components/common/Dropdown/KebabMenu.tsx
new file mode 100644
index 0000000..6e5cf75
--- /dev/null
+++ b/src/components/common/Dropdown/KebabMenu.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useDropDown } from "@/hook/useDropDown";
+import { KebabItemType } from "@/util/type/kebabMenu";
+import { Icon } from "@team-return/design-system";
+
+interface PropsType {
+ items: KebabItemType[];
+}
+
+export default function KebabMenu({ items }: PropsType) {
+ const { DropDownComponent, toggleDropdown, closeDropDown } = useDropDown();
+ return (
+ {
- onItemClick(item.code, "job_code");
+ onClickItem(item.code.toString());
closeDropDown();
}}
className={`text-caption leading-caption ${
@@ -44,7 +41,7 @@ function DropDown({ title, items, onItemClick, selected }: PropsType) {
: "text-[#7f7f7f] font-r"
} hover:text-black py-2 w-full flex flex-col items-center`}
>
- {item.keyword}
+ {item.label}
))}
+
+
+
+ );
+}
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 0968003..7fae175 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -6,7 +6,7 @@ import Logo from "@public/Logo.png";
import { Icon } from "@team-return/design-system";
import Link from "next/link";
import { usePathname } from "next/navigation";
-import { MyProfile } from "@/apis/students";
+import { useMyProfile } from "@/apis/students";
function Header() {
const pathname = usePathname();
@@ -14,7 +14,7 @@ function Header() {
return null;
}
- const profile = MyProfile();
+ const { data: profile } = useMyProfile();
return (
+ {items.map(({ label, onClick }, idx) => (
+
+ {
+ onClick();
+ closeDropDown();
+ }}
+ >
+ {label}
+
+ ))}
+
기업체
@@ -37,7 +37,7 @@ function Header() {
className={`text-[#333333] text-b2 ${
pathname.indexOf("/recruitments") !== -1 && "font-b"
}`}
- href={"/recruitments?page=1&job_code=&tech_code=&name="}
+ href={"/recruitments?page=1"}
>
모집의뢰서
@@ -56,25 +56,25 @@ function Header() {
//알림모달
}}
>
-
diff --git a/src/components/common/Loading.tsx b/src/components/common/Loading.tsx
new file mode 100644
index 0000000..7fb8346
--- /dev/null
+++ b/src/components/common/Loading.tsx
@@ -0,0 +1,17 @@
+import LoadingImage from "@public/Loading.png";
+import Image from "next/image";
+
+interface PropsType {
+ size?: string;
+}
+
+export default function Loading({ size = "100px" }: PropsType) {
+ return (
+
+
- {profile.data?.data.student_name} + {profile?.student_name}
-
+
+ );
+}
diff --git a/src/components/common/Logo.tsx b/src/components/common/Logo.tsx
new file mode 100644
index 0000000..d735fc1
--- /dev/null
+++ b/src/components/common/Logo.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image";
+
+interface PropsType {
+ src: string;
+ width?: string;
+ height?: string;
+}
+
+export default function Logo({ src, width, height }: PropsType) {
+ return (
+
+
+ );
+}
diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx
index aa3a282..21841d8 100644
--- a/src/components/common/Pagination.tsx
+++ b/src/components/common/Pagination.tsx
@@ -1,8 +1,9 @@
"use client";
-import { GetNumberOfCompaniesListPages } from "@/apis/companies";
-import { GetNumberOfRecruitmentRequestListPages } from "@/apis/recruitments";
-import { useQueryString } from "@/hook/useQueryString";
+import { useGetNumberOfCompaniesListPages } from "@/apis/companies";
+import { useGetNumberOfRecruitmentRequestListPages } from "@/apis/recruitments";
+import { RecruitmentsQueryType } from "@/hook/useQueryString/type";
+import { useQueryString } from "@/hook/useQueryString/useQueryString";
import { Icon, theme } from "@team-return/design-system";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
@@ -10,20 +11,30 @@ import { useEffect, useState } from "react";
export default function Pagination() {
const pathname = usePathname();
- const { setQueryString, getQueryString, getQueryStringEntry } = useQueryString({
- page: "1",
- job_code: "",
- tech_code: "",
- name: "",
- });
+ const { setQueryString, getQueryString, getQueryStringEntry } =
+ useQueryString void;
- setQueryString: (newValue: setQueryStringType) => void;
- getQueryString: (key: keyof setQueryStringType) => string;
+ setQueryString: (newValue: Partial) => void;
+ getQueryString: (key: string) => string;
}) {
const [select, setSelect] = useState([]);
const [searchKeyword, setSearch] = useState("");
@@ -60,7 +63,7 @@ function TechCodeDropDownComponent({
techCodeSearch: "",
});
- const { data } = GetCode("TECH", searchKeyword);
+ const { data: codes } = useGetCode("TECH", searchKeyword);
useEffect(() => {
const techArray = getQueryString("tech_code")
@@ -68,12 +71,12 @@ function TechCodeDropDownComponent({
.map((item) => Number(item));
setSelect(() => {
return (
- data?.data.codes.filter((item: TechCodeResponensType) =>
+ codes?.codes.filter((item: TechCodeResponensType) =>
techArray?.some((techItem) => item.code === techItem)
) || []
);
});
- }, [getQueryString("tech_code"), data?.data.codes]);
+ }, [getQueryString("tech_code"), codes?.codes]);
return (
([]);
+interface PropsType {
+ maxLength?: number;
+}
- const res = GetCompaniesList(getParams.toString());
+export default function CompanyCard({ maxLength = 12 }: PropsType) {
+ const getParams = useSearchParams();
- useEffect(() => {
- if (res.data?.data.companies) {
- (() => {
- setCompanyList(res.data.data.companies);
- })();
- }
- }, [res]);
+ const { data: companyList, isLoading } = useGetCompaniesList(
+ getParams.toString()
+ );
return (
{onClickInterview && onClickRecruitments && (
-
+
diff --git a/src/components/company/ReviewList.tsx b/src/components/company/ReviewList.tsx
index ad35085..1f121df 100644
--- a/src/components/company/ReviewList.tsx
+++ b/src/components/company/ReviewList.tsx
@@ -1,13 +1,13 @@
"use client";
-import { getReviewDetails, GetReviewList } from "@/apis/reviews";
+import { useGetReviewDetails, useGetReviewList } from "@/apis/reviews";
import { getReviewListProps } from "@/apis/reviews/type";
import { useSearchParams } from "next/navigation";
import ReviewItem from "./ReviewItem";
export default function ReviewList() {
const params = useSearchParams();
- const { data: reviewList, isLoading } = GetReviewList(params.get("id")!);
+ const { data: reviewList, isLoading } = useGetReviewList(params.get("id")!);
if (isLoading)
return (
@@ -33,7 +33,7 @@ export default function ReviewList() {
}
function ReviewContainers({ review_id, writer, date }: getReviewListProps) {
- const { data: reviewDetails } = getReviewDetails(review_id);
+ const { data: reviewDetails } = useGetReviewDetails(review_id);
return (
<>
{reviewDetails?.qna_responses.map((item, idx) => (
diff --git a/src/components/modal/ModalContainer.tsx b/src/components/modal/ModalContainer.tsx
deleted file mode 100644
index a2c2e35..0000000
--- a/src/components/modal/ModalContainer.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import useMoadl from "@/hook/useModal";
-
-export default function ModalContainer() {
- const { isOpen, closeModal } = useMoadl();
- return (
- <>
- {isOpen && (
-
- )}
-
- );
-}
\ No newline at end of file
diff --git a/src/components/mypage/ApplicationStatus.tsx b/src/components/mypage/ApplicationStatus.tsx
new file mode 100644
index 0000000..0a75151
--- /dev/null
+++ b/src/components/mypage/ApplicationStatus.tsx
@@ -0,0 +1,19 @@
+import { ApplicationsStatusType } from "@/apis/applications/type";
+import { applicationEnum, applicationStatusStyle } from "@/util/object/enum";
+
+interface PropsType {
+ status: ApplicationsStatusType;
+}
+
+export default function ApplicationStatus({ status }: PropsType) {
+ return (
+ (null);
+ const childRef = useRef(null);
+ const [isCollapse, setIsCollapse] = useState(false);
+
+ const handleButtonClick = useCallback(
+ (event: React.MouseEvent) => {
+ event.stopPropagation();
+ if (parentRef.current === null || childRef.current === null) {
+ return;
+ }
+ if (parentRef.current.clientHeight > 0) {
+ parentRef.current.style.height = "0";
+ } else {
+ parentRef.current.style.height = `${childRef.current.clientHeight}px`;
+ }
+ setIsCollapse(!isCollapse);
+ },
+ [isCollapse]
+ );
+
+ const parentRefHeight = parentRef.current?.style.height ?? "0px";
+
+ return (
+ ([]);
- const res = GetRecruitmentsList(getParams.toString());
- useEffect(() => {
- setList((prev) => res.data?.data.recruitments || prev);
- }, [res]);
+ const { data: recruitmentsList, isLoading } = useGetRecruitmentsList(getParams.toString());
- const tagStyle =
- "text-caption leading-caption text-lightBlue font-r border rounded-full border-[#135C9D] py-1 px-2";
+ const { mutate: SetBookmarksMutate } = useSetBookmarks();
return (
+
+ ))}
+
+ );
+}
diff --git a/src/components/common/Skelton/Shimmer.tsx b/src/components/common/Skelton/Shimmer.tsx
new file mode 100644
index 0000000..bd85cfd
--- /dev/null
+++ b/src/components/common/Skelton/Shimmer.tsx
@@ -0,0 +1,7 @@
+export default function Shimmer() {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/common/Skelton/SkeltonElement.tsx b/src/components/common/Skelton/SkeltonElement.tsx
new file mode 100644
index 0000000..388924a
--- /dev/null
+++ b/src/components/common/Skelton/SkeltonElement.tsx
@@ -0,0 +1,24 @@
+import Shimmer from "./Shimmer";
+
+export default function RecruitmentSkelton() {
+ return (
+ <>
+ {Array.from({ length: 12 }, () => (
+
+
+ ))}
+
+ );
+}
diff --git a/src/components/CompanyCard.tsx b/src/components/company/CompanyCard.tsx
similarity index 69%
rename from src/components/CompanyCard.tsx
rename to src/components/company/CompanyCard.tsx
index 7c0bc60..b4f8785 100644
--- a/src/components/CompanyCard.tsx
+++ b/src/components/company/CompanyCard.tsx
@@ -1,31 +1,29 @@
"use client";
+import { useGetCompaniesList } from "@/apis/companies";
+import { Icon } from "@team-return/design-system";
import Image from "next/image";
import { useSearchParams } from "next/navigation";
-import { GetCompaniesList } from "@/apis/companies";
-import { useEffect, useState } from "react";
-import { CompaniesListType } from "@/apis/companies/type";
-import HoverPrefetchLink from "./common/HoverPrefetchLink";
-import { Icon } from "@team-return/design-system";
+import HoverPrefetchLink from "../common/HoverPrefetchLink";
+import CompaniesSkelton from "../common/Skelton/CompanySkelton";
-export default function CompanyCard() {
- const getParams = useSearchParams();
- const [companyList, setCompanyList] = useState
+
+
+
+
+
+
+
+
- {companyList.map(
- ({ logo_url, name, take, has_recruitment, id }, index) => (
+ {isLoading &&
- )
- )}
+ ))}
);
}
diff --git a/src/components/company/CompanyTitle.tsx b/src/components/company/CompanyTitle.tsx
index a72e8d6..1baf113 100644
--- a/src/components/company/CompanyTitle.tsx
+++ b/src/components/company/CompanyTitle.tsx
@@ -1,9 +1,9 @@
"use client";
+import { getCompanyKebabItems } from "@/util/object/kebabMenuItems";
+import { KebabItemType } from "@/util/type/kebabMenu";
import Image from "next/image";
-import useMoadl from "@/hook/useModal";
-import { Icon } from "@team-return/design-system";
-import { useDropDown } from "@/hook/useDropDown";
+import KebabMenu from "../common/Dropdown/KebabMenu";
interface PropsType {
business_number?: string;
@@ -22,11 +22,11 @@ export default function CompanyTitle({
onClickInterview,
children,
}: PropsType) {
- const { Modal, toggleModal, closeModal } = useMoadl();
- const { DropDownComponent, toggleDropdown, closeDropDown } = useDropDown();
+ const kebabItems: KebabItemType[] = getCompanyKebabItems(
+ onClickRecruitments,
+ onClickInterview
+ );
- const menuStyle =
- "flex-1 text-b3 leading-b3 font-m text-[#7f7f7f] flex justify-start items-center px-[10px] cursor-pointer hover:text-[#333333]";
return (
@@ -51,8 +49,7 @@ export default function CompanyCard() {
@@ -49,34 +49,7 @@ export default function CompanyTitle({
+
+ );
+}
diff --git a/src/components/mypage/AppliedCompaniesList.tsx b/src/components/mypage/AppliedCompaniesList.tsx
new file mode 100644
index 0000000..fe9d0d9
--- /dev/null
+++ b/src/components/mypage/AppliedCompaniesList.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useGetApplications } from "@/apis/applications";
+import APpliedCompanyItem from "./AppliedICompanyItem";
+import Docs from "@public/Docs.svg";
+import Image from "next/image";
+
+export default function AppliedCompaniesList() {
+ const { data: applications } = useGetApplications();
+
+ return (
+ + {applicationEnum[status]} +
+
+
+ );
+}
diff --git a/src/components/mypage/AppliedICompanyItem.tsx b/src/components/mypage/AppliedICompanyItem.tsx
new file mode 100644
index 0000000..81fb0cb
--- /dev/null
+++ b/src/components/mypage/AppliedICompanyItem.tsx
@@ -0,0 +1,103 @@
+import { ApplicationItemType } from "@/apis/applications/type";
+import { Icon } from "@team-return/design-system";
+import Link from "next/link";
+import { useCallback, useRef, useState } from "react";
+import FileDownload from "../common/Button/FIleDownload";
+import ApplicationStatus from "./ApplicationStatus";
+
+export default function APpliedCompanyItem({
+ company,
+ application_status,
+ attachments,
+}: ApplicationItemType) {
+ const parentRef = useRef내가 지원한 기업
+ {!applications && ( +
+
+ )}
+ + 아직 지원한 기업이 없어요 +
+
+ {applications?.applications.map((item) => (
+
+
+
+ );
+}
diff --git a/src/components/mypage/DetailProfile.tsx b/src/components/mypage/DetailProfile.tsx
new file mode 100644
index 0000000..af85b8f
--- /dev/null
+++ b/src/components/mypage/DetailProfile.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useMyProfile } from "@/apis/students";
+import { departmentEnum } from "@/util/object/enum";
+import { getMypageKebabItems } from "@/util/object/kebabMenuItems";
+import Image from "next/image";
+import KebabMenu from "../common/Dropdown/KebabMenu";
+import GhostTag from "./GhostTag";
+
+export default function DetailProfile() {
+ const { data: profile } = useMyProfile();
+
+ return (
+
+
+
+
+ {company}
+ {/*디자인에는 있지만 api에는 없어서 잠시 주석*/} + {/*+ 2023.11.25 +
*/} +
+
+
+
+
+
+
+ {attachments.map((item, idx) => (
+ <>
+ {item.type === "FILE" && (
+ {
+ e.stopPropagation();
+ }}
+ />
+ )}
+
+ ))}
+
+ {
+ e.stopPropagation();
+ }}
+ >
+ {attachments.map((item, idx) => (
+ <>
+ {item.type === "URL" && (
+
+
+ {item.url}
+
+
+ )}
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/components/mypage/GhostTag.tsx b/src/components/mypage/GhostTag.tsx
new file mode 100644
index 0000000..c033111
--- /dev/null
+++ b/src/components/mypage/GhostTag.tsx
@@ -0,0 +1,13 @@
+interface PropsType {
+ children?: string | number;
+}
+
+export default function GhostTag({ children }: PropsType) {
+ return (
+
+
+
+
+
+ {profile?.student_gcn}
+
+ {profile?.student_name}
++ {profile && departmentEnum[profile.department]} +
+
+
+ );
+}
diff --git a/src/components/recruitments/RecruitmentsCard.tsx b/src/components/recruitments/RecruitmentsCard.tsx
index a5bc9f8..6a36c48 100644
--- a/src/components/recruitments/RecruitmentsCard.tsx
+++ b/src/components/recruitments/RecruitmentsCard.tsx
@@ -1,81 +1,85 @@
"use client";
+import { useSetBookmarks } from "@/apis/bookmarks";
+import { useGetRecruitmentsList } from "@/apis/recruitments";
import { Icon } from "@team-return/design-system";
import Image from "next/image";
-import React, { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
-import { RecruitmentsListType } from "@/apis/recruitments/type";
-import { GetRecruitmentsList } from "@/apis/recruitments";
+import React from "react";
import HoverPrefetchLink from "../common/HoverPrefetchLink";
+import RecruitmentSkelton from "../common/Skelton/SkeltonElement";
-export default function RecruitmentsCard() {
+interface PropsType {
+ maxLength?: number;
+}
+
+export default function RecruitmentsCard({ maxLength = 12 }: PropsType) {
const getParams = useSearchParams();
- const [list, setList] = useState+ {children} +
+
- {list.map(
- (
- {
- company_profile_url,
- company_name,
- train_pay,
- job_code_list,
- bookmarked,
- recruit_id,
- military,
- },
- index
- ) => (
-
- (false);
+ const parentRef = useRef(null);
+ const childRef = useRef(null);
+
+ const handleButtonClick = useCallback(
+ (event: React.MouseEvent) => {
+ event.stopPropagation();
+ if (parentRef.current === null || childRef.current === null)
+ return;
+ if (parentRef.current.clientHeight > 0) {
+ parentRef.current.style.height = "0px";
+ } else {
+ parentRef.current.style.height = `${childRef.current.clientHeight}px`;
+ }
+ setIsOpen((prev) => !prev);
+ },
+ [isOpen]
+ );
+
return (
<>
-
- setIsOpen((prev) => !prev)}
- >
- 모집분야 {areas.length !== 1 && index + 1}
-
- setIsOpen((prev) => !prev)}
- className="cursor-pointer value"
+
-
- {isOpen && (
- <>
-
- 직무
- {item.job.join(", ")}
-
-
- 기술스택
-
- {item.tech.join("\n")}
-
-
-
- 채용인원
- {item.hiring} 명
-
-
- 수행업무
- {item.major_task}
-
-
- 우대사항
-
- {item.preferential_treatment || "-"}
-
-
-
- )}
+ ([]);
+ const [isHover, setIsHover] = useState(false);
+ const fileRef = useRef(null);
+
+ const addFileList = () => {
+ if (fileRef.current?.files?.length) {
+ const files = Array.from(fileRef.current?.files);
+ setFileList((prev) => [...prev, ...files]);
+ }
+ };
+
+ const prependFileItem = (fileName: string) => {
+ setFileList((prev) => prev.filter((file) => file.name !== fileName));
+ };
+
+ useEffect(() => {
+ if (isBtnClicked) addFilesToRequest(fileList);
+ }, [isBtnClicked]);
+
+ return (
+ (false);
+ return (
+ ([]);
+
+ useEffect(() => {
+ if (isBtnClicked) addUrlsToRequest(urlList);
+ }, [isBtnClicked]);
+
+ const onEnterEvent = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter") appendURL();
+ };
+
+ const appendURL = () => {
+ if (urlState.url.replaceAll(" ", "")) {
+ setUrlList((prev) => [...prev, urlState.url]);
+ setUrlState({ url: "" });
+ }
+ };
+
+ const prependURL = (itemIdx: number) => {
+ setUrlList((prev) => prev.filter((_, idx) => idx !== itemIdx));
+ };
+
+ return (
+ ({
+ page: "1",
+ job_code: "",
+ tech_code: "",
+ name: "",
+ winter_intern: "",
+ });
const [filter, setFilter] = useState({
page: getQueryString("page"),
job_code: getQueryString("job_code"),
tech_code: getQueryString("tech_code"),
+ winter_intern: getQueryString("winter_intern"),
});
const { state: searchState, onChange: onChangeSearch } = useForm<{
search: string | undefined;
@@ -33,28 +38,44 @@ function Filter() {
job_code: filter.job_code,
tech_code: filter.tech_code,
name: searchState.search,
+ winter_intern: filter.winter_intern,
});
};
useEffect(onSearch, [filter]);
const onItemClick = (
- itemCode: string | number,
- name: "job_code" | "tech_code"
+ jobType: "job_code" | "winter_intern",
+ itemCode: string
) => {
- if (filter[name] === itemCode) {
- setFilter((prev) => ({ ...prev, [name]: "" }));
- } else setFilter((prev) => ({ ...prev, [name]: itemCode }));
+ if (filter[jobType] === itemCode) {
+ setFilter((prev) => ({ ...prev, [jobType]: "" }));
+ } else setFilter((prev) => ({ ...prev, [jobType]: itemCode }));
};
- const { data } = GetCode("JOB");
+ const { data:codes } = useGetCode("JOB");
+
+ const jobCodeDropdownItems = codes?.codes.map((item) => ({
+ code: item.code.toString(),
+ label: item.keyword,
+ }));
return (
(initialState: T) => {
const pathname = usePathname();
const router = useRouter();
const params = useSearchParams();
@@ -26,13 +16,14 @@ export const useQueryString = (initialState: QueryStringType) => {
}, {} as QueryStringType)
);
- const setQueryString = (newValue: setQueryStringType) => {
+ const setQueryString = (newValue: Partial) => {
setValue((prev) => ({ ...prev, ...newValue }));
};
const refresh = () => {
const queryString = Object.entries(value)
- .map(([key, val]) => `${key}=${val}`)
+ .map(([key, val]) => val && `${key}=${val}`)
+ .filter((item) => item)
.join("&");
router.push(`${pathname}?${queryString}`);
};
@@ -43,13 +34,16 @@ export const useQueryString = (initialState: QueryStringType) => {
.join("&");
};
- const getQueryString = (key: keyof setQueryStringType) => {
+ const getQueryString = (key: string) => {
return value[key];
};
- const getQueryStringEntry = (key: keyof setQueryStringType) => {
- return `${Object.keys(value).find((objectKey) => objectKey === key)}=${
- value[key]
- }`;
+ const getQueryStringEntry = (key: string) => {
+ return (
+ value[key] &&
+ `${Object.keys(value).find((objectKey) => objectKey === key)}=${
+ value[key]
+ }`
+ );
};
const resetQueryString = () => {
diff --git a/src/util/enum.ts b/src/util/enum.ts
deleted file mode 100644
index 5628a90..0000000
--- a/src/util/enum.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export enum hiringProgressEnum {
- CULTURE_INTERVIEW = "컬쳐면접",
- DOCUMENT = "서류전형",
- TASK = "과제제출",
- LIVE_CODING = "라이브코딩",
- TECH_INTERVIEW = "기술면접",
- FINAL_INTERVIEW = "최종면접",
- PERSONALITY = "인적성 테스트",
- AI = "AI면접",
- CODING_TEST = "코딩테스트",
-}
diff --git a/src/util/object/enum.ts b/src/util/object/enum.ts
new file mode 100644
index 0000000..e41a2cf
--- /dev/null
+++ b/src/util/object/enum.ts
@@ -0,0 +1,34 @@
+export const hiringProgressEnum = {
+ CULTURE_INTERVIEW: "컬쳐면접",
+ DOCUMENT: "서류전형",
+ TASK: "과제제출",
+ LIVE_CODING: "라이브코딩",
+ TECH_INTERVIEW: "기술면접",
+ FINAL_INTERVIEW: "최종면접",
+ PERSONALITY: "인적성 테스트",
+ AI: "AI면접",
+ CODING_TEST: "코딩테스트",
+};
+
+export const departmentEnum = {
+ SOFTWARE_DEVELOP: "소프트웨어개발과",
+ EMBEDDED_SOFTWARE: "임베디드소프트웨어과",
+ INFORMATION_SECURITY: "정보보안과",
+ AI_SOFTWARE: "인공지능스프트웨어과",
+};
+
+export const applicationEnum = {
+ REQUESTED: "승인요청",
+ APPROVED: "승인됨",
+ FAILED: "불합격",
+ PASS: "합격",
+ REJECTED: "반려",
+};
+
+export const applicationStatusStyle = {
+ REQUESTED: { color: "#7F7F7F", backgroundColor: "#F7F7F7" },
+ APPROVED: { color: "#2ECC71", backgroundColor: "#E6F8EE" },
+ FAILED: { color: "#E74C3C", backgroundColor: "#FCE9E7" },
+ PASS: { color: "#237BC9", backgroundColor: "#E4EFF8" },
+ REJECTED: { color: "#F1C40F", backgroundColor: "#FDF8E2" },
+};
diff --git a/src/util/object/jobCodeDorpdownItems.ts b/src/util/object/jobCodeDorpdownItems.ts
new file mode 100644
index 0000000..1becf60
--- /dev/null
+++ b/src/util/object/jobCodeDorpdownItems.ts
@@ -0,0 +1,10 @@
+export const internDropdownItems = [
+ {
+ code: "true",
+ label: "채험형",
+ },
+ {
+ code: "false",
+ label: "채용형",
+ },
+];
diff --git a/src/util/object/kebabMenuItems.ts b/src/util/object/kebabMenuItems.ts
new file mode 100644
index 0000000..4b3fe6e
--- /dev/null
+++ b/src/util/object/kebabMenuItems.ts
@@ -0,0 +1,71 @@
+import { useToastStore } from "@team-return/design-system";
+import { useRouter } from "next/navigation";
+import { Cookies } from "react-cookie";
+import { KebabItemType } from "../type/kebabMenu";
+
+export const getMypageKebabItems = (): KebabItemType[] => {
+ const { append } = useToastStore();
+ const navigator = useRouter();
+ const cookies = new Cookies();
+ return [
+ {
+ label: "프로필 수정",
+ onClick: () => {
+ append({
+ title: "",
+ message: "개발 중인 기능입니다.",
+ type: "YELLOW",
+ });
+ },
+ },
+ {
+ label: "비밀변호 변경",
+ onClick: () => {
+ append({
+ title: "",
+ message: "개발 중인 기능입니다.",
+ type: "YELLOW",
+ });
+ },
+ },
+ {
+ label: "버그 제보하기",
+ onClick: () => {
+ append({
+ title: "",
+ message: "개발 중인 기능입니다.",
+ type: "YELLOW",
+ });
+ },
+ },
+ {
+ label: "로그아웃",
+ onClick: () => {
+ console.log("로그아웃");
+ cookies.remove("access_token", { path: "/" });
+ cookies.remove("refresh_token", { path: "/" });
+ navigator.push("/account/login");
+ },
+ },
+ ];
+};
+
+export const getCompanyKebabItems = (
+ onClickRecruitments?: () => void,
+ onClickInterview?: () => void
+): KebabItemType[] => {
+ return [
+ {
+ label: "모집의뢰서 조회",
+ onClick: () => {
+ onClickRecruitments && onClickRecruitments();
+ },
+ },
+ {
+ label: "면접 후기 조회",
+ onClick: () => {
+ onClickInterview && onClickInterview();
+ },
+ },
+ ];
+};
diff --git a/src/util/regex.ts b/src/util/regex.ts
index cc0f208..91ca374 100644
--- a/src/util/regex.ts
+++ b/src/util/regex.ts
@@ -21,3 +21,7 @@ export const time_parsing = (time: string) => {
export const money_regex = (money: number) => {
return money.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
+
+export const file_name_regex = (url: string) => {
+ return url.replace(/(?:.*?-){5}(.*)/, "$1").replaceAll("+", " ");
+};
diff --git a/src/util/type/kebabMenu.ts b/src/util/type/kebabMenu.ts
new file mode 100644
index 0000000..1f0a2bd
--- /dev/null
+++ b/src/util/type/kebabMenu.ts
@@ -0,0 +1,4 @@
+export interface KebabItemType {
+ label: string;
+ onClick: () => void;
+}
diff --git a/src/util/type.ts b/src/util/type/type.ts
similarity index 99%
rename from src/util/type.ts
rename to src/util/type/type.ts
index feeeb07..ebe552c 100644
--- a/src/util/type.ts
+++ b/src/util/type/type.ts
@@ -3,3 +3,4 @@ export interface TechCodeResponensType {
keyword: string;
job_type: string | null;
}
+
diff --git a/tailwind.config.js b/tailwind.config.js
index c56c1a8..428b0c6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,29 @@ module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
+ keyframes: {
+ skeleton: {
+ "0%": { transform: "translateX(-150%)" },
+ "50%": { transform: "translateX(-60%)" },
+ "100%": { transform: "translateX(150%)" },
+ },
+ loading: {
+ "0%": { transform: "rotate(0deg)" },
+ "12.5%": { transform: "rotate(15deg)" },
+ "25%": { transform: "rotate(45deg)" },
+ "37.5%": { transform: "rotate(90deg)" },
+ "50%": { transform: "rotate(165deg)" },
+ "62.5%": { transform: "rotate(255deg)" },
+ "75%": { transform: "rotate(315deg)" },
+ "87.5%": { transform: "rotate(345deg)" },
+ "100%": { transform: "rotate(360deg)" },
+ },
+ },
+ animation: {
+ skeleton: "skeleton 2.5s linear infinite",
+ loading: "loading 1s linear infinite",
+ },
+
boxShadow: {
elevaiton: "0px 4px 20px 0px rgba(112, 144, 176, 0.15);",
},
diff --git a/yarn.lock b/yarn.lock
index a4d3cdc..1f0cc24 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1906,15 +1906,15 @@ __metadata:
languageName: node
linkType: hard
-"@team-return/design-system@npm:^1.1.8":
- version: 1.1.8
- resolution: "@team-return/design-system@npm:1.1.8"
+"@team-return/design-system@npm:^1.1.15":
+ version: 1.1.15
+ resolution: "@team-return/design-system@npm:1.1.15"
dependencies:
react: ^18.2.0
react-dom: ^18.2.0
uuid: ^9.0.0
zustand: ^4.3.7
- checksum: d87866fa3af2ef7a68269709e01923ab67a323ee887249b74323927dcf0df3e543dea8bc16125ed791b93613705c18f7e04d39805ee053aa1e59d6b0b0c0bce8
+ checksum: de878fb3ac32cc7faf19b91fe4172bbb416a99fd16924d540924149f1359698adf167d6fd606ac70987e7814595d0a5f9acaf93e7d5fe4dc85e37f6018f6b2f0
languageName: node
linkType: hard
@@ -5309,7 +5309,7 @@ __metadata:
dependencies:
"@next/font": ^13.5.2
"@tanstack/react-query": ^4.33.0
- "@team-return/design-system": ^1.1.8
+ "@team-return/design-system": ^1.1.15
"@testing-library/jest-dom": ^5.16.5
"@types/debug": ^4
"@types/eslint": ^8
-
);
}
diff --git a/src/components/recruitments/RecruitmentsTable.tsx b/src/components/recruitments/RecruitmentsTable.tsx
index 0b90de8..8c19639 100644
--- a/src/components/recruitments/RecruitmentsTable.tsx
+++ b/src/components/recruitments/RecruitmentsTable.tsx
@@ -1,10 +1,10 @@
"use client";
import { RecruitmentsDetailTable } from "@/apis/recruitments/type";
-import { hiringProgressEnum } from "@/util/enum";
+import { hiringProgressEnum } from "@/util/object/enum";
import { money_regex, time_parsing } from "@/util/regex";
import { Icon } from "@team-return/design-system";
-import React, { useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
function RecruitmentsTable({ ...rest }: RecruitmentsDetailTable) {
const {
@@ -30,56 +30,79 @@ function RecruitmentsTable({ ...rest }: RecruitmentsDetailTable) {
{areas.map((item, index) => {
const [isOpen, setIsOpen] = useState
-
-
-
-
- )
- )}
+
+ )
+ )}
- {job_code_list} -
-- {company_name} -
-
-
- 실습수당 {train_pay}만원
- {military && 병역특례
}
-
+
+ setIsOpen((prev) => !prev)}
+ >
+ 모집분야 {areas.length !== 1 && index + 1}
+
+ setIsOpen((prev) => !prev)}*/
+ className="cursor-pointer value"
+ >
+ {isOpen ? "닫기" : "펼쳐서 확인하기"}
+
+
+
- 펼쳐서 확인하기
-
+
+ 직무
+ {item.job.join(", ")}
+
+
+ 기술스택
+
+ {item.tech.join("\n")}
+
+
+
+ 채용인원
+ {item.hiring} 명
+
+
+ 수행업무
+ {item.major_task}
+
+
+ 우대사항
+
+ {item.preferential_treatment || "-"}
+
+
+
+
+
);
})}
diff --git a/src/components/recruitments/apply/FilePreview.tsx b/src/components/recruitments/apply/FilePreview.tsx
new file mode 100644
index 0000000..bdbf106
--- /dev/null
+++ b/src/components/recruitments/apply/FilePreview.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import Image from "next/image";
+import Clip from "@public/Clip.svg";
+import { Icon } from "@team-return/design-system";
+
+interface PropsType {
+ fileName: string;
+ prepend?: (fileName: string) => void;
+}
+
+function FilePreview({ fileName, prepend }: PropsType) {
+ return (
+
+
+ );
+}
+
+export default React.memo(FilePreview);
diff --git a/src/components/recruitments/apply/FileUploader.tsx b/src/components/recruitments/apply/FileUploader.tsx
new file mode 100644
index 0000000..2f3033d
--- /dev/null
+++ b/src/components/recruitments/apply/FileUploader.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { Icon } from "@team-return/design-system";
+import { useEffect, useRef, useState } from "react";
+import FilePreview from "./FilePreview";
+
+interface PropsType {
+ multiple?: boolean;
+ addFilesToRequest: (fileList: File[]) => void;
+ isBtnClicked: boolean;
+}
+
+export default function FileUploader({
+ multiple = false,
+ addFilesToRequest,
+ isBtnClicked,
+}: PropsType) {
+ const [fileList, setFileList] = useState+ {fileName} +
+ {prepend && ( + {
+ prepend(fileName);
+ }}
+ >
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/recruitments/apply/Header_Contents.tsx b/src/components/recruitments/apply/Header_Contents.tsx
new file mode 100644
index 0000000..c36010c
--- /dev/null
+++ b/src/components/recruitments/apply/Header_Contents.tsx
@@ -0,0 +1,15 @@
+interface PropsType {
+ title: string;
+ children: React.ReactNode;
+}
+
+export default function Header_Contents({ title, children }: PropsType) {
+ return (
+
+ {fileList.map((file, idx) => (
+
+
+
+ );
+}
diff --git a/src/components/recruitments/apply/ShadowBox.tsx b/src/components/recruitments/apply/ShadowBox.tsx
new file mode 100644
index 0000000..fdef8b8
--- /dev/null
+++ b/src/components/recruitments/apply/ShadowBox.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+interface PropsType {
+ children: React.ReactNode;
+ width?: string;
+ height?: string;
+}
+
+export default function ShadowBox({ children, width, height }: PropsType) {
+ return (
+ + {title} +
+ {children} +
+ {children}
+
+ );
+}
diff --git a/src/components/recruitments/apply/TitleBox.tsx b/src/components/recruitments/apply/TitleBox.tsx
new file mode 100644
index 0000000..e1df206
--- /dev/null
+++ b/src/components/recruitments/apply/TitleBox.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+interface PropsType {
+ title: string;
+ children: React.ReactNode;
+}
+
+export default function TitleBox({ title, children }: PropsType) {
+ return (
+
+
+
+ );
+}
diff --git a/src/components/recruitments/apply/URLItem.tsx b/src/components/recruitments/apply/URLItem.tsx
new file mode 100644
index 0000000..0f5dd68
--- /dev/null
+++ b/src/components/recruitments/apply/URLItem.tsx
@@ -0,0 +1,34 @@
+import { Icon } from "@team-return/design-system";
+import { useState } from "react";
+
+interface PropsType {
+ url: string;
+ prepend?: () => void;
+}
+
+export default function URLItem({ url, prepend }: PropsType) {
+ const [isHover, setIsHover] = useState{title}
++
{children}
+ {
+ setIsHover(true);
+ }}
+ onMouseLeave={() => {
+ setIsHover(false);
+ }}
+ className="flex w-full gap-5 bg-[#f7f7f7] rounded-[8px] py-[10px] px-[14px] items-center mt-2"
+ >
+
+ );
+}
diff --git a/src/components/recruitments/apply/UrlListComponent.tsx b/src/components/recruitments/apply/UrlListComponent.tsx
new file mode 100644
index 0000000..f6371be
--- /dev/null
+++ b/src/components/recruitments/apply/UrlListComponent.tsx
@@ -0,0 +1,74 @@
+import useForm from "@/hook/useForm";
+import { Icon } from "@team-return/design-system";
+import { useEffect, useState } from "react";
+import URLItem from "./URLItem";
+
+interface PropsType {
+ addUrlsToRequest: (urlList: string[]) => void;
+ isBtnClicked: boolean;
+}
+
+export default function UrlListComponent({
+ addUrlsToRequest,
+ isBtnClicked,
+}: PropsType) {
+ const {
+ state: urlState,
+ onChange,
+ setState: setUrlState,
+ } = useForm<{ url: string }>({
+ url: "",
+ });
+ const [urlList, setUrlList] = useState+ {url} +
+ {isHover && prepend && ( +
+
+ )}
+
+ {
+ prependURL(idx);
+ }}
+ />
+ ))}
+
+ );
+}
diff --git a/src/components/recruitments/filter.tsx b/src/components/recruitments/filter.tsx
index 8fc41c4..af05fbc 100644
--- a/src/components/recruitments/filter.tsx
+++ b/src/components/recruitments/filter.tsx
@@ -1,25 +1,30 @@
"use client";
-import { GetCode } from "@/apis/code";
+import { useGetCode } from "@/apis/code";
import useForm from "@/hook/useForm";
-import { useQueryString } from "@/hook/useQueryString";
-import React, { useEffect, useState } from "react";
+import { RecruitmentsQueryType } from "@/hook/useQueryString/type";
+import { useQueryString } from "@/hook/useQueryString/useQueryString";
+import { internDropdownItems } from "@/util/object/jobCodeDorpdownItems";
+import { useEffect, useState } from "react";
import DropDown from "../common/DropDown";
import SearchDropDown from "../common/SearchDropDown";
import TextFiled from "../common/TextFiled";
function Filter() {
- const { setQueryString, getQueryString } = useQueryString({
- page: "1",
- job_code: "",
- tech_code: "",
- name: "",
- });
+ const { setQueryString, getQueryString } =
+ useQueryString
+
+
+ {urlList.map((item, idx) => (
+
+
+
+ {
+ onItemClick("winter_intern", itemCode);
+ }}
+ selected={getQueryString("winter_intern") || ""}
+ />
{
+ onItemClick("job_code", itemCode);
+ }}
selected={getQueryString("job_code") || ""}
/>
);
}
diff --git a/src/hook/useModal.tsx b/src/hook/useModal.tsx
index 41d552c..58fd9bc 100644
--- a/src/hook/useModal.tsx
+++ b/src/hook/useModal.tsx
@@ -1,9 +1,13 @@
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
import { ModalContext } from "@/context/ModalContext";
export default function useMoadl() {
const { isOpen, setIsOpen } = useContext(ModalContext);
+ const preventScroll = (e: Event) => {
+ e.preventDefault();
+ };
+
const openModal = () => {
setIsOpen(true);
};
@@ -14,22 +18,40 @@ export default function useMoadl() {
setIsOpen((prev) => !prev);
};
+ useEffect(() => {
+ if (isOpen)
+ document.addEventListener("wheel", preventScroll, { passive: false });
+ return () => {
+ document.removeEventListener("wheel", preventScroll);
+ };
+ }, [isOpen]);
+
return {
Modal: ({
children,
className,
+ backgroundClose = true,
}: {
className?: string;
children: React.ReactNode | React.ReactNode[];
+ backgroundClose?: boolean;
}) => (
<>
{isOpen && (
e.stopPropagation()}
- style={{ zIndex: 6, cursor: "default" }}
+ onClick={() => {
+ backgroundClose && closeModal();
+ }}
+ className="top-0 left-0 w-screen h-screen fixed z-[6] flex justify-center items-center bg-[rgba(0,0,0,0.3)]"
>
- {children}
+
)}
diff --git a/src/hook/useQueryString/type.ts b/src/hook/useQueryString/type.ts
new file mode 100644
index 0000000..5ca214e
--- /dev/null
+++ b/src/hook/useQueryString/type.ts
@@ -0,0 +1,16 @@
+export interface QueryStringType {
+ [key: string]: string;
+}
+
+export interface RecruitmentsQueryType extends QueryStringType {
+ page: string;
+ job_code: string;
+ tech_code: string;
+ name: string;
+ winter_intern: string;
+}
+
+export interface CompaniesQueryType extends QueryStringType {
+ page: string;
+ name: string;
+}
diff --git a/src/hook/useQueryString.ts b/src/hook/useQueryString/useQueryString.ts
similarity index 69%
rename from src/hook/useQueryString.ts
rename to src/hook/useQueryString/useQueryString.ts
index 6444367..748c02c 100644
--- a/src/hook/useQueryString.ts
+++ b/src/hook/useQueryString/useQueryString.ts
@@ -2,19 +2,9 @@
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
+import { QueryStringType } from "./type";
-interface QueryStringType {
- [key: string]: string;
-}
-
-export interface setQueryStringType {
- page?: string;
- job_code?: string;
- tech_code?: string;
- name?: string;
-}
-
-export const useQueryString = (initialState: QueryStringType) => {
+export const useQueryString = e.stopPropagation()}
+ >
+ {children}
+