first commit

src/components/ui/badge/Badge.tsx

@@ -0,0 +1,6 @@
+import { IBadgeProps } from "./badge_props";
+import * as S from "./badgeStyle";
+
+export default function Badge({ bgColor, children }: IBadgeProps) {
+  return <S.Badge bgColor={bgColor}>{children}</S.Badge>;
+}

src/components/ui/badge/BadgeGreen.tsx

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+const BadgeG = styled.div`
+  width: 110px;
+  height: 30px;
+  border-radius: 30px;
+  box-shadow: 1px 1px 3px 0px #000000e5;
+  font-weight: 600;
+  font-size: 16px;
+  text-align: center;
+  line-height: 32px;
+  color: #000000;
+  background: radial-gradient(50% 50% at 50% 50%, #44ff92, #fff);
+`;
+export default function BadgeGreen() {
+  return (
+    <BadgeG>
+      <p>Playing</p>
+    </BadgeG>
+  );
+}
+
+// import "./BadgeGreen.css";
+
+// export default function BadgeGreen() {
+//   return (
+//     <div className="BadgeG">
+//       <p>Playing</p>
+//     </div>
+//   );
+// }

src/components/ui/badge/BadgeRed.css

@@ -0,0 +1,12 @@
+.BadgeR {
+  width: 110px;
+  height: 30px;
+  border-radius: 30px;
+  box-shadow: 1px 1px 3px 0px #000000e5;
+  font-weight: 600;
+  font-size: 16px;
+  text-align: center;
+  line-height: 32px;
+  color: #000000;
+  background: radial-gradient(50% 50% at 50% 50%, #ff5e5e, #fff);
+}

src/components/ui/badge/BadgeRed.tsx

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+const BadgeR = styled.div`
+  width: 110px;
+  height: 30px;
+  border-radius: 30px;
+  box-shadow: 1px 1px 3px 0px #000000e5;
+  font-weight: 600;
+  font-size: 16px;
+  text-align: center;
+  line-height: 32px;
+  color: #000000;
+  background: radial-gradient(50% 50% at 50% 50%, #ff5e5e, #fff);
+`;
+export default function BadgeRed() {
+  return (
+    <BadgeR>
+      <p>Not Ready</p>
+    </BadgeR>
+  );
+}
+
+// import "./BadgeRed.css";
+
+// export default function BadgeRed() {
+//   return (
+//     <div className="BadgeR">
+//       <p>Not Ready</p>
+//     </div>
+//   );
+// }

src/components/ui/badge/BadgeYellow.css

@@ -0,0 +1,12 @@
+.BadgeY {
+  width: 110px;
+  height: 30px;
+  border-radius: 30px;
+  box-shadow: 1px 1px 3px 0px #000000e5;
+  font-weight: 600;
+  font-size: 16px;
+  text-align: center;
+  line-height: 32px;
+  color: #000000;
+  background: radial-gradient(50% 50% at 50% 50%, #fffba6, #fff);
+}

src/components/ui/badge/BadgeYellow.tsx

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+const BadgeY = styled.div`
+  width: 110px;
+  height: 30px;
+  border-radius: 30px;
+  box-shadow: 1px 1px 3px 0px #000000e5;
+  font-weight: 600;
+  font-size: 16px;
+  text-align: center;
+  line-height: 32px;
+  color: #000000;
+  background: radial-gradient(50% 50% at 50% 50%, #fffba6, #fff);
+`;
+export default function BadgeYellow() {
+  return (
+    <BadgeY>
+      <p>Waiting...</p>
+    </BadgeY>
+  );
+}
+
+// import "./BadgeYellow.css";
+
+// export default function BadgeYellow() {
+//   return (
+//     <div className="@apply w-[110px] h-[30px] shadow-[1px_1px_3px_0px_#000000e5] font-semibold text-base text-center leading-8 text-black rounded-[30px];
+//   background: radial-gradient(50% 50% at 50% 50%, #fffba6, #fff);
+// }">
+//       <p>Waiting...</p>
+//     </div>
+//   );
+// }

src/components/ui/badge/badgeStyle.ts

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+import { IBadgeProps } from "./badge_props";
+
+export const Badge = styled.div<IBadgeProps>`
+  width: 100%;
+  height: 30px;
+  border-radius: 30px;
+  box-shadow: 1px 1px 3px 0px #000000e5;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 19.09px;
+  color: #000000;
+
+  ${({ bgColor }) => {
+    switch (bgColor) {
+      case "yellow":
+        return `
+            background: radial-gradient(120% 120% at 50% 100%, #FFFBA6 0%, #FFFFFF 100%);
+            `;
+      case "green":
+        return `
+        background: radial-gradient(120% 120% at 50% 100%, #44FF92 0%, #FFFFFF 100%);
+
+        `;
+      case "red":
+        return `
+            background: radial-gradient(120% 120% at 50% 100%, #FF5E5E 0%, #FFFFFF 100%);
+
+            `;
+    }
+  }}
+`;

src/components/ui/badge/badge_props.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+interface IBadgeProps {
+  bgColor: "yellow" | "green" | "red";
+  children: ReactNode;
+}

src/components/ui/card/CardList.tsx

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import BadgeYellow from "../badge/BadgeYellow";
+
+const CardListForm = styled.div`
+  width: 100%;
+  position: relative;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
+  background-color: #fff;
+  border: 2px solid #000;
+  box-sizing: border-box;
+  height: 260px;
+  padding: 30px 24px;
+`;
+const TitleBox = styled.div`
+  margin-top: 20px;
+  margin-bottom: 8px;
+`;
+const ProfileBox = styled.div`
+  display: flex;
+  line-height: 30px;
+  gap: 10px;
+`;
+const Profile = styled.div`
+  width: 30px;
+  position: relative;
+  border: 2px solid #dedfe0;
+  border-radius: 50%;
+  max-width: 100%;
+  overflow: hidden;
+  height: 30px;
+  object-fit: cover;
+`;
+const Button = styled.button`
+  width: 150px;
+  position: relative;
+  border-radius: 50px;
+  background: radial-gradient(50% 50% at 50% 50%, #2571ff, #fff);
+  border: 1px solid #000;
+  box-sizing: border-box;
+  height: 50px;
+  margin-top: 40px;
+  margin-left: 228px;
+`;
+export default function CardList() {
+  return (
+    <CardListForm>
+      <div>
+        <BadgeYellow></BadgeYellow>
+        <TitleBox>스겜 한판 하쉴? ㄱㄱ</TitleBox>
+        <ProfileBox>
+          <Profile></Profile>
+          <div>드루와이키키</div>
+        </ProfileBox>
+      </div>
+      <Button>참여하기</Button>
+    </CardListForm>
+  );
+}

src/components/ui/ranking/Ranking.tsx

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+const FullBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const TrophyImage = styled.img`
+  width: 100%;
+  height: 100px;
+`;
+const MainTextBox = styled.div`
+  display: flex;
+  margin-top: 45px;
+`;
+const Hr = styled.hr`
+  width: 100%;
+  position: relative;
+  border-top: 2px solid #000;
+  box-sizing: border-box;
+  height: 2px;
+`;
+export default function Rangking() {
+  return (
+    <FullBox>
+      <TrophyImage src="/trophy.png" alt="트로피 이미지" />
+      <h1>전체 랭킹</h1>
+      <MainTextBox>
+        <div>닉네임</div>
+        <div>순위</div>
+        <Hr />
+      </MainTextBox>
+    </FullBox>
+  );
+}

src/index.css

@@ -66,3 +66,6 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/pages/Page1/Page1.tsx

@@ -0,0 +1,24 @@
+// export default function Page1() {
+//   return <div>Page1</div>;
+// }
+
+import "../../components/ui/badge/BadgeRed.css";
+export default function BadgeRed() {
+  return (
+    <div className="BadgeR">
+      <p>Not Ready</p>
+    </div>
+  );
+}
+
+// export default function BadgeYellow() {
+//   return (
+//     <div
+//       className="@apply w-[110px] h-[30px] shadow-[1px_1px_3px_0px_#000000e5] font-semibold text-base text-center leading-8 text-black rounded-[30px];
+//   background: radial-gradient(50% 50% at 50% 50%, #fffba6, #fff);
+// }"
+//     >
+//       <p>Waiting...</p>
+//     </div>
+//   );
+// }