design: Web 환경에 맞게 스타일 코드 수정 (#84)

src/components/Atoms/Button.tsx

@@ -39,7 +39,7 @@ interface ButtonProps {
   className?: string;
   $loading?: boolean;
   disabled?: boolean;
-  onClick?: () => void;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
   color?: string;
   type?: 'button' | 'submit' | 'reset' | undefined;
 }

src/pages/circle/home/components/WebSlider/CircleWebSlideCard.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import { memo, useState } from 'react';
 import { generatePath, useHistory } from 'react-router';
 
-// import { Icons } from '@/assets';
 import { Article } from '@/assets/icons';
 import { ClearButton } from '@/components';
 import { PAGE_URL } from '@/configs/path';
@@ -46,7 +45,8 @@ export const CircleWebSlideCard: React.FC<{ model: Model.Circle }> = memo(
 const Card = styled.article`
   box-sizing: border-box;
   width: 90%;
-  max-width: 360px;
+  min-width: 360px;
+  min-height: 500px;
   background: #fff;
   border: 1px solid #dadada;
   box-shadow: 1px 2px 5px rgb(0 0 0 / 15%);

src/pages/circle/home/components/WebSlider/CircleWebSlider.tsx

@@ -1,22 +1,23 @@
 import styled from '@emotion/styled';
 import { observer } from 'mobx-react-lite';
 
+import { CircleWebSlideCard } from './CircleWebSlideCard';
 import { ListComponent } from '../CircleListFrame';
-import { CircleSlideCard } from '../Slider/CircleSlideCard';
 
 export const CircleWebSlider: ListComponent = observer(({ items }) => {
   return (
     <WebScrollWrapper>
       {items.map(item => (
-        <CircleSlideCard key={item.id} model={item} />
+        <CircleWebSlideCard key={item.id} model={item} />
       ))}
     </WebScrollWrapper>
   );
 });
 
 const WebScrollWrapper = styled.div`
   display: flex;
+  align-items: center;
   gap: 20px;
-  height: 400px;
   overflow-x: auto;
+  padding: 10px 0px;
 `;