fix: 버튼 컴포넌트 수정 (boolean 관련 오류 존재)

peauty · Nov 21, 2024 · 6874372 · 6874372
1 parent 65d35c4
commit 6874372
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 25 deletions.
diff --git a/src/components/global/CustomButton/CustomButton.stories.tsx b/src/components/global/CustomButton/CustomButton.stories.tsx
@@ -27,7 +27,7 @@ const meta = {
       control: 'boolean',
       description: '비활성화 여부',
     },
-    fullWidth: {
+    fullwidth: {
       control: 'boolean',
       description: '너비 100% 설정',
       defaultValue: false,
@@ -98,7 +98,7 @@ export const Disabled: Story = {
 export const FullWidth: Story = {
   args: {
     children: '전체 너비 버튼',
-    fullWidth: true,
+    fullwidth: true,
     variant: 'primary',
   },
   parameters: {
@@ -117,7 +117,7 @@ export const FullWidthContainer: Story = {
   ],
   args: {
     children: '컨테이너 안의 전체 너비 버튼',
-    fullWidth: true,
+    fullwidth: true,
     variant: 'primary',
   },
 };
@@ -144,9 +144,9 @@ export const VariousWidths: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '100%', maxWidth: '600px' }}>
       <CustomButton variant="primary">기본 버튼</CustomButton>
-      <CustomButton variant="primary" fullWidth>전체 너비 버튼</CustomButton>
+      <CustomButton variant="primary" fullwidth>전체 너비 버튼</CustomButton>
       <div style={{ width: '50%' }}>
-        <CustomButton variant="primary" fullWidth>50% 너비 버튼</CustomButton>
+        <CustomButton variant="primary" fullwidth>50% 너비 버튼</CustomButton>
       </div>
     </div>
   ),

diff --git a/src/components/global/CustomButton/CustomButton.styles.ts b/src/components/global/CustomButton/CustomButton.styles.ts
@@ -17,17 +17,17 @@ export const pressAnimation = keyframes`
 export const Button = styled.button<{
   size: string;
   variant: string;
-  $fullWidth: boolean;
+  fullwidth?: boolean;
 }>`
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  justify-content: center;  
   border-radius: 5px;
   font-weight: 500;
   margin: 10px 10px;
   transition: all 0.2s ease-in-out;
   cursor: pointer;
-  width: ${props => props.$fullWidth ? '100%' : 'auto'};
+  width: ${props => props.fullwidth ? '100%' : 'auto'};
   color: ${colors.white};
 
   // 크기 설정

diff --git a/src/components/global/CustomButton/CustomButton.tsx b/src/components/global/CustomButton/CustomButton.tsx
@@ -26,7 +26,7 @@ interface CustomButtonProps {
   /**
    * 너비를 100%로 설정
    */
-  fullWidth?: boolean;
+  fullwidth?: boolean;
 }
 
 export default function CustomButton({
@@ -35,15 +35,15 @@ export default function CustomButton({
   variant = 'primary',
   disabled = false,
   onClick,
-  fullWidth = true,
+  fullwidth = true,
 }: CustomButtonProps) {
   return (
     <Button
       size={size}
       variant={variant}
       disabled={disabled}
       onClick={onClick}
-      $fullWidth={fullWidth}
+      fullwidth={fullwidth}
     >
       {children}
     </Button>

diff --git a/src/components/global/CustomInput/CustomInput.stories.tsx b/src/components/global/CustomInput/CustomInput.stories.tsx
@@ -91,12 +91,12 @@ export const FullWidth: Story = {
     <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
       <CustomInput 
         label="전체 너비 (Outlined)" 
-        fullWidth 
+        fullwidth={true}
       />
       <CustomInput 
         label="전체 너비 (Underlined)" 
         variant="underlined"
-        fullWidth 
+        fullwidth={true}
       />
     </div>
   ),
@@ -108,7 +108,7 @@ export const Playground: Story = {
     label: 'playground',
     placeholder: '자유롭게 설정을 변경해보세요',
     variant: 'outlined',
-    fullWidth: false,
+    fullwidth: false,
     disabled: false,
     error: '',
     hint: '',

diff --git a/src/components/global/CustomInput/CustomInput.styles.ts b/src/components/global/CustomInput/CustomInput.styles.ts
@@ -13,10 +13,10 @@ const fadeIn = keyframes`
   }
 `;
 
-export const Container = styled.div<{ $fullWidth: boolean; $hasButton: boolean }>`
+export const Container = styled.div<{ $fullwidth: boolean; $hasButton: boolean }>`
   display: flex;
   flex-direction: column;
-  width: ${({ $fullWidth }) => ($fullWidth ? '100%' :'auto')};
+  width: ${({ $fullwidth }) => ($fullwidth ? '100%' :'auto')};
   ${({ $hasButton }) => $hasButton && css`
     margin-bottom: 10px;
   `}

diff --git a/src/components/global/CustomInput/CustomInput.tsx b/src/components/global/CustomInput/CustomInput.tsx
@@ -5,7 +5,7 @@ interface CustomInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '
   label?: string;
   error?: string;
   hint?: string;
-  fullWidth?: boolean;
+  fullwidth?: boolean;
   variant?: 'outlined' | 'underlined';
   suffix?: ReactNode;
   hasButton?: boolean;
@@ -15,15 +15,15 @@ export default function CustomInput({
   label,
   error,
   hint,
-  fullWidth = true,
+  fullwidth = true,
   disabled = false,
   variant = 'underlined',
   suffix,
   hasButton = false,
   ...props
 }: CustomInputProps) {
   return (
-    <Container $fullWidth={fullWidth} $hasButton={hasButton}>
+    <Container $fullwidth={fullwidth} $hasButton={hasButton}>
       {label && <Label>{label}</Label>}
       <InputWrapper $variant={variant} $error={!!error} $disabled={disabled}>
         <StyledInput $error={!!error} disabled={disabled} {...props} />

diff --git a/src/components/global/CustomModal/CustomModal.styles.ts b/src/components/global/CustomModal/CustomModal.styles.ts
@@ -0,0 +1,41 @@
+import styled, { keyframes } from "styled-components";
+
+// 슬라이드 애니메이션
+const slideUp = keyframes`
+  from {
+    transform: translate(-50%, 100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(-50%, 0);
+    opacity: 1;
+  }
+`;
+
+export const ModalBackdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  z-index: 1000;
+`;
+
+export const ModalWrapper = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 480px;
+  padding: 16px;
+  background-color: white;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
+  animation: ${slideUp} 0.3s ease-out;
+`;
diff --git a/src/components/global/CustomModal/CustomModal.tsx b/src/components/global/CustomModal/CustomModal.tsx
@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+import * as S from "./CustomModal.styles";
+
+interface CustomModalProps {
+  children: ReactNode; // 모달 내부에 렌더링될 콘텐츠
+  onClose: () => void; // 모달 닫기 함수
+}
+
+export default function CustomModal({ children, onClose }: CustomModalProps) {
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <S.ModalBackdrop onClick={handleBackdropClick}>
+      <S.ModalWrapper>{children}</S.ModalWrapper>
+    </S.ModalBackdrop>
+  );
+}
diff --git a/src/components/global/CustomModal/index.ts b/src/components/global/CustomModal/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomModal';
diff --git a/src/components/global/SocialLoginButton/SocialLoginButton.styles.ts b/src/components/global/SocialLoginButton/SocialLoginButton.styles.ts
@@ -3,13 +3,13 @@ import styled from "styled-components";
 export const ButtonWrapper = styled.button<{
   type: string;
   round: boolean;
-  fullWidth?: boolean; // fullWidth 속성 추가
+  fullwidth?: boolean; // fullwidth 속성 추가
 }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({ fullWidth, round }) =>
-    fullWidth ? "100%" : round ? "50px" : "240px"}; // fullWidth이면 부모의 크기에 맞춤
+  width: ${({ fullwidth, round }) =>
+    fullwidth ? "100%" : round ? "50px" : "240px"}; // fullwidth이면 부모의 크기에 맞춤
   height: ${({ round }) => (round ? "50px" : "50px")};
   border-radius: ${({ round }) => (round ? "50%" : "8px")};
   font-size: 16px;

diff --git a/src/components/global/SocialLoginButton/SocialLoginButton.tsx b/src/components/global/SocialLoginButton/SocialLoginButton.tsx
@@ -7,13 +7,13 @@ import { ButtonWrapper } from "./SocialLoginButton.styles";
 type SocialLoginButtonProps = {
   type: 'kakao' | 'google' | 'naver';
   round?: boolean; // 동그란 버튼 여부
-  fullWidth?: boolean;
+  fullwidth?: boolean;
 };
 
 function SocialLoginButton({ 
   type, 
   round = false,
-  fullWidth = true
+  fullwidth = true
 }: SocialLoginButtonProps) {
   const getButtonText = () => {
     switch (type) {
@@ -42,7 +42,7 @@ function SocialLoginButton({
   };
 
   return (
-    <ButtonWrapper type={type} round={round} fullWidth={fullWidth}>
+    <ButtonWrapper type={type} round={round} fullwidth={fullwidth}>
       {getButtonIcon()}
       {!round && getButtonText()}
     </ButtonWrapper>