[공통컴포넌트] Button 10가지 구현

src/assets/svg/IcCircle.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcCircle = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>
+    <rect width={23} height={23} x={0.5} y={0.5} stroke='#EBE9EA' rx={11.5} />
+  </svg>
+);
+export default SvgIcCircle;

src/assets/svg/IcCirclePink.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcCirclePink = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>
+    <rect width={24} height={24} fill='#E81E6B' rx={12} />
+    <rect width={12} height={12} x={6} y={6} fill='#fff' rx={6} />
+  </svg>
+);
+export default SvgIcCirclePink;

src/assets/svg/IcEdit2.tsx

@@ -2,7 +2,7 @@ import type { SVGProps } from 'react';
 const SvgIcEdit2 = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>
     <path
-      stroke='#000'
+      stroke='currentColor'
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.5}

src/assets/svg/IcKakaoSmall.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcKakaoSmall = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 186 44' {...props}>
+    <rect width={186} height={44} fill='#FEE500' rx={22} />
+    <g clipPath='url(#ic_kakao_small_svg__a)'>
+      <path
+        fill='#000'
+        fillRule='evenodd'
+        d='M45 13.6c-4.97 0-9 3.113-9 6.952 0 2.388 1.558 4.493 3.932 5.745l-.999 3.648c-.088.322.28.579.563.392l4.377-2.889q.554.055 1.127.057c4.97 0 9-3.113 9-6.953 0-3.839-4.03-6.952-9-6.952'
+        clipRule='evenodd'
+      />
+    </g>
+    <path
+      fill='#000'
+      fillOpacity={0.85}
+      d='M69.888 16.464c0 4.288-1.184 7.984-6.4 10.608l-.912-1.312c2.448-1.232 3.92-2.672 4.736-4.384l-4.4.432-.224-1.488 5.136-.32c.192-.672.304-1.392.368-2.16h-4.784v-1.376zm1.984 12.8V15.04H73.6v5.584h2.112v1.424H73.6v7.216zm12-12.8c0 4.288-1.184 7.984-6.4 10.608l-.912-1.312c2.448-1.232 3.92-2.672 4.736-4.384l-4.4.432-.224-1.488 5.136-.32c.192-.672.304-1.392.368-2.16h-4.784v-1.376zm1.984 12.8V15.04h1.728v5.584h2.112v1.424h-2.112v7.216zm11.089-13.408c3.024 0 5.248 1.52 5.248 3.84 0 2.112-1.824 3.536-4.4 3.792v2.656h5.6v1.392h-12.88v-1.392h5.568v-2.656c-2.576-.256-4.384-1.68-4.384-3.792 0-2.32 2.224-3.84 5.248-3.84m-3.568 3.84c0 1.52 1.488 2.48 3.568 2.48s3.568-.96 3.568-2.48-1.488-2.48-3.568-2.48-3.568.96-3.568 2.48m14.808 6.528h5.568v-2.368h-4.032v-4.64h8.144v-1.824h-8.16v-1.376h9.856v4.56h-8.128v1.904h8.448v1.376h-4.416v2.368h5.6v1.392h-12.88zm15.344-9.792h9.872v1.584c0 1.904 0 3.888-.528 6.88l-1.728-.16c.544-2.8.544-4.864.544-6.72v-.208h-8.16zm-1.36 10.896V25.92h12.864v1.408zm24-12.256h1.728v10.272h-1.728zm-9.76 4.496c0-2.096 1.648-3.568 3.792-3.568 2.16 0 3.792 1.472 3.792 3.568 0 2.064-1.632 3.552-3.792 3.552-2.144 0-3.792-1.488-3.792-3.552m1.68 0c0 1.248.912 2.048 2.112 2.048s2.128-.8 2.128-2.048c0-1.28-.928-2.08-2.128-2.08s-2.112.8-2.112 2.08m.496 9.44V24.32h1.712v3.296h8v1.392z'
+    />
+    <defs>
+      <clipPath id='ic_kakao_small_svg__a'>
+        <path fill='#fff' d='M36 13h18v18H36z' />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgIcKakaoSmall;

src/assets/svg/IcKakoLarge.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcKakoLarge = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 335 52' {...props}>
+    <rect width={335} height={52} fill='#FEE500' rx={26} />
+    <g clipPath='url(#ic_kako_large_svg__a)'>
+      <path
+        fill='#000'
+        fillRule='evenodd'
+        d='M119.5 17.6c-4.971 0-9 3.113-9 6.952 0 2.388 1.558 4.493 3.932 5.745l-.999 3.648c-.088.322.28.579.563.392l4.377-2.889q.555.055 1.127.057c4.97 0 9-3.113 9-6.953 0-3.839-4.03-6.952-9-6.952'
+        clipRule='evenodd'
+      />
+    </g>
+    <path
+      fill='#000'
+      fillOpacity={0.85}
+      d='M144.388 20.464c0 4.288-1.184 7.984-6.4 10.608l-.912-1.312c2.448-1.232 3.92-2.672 4.736-4.384l-4.4.432-.224-1.488 5.136-.32c.192-.672.304-1.392.368-2.16h-4.784v-1.376zm1.984 12.8V19.04h1.728v5.584h2.112v1.424H148.1v7.216zm12-12.8c0 4.288-1.184 7.984-6.4 10.608l-.912-1.312c2.448-1.232 3.92-2.672 4.736-4.384l-4.4.432-.224-1.488 5.136-.32c.192-.672.304-1.392.368-2.16h-4.784v-1.376zm1.984 12.8V19.04h1.728v5.584h2.112v1.424h-2.112v7.216zm11.089-13.408c3.024 0 5.248 1.52 5.248 3.84 0 2.112-1.824 3.536-4.4 3.792v2.656h5.6v1.392h-12.88v-1.392h5.568v-2.656c-2.576-.256-4.384-1.68-4.384-3.792 0-2.32 2.224-3.84 5.248-3.84m-3.568 3.84c0 1.52 1.488 2.48 3.568 2.48s3.568-.96 3.568-2.48-1.488-2.48-3.568-2.48-3.568.96-3.568 2.48m14.808 6.528h5.568v-2.368h-4.032v-4.64h8.144v-1.824h-8.16v-1.376h9.856v4.56h-8.128v1.904h8.448v1.376h-4.416v2.368h5.6v1.392h-12.88zm15.344-9.792h9.872v1.584c0 1.904 0 3.888-.528 6.88l-1.728-.16c.544-2.8.544-4.864.544-6.72v-.208h-8.16zm-1.36 10.896V29.92h12.864v1.408zm24-12.256h1.728v10.272h-1.728zm-9.76 4.496c0-2.096 1.648-3.568 3.792-3.568 2.16 0 3.792 1.472 3.792 3.568 0 2.064-1.632 3.552-3.792 3.552-2.144 0-3.792-1.488-3.792-3.552m1.68 0c0 1.248.912 2.048 2.112 2.048s2.128-.8 2.128-2.048c0-1.28-.928-2.08-2.128-2.08s-2.112.8-2.112 2.08m.496 9.44V28.32h1.712v3.296h8v1.392z'
+    />
+    <defs>
+      <clipPath id='ic_kako_large_svg__a'>
+        <path fill='#fff' d='M110.5 17h18v18h-18z' />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgIcKakoLarge;

src/assets/svg/IcRight.tsx

@@ -2,7 +2,7 @@ import type { SVGProps } from 'react';
 const SvgIcRight = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>
     <path
-      stroke='#000'
+      stroke='currentColor'
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.5}

src/assets/svg/index.ts

@@ -7,6 +7,8 @@ export { default as IcCalender } from './IcCalender';
 export { default as IcCancel } from './IcCancel';
 export { default as IcCancelCircle } from './IcCancelCircle';
 export { default as IcCheckContained } from './IcCheckContained';
+export { default as IcCircle } from './IcCircle';
+export { default as IcCirclePink } from './IcCirclePink';
 export { default as IcClock } from './IcClock';
 export { default as IcCopy } from './IcCopy';
 export { default as IcDown } from './IcDown';
@@ -16,6 +18,8 @@ export { default as IcExternal } from './IcExternal';
 export { default as IcGift } from './IcGift';
 export { default as IcImg } from './IcImg';
 export { default as IcImgAdd } from './IcImgAdd';
+export { default as IcKakaoSmall } from './IcKakaoSmall';
+export { default as IcKakoLarge } from './IcKakoLarge';
 export { default as IcLeft } from './IcLeft';
 export { default as IcLink } from './IcLink';
 export { default as IcMenu } from './IcMenu';
@@ -26,6 +30,6 @@ export { default as IcRight } from './IcRight';
 export { default as IcSettings } from './IcSettings';
 export { default as IcUp } from './IcUp';
 export { default as IcUser } from './IcUser';
-export { default as LogoSweet } from './LogoSweet';
 export { default as Logotype } from './Logotype';
+export { default as LogoSweet } from './LogoSweet';
 export { default as Vite } from './Vite';

src/components/common/Button/Change/BtnChange.style.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.button`
+  ${({ theme: { mixin } }) => mixin.inlineFlexBox({ align: 'center', justify: 'center' })}
+
+  padding: 0.8rem 1.2rem;
+  gap: 0.4rem;
+  border-radius: 2.4rem;
+
+  border: none;
+  background-color: ${({ theme: { colors } }) => colors.white};
+  color: ${({ theme: { colors } }) => colors.black};
+`;
+
+export const Text = styled.p`
+  display: flex;
+  width: 100%;
+  color: ${({ theme: { colors } }) => colors.black};
+  ${({ theme: { fonts } }) => fonts.caption_02};
+`;

src/components/common/Button/Change/BtnChange.tsx

@@ -0,0 +1,19 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IcRefresh } from '../../../../assets/svg';
+import * as S from './BtnChange.style';
+
+type BtnChangeProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+};
+
+const BtnChange = ({ disabled, children, onClick }: BtnChangeProps) => {
+  return (
+    <S.Wrapper disabled={disabled} onClick={onClick}>
+      <IcRefresh style={{ width: '2rem' }} />
+      <S.Text>{children}</S.Text>
+    </S.Wrapper>
+  );
+};
+export default BtnChange;

src/components/common/Button/Cta/fill/BtnFill.style.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.button`
+  ${({ theme: { mixin } }) => mixin.flexCenter({})}
+
+  width: 33.5rem;
+  padding: 1.5rem 8.1rem 1.6rem 8.1rem;
+  gap: 1rem;
+  border-radius: 5.5rem;
+
+  background-color: ${({ theme: { colors } }) => colors.black};
+  color: ${({ theme: { colors } }) => colors.white};
+  ${({ theme: { fonts } }) => fonts.body_09}
+`;

src/components/common/Button/Cta/fill/BtnFill.tsx

@@ -0,0 +1,17 @@
+import { ButtonHTMLAttributes } from 'react';
+import * as S from './BtnFill.style';
+
+type BtnFillProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+};
+
+const BtnFill = ({ disabled, children, onClick }: BtnFillProps) => {
+  return (
+    <S.Wrapper disabled={disabled} onClick={onClick}>
+      {children}
+    </S.Wrapper>
+  );
+};
+export default BtnFill;

src/components/common/Button/Cta/medium/BtnMedium.style.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.button`
+  ${({ theme: { mixin } }) => mixin.flexCenter({})}
+
+  width: 30.3rem;
+  height: 5.2rem;
+  padding: 1.5rem 0rem 1.6rem 0rem;
+  border-radius: 2.6rem;
+
+  background-color: ${({ theme: { colors } }) => colors.black};
+  color: ${({ theme: { colors } }) => colors.white};
+  ${({ theme: { fonts } }) => fonts.body_09};
+
+  &:focus {
+    background-color: ${({ theme: { colors } }) => colors.white};
+    color: ${({ theme: { colors } }) => colors.black};
+  }
+`;

src/components/common/Button/Cta/medium/BtnMedium.tsx

@@ -0,0 +1,18 @@
+import { ButtonHTMLAttributes } from 'react';
+import * as S from './BtnMedium.style';
+
+type BtnMediumProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+};
+
+const BtnMedium = ({ disabled, children, onClick }: BtnMediumProps) => {
+  return (
+    <S.Wrapper disabled={disabled} onClick={onClick}>
+      {children}
+    </S.Wrapper>
+  );
+};
+
+export default BtnMedium;

src/components/common/Button/Cta/small_stroke/BtnSmallStroke.style.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.button`
+  ${({ theme: { mixin } }) => mixin.flexCenter({})}
+
+  padding: 1.1rem 2rem 1.2rem 2rem;
+  gap: 1rem;
+  border-radius: 9.9rem;
+
+  background-color: ${({ theme: { colors } }) => colors.white};
+  border: 1px solid ${({ theme: { colors } }) => colors.P_06};
+  color: ${({ theme: { colors } }) => colors.P_06};
+  ${({ theme: { fonts } }) => fonts.body_09}
+`;

src/components/common/Button/Cta/small_stroke/BtnSmallStroke.tsx

@@ -0,0 +1,18 @@
+import { ButtonHTMLAttributes } from 'react';
+import * as S from './BtnSmallStroke.style';
+
+type BtnSmallStrokeProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+};
+
+const BtnSmallStroke = ({ disabled, children, onClick }: BtnSmallStrokeProps) => {
+  return (
+    <S.Wrapper disabled={disabled} onClick={onClick}>
+      {children}
+    </S.Wrapper>
+  );
+};
+
+export default BtnSmallStroke;

src/components/common/Button/Edit/BtnEdit.style.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.button`
+  ${({ theme: { mixin } }) => mixin.flexBox({ align: 'center', justify: 'center' })}
+
+  height: 3.2rem;
+  padding: 0.4rem 0.6rem;
+  border-radius: 1rem;
+  column-gap: 0.4rem;
+
+  background-color: ${({ theme: { colors } }) => colors.black};
+`;
+
+export const Text = styled.p`
+  display: flex;
+  width: 100%;
+  color: ${({ theme: { colors } }) => colors.white};
+  ${({ theme: { fonts } }) => fonts.body_10};
+`;

src/components/common/Button/Edit/BtnEdti.tsx

@@ -0,0 +1,18 @@
+import { ButtonHTMLAttributes } from 'react';
+import * as S from './BtnEdit.style';
+import { IcEdit2 } from '../../../../assets/svg';
+type BtnEditProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+};
+const BtnEdit = ({ disabled, children, onClick }: BtnEditProps) => {
+  return (
+    <S.Wrapper disabled={disabled} onClick={onClick}>
+      <IcEdit2 style={{ width: '2.4rem', color: 'white' }} />
+      <S.Text>{children}</S.Text>
+    </S.Wrapper>
+  );
+};
+
+export default BtnEdit;

src/components/common/Button/Logout/BtnLogout.style.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.button`
+  ${({ theme: { mixin } }) => mixin.flexCenter({})}
+
+  padding: 0.4rem 1rem;
+  gap: 1rem;
+  border-radius: 1.6rem;
+
+  background-color: ${({ theme: { colors } }) => colors.G_01};
+  border-color: ${({ theme: { colors } }) => colors.G_02};
+  color: ${({ theme: { colors } }) => colors.G_08};
+  ${({ theme: { fonts } }) => fonts.caption_02}
+`;

src/components/common/Button/Logout/BtnLogout.tsx

@@ -0,0 +1,18 @@
+import { ButtonHTMLAttributes } from 'react';
+import * as S from './BtnLogout.style';
+
+type BtnLogoutProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+};
+
+const BtnLogout = ({ disabled, children, onClick }: BtnLogoutProps) => {
+  return (
+    <S.Wrapper disabled={disabled} onClick={onClick}>
+      {children}
+    </S.Wrapper>
+  );
+};
+
+export default BtnLogout;

src/components/common/Button/Next/BtnNext.style.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.button`
+  ${({ theme: { mixin } }) => mixin.inlineFlexBox({ align: 'center', justify: 'center' })}
+
+  height: 4.4rem;
+  padding: 1rem 1.1rem 1rem 2rem;
+  border-radius: 9.9rem;
+
+  background-color: ${({ theme: { colors } }) => colors.G_02};
+  color: ${({ theme: { colors } }) => colors.G_07};
+  border-color: ${({ theme: { colors } }) => colors.G_07};
+
+  ${({ theme: { fonts } }) => fonts.body_09}
+
+  &:focus {
+    background-color: ${({ theme: { colors } }) => colors.P_06};
+    color: ${({ theme: { colors } }) => colors.white};
+    border: none;
+    outline: none;
+  }
+`;