diff --git a/README.md b/README.md index 23533c3..ec0b7b0 100644 --- a/README.md +++ b/README.md @@ -2,19 +2,14 @@ [Headless UI](https://headlessui.com/) +[Tail Blocks](https://tailblocks.cc/) + [React Router DOM](https://reactrouter.com/en/main) [React Icons](https://react-icons.github.io/react-icons) -# 규칙 - -1. export default functional component -1. @ alias -1. text 색은 기본(검정색), sub-text & border 색은 gray-400 -1. yarn(x) npm(o) - # 이슈 생성 개발 시작 전 ToDo에 Issue 등록 Projects탭 -> + 버튼 -> create new issue 또는 -Issue 탭 -> New issue 버튼 -> 템플릿 선택 -> 이슈 등록 \ No newline at end of file +Issue 탭 -> New issue 버튼 -> 템플릿 선택 -> 이슈 등록 diff --git a/index.html b/index.html index e0d1c84..75fc8dc 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..ce69e98 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,71 @@ +export default function Footer() { + return ( + + ); +} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 1f6e1fb..dd43a4b 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,20 +1,29 @@ import { NAV_ITEMS } from '@/constants/constants'; +import { Link } from 'react-router-dom'; export default function Navbar() { return (
- main-logo + + main-logo +
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) => (