-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
회원가입 UI 변경
- Loading branch information
Showing
22 changed files
with
806 additions
and
458 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| 'use client'; | ||
|
|
||
| import { useState } from 'react'; | ||
|
|
||
| // components | ||
| import AddFormProgress from '../components/AddFormProgress'; | ||
| import WorkingForm from '../components/WorkingForm'; | ||
| import InformationForm from '../components/InfomationForm'; | ||
|
|
||
| export default function AddInfo() { | ||
| const [isLast, setIsLast] = useState(false); | ||
| return ( | ||
| <> | ||
| <AddFormProgress widthPercent={isLast ? 'w-[100%]' : 'w-[50%]'} /> | ||
| {isLast ? ( | ||
| <InformationForm /> | ||
| ) : ( | ||
| <WorkingForm goNext={() => setIsLast(true)} /> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
14 changes: 14 additions & 0 deletions
14
client/src/app/signup/components/AddFormProgress/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| export default function AddFormProgress({ | ||
| widthPercent, | ||
| }: { | ||
| widthPercent: string; | ||
| }) { | ||
| return ( | ||
| <div className="relative w-full h-4 pt-2 pb-8"> | ||
| <div className="absolute left-0 w-full h-2 rounded top-2 bg-yellow-scale-50" /> | ||
| <div | ||
| className={`absolute left-0 rounded top-2 bg-yellow-scale-500 ${widthPercent} h-2 transition-[width]`} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
34 changes: 34 additions & 0 deletions
34
client/src/app/signup/components/GithubSignUpButton/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| 'use client'; | ||
|
|
||
| import { Icon } from '@iconify/react'; | ||
|
|
||
| //hooks | ||
| import useModal from '@/hooks/modal/useModal'; | ||
|
|
||
| //constant | ||
| import { errorMessage, ModalType } from '@/constants/constant'; | ||
|
|
||
| export default function GithubSignUpButton() { | ||
| const { openModal } = useModal(); | ||
|
|
||
| return ( | ||
| <div className="grid py-4"> | ||
| <button | ||
| onClick={() => | ||
| openModal({ | ||
| type: ModalType.ERROR, | ||
| message: errorMessage.notComplete, | ||
| }) | ||
| } | ||
| className="relative p-3 border border-gray-900 hover:bg-blue-gray-scale-100 active:bg-blue-gary-scale-100 disabled:bg-gray-scale-50 disabled:border-gray-800 disabled:text-blue-gray-600" | ||
| > | ||
| <Icon | ||
| className="absolute top-2 left-2" | ||
| icon="mdi:github" | ||
| fontSize={34} | ||
| /> | ||
| <span>깃허브로 회원가입</span> | ||
| </button> | ||
| </div> | ||
| ); | ||
| } |
34 changes: 34 additions & 0 deletions
34
client/src/app/signup/components/GoogleSignUpButton/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| 'use client'; | ||
|
|
||
| import { Icon } from '@iconify/react'; | ||
|
|
||
| //hooks | ||
| import useModal from '@/hooks/modal/useModal'; | ||
|
|
||
| //constant | ||
| import { errorMessage, ModalType } from '@/constants/constant'; | ||
|
|
||
| export default function GoogleSignUpButton() { | ||
| const { openModal } = useModal(); | ||
|
|
||
| return ( | ||
| <div className="grid py-4"> | ||
| <button | ||
| onClick={() => | ||
| openModal({ | ||
| type: ModalType.ERROR, | ||
| message: errorMessage.notComplete, | ||
| }) | ||
| } | ||
| className="relative p-3 border border-gray-900 hover:bg-blue-gray-scale-100 active:bg-blue-gary-scale-100 disabled:bg-gray-scale-50 disabled:border-gray-800 disabled:text-blue-gray-600" | ||
| > | ||
| <Icon | ||
| className="absolute top-2 left-2" | ||
| icon="devicon:google" | ||
| fontSize={34} | ||
| /> | ||
| <span>구글로 회원가입</span> | ||
| </button> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.