chore: Toggle style Radius 추가

frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.tsx

@@ -1,8 +1,8 @@
 import type { ComponentPropsWithRef, ForwardedRef, KeyboardEvent } from 'react';
 import { useContext, forwardRef } from 'react';
 
-import { getListStyling } from '@components/NewToggle/List.style';
-import { NewToggleContext } from './NewToggle';
+import { getListStyling } from '@components/NewToggle/Toggle.style';
+import { NewToggleContext } from '@components/NewToggle/NewToggle';
 
 export interface ToggleProps extends ComponentPropsWithRef<'li'> {
   toggleKey: number | string;

frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/NewToggle.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState, useMemo, createContext } from 'react';
 import List from '@components/NewToggle/List';
 import Item from '@components/NewToggle/Item';
 import { flushSync } from 'react-dom';
+import { getToggleWrapperStyling } from '@components/NewToggle/Toggle.style';
 
 interface ToggleContextType {
   selectKey: number | string;
@@ -35,7 +36,11 @@ const NewToggle = ({ initialSelect = 0, additinalFunc, children }: NewToggleProp
     [handleSelect, selected]
   );
 
-  return <NewToggleContext.Provider value={context}>{children}</NewToggleContext.Provider>;
+  return (
+    <NewToggleContext.Provider value={context}>
+      <div css={getToggleWrapperStyling}>{children}</div>
+    </NewToggleContext.Provider>
+  );
 };
 
 NewToggle.List = List;

frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.style.ts → frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Toggle.style.ts

@@ -26,3 +26,20 @@ export const getListStyling = (isSelected: boolean) =>
       backgroundColor: isSelected ? Theme.color.blue200 : Theme.color.gray100,
     },
   });
+
+export const getToggleWrapperStyling = css({
+  width: 'fit-content',
+  borderRadius: Theme.borderRadius.small,
+
+  overflow: 'hidden',
+
+  '& :first-of-type': {
+    borderTopLeftRadius: Theme.borderRadius.small,
+    borderBottomLeftRadius: Theme.borderRadius.small,
+  },
+
+  '& :last-of-type': {
+    borderTopRightRadius: Theme.borderRadius.small,
+    borderBottomRightRadius: Theme.borderRadius.small,
+  },
+});