Repository navigation
[FEAT] 투두 생성 모달 및 홈 투두 카드 UI 구현 #138
There are no files selected for viewing
This file contains hidden or 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,91 @@ | ||
| import { z } from "zod"; | ||
|
|
||
| import { apiResponseSchema } from "@/api/schema/response"; | ||
|
|
||
| export const todoIconSchema = z.enum([ | ||
| "ICON_1", | ||
| "ICON_2", | ||
| "ICON_3", | ||
| "ICON_4", | ||
| "ICON_5", | ||
| "ICON_6", | ||
| "ICON_7", | ||
| "ICON_8", | ||
| ]); | ||
|
|
||
| export const todoPrioritySchema = z.enum([ | ||
| "VERY_HIGH", | ||
| "HIGH", | ||
| "MEDIUM", | ||
| "LOW", | ||
| ]); | ||
|
|
||
| export const todoRepeatTypeSchema = z.enum([ | ||
| "NONE", | ||
| "DAILY", | ||
| "WEEKLY", | ||
| "MONTHLY", | ||
| ]); | ||
|
|
||
| export const todoRepeatWeekdaySchema = z.enum([ | ||
| "MON", | ||
| "TUE", | ||
| "WED", | ||
| "THU", | ||
| "FRI", | ||
| "SAT", | ||
| "SUN", | ||
| ]); | ||
|
|
||
| const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/; | ||
| const DURATION_PATTERN = /^\d{1,3}:[0-5]\d$/; | ||
|
|
||
| export const createTodoRequestSchema = z | ||
| .object({ | ||
| icon: todoIconSchema.nullable(), | ||
| title: z.string().trim().min(1), | ||
| subtasks: z.array(z.string().trim().min(1)).nullable(), | ||
| date: z.string().regex(DATE_PATTERN), | ||
| duration: z.string().regex(DURATION_PATTERN), | ||
| priority: todoPrioritySchema.nullable(), | ||
| tagId: z.number().int().positive().nullable(), | ||
| repeatType: todoRepeatTypeSchema, | ||
| repeatWeekdays: z.array(todoRepeatWeekdaySchema).nullable(), | ||
| repeatDayOfMonth: z.number().int().min(1).max(31).nullable(), | ||
| memo: z.string().nullable(), | ||
| }) | ||
| .superRefine((value, ctx) => { | ||
| if ( | ||
| value.repeatType === "WEEKLY" && | ||
| (!value.repeatWeekdays || value.repeatWeekdays.length === 0) | ||
| ) { | ||
| ctx.addIssue({ | ||
| code: "custom", | ||
| path: ["repeatWeekdays"], | ||
| message: "반복할 요일을 선택해주세요.", | ||
| }); | ||
| } | ||
|
|
||
| if (value.repeatType === "MONTHLY" && !value.repeatDayOfMonth) { | ||
| ctx.addIssue({ | ||
| code: "custom", | ||
| path: ["repeatDayOfMonth"], | ||
| message: "반복할 날짜를 선택해주세요.", | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| export type CreateTodoRequest = z.infer<typeof createTodoRequestSchema>; | ||
|
|
||
| export type TodoIcon = z.infer<typeof todoIconSchema>; | ||
| export type TodoPriority = z.infer<typeof todoPrioritySchema>; | ||
| export type TodoRepeatType = z.infer<typeof todoRepeatTypeSchema>; | ||
| export type TodoRepeatWeekday = z.infer<typeof todoRepeatWeekdaySchema>; | ||
|
|
||
| export const createTodoResponseSchema = apiResponseSchema( | ||
| z.object({ | ||
| todoId: z.number(), | ||
| }), | ||
| ); | ||
|
|
||
| export type CreateTodoResponse = z.infer<typeof createTodoResponseSchema>; | ||
File renamed without changes.
This file contains hidden or 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 hidden or 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,67 @@ | ||
| import { ChevronUpIcon } from "@repo/timo-design-system/icons"; | ||
| import { IconGraphic, IconSelector } from "@repo/timo-design-system/ui"; | ||
| import { cn } from "@repo/timo-design-system/utils"; | ||
|
|
||
| import type { TodoIconValue } from "@repo/timo-design-system/ui"; | ||
|
|
||
| export interface CreateTodoIconFieldProps { | ||
| icon: TodoIconValue | null; | ||
| isIconPanelOpen: boolean; | ||
| addIconLabel: string; | ||
| onOpenPanel: () => void; | ||
| onTogglePanel: () => void; | ||
| onSelectIcon: (icon: TodoIconValue) => void; | ||
| onRemoveIcon: () => void; | ||
| } | ||
|
|
||
| export const CreateTodoIconField = ({ | ||
| icon, | ||
| isIconPanelOpen, | ||
| addIconLabel, | ||
| onOpenPanel, | ||
| onTogglePanel, | ||
| onSelectIcon, | ||
| onRemoveIcon, | ||
| }: CreateTodoIconFieldProps) => { | ||
| return ( | ||
| <div className="flex w-full flex-col items-start gap-2"> | ||
| {!isIconPanelOpen && icon ? ( | ||
| <button | ||
| type="button" | ||
| onClick={onOpenPanel} | ||
| aria-label={addIconLabel} | ||
| className="flex size-6 shrink-0 items-center justify-center rounded-[4px]" | ||
| > | ||
| <IconGraphic icon={icon} /> | ||
| </button> | ||
| ) : ( | ||
| <button | ||
| type="button" | ||
| onClick={onTogglePanel} | ||
| aria-expanded={isIconPanelOpen} | ||
| className="bg-timo-gray-200 flex items-center gap-1 rounded-[4px] px-1.5 py-0.5" | ||
| > | ||
| <ChevronUpIcon | ||
| width={18} | ||
| height={18} | ||
| className={cn( | ||
| "shrink-0 transition-transform duration-200 ease-in-out", | ||
| !isIconPanelOpen && "rotate-180", | ||
| )} | ||
| /> | ||
| <span className="typo-caption-r-10 text-timo-gray-700 whitespace-nowrap"> | ||
| {addIconLabel} | ||
| </span> | ||
| </button> | ||
| )} | ||
|
|
||
| {isIconPanelOpen && ( | ||
| <IconSelector | ||
| selected={icon} | ||
| onSelect={onSelectIcon} | ||
| onRemove={onRemoveIcon} | ||
| /> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
This file contains hidden or 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,21 @@ | ||
| export interface CreateTodoMemoFieldProps { | ||
| value: string; | ||
| placeholder: string; | ||
| onChange: (value: string) => void; | ||
| } | ||
|
|
||
| export const CreateTodoMemoField = ({ | ||
| value, | ||
| placeholder, | ||
| onChange, | ||
| }: CreateTodoMemoFieldProps) => { | ||
| return ( | ||
| <textarea | ||
| value={value} | ||
| onChange={(event) => onChange(event.target.value)} | ||
| placeholder={placeholder} | ||
| rows={1} | ||
| className="typo-body-r-12 text-timo-gray-800 w-full resize-none outline-none" | ||
| /> | ||
| ); | ||
|
kimminna marked this conversation as resolved.
Resolved
|
||
| }; | ||
This file contains hidden or 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,42 @@ | ||
| import { Checkbox } from "@repo/timo-design-system/ui"; | ||
|
|
||
| import type { CreateTodoRequest } from "@/api/todo/todo-schema"; | ||
| import type { UseFormRegister } from "react-hook-form"; | ||
|
|
||
| export interface CreateTodoTaskFieldsProps { | ||
| register: UseFormRegister<CreateTodoRequest>; | ||
| titlePlaceholder: string; | ||
| subtaskInput: string; | ||
| subtaskPlaceholder: string; | ||
| onSubtaskInputChange: (value: string) => void; | ||
| } | ||
|
|
||
| export const CreateTodoTaskFields = ({ | ||
| register, | ||
| titlePlaceholder, | ||
| subtaskInput, | ||
| subtaskPlaceholder, | ||
| onSubtaskInputChange, | ||
| }: CreateTodoTaskFieldsProps) => { | ||
| return ( | ||
| <div className="flex w-full flex-col items-start gap-1.5"> | ||
| <div className="flex w-full items-center gap-2"> | ||
| <Checkbox checked={false} onChange={() => {}} disabled /> | ||
| <input | ||
| {...register("title")} | ||
| placeholder={titlePlaceholder} | ||
| className="typo-headline-b-14 text-timo-black min-w-0 flex-1 outline-none" | ||
| /> | ||
| </div> | ||
| <div className="flex w-full items-center gap-2"> | ||
| <Checkbox checked={false} onChange={() => {}} disabled /> | ||
| <input | ||
| value={subtaskInput} | ||
| onChange={(event) => onSubtaskInputChange(event.target.value)} | ||
| placeholder={subtaskPlaceholder} | ||
| className="typo-body-r-12 text-timo-gray-800 min-w-0 flex-1 outline-none" | ||
| /> | ||
| </div> | ||
|
kimminna marked this conversation as resolved.
Resolved
|
||
| </div> | ||
| ); | ||
| }; | ||
This file contains hidden or 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 hidden or 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 hidden or 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,89 @@ | ||
| "use client"; | ||
|
|
||
| import { DeleteIcon } from "@repo/timo-design-system/icons"; | ||
| import { CreateButton, TagNameInput } from "@repo/timo-design-system/ui"; | ||
| import { useTranslations } from "next-intl"; | ||
| import { useState } from "react"; | ||
|
|
||
| import { Modal } from "@/components/modal/Modal"; | ||
|
|
||
| const MAX_TAG_NAME_LENGTH = 10; | ||
|
|
||
| export interface CreateTagModalContainerProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| onExited: () => void; | ||
| existingLabels: string[]; | ||
| onCreate: (label: string) => void; | ||
| } | ||
|
|
||
| export const CreateTagModalContainer = ({ | ||
| isOpen, | ||
| onClose, | ||
| onExited, | ||
| existingLabels, | ||
| onCreate, | ||
| }: CreateTagModalContainerProps) => { | ||
| const t = useTranslations("Home"); | ||
| const [name, setName] = useState<string>(""); | ||
|
|
||
| const trimmedName = name.trim(); | ||
| const isDuplicate = existingLabels.includes(trimmedName); | ||
| const isValid = | ||
| trimmedName.length > 0 && | ||
| trimmedName.length <= MAX_TAG_NAME_LENGTH && | ||
| !isDuplicate; | ||
|
|
||
| const handleCreate = () => { | ||
| if (!isValid) return; | ||
|
|
||
| onCreate(trimmedName); | ||
| setName(""); | ||
| }; | ||
|
|
||
| return ( | ||
| <Modal | ||
| isOpen={isOpen} | ||
| onClose={onClose} | ||
| onExited={onExited} | ||
| className="w-[490px] items-center gap-3 px-6 py-4" | ||
| > | ||
| <div className="flex w-full items-center justify-between"> | ||
| <p className="typo-body-sb-12 text-timo-blue-300"> | ||
| {t("createTagModal.title")} | ||
| </p> | ||
| <button | ||
| type="button" | ||
| aria-label={t("createModal.close")} | ||
|
Contributor
There was a problem hiding this comment. 지금은 문자열이 같아서 문제없지만, 태그 모달이 투두 모달 키에 의존하는 구조라 나중에 createModal.close를 수정/삭제할 때 태그 모달까지 확인할 생각을 못 하게 될 것 같아요. "닫기"는 앞으로 모든 모달에서 쓸 테니 Common.close로 빼두면 어떨까요?
Member
Author
There was a problem hiding this comment. 전체 json 파일에 추가해서 반영해 두겠습니돵 |
||
| onClick={onClose} | ||
| className="shrink-0" | ||
| > | ||
| <DeleteIcon /> | ||
| </button> | ||
|
coderabbitai[bot] marked this conversation as resolved.
Resolved
|
||
| </div> | ||
|
|
||
| <div className="flex w-full flex-col items-start gap-3"> | ||
| <p className="typo-headline-m-16 text-timo-black w-full"> | ||
| {t("createTagModal.nameLabel")} | ||
| </p> | ||
|
|
||
| <TagNameInput | ||
| value={name} | ||
| onChange={setName} | ||
| maxLength={MAX_TAG_NAME_LENGTH} | ||
| isError={isDuplicate} | ||
| maxLengthHint={t("createTagModal.maxLengthHint")} | ||
| duplicateHint={t("createTagModal.duplicateHint")} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="flex w-full items-center justify-end"> | ||
| <CreateButton | ||
| label={t("createTagModal.create")} | ||
| disabled={!isValid} | ||
| onClick={handleCreate} | ||
| /> | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| }; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.