feat/#64 Workspace 가입 버튼

src/components/ranking/RankingRow.tsx

@@ -29,7 +29,7 @@ const RankingRow = ({ row }: RankingRowProps) => {
     "relative grid grid-cols-7 items-center py-4 border-b text-sm",
     row.newUser
       ? "border-green-100 bg-gradient-to-r from-green-100/80 to-transparent"
-      : "border-blue-200",
+      : "border-gray-500",
   ].join(" ")}
 >
 <div className="relative text-center">

src/components/signup/WorkSpaceButton.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import slackLogo from "@/assets/images/sub_logo.png";
+
+interface Props {
+  onClick: () => void;
+}
+
+const WorkSpaceButton: React.FC<Props> = ({ onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      aria-label="워크스페이스 가입하기"
+      className="
+        flex items-center justify-center gap-3
+        w-[400px] md:w-[480px] max-w-[85%] h-[60px]
+        bg-white border border-gray-300 rounded-xl
+
+        shadow-sm
+        hover:shadow-md hover:bg-gray-50
+        active:shadow-sm active:scale-[0.97]
+
+        transition-all duration-200 ease-out
+        select-none
+      "
+    >
+      <img
+        src={slackLogo}
+        alt="Slack Logo"
+        className="h-[14px] w-auto md:h-[16px]"
+      />
+
+      <span className="text-gray-800 text-lg md:text-xl font-medium tracking-tight">
+        Workspace 가입하기
+      </span>
+    </button>
+  );
+};
+
+export default WorkSpaceButton;

src/pages/auth/LoginPage.tsx

@@ -1,30 +1,39 @@
 import SlackLoginButton from "@/components/signup/SlackLoginButton";
+import WorkSpaceButton from "@/components/signup/WorkSpaceButton";
 import mainLogo from "@/assets/images/main_logo.png";
 
 export const SLACK_CLIENT_ID = import.meta.env.VITE_SLACK_CLIENT_ID;
 export const SLACK_REDIRECT_URI = import.meta.env.VITE_SLACK_REDIRECT_URI;
 
+const INVITE_URL =
+  "https://join.slack.com/t/slackjudge/shared_invite/zt-3jvozgq6d-~pNce8kQdm6SFy4InCmryA";
+
 export default function LoginPage() {
 
   const handleSlackLogin = () => {
     window.location.href = `https://slack.com/openid/connect/authorize?scope=email openid profile&client_id=${SLACK_CLIENT_ID}&redirect_uri=${SLACK_REDIRECT_URI}&response_type=code`
   };
 
+    const handleWorkSpace = () => {
+     window.open(INVITE_URL, "_blank", "noopener,noreferrer");
+  };
+
   return (
-    <div className="
-      min-h-screen flex flex-col items-center justify-center
-      bg-white px-4
-    ">
+    <div className="min-h-screen flex flex-col items-center justify-center bg-white px-4">
       <img
         src={mainLogo}
         alt="Slack Judge"
-        className="
-          w-[240px] md:w-[280px] lg:w-[300px]
-          mb-14 md:mb-16
-        "
+        className="w-[240px] md:w-[280px] lg:w-[300px] mb-14 md:mb-16"
       />
 
-      <SlackLoginButton onClick={handleSlackLogin} />
+      <div className="w-full flex flex-col items-center gap-4">
+        <WorkSpaceButton onClick={handleWorkSpace} />
+        <SlackLoginButton onClick={handleSlackLogin} />
+      </div>
+
+      <div className="w-[400px] md:w-[480px] max-w-[85%] text-center text-sm text-gray-400 leading-relaxed">
+        워크스페이스에 가입한 후,  로그인을 진행해주세요.
+      </div>
     </div>
   );
 }