From f8ccb3974f1ecf66094d5987be262a47b9d9c16a Mon Sep 17 00:00:00 2001 From: howooking Date: Thu, 29 Jun 2023 16:30:23 +0900 Subject: [PATCH 1/5] =?UTF-8?q?doc:=20html=20lang=20attribute=20'ko'?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index e0d1c84..75fc8dc 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + From 51f4d49ecb13c007573173019cde7ce3cec53a4f Mon Sep 17 00:00:00 2001 From: howooking Date: Thu, 29 Jun 2023 16:45:13 +0900 Subject: [PATCH 2/5] =?UTF-8?q?style:=20ui=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - text-gray-400를 tailwindConfig에서 subTextAndBorder변수로 지정 --- src/components/ui/Button.tsx | 4 ++-- src/components/ui/Input.tsx | 34 +++++++++++++++++++++++++++++++ src/components/ui/KakoaButton.tsx | 25 +++++++++++++++++++++++ src/components/ui/Modal.tsx | 4 ++-- src/components/ui/Seletct.tsx | 2 +- src/components/ui/TextInput.tsx | 20 ------------------ src/components/ui/Title.tsx | 3 +++ src/components/ui/Toggle.tsx | 12 ++++++----- tailwind.config.js | 1 + 9 files changed, 75 insertions(+), 30 deletions(-) create mode 100644 src/components/ui/Input.tsx create mode 100644 src/components/ui/KakoaButton.tsx delete mode 100644 src/components/ui/TextInput.tsx create mode 100644 src/components/ui/Title.tsx diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 20bdfc1..e73495f 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -1,6 +1,6 @@ interface ButtonProps { contents: string | JSX.Element; - onClick: () => void; + onClick?: () => void; submit?: boolean; secondary?: boolean; disabled?: boolean; @@ -20,7 +20,7 @@ export default function Button({ type={submit ? 'submit' : 'button'} className={`${ secondary ? 'bg-white text-accent' : 'bg-accent text-white' - } block w-full rounded-md border-2 border-accent px-3 py-2 font-bold ring-gray-400 ring-offset-2 transition hover:opacity-80 focus:ring-2 active:scale-95 disabled:pointer-events-none disabled:opacity-30`} + } block w-full rounded-md border-2 border-accent px-3 py-2 font-bold ring-subTextAndBorder ring-offset-2 transition hover:opacity-80 focus:ring-2 active:scale-95 disabled:pointer-events-none disabled:opacity-30`} > {contents} diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx new file mode 100644 index 0000000..26cd741 --- /dev/null +++ b/src/components/ui/Input.tsx @@ -0,0 +1,34 @@ +interface InputProps { + placeholder?: string; + value: string; + onChange: (event: React.ChangeEvent) => void; + type?: string; + label?: string; + name: string; +} + +export default function Input({ + placeholder, + value, + onChange, + type, + label, + name, +}: InputProps) { + return ( +
+ + +
+ ); +} diff --git a/src/components/ui/KakoaButton.tsx b/src/components/ui/KakoaButton.tsx new file mode 100644 index 0000000..b868377 --- /dev/null +++ b/src/components/ui/KakoaButton.tsx @@ -0,0 +1,25 @@ +import { RiKakaoTalkFill } from 'react-icons/ri'; + +interface KakoaButtonProps { + disabled: boolean; +} + +export default function KakoaButton({ disabled }: KakoaButtonProps) { + return ( + + + + ); +} diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx index cc5a86b..f8ff56d 100644 --- a/src/components/ui/Modal.tsx +++ b/src/components/ui/Modal.tsx @@ -47,12 +47,12 @@ export default function Modal() { Payment successful
-

+

Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.

diff --git a/src/components/ui/Seletct.tsx b/src/components/ui/Seletct.tsx index 5607584..3bb6d7c 100644 --- a/src/components/ui/Seletct.tsx +++ b/src/components/ui/Seletct.tsx @@ -22,7 +22,7 @@ export default function Select({ value={value} name={name} onChange={onChange} - className="block w-full appearance-none rounded-md border-2 border-gray-400 px-3 py-2 transition focus:border-accent focus:outline-none" + className="block w-full appearance-none rounded-md border-2 border-subTextAndBorder px-3 py-2 transition focus:border-accent focus:outline-none" > {options.map((option) => (