feat :: 채널톡 추가 및 모집의뢰서 스타일 수정

채널톡 추가 및 모집의뢰서 스타일 수정
Team-return · Nov 8, 2024 · a7e28ac · a7e28ac
2 parents abf12d4 + c6d3d9a
commit a7e28ac
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 9 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
         "lint": "next lint"
     },
     "dependencies": {
+        "@channel.io/channel-web-sdk-loader": "^2.0.0",
         "@next/font": "^13.5.2",
         "@sentry/nextjs": "^8.33.1",
         "@sentry/utils": "^8.33.1",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import localFont from "@next/font/local";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 import "./globals.css";
+import * as ChannelService from "@channel.io/channel-web-sdk-loader";
 
 const pretendard = localFont({
   src: [
@@ -45,6 +46,14 @@ export default function RootLayout({
     }
   }, [pathname]);
 
+  ChannelService.loadScript();
+
+  const CHATKEY = process.env.NEXT_PUBLIC_CHAT_KEY || "";
+
+  ChannelService.boot({
+    pluginKey: CHATKEY,
+  });
+
   return (
     <html>
       <SEOConfig />

diff --git a/src/components/recruitments/RecruitmentsCard.tsx b/src/components/recruitments/RecruitmentsCard.tsx
@@ -25,17 +25,19 @@ export default function RecruitmentsCard({ maxLength = 12 }: PropsType) {
   return (
     <div className="w-full mt-5 grid grid-cols-3 md:grid-cols-4 gap-[1.5vw]">
       {isLoading && <RecruitmentSkelton />}
-        {recruitmentsList?.recruitments.length === 0 ? (
-          <p className="col-span-4 text-center">⚠ 아직 모집의뢰서가 없습니다.</p>
-        ) :
-        recruitmentsList?.recruitments.filter((_, idx) => idx < maxLength).map((item) => {
-          return <RecruitmentsItem key={item.id} {...item} />;
-        })}
+      {recruitmentsList?.recruitments.length === 0 ? (
+        <p className="col-span-4 text-center">⚠ 아직 모집의뢰서가 없습니다.</p>
+      ) : (
+        recruitmentsList?.recruitments
+          .filter((_, idx) => idx < maxLength)
+          .map((item) => {
+            return <RecruitmentsItem key={item.id} {...item} />;
+          })
+      )}
     </div>
   );
 }
 
-
 function RecruitmentsItem({
   company_profile_url,
   company_name,
@@ -51,7 +53,7 @@ function RecruitmentsItem({
 
   return (
     <HoverPrefetchLink href={`/recruitments/detail?id=${id}`}>
-      <div className="flex flex-col w-full overflow-hidden transition duration-200 cursor-pointer shadow-elevaiton rounded-xl hover:transition hover:scale-105">
+      <div className="flex flex-col w-full overflow-hidden transition duration-200 cursor-pointer shadow-elevaiton rounded-xl hover:transition hover:scale-105 h-full">
         <div className="w-full h-0 pb-[70%] relative">
           <Image
             className="absolute object-contain"
@@ -88,4 +90,4 @@ function RecruitmentsItem({
       </div>
     </HoverPrefetchLink>
   );
-}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -237,6 +237,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@channel.io/channel-web-sdk-loader@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@channel.io/channel-web-sdk-loader@npm:2.0.0"
+  checksum: 11902a0695e718b2ff8f1df92684bd2c5bea06b5e4d83a1f907fe6eef16d1ca6e231bd4bceced2cd4e839c05407d9a8b96034cb902d17998e1e9e2bd799ea8ff
+  languageName: node
+  linkType: hard
+
 "@emotion/is-prop-valid@npm:1.2.2":
   version: 1.2.2
   resolution: "@emotion/is-prop-valid@npm:1.2.2"
@@ -5055,6 +5062,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "my-app@workspace:."
   dependencies:
+    "@channel.io/channel-web-sdk-loader": ^2.0.0
     "@next/font": ^13.5.2
     "@sentry/nextjs": ^8.33.1
     "@sentry/utils": ^8.33.1