feat: updated adminagendatags

packages/web/src/components/atoms/Toggle.tsx

@@ -41,7 +41,7 @@ export const ToggleButton = styled.div<{
     justify-content: center;
     align-items: center;
     line-height: 28px;
-    padding: 4px 6px 4px 6px;
+    padding: 4px 5px 4px 5px;
     background-color: ${selected ? theme.colors.blue200 : theme.colors.white};
     transition-duration: 0.25s;
     transition-property: background-color;

packages/web/src/components/molecules/AdminAgendaTags.tsx

@@ -1,67 +1,66 @@
 import React from "react";
 import {
-  BorderedBox,
   Box,
   Text,
   ToggleContainor,
   ToggleButton,
 } from "@biseo/web/components/atoms";
 
-interface Props {
+interface SelectProps {
   switchPublic: (prev: boolean) => void;
   switchNamed: (prev: boolean) => void;
   ispublic: boolean;
   isnamed: boolean;
 }
 
-export const AdminAgendaTags: React.FC = () => (
+interface TagProps {
+  ispublic: boolean;
+  isnamed: boolean;
+}
+
+export const AdminAgendaTags: React.FC<TagProps> = ({
+  ispublic = true,
+  isnamed = false,
+}) => (
   <Box w={270} h={28} gap={16} dir="row" justify="center">
-    <Box dir="row" w={122} h={28} gap={10} align="center">
+    <Box dir="row" w={130} h={28} gap={8} align="center">
       <Text variant="body" color="black">
         투표 결과
       </Text>
-      <BorderedBox
-        borderColor="gray200"
-        bg="white"
-        w={65}
-        h={28}
-        justify="center"
-        borderSize={1}
-        padHorizontal={15}
-        round={5}
-        borderStyle="solid"
-        gap={99}
-      >
-        <Text color="gray600" variant="option1">
-          비공개
-        </Text>
-      </BorderedBox>
+      <ToggleContainor h={25}>
+        <ToggleButton isLeft selected={ispublic}>
+          <Text variant="option1" color={ispublic ? "blue500" : "gray400"}>
+            공개
+          </Text>
+        </ToggleButton>
+        <ToggleButton isLeft={false} selected={!ispublic}>
+          <Text variant="option1" color={!ispublic ? "blue500" : "gray400"}>
+            비공개
+          </Text>
+        </ToggleButton>
+      </ToggleContainor>
     </Box>
-    <Box dir="row" w={122} h={28} gap={10} align="center">
+    <Box dir="row" w={130} h={28} gap={8} align="center">
       <Text variant="body" color="black">
         투표 상세
       </Text>
-      <BorderedBox
-        borderColor="gray200"
-        bg="white"
-        w={65}
-        h={28}
-        justify="center"
-        borderSize={1}
-        padHorizontal={15}
-        round={5}
-        gap={99}
-        borderStyle="solid"
-      >
-        <Text color="gray600" variant="option1">
-          무기명
-        </Text>
-      </BorderedBox>
+      <ToggleContainor h={25}>
+        <ToggleButton isLeft selected={isnamed}>
+          <Text variant="option1" color={isnamed ? "blue500" : "gray400"}>
+            기명
+          </Text>
+        </ToggleButton>
+        <ToggleButton isLeft={false} selected={!isnamed}>
+          <Text variant="option1" color={!isnamed ? "blue500" : "gray400"}>
+            무기명
+          </Text>
+        </ToggleButton>
+      </ToggleContainor>
     </Box>
   </Box>
 );
 
-export const AdminAgendaTagsSelect: React.FC<Props> = ({
+export const AdminAgendaTagsSelect: React.FC<SelectProps> = ({
   switchPublic,
   switchNamed,
   ispublic,

packages/web/src/components/organisms/OngoingAgendaModal.tsx

@@ -37,6 +37,11 @@ export const OngoingAgendaModal: React.FC = () => {
     }
   };
 
+  const isPublic =
+    targetAgenda?.type.public === undefined ? false : targetAgenda?.type.public;
+  const isNamed =
+    targetAgenda?.type.named === undefined ? false : targetAgenda?.type.named;
+
   return (
     <Modal title="진행 중인 투표">
       <Box w={630} justify="space-between" padVertical={15} dir="row">
@@ -77,7 +82,7 @@ export const OngoingAgendaModal: React.FC = () => {
             padHorizontal={15}
             round={5}
           >
-            <AdminAgendaTags />
+            <AdminAgendaTags ispublic={isPublic} isnamed={isNamed} />
             <Box dir="row" w={270} gap={10} justify="space-between">
               <Button w={130} h={38} onClick={remind}>
                 <Text variant="boldtitle3" color="blue600">

packages/web/src/components/organisms/TerminatedAgendaModal.tsx

@@ -36,6 +36,10 @@ export const TerminatedAgendaModal: React.FC = () => {
     targetAgenda?.voters.total.length === undefined
       ? 0
       : targetAgenda?.voters.total.length;
+  const isPublic =
+    targetAgenda?.type.public === undefined ? false : targetAgenda?.type.public;
+  const isNamed =
+    targetAgenda?.type.named === undefined ? false : targetAgenda?.type.named;
 
   return (
     <Modal title="종료된 투표">
@@ -102,7 +106,7 @@ export const TerminatedAgendaModal: React.FC = () => {
             bg="blue100"
             round={5}
           >
-            <AdminAgendaTags />
+            <AdminAgendaTags ispublic={isPublic} isnamed={isNamed} />
           </Box>
         </Box>
       </Box>