-
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.
- Loading branch information
1 parent
9f3d97c
commit 1b264bc
Showing
16 changed files
with
333 additions
and
337 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /** | ||
| * @params marginX, marginY (default : 0) | ||
| * @params border color (default : gray-300) | ||
| * | ||
| * @returns hr tag | ||
| */ | ||
|
|
||
| interface IHorizon { | ||
| margin?: "0" | "1" | "2" | "3" | "4" | "5" | "6"; | ||
| borderColor?: string; | ||
| } | ||
| const Horizon = ({ margin = "4", borderColor = "gray" }: IHorizon) => { | ||
| return ( | ||
| <hr | ||
| className={`m-${margin} border-${borderColor}-300 dark:border-${borderColor}-700`} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default Horizon; |
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,33 @@ | ||
| /** | ||
| * | ||
| * @params isBold (default : font-medium) | ||
| * @params isSmall (default : text-base) | ||
| * @params others (enter tailwindCSS) | ||
| */ | ||
|
|
||
| interface IJuiceFont { | ||
| isBold?: boolean; | ||
| isSmall?: boolean; | ||
| others?: string; | ||
| children: React.ReactNode; | ||
| } | ||
| const JuiceFont = ({ | ||
| isBold = false, | ||
| isSmall = false, | ||
| others = "none", | ||
| children, | ||
| }: IJuiceFont) => { | ||
| return ( | ||
| <> | ||
| <div | ||
| className={`font-mono ${isBold && `font-bold`} ${ | ||
| isSmall && `text-sm` | ||
| } ${others}`} | ||
| > | ||
| {children} | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default JuiceFont; |
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,73 @@ | ||
| const Skeleton = () => { | ||
| return ( | ||
| <> | ||
| <div | ||
| role="status" | ||
| className="max-w-sm p-4 border border-gray-200 rounded shadow md:p-6 dark:border-gray-700" | ||
| > | ||
| <div className="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-700"> | ||
| <svg | ||
| className="w-12 h-12 text-gray-200 dark:text-gray-600" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| aria-hidden="true" | ||
| fill="currentColor" | ||
| viewBox="0 0 640 512" | ||
| > | ||
| <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" /> | ||
| </svg> | ||
| </div> | ||
| <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div> | ||
| <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div> | ||
| <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div> | ||
| <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div> | ||
| <div className="flex items-center mt-4 space-x-3"> | ||
| <svg | ||
| className="text-gray-200 w-14 h-14 dark:text-gray-700" | ||
| aria-hidden="true" | ||
| fill="currentColor" | ||
| viewBox="0 0 20 20" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| fill-rule="evenodd" | ||
| d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" | ||
| clip-rule="evenodd" | ||
| ></path> | ||
| </svg> | ||
| <div> | ||
| <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2"></div> | ||
| <div className="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div> | ||
| </div> | ||
| </div> | ||
| <span className="sr-only">Loading...</span> | ||
| </div> | ||
| <div | ||
| role="status" | ||
| className="space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center" | ||
| > | ||
| <div className="flex items-center justify-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700"> | ||
| <svg | ||
| className="w-12 h-12 text-gray-200" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| aria-hidden="true" | ||
| fill="currentColor" | ||
| viewBox="0 0 640 512" | ||
| > | ||
| <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" /> | ||
| </svg> | ||
| </div> | ||
| <div className="w-full"> | ||
| <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div> | ||
| <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[480px] mb-2.5"></div> | ||
| <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div> | ||
| <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[440px] mb-2.5"></div> | ||
| <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[460px] mb-2.5"></div> | ||
| <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div> | ||
| </div> | ||
| <span className="sr-only">Loading...</span> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Skeleton; |
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,69 @@ | ||
| import React from "react"; | ||
| import { useRecoilState, useSetRecoilState } from "recoil"; | ||
| import { | ||
| dDayListState, | ||
| dDayUserInputState, | ||
| isSubmitState, | ||
| } from "../../recoil/dDay"; | ||
| import Horizon from "../common/Horizon"; | ||
|
|
||
| type UserInput = { dDayName: string; date: string }; | ||
| const DayInput = () => { | ||
| const setIsSubmit = useSetRecoilState<boolean>(isSubmitState); | ||
| const [userInputs, setUserInputs] = | ||
| useRecoilState<UserInput>(dDayUserInputState); | ||
| const [list, setList] = useRecoilState<UserInput[]>(dDayListState); | ||
| const handleChange = (event: React.FormEvent<HTMLInputElement>) => { | ||
| setUserInputs({ | ||
| ...userInputs, | ||
| [event.currentTarget.name]: event.currentTarget.value, | ||
| }); | ||
| }; | ||
| const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { | ||
| event.preventDefault(); | ||
| if (userInputs.dDayName === "" || userInputs.date === "") { | ||
| return; | ||
| } else { | ||
| setIsSubmit(true); | ||
| setList([...list, userInputs]); | ||
| } | ||
| event.currentTarget.reset(); | ||
| }; | ||
| /* | ||
| const deleteItem = (event: React.FormEvent<HTMLInputElement>) => { | ||
| const key = event.currentTarget.value; | ||
| list.splice(parseInt(key), 1); | ||
| setList([...list]); | ||
| };*/ | ||
| return ( | ||
| <div className="mt-4"> | ||
| <form | ||
| name="isSubmit" | ||
| onSubmit={handleSubmit} | ||
| className="flex justify-between px-4" | ||
| > | ||
| <input | ||
| name="dDayName" | ||
| type="text" | ||
| placeholder="D-day 이름" | ||
| onChange={handleChange} | ||
| className="w-[40%] rounded-md shadow-md focus:ring-blue-200 hover:animate-pulse" | ||
| /> | ||
| <input | ||
| name="date" | ||
| type="date" | ||
| onChange={handleChange} | ||
| className="w-[40%] rounded-md shadow-md focus:ring-blue-200 hover:animate-pulse" | ||
| /> | ||
| <button | ||
| type="submit" | ||
| className="w-[10%] bg-sky-500 text-white rounded-md font-mono text-sm shadow-md hover:bg-sky-700" | ||
| > | ||
| + | ||
| </button> | ||
| </form> | ||
| <Horizon /> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default DayInput; |
Oops, something went wrong.