From 4ceee62b66af54b31298a9ff70a81e1cbecbfdc7 Mon Sep 17 00:00:00 2001 From: KANGYONGSU23 Date: Mon, 13 Nov 2023 20:25:11 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat=20::=20=EA=B8=B0=EC=97=85,=20=EB=AA=A8?= =?UTF-8?q?=EC=A7=91=EC=9D=98=EB=A2=B0=EC=84=9C=20=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 6 +++++ src/components/CompanyCard.tsx | 2 ++ src/components/RecruitmentsCard.tsx | 2 ++ .../common/Skelton/CompanySkelton.tsx | 23 +++++++++++++++++ src/components/common/Skelton/Shimmer.tsx | 7 ++++++ .../common/Skelton/SkeltonElement.tsx | 25 +++++++++++++++++++ tailwind.config.js | 11 ++++++++ 7 files changed, 76 insertions(+) create mode 100644 src/components/common/Skelton/CompanySkelton.tsx create mode 100644 src/components/common/Skelton/Shimmer.tsx create mode 100644 src/components/common/Skelton/SkeltonElement.tsx diff --git a/src/app/globals.css b/src/app/globals.css index a56ff80..1c1fcb6 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -2,6 +2,12 @@ @tailwind components; @tailwind utilities; +@layer components { + .skeltonUi { + @apply bg-[#f7f7f7] relative; + } +} + * { margin: 0; padding: 0; diff --git a/src/components/CompanyCard.tsx b/src/components/CompanyCard.tsx index 7c0bc60..e2fde75 100644 --- a/src/components/CompanyCard.tsx +++ b/src/components/CompanyCard.tsx @@ -7,6 +7,7 @@ import { useEffect, useState } from "react"; import { CompaniesListType } from "@/apis/companies/type"; import HoverPrefetchLink from "./common/HoverPrefetchLink"; import { Icon } from "@team-return/design-system"; +import CompaniesSkelton from "./common/Skelton/CompanySkelton"; export default function CompanyCard() { const getParams = useSearchParams(); @@ -24,6 +25,7 @@ export default function CompanyCard() { return (
+ {res.isLoading && } {companyList.map( ({ logo_url, name, take, has_recruitment, id }, index) => ( diff --git a/src/components/RecruitmentsCard.tsx b/src/components/RecruitmentsCard.tsx index 8751d4d..4b1a0b8 100644 --- a/src/components/RecruitmentsCard.tsx +++ b/src/components/RecruitmentsCard.tsx @@ -7,6 +7,7 @@ import { useSearchParams } from "next/navigation"; import { RecruitmentsListType } from "@/apis/recruitments/type"; import { GetRecruitmentsList } from "@/apis/recruitments"; import HoverPrefetchLink from "./common/HoverPrefetchLink"; +import RecruitmentSkelton from "./common/Skelton/SkeltonElement"; export default function RecruitmentsCard() { const getParams = useSearchParams(); @@ -22,6 +23,7 @@ export default function RecruitmentsCard() { return (
+ {res.isLoading && } {list.map( ( { diff --git a/src/components/common/Skelton/CompanySkelton.tsx b/src/components/common/Skelton/CompanySkelton.tsx new file mode 100644 index 0000000..55c51a9 --- /dev/null +++ b/src/components/common/Skelton/CompanySkelton.tsx @@ -0,0 +1,23 @@ +import Shimmer from "./Shimmer"; + +export default function CompaniesSkelton() { + const skeltonArray = [0, 0, 0, 0, 0, 0, 0, 0, 0]; + + return ( + <> + {skeltonArray.map(() => ( +
+
+ +
+
+ +
+
+ +
+
+ ))} + + ); +} diff --git a/src/components/common/Skelton/Shimmer.tsx b/src/components/common/Skelton/Shimmer.tsx new file mode 100644 index 0000000..4262771 --- /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..a721f55 --- /dev/null +++ b/src/components/common/Skelton/SkeltonElement.tsx @@ -0,0 +1,25 @@ +import Shimmer from "./Shimmer"; + +export default function RecruitmentSkelton() { + const skeltonArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; + return ( + <> + {skeltonArray.map(() => ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ ))} + + ); +} diff --git a/tailwind.config.js b/tailwind.config.js index c56c1a8..c6356de 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,6 +3,17 @@ module.exports = { content: ["./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { + keyframes: { + loading: { + "0%": { transform: "translateX(-150%)" }, + "50%": { transform: "translateX(-60%)" }, + "80%": { transform: "translateX(150%)" }, + }, + }, + animation: { + loading: "loading 2.5s linear infinite", + }, + boxShadow: { elevaiton: "0px 4px 20px 0px rgba(112, 144, 176, 0.15);", }, From 1987c344c79739d19c295c809be29292ee8e52b4 Mon Sep 17 00:00:00 2001 From: KANGYONGSU23 Date: Fri, 17 Nov 2023 10:47:50 +0900 Subject: [PATCH 2/6] =?UTF-8?q?file=20::=20=ED=8C=8C=EC=9D=BC=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/companies/page.tsx | 2 +- src/app/recruitments/page.tsx | 2 +- src/components/CardList.tsx | 4 ++-- src/components/Suggestion.tsx | 6 +++--- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/app/companies/page.tsx b/src/app/companies/page.tsx index 04f92e3..c0d6bb1 100644 --- a/src/app/companies/page.tsx +++ b/src/app/companies/page.tsx @@ -4,7 +4,7 @@ import TextFiled from "@/components/common/TextFiled"; import useForm from "@/hook/useForm"; import { useEffect, useState } from "react"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; -import CompanyCard from "@/components/CompanyCard"; +import CompanyCard from "@/components/company/CompanyCard"; import Pagination from "@/components/common/Pagination"; export default function CompanyListPage() { diff --git a/src/app/recruitments/page.tsx b/src/app/recruitments/page.tsx index 2d3aa9a..71cae14 100644 --- a/src/app/recruitments/page.tsx +++ b/src/app/recruitments/page.tsx @@ -1,6 +1,6 @@ import Pagination from "@/components/common/Pagination"; import Filter from "@/components/recruitments/filter"; -import RecruitmentsCard from "@/components/RecruitmentsCard"; +import RecruitmentsCard from "@/components/recruitments/RecruitmentsCard"; export default function Recruitments() { return ( diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx index eb4bd83..eccf58a 100644 --- a/src/components/CardList.tsx +++ b/src/components/CardList.tsx @@ -1,6 +1,6 @@ import React from "react"; -import CompanyCard from "./CompanyCard"; -import RecruitmentsCard from "./RecruitmentsCard"; +import CompanyCard from "./company/CompanyCard"; +import RecruitmentsCard from "./recruitments/RecruitmentsCard"; interface PropsType { listType: "Company" | "Recruitments" | "BookMark"; diff --git a/src/components/Suggestion.tsx b/src/components/Suggestion.tsx index ea3faef..c3072bd 100644 --- a/src/components/Suggestion.tsx +++ b/src/components/Suggestion.tsx @@ -1,12 +1,12 @@ -import CompanyCard from "./CompanyCard"; -import RecruitmentsCard from "./RecruitmentsCard"; + +import CompanyCard from "./company/CompanyCard"; +import RecruitmentsCard from "./recruitments/RecruitmentsCard"; import SuggestionHeader from "./SuggestionHeader"; interface PropsType { listType: "Company" | "Recruitments" | "BookMark"; } - export default function Suggestion({ listType }: PropsType) { return (
From a5836f517735a942d9e70b6936c321d41235910b Mon Sep 17 00:00:00 2001 From: KANGYONGSU23 Date: Fri, 17 Nov 2023 10:48:23 +0900 Subject: [PATCH 3/6] =?UTF-8?q?fix=20::=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20?= =?UTF-8?q?=EC=B2=B4=EC=9D=B8=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Skelton/Shimmer.tsx | 2 +- src/components/{ => company}/CompanyCard.tsx | 14 +++++++------- .../{ => recruitments}/RecruitmentsCard.tsx | 12 ++++++------ 3 files changed, 14 insertions(+), 14 deletions(-) rename src/components/{ => company}/CompanyCard.tsx (84%) rename src/components/{ => recruitments}/RecruitmentsCard.tsx (88%) diff --git a/src/components/common/Skelton/Shimmer.tsx b/src/components/common/Skelton/Shimmer.tsx index 4262771..cf8af41 100644 --- a/src/components/common/Skelton/Shimmer.tsx +++ b/src/components/common/Skelton/Shimmer.tsx @@ -1,7 +1,7 @@ export default function Shimmer() { return (
-
+
); } diff --git a/src/components/CompanyCard.tsx b/src/components/company/CompanyCard.tsx similarity index 84% rename from src/components/CompanyCard.tsx rename to src/components/company/CompanyCard.tsx index e2fde75..7caf41d 100644 --- a/src/components/CompanyCard.tsx +++ b/src/components/company/CompanyCard.tsx @@ -5,27 +5,27 @@ 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 HoverPrefetchLink from "../common/HoverPrefetchLink"; import { Icon } from "@team-return/design-system"; -import CompaniesSkelton from "./common/Skelton/CompanySkelton"; +import CompaniesSkelton from "../common/Skelton/CompanySkelton"; export default function CompanyCard() { const getParams = useSearchParams(); const [companyList, setCompanyList] = useState([]); - const res = GetCompaniesList(getParams.toString()); + const compnayList = GetCompaniesList(getParams.toString()); useEffect(() => { - if (res.data?.data.companies) { + if (compnayList.data?.data.companies) { (() => { - setCompanyList(res.data.data.companies); + setCompanyList(compnayList.data.data.companies); })(); } - }, [res]); + }, [compnayList]); return (
- {res.isLoading && } + {compnayList.isLoading && } {companyList.map( ({ logo_url, name, take, has_recruitment, id }, index) => ( diff --git a/src/components/RecruitmentsCard.tsx b/src/components/recruitments/RecruitmentsCard.tsx similarity index 88% rename from src/components/RecruitmentsCard.tsx rename to src/components/recruitments/RecruitmentsCard.tsx index 4b1a0b8..20a1c92 100644 --- a/src/components/RecruitmentsCard.tsx +++ b/src/components/recruitments/RecruitmentsCard.tsx @@ -6,24 +6,24 @@ import React, { useEffect, useState } from "react"; import { useSearchParams } from "next/navigation"; import { RecruitmentsListType } from "@/apis/recruitments/type"; import { GetRecruitmentsList } from "@/apis/recruitments"; -import HoverPrefetchLink from "./common/HoverPrefetchLink"; -import RecruitmentSkelton from "./common/Skelton/SkeltonElement"; +import HoverPrefetchLink from "../common/HoverPrefetchLink"; +import RecruitmentSkelton from "../common/Skelton/SkeltonElement"; export default function RecruitmentsCard() { const getParams = useSearchParams(); const [list, setList] = useState([]); - const res = GetRecruitmentsList(getParams.toString()); + const recruitmentsList = GetRecruitmentsList(getParams.toString()); useEffect(() => { - setList((prev) => res.data?.data.recruitments || prev); - }, [res]); + setList((prev) => recruitmentsList.data?.data.recruitments || prev); + }, [recruitmentsList]); const tagStyle = "text-caption leading-caption text-lightBlue font-r border rounded-full border-[#135C9D] py-1 px-2"; return (
- {res.isLoading && } + {recruitmentsList.isLoading && } {list.map( ( { From 3493f0b0fa8e7610049c148ae3ae941b8830ff35 Mon Sep 17 00:00:00 2001 From: KANGYONGSU23 Date: Fri, 17 Nov 2023 15:28:07 +0900 Subject: [PATCH 4/6] =?UTF-8?q?fix=20::=20Array.from=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Skelton/CompanySkelton.tsx | 4 +--- src/components/common/Skelton/SkeltonElement.tsx | 3 +-- tailwind.config.js | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/common/Skelton/CompanySkelton.tsx b/src/components/common/Skelton/CompanySkelton.tsx index 55c51a9..87e85f5 100644 --- a/src/components/common/Skelton/CompanySkelton.tsx +++ b/src/components/common/Skelton/CompanySkelton.tsx @@ -1,11 +1,9 @@ import Shimmer from "./Shimmer"; export default function CompaniesSkelton() { - const skeltonArray = [0, 0, 0, 0, 0, 0, 0, 0, 0]; - return ( <> - {skeltonArray.map(() => ( + {Array.from({ length: 9 }, () => (
diff --git a/src/components/common/Skelton/SkeltonElement.tsx b/src/components/common/Skelton/SkeltonElement.tsx index a721f55..388924a 100644 --- a/src/components/common/Skelton/SkeltonElement.tsx +++ b/src/components/common/Skelton/SkeltonElement.tsx @@ -1,10 +1,9 @@ import Shimmer from "./Shimmer"; export default function RecruitmentSkelton() { - const skeltonArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; return ( <> - {skeltonArray.map(() => ( + {Array.from({ length: 12 }, () => (
diff --git a/tailwind.config.js b/tailwind.config.js index c6356de..168ef18 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,7 +7,7 @@ module.exports = { loading: { "0%": { transform: "translateX(-150%)" }, "50%": { transform: "translateX(-60%)" }, - "80%": { transform: "translateX(150%)" }, + "100%": { transform: "translateX(150%)" }, }, }, animation: { From 267d06dba01d75cde8530452c0e4b52777c9a26d Mon Sep 17 00:00:00 2001 From: KANGYONGSU23 Date: Fri, 17 Nov 2023 15:28:33 +0900 Subject: [PATCH 5/6] =?UTF-8?q?fix=20::=20=EA=B5=AC=EC=A1=B0=EB=B6=84?= =?UTF-8?q?=ED=95=B4=20=ED=95=A0=EB=8B=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/company/CompanyCard.tsx | 8 ++++---- src/components/recruitments/RecruitmentsCard.tsx | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/company/CompanyCard.tsx b/src/components/company/CompanyCard.tsx index 7caf41d..343f846 100644 --- a/src/components/company/CompanyCard.tsx +++ b/src/components/company/CompanyCard.tsx @@ -13,19 +13,19 @@ export default function CompanyCard() { const getParams = useSearchParams(); const [companyList, setCompanyList] = useState([]); - const compnayList = GetCompaniesList(getParams.toString()); + const {data: compnayList, isLoading} = GetCompaniesList(getParams.toString()); useEffect(() => { - if (compnayList.data?.data.companies) { + if (compnayList?.data.companies) { (() => { - setCompanyList(compnayList.data.data.companies); + setCompanyList(compnayList.data.companies); })(); } }, [compnayList]); return (
- {compnayList.isLoading && } + {isLoading && } {companyList.map( ({ logo_url, name, take, has_recruitment, id }, index) => ( diff --git a/src/components/recruitments/RecruitmentsCard.tsx b/src/components/recruitments/RecruitmentsCard.tsx index 20a1c92..fa5da05 100644 --- a/src/components/recruitments/RecruitmentsCard.tsx +++ b/src/components/recruitments/RecruitmentsCard.tsx @@ -13,9 +13,9 @@ export default function RecruitmentsCard() { const getParams = useSearchParams(); const [list, setList] = useState([]); - const recruitmentsList = GetRecruitmentsList(getParams.toString()); + const {data:recruitmentsList, isLoading} = GetRecruitmentsList(getParams.toString()); useEffect(() => { - setList((prev) => recruitmentsList.data?.data.recruitments || prev); + setList((prev) => recruitmentsList?.data.recruitments || prev); }, [recruitmentsList]); const tagStyle = @@ -23,7 +23,7 @@ export default function RecruitmentsCard() { return (
- {recruitmentsList.isLoading && } + {isLoading && } {list.map( ( { From 188ff36f110900c7c7dcdb6a89d1a58a0517742a Mon Sep 17 00:00:00 2001 From: KANGYONGSU23 Date: Fri, 17 Nov 2023 15:32:26 +0900 Subject: [PATCH 6/6] =?UTF-8?q?file=20::=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20?= =?UTF-8?q?=EC=B2=B4=EC=9D=B8=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SuggestionHeader.tsx | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/components/SuggestionHeader.tsx b/src/components/SuggestionHeader.tsx index 6f39bc7..d5d20e3 100644 --- a/src/components/SuggestionHeader.tsx +++ b/src/components/SuggestionHeader.tsx @@ -2,6 +2,7 @@ import { Icon } from "@team-return/design-system"; import { MyProfile } from "@/apis/students"; +import Link from "next/link"; interface PropsType { listType: "Company" | "Recruitments" | "BookMark"; @@ -9,15 +10,15 @@ interface PropsType { export default function SuggestionHeader({ listType }: PropsType) { const { data } = MyProfile(); - - const fix_data = { + + const suggestionHeaderDummy = { Company: { title: "🏒 이런 기업은 μ–΄λ– μ„Έμš”?", - router: "/company", + router: "/companies", }, Recruitments: { - title: `πŸ‘©β€πŸ’» ${data?.data.student_name || 'μ‚¬μš©μž'}λ‹˜μ˜ 관심 λΆ„μ•Όμ—μš”`, - router: "/recruitements", + title: `πŸ‘©β€πŸ’» ${data?.data.student_name || "μ‚¬μš©μž"}λ‹˜μ˜ 관심 λΆ„μ•Όμ—μš”`, + router: "/recruitments", }, BookMark: { title: "πŸ“Œ λ‚΄κ°€ μ €μž₯ν•œ λͺ¨μ§‘μ˜λ’°μ„œ", @@ -26,12 +27,17 @@ export default function SuggestionHeader({ listType }: PropsType) { return (
-

{fix_data[listType].title}

+

{suggestionHeaderDummy[listType].title}

- + {listType !== "BookMark" && ( + + 전체보기 + + + )}
); }