- {itemLocale[language].itemCreateMessage1}
- {itemLocale[language].itemCreateMessage2}
-
{urlToDomain(url)}
); diff --git a/src/app/list/create/_components/ItemLinkUploader.css.ts b/src/app/list/create/_components/ItemLinkUploader.css.ts new file mode 100644 index 00000000..78fddb15 --- /dev/null +++ b/src/app/list/create/_components/ItemLinkUploader.css.ts @@ -0,0 +1,39 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/font.css'; + +export const linkIcon = style({ + width: '1.7rem', + height: '1.7rem', + + cursor: 'pointer', +}); + +export const linkModalChildren = style({ + width: '100%', +}); + +export const linkInput = style([ + fonts.BodyRegular, + { + width: '100%', + padding: '1rem', + + border: `solid 0.15rem ${vars.color.bluegray6}`, + borderRadius: '1.2rem', + + '::placeholder': { + color: vars.color.bluegray6, + }, + }, +]); + +export const error = style([ + fonts.Label, + { + marginTop: '0.6rem', + marginLeft: '0.4rem', + + color: vars.color.red, + }, +]); diff --git a/src/app/list/create/_components/item/LinkModal.tsx b/src/app/list/create/_components/ItemLinkUploader.tsx similarity index 60% rename from src/app/list/create/_components/item/LinkModal.tsx rename to src/app/list/create/_components/ItemLinkUploader.tsx index 18bf9256..d8c66e7c 100644 --- a/src/app/list/create/_components/item/LinkModal.tsx +++ b/src/app/list/create/_components/ItemLinkUploader.tsx @@ -1,82 +1,85 @@ -import { useForm, useWatch, useFormContext } from 'react-hook-form'; +import { useForm, useFormContext, useWatch } from 'react-hook-form'; -import LinkIcon from '/public/icons/link.svg'; - -import Modal from '@/components/Modal/Modal'; +import { itemLinkRules } from '@/lib/constants/formInputValidationRules'; import useBooleanOutput from '@/hooks/useBooleanOutput'; -import { vars } from '@/styles/__theme.css'; import { useLanguage } from '@/store/useLanguage'; -import { itemLocale } from '@/app/list/create/locale'; -import { itemPlaceholder } from '@/lib/constants/placeholder'; -import { itemLinkRules } from '@/lib/constants/formInputValidationRules'; +import Modal from '@/components/Modal/Modal'; +import { listLocale } from '@/app/list/create/locale'; + +import LinkIcon from '/public/icons/link.svg'; +import * as styles from './ItemLinkUploader.css'; -import * as styles from './LinkModal.css'; -interface LinkModalProps { +interface ItemLinkUploader { index: number; } -interface LinkInputFormType { - newLink: string; -} +export default function ItemLinkUploader({ index }: ItemLinkUploader) { + const { language } = useLanguage(); + const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); -// http:// 없을경우 추가 -const ensureHttp = (link: string) => { - if (!link.startsWith('http://') && !link.startsWith('https://')) { - return 'http://' + link; - } - return link; -}; + /** React-Hook-Form */ + //--- 상위Form(기존 생성 Form) + const { getValues, setValue } = useFormContext(); -export default function LinkModal({ index }: LinkModalProps) { + //--- LinkInput(새로운 Form) const { register, control, setValue: setCurrentLink, formState: { errors: linkError, isValid }, - } = useForm{linkError.newLink?.message}
}
+ 기록하고 싶은 것들을 리스트로 남겨 봐요.
+ 나만의 기준으로 순위를 매겨도 좋고, 하나의 주제의 정보를 정리해도 좋아요.
+
+ {(watchTitle || '').length}/30 +
++ {isPublic ? listLocale[language].publicMessage : listLocale[language].privateMessage} +
+리스트에 무엇을 담고 싶나요?
+
+ ・ 최소 3개, 최대 10개까지 추가할 수 있어요.
+ ・ 이미 등록한 아이템명은 수정이 불가능해요. 삭제는 할 수 있어요.
・ 순서대로 순위가 정해져요.
+ 순서는 언제든 바꿀 수 있어요.
+
{titleErrorMessage}
} -- {watchItems[index]?.comment?.length ?? 0}/100 -
- } - linkModal={