.

Author: SeungJL

components/atoms/badges/Badges.tsx

@@ -47,7 +47,7 @@ const Layout = styled.div<{ isSecret: boolean }>`
   justify-content: space-between;
   align-items: center;
   padding: ${(props) =>
-    !props.isSecret ? "var(--gap-3) var(--gap-4)" : "var(--gap-1) 0 var(--gap-3) 0"};
+    !props.isSecret ? "var(--gap-3) var(--gap-5)" : "var(--gap-1) 0 var(--gap-3) 0"};
   background-color: white;
   border-bottom: var(--border);
   > div:first-child {

components/molecules/OrganizerBar.tsx

@@ -140,7 +140,7 @@ function UserComment({
 
   return (
     <>
-      <Flex align="center" px={5} py={3} borderBottom="var(--border)">
+      <Flex align="center" py={3} borderBottom="var(--border)">
         <Flex justify="center" alignSelf="flex-start" mr={2}>
           <Avatar
             size="mds"

components/molecules/UserComment.tsx

@@ -109,7 +109,7 @@ function GatherComments({ comments }: IGatherComments) {
 }
 
 const Layout = styled.div`
-  margin: var(--gap-5) var(--gap-4);
+  margin: var(--gap-5);
   display: flex;
   flex-direction: column;
   > span:first-child {

pageTemplates/gather/detail/GatherComments.tsx

@@ -1,4 +1,5 @@
-import { Badge } from "../../../components/atoms/badges/Badges";
+import { Badge } from "@chakra-ui/react";
+
 import OrganizerBar from "../../../components/molecules/OrganizerBar";
 import { IUserSummary } from "../../../types/models/userTypes/userInfoTypes";
 
@@ -13,7 +14,9 @@ function GatherOrganizer({ createdAt, organizer, isAdminOpen, category }: IGathe
   const isABOUT = isAdminOpen;
   return (
     <OrganizerBar organizer={organizer} createdAt={createdAt} isAdminOpen={isABOUT}>
-      <Badge colorScheme="red" text={category} size="lg" />
+      <Badge colorScheme="red" size="lg">
+        {category}
+      </Badge>
     </OrganizerBar>
   );
 }

pageTemplates/gather/detail/GatherOrganizer.tsx

@@ -1,6 +1,6 @@
+import { Badge } from "@chakra-ui/react";
 import styled from "styled-components";
 
-import { Badge } from "../../../components/atoms/badges/Badges";
 import { STATUS_TO_TEXT } from "../../../constants/util/convert";
 import { GatherStatus } from "../../../types/models/gatherTypes/gatherTypes";
 
@@ -14,7 +14,9 @@ function GatherTitle({ status, title }: IGatherTitle) {
 
   return (
     <Layout status={status}>
-      <Badge text={STATUS_TO_TEXT[status]} colorScheme={color} size="lg" />
+      <Badge colorScheme={color} size="lg">
+        {STATUS_TO_TEXT[status]}
+      </Badge>
       <span>{title}</span>
     </Layout>
   );

pageTemplates/gather/detail/GatherTitle.tsx

@@ -1,11 +1,11 @@
+import { Badge } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { MouseEvent } from "react";
 import { useSetRecoilState } from "recoil";
 import styled from "styled-components";
 
-import { Badge } from "../../components/atoms/badges/Badges";
 import { useFailToast } from "../../hooks/custom/CustomToast";
 import { transferGroupDataState } from "../../recoils/transferRecoils";
 import { IGroup } from "../../types/models/groupTypes/group";
@@ -27,10 +27,10 @@ function GroupBlock({ group }: IGroupBlock) {
     그룹장: group.isSecret
       ? "비공개"
       : group.organizer.name === "이승주"
-        ? group.id === 72
-          ? "이승주"
-          : "어바웃"
-        : group.organizer.name,
+      ? group.id === 72
+        ? "이승주"
+        : "어바웃"
+      : group.organizer.name,
     인원: `${group.participants.length}/${
       group.memberCnt.max === 0 ? "자유" : group.memberCnt.max + "명"
     }`,
@@ -99,12 +99,9 @@ function GroupBlock({ group }: IGroupBlock) {
             <span>{group.category.main}</span>·<span>{group.category.sub}</span>
             {!group?.isFree && <i className="fa-regular fa-lock-key-hole" />}
           </div>
-          <Badge
-            text={getBadgeText().text}
-            colorScheme={getBadgeText().color}
-            type="outline"
-            size="md"
-          />
+          <Badge colorScheme={getBadgeText().color} variant="outline" size="md">
+            {getBadgeText().text}
+          </Badge>
         </Header>
         <Title>{group.title}</Title>
         <Info>

pageTemplates/group/GroupBlock.tsx

@@ -1,8 +1,8 @@
+import { Badge } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import styled from "styled-components";
 
 import Avatar from "../../../components/atoms/Avatar";
-import { Badge } from "../../../components/atoms/badges/Badges";
 import { IUser } from "../../../types/models/userTypes/userInfoTypes";
 import { getDateDiff } from "../../../utils/dateTimeUtils";
 
@@ -35,7 +35,9 @@ function GroupOrganizer({
           <span>{writingDate}</span>
         </Info>
       </div>
-      <Badge colorScheme="red" text={category} size="lg" />
+      <Badge colorScheme="red" size="lg">
+        {category}
+      </Badge>
     </Layout>
   );
 }

pageTemplates/group/detail/GroupOrganizer.tsx

@@ -1,10 +1,9 @@
-import { Box } from "@chakra-ui/react";
+import { Badge, Box } from "@chakra-ui/react";
 import Image from "next/image";
 import { useParams } from "next/navigation";
 import styled from "styled-components";
 
 import { BANNER_IMAGE } from "../../../assets/images/BannerImages";
-import { Badge } from "../../../components/atoms/badges/Badges";
 import Header from "../../../components/layouts/Header";
 import Slide from "../../../components/layouts/PageSlide";
 
@@ -24,7 +23,9 @@ function BannerDetailPage() {
           <Title>
             <div>
               <span>같이 카공하고 상품 받자!</span>
-              <Badge text="이벤트" colorScheme="mint" size="lg" />
+              <Badge colorScheme="mint" size="lg">
+                이벤트
+              </Badge>
             </div>
           </Title>
         </Layout>

pages/banner/[category]/index.tsx

@@ -1,4 +1,5 @@
 import {
+  Badge,
   Box,
   Button,
   ButtonGroup,
@@ -17,7 +18,6 @@ import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 
 import AlertModal from "../../../components/AlertModal";
-import { Badge } from "../../../components/atoms/badges/Badges";
 import Divider from "../../../components/atoms/Divider";
 import { MainLoadingAbsolute } from "../../../components/atoms/loaders/MainLoading";
 import KakaoShareBtn from "../../../components/Icons/KakaoShareBtn";
@@ -151,7 +151,9 @@ function SecretSquareDetailPage() {
               {squareDetail && (
                 <>
                   <Box mb={2}>
-                    <Badge text={`# ${squareDetail.category}`} colorScheme="grayTheme" size="md" />
+                    <Badge colorScheme="grayTheme" size="md">
+                      {`# ${squareDetail.category}`}
+                    </Badge>
                   </Box>
                   <section id="avatar-section">
                     <OrganizerBar