refactor(tab): 필요 없는 부분 삭제, 제 역할에 맞게 기능하도록 배치

src/components/common/tabs/index.tsx

@@ -6,15 +6,9 @@ type TabsProps = {
   selectedTab: number;
   onChange: (value: number) => void;
   children: ReactElement[];
-  position?: string;
 };
 
-export const Tabs = ({
-  selectedTab,
-  onChange,
-  children,
-  position,
-}: TabsProps) => {
+export const Tabs = ({ selectedTab, onChange, children }: TabsProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
 
@@ -39,8 +33,8 @@ export const Tabs = ({
   });
 
   return (
-    <S.StyledTabs position={position} ref={containerRef}>
-      <S.TabsHolder>{tabs}</S.TabsHolder>
+    <S.StyledTabs ref={containerRef}>
+      {tabs}
       <S.TabSlider width={sliderWidth} index={selectedTab} />
     </S.StyledTabs>
   );

src/components/common/tabs/styles.ts

@@ -4,39 +4,32 @@ import styled from '@emotion/styled';
 export const StyledTabs = styled.div<{
   position?: string;
 }>`
-  position: ${(props) => props.position || 'absolute'};
-
   display: flex;
+  justify-content: space-between; /* Tab들이 좌우로 정렬되도록 설정 */
   position: relative;
   align-self: center;
-  margin: 0 16px;
   height: 46px;
+  margin: 0 16px;
+  padding: 4px 0;
   border-radius: 10px;
   background-color: var(--color-green-06);
 `;
 
-export const TabsHolder = styled.div`
-  display: flex;
-  justify-content: space-between; /* Tab들이 좌우로 정렬되도록 설정 */
-  width: 100%;
-`;
-
 // 선택된 탭
 export const TabSlider = styled.div<{
   width: number;
   index: number;
 }>`
   position: absolute;
   top: 4px;
+  width: ${({ width }) => `${width}px`};
   height: 38px;
   background-color: var(--color-white);
   border-radius: 10px;
-  margin: 0 4px;
 
   /* 슬라이딩 애니메이션 */
   transition: 0.2s;
   transform: ${({ width, index }) => `translateX(${width * index}px)`};
-  width: ${({ width }) => `${width}px`};
 `;
 
 export const StyledTab = styled.div<{
@@ -45,14 +38,15 @@ export const StyledTab = styled.div<{
   inactiveStyle?: React.CSSProperties;
 }>`
   z-index: 1;
-  color: var(--color-grey-02);
   width: 50%; /* 각 Tab의 너비를 50%로 설정하여 두 개의 Tab이 꽉 차도록 설정 */
-  font-size: var(--font-size-md);
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background-color: transparent;
   border: none;
-  height: 38px;
-  text-align: center;
-  line-height: 50px;
+  font-size: var(--font-size-md);
+  color: var(--color-grey-02);
   cursor: pointer;
 
   ${(p) =>