diff --git a/src/app/create/_components/ItemLayout.css.ts b/src/app/create/_components/ItemLayout.css.ts
new file mode 100644
index 00000000..09d3172a
--- /dev/null
+++ b/src/app/create/_components/ItemLayout.css.ts
@@ -0,0 +1,76 @@
+import { style } from '@vanilla-extract/css';
+
+export const itemHeader = style({
+ width: '100%',
+
+ display: 'flex',
+ alignItems: 'center',
+ gap: '12px',
+
+ overflow: 'hidden',
+});
+
+export const rankAndTitle = style({
+ width: '100%',
+
+ display: 'flex',
+ gap: '8px',
+});
+
+export const line = style({
+ width: '100%',
+ margin: '0px',
+
+ border: 'solid 1px #AFB1B6',
+});
+
+export const moreInfo = style({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '8px',
+});
+
+export const toolbar = style({
+ width: '100%',
+
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+});
+
+export const fileButtons = style({
+ height: '18px',
+
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '10px',
+});
+
+export const previewContainer = style({
+ display: 'flex',
+ gap: '10px',
+});
+
+export const previewBox = style({
+ width: '90px',
+ height: '90px',
+
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+
+ position: 'relative',
+
+ background: '#EBF4FF',
+
+ borderRadius: '10px',
+ whiteSpace: 'pre-wrap',
+ overflow: 'hidden',
+});
+
+export const clearButton = style({
+ position: 'absolute',
+ top: '5px',
+ right: '5px',
+});
diff --git a/src/app/create/_components/ItemLayout.tsx b/src/app/create/_components/ItemLayout.tsx
new file mode 100644
index 00000000..17581947
--- /dev/null
+++ b/src/app/create/_components/ItemLayout.tsx
@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+
+import DndIcon from '/public/icons/dnd.svg';
+import ClearGrayIcon from '/public/icons/clear_x_gray.svg';
+import ClearBlackIcon from '/public/icons/clear_x_black.svg';
+import ImageIcon from '/public/icons/attach_image.svg';
+import Label from '@/components/Label/Label';
+import * as styles from './ItemLayout.css';
+
+interface ItemLayoutProps {
+ index: number;
+ handleDeleteItem: () => void;
+ itemLength: number;
+ titleInput: ReactNode;
+ commentTextArea: ReactNode;
+ commentLength: ReactNode;
+ linkModal: ReactNode;
+ linkPreview: ReactNode;
+}
+
+export default function ItemLayout({
+ index,
+ handleDeleteItem,
+ itemLength,
+ titleInput,
+ commentTextArea,
+ commentLength,
+ linkModal,
+ linkPreview,
+}: ItemLayoutProps) {
+ return (
+ <>
+
+
+
+
+ {titleInput}
+
+ {itemLength > 3 && (
+
+ )}
+
+
+
+
+
+ {commentTextArea}
+
+
+ {linkModal}
+
+
+ {commentLength}
+
+
+
+ {linkPreview}
+
+ 사진칸
+
+
+
+
+
+ );
+}
diff --git a/src/app/create/_components/Items.css.ts b/src/app/create/_components/Items.css.ts
new file mode 100644
index 00000000..ef5a48a8
--- /dev/null
+++ b/src/app/create/_components/Items.css.ts
@@ -0,0 +1,102 @@
+import { style } from '@vanilla-extract/css';
+
+export const itemsContainer = style({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '16px',
+});
+
+export const item = style({
+ padding: '12px 18px',
+
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '12px',
+
+ backgroundColor: '#fff',
+
+ fontSize: '1.6rem',
+ border: 'solid 1px #AFB1B6',
+ borderRadius: '6px',
+
+ transition: 'box-shadow 0.3s ease',
+ boxShadow: 'rgba(0, 0, 0, 0.1) 0px 2px 2px;',
+});
+
+export const draggingItem = style([
+ item,
+ {
+ boxShadow: '0px 20px 50px -5px #AFB1B6',
+ },
+]);
+
+export const title = style({
+ //body1
+ fontSize: '1.6rem',
+ fontWeight: '400',
+ lineHeight: '1.6rem',
+ letterSpacing: '-0.48px',
+
+ '::placeholder': {
+ color: '#AFB1B6',
+ },
+});
+
+export const errorTitle = style([
+ title,
+ {
+ '::placeholder': {
+ color: '#FF5454',
+ },
+ },
+]);
+
+export const comment = style({
+ width: '100%',
+ resize: 'none',
+
+ flexGrow: '1',
+
+ //body2
+ fontSize: '1.5rem',
+ lineHeight: '2.5rem',
+ letterSpacing: '-0.45px',
+
+ border: 'none',
+ outline: 'none',
+
+ '::placeholder': {
+ color: '#AFB1B6',
+ },
+});
+
+export const linkModalChildren = style({
+ width: '100%',
+});
+
+export const linkInput = style([
+ title,
+ {
+ width: '100%',
+ padding: '8px',
+
+ border: 'solid 1px #AFB1B6',
+ borderRadius: '4px',
+ },
+]);
+
+export const countLength = style({
+ //body2
+ fontSize: '1.5rem',
+ letterSpacing: '-0.45px',
+ color: '#61646B',
+});
+
+export const error = style({
+ marginTop: '8px',
+ marginLeft: '4px',
+
+ flexShrink: '0',
+ color: '#FF5454',
+ fontSize: '1.5rem',
+});
diff --git a/src/app/create/_components/Items.tsx b/src/app/create/_components/Items.tsx
new file mode 100644
index 00000000..4792155a
--- /dev/null
+++ b/src/app/create/_components/Items.tsx
@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+import { DragDropContext, Draggable, DropResult } from 'react-beautiful-dnd';
+
+import { itemPlaceholder } from '@/lib/constants/placeholder';
+import { itemTitleRules, itemCommentRules, itemLinkRules } from '@/lib/constants/formInputValidationRules';
+import { StrictModeDroppable } from '@/components/StrictModeDroppable';
+import { FormErrors } from '../page';
+import ItemLayout from './ItemLayout';
+import LinkModal from './LinkModal';
+import LinkPreview from './LinkPreview';
+import * as styles from './Items.css';
+import AddItemButton from './AddItemButton';
+
+// http:// 없을경우 추가
+const ensureHttp = (link: string) => {
+ if (!link.startsWith('http://' || 'https://')) {
+ return 'http://' + link;
+ }
+ return link;
+};
+
+// 링크 도메인만 추출 (e.g. naver.com)
+const urlToDomain = (link: string) => {
+ const domain = new URL(link).hostname.replace('www.', '');
+ return domain;
+};
+
+export default function Items() {
+ const {
+ register,
+ control,
+ getValues,
+ setValue,
+ formState: { errors },
+ } = useFormContext();
+
+ const {
+ fields: items,
+ append,
+ remove,
+ } = useFieldArray({
+ name: 'items',
+ control,
+ rules: { minLength: 3, maxLength: 10 },
+ });
+
+ const [current, setCurrent] = useState
(null);
+
+ const watchItems = useWatch({ control, name: 'items' });
+
+ //--- LinkModal 핸들러
+ const handleLinkModalOpen = (index: number) => {
+ setCurrent(getValues().items[index]?.link);
+ };
+
+ const handleLinkModalCancel = (index: number) => {
+ setValue(`items.${index}.link`, current);
+ };
+
+ const handleLinkModalConfirm = (index: number) => {
+ if (watchItems[index]?.link) {
+ setValue(`items.${index}.link`, ensureHttp(watchItems[index]?.link));
+ }
+ };
+
+ //--- 드래그 되었을 때 실행되는 이벤트
+ const onDragEnd = ({ source, destination }: DropResult) => {
+ if (destination && source.index !== destination.index) {
+ const currentArray = [...getValues().items];
+ const sourceItem = currentArray[source.index];
+ currentArray.splice(source.index, 1);
+ currentArray.splice(destination.index, 0, sourceItem);
+ setValue('items', currentArray);
+ }
+ };
+
+ return (
+
+
+ {(provided) => (
+
+ {items.map((item, index) => {
+ const errorMessage = (field: 'title' | 'comment' | 'link') =>
+ (errors as FormErrors)?.items?.[index]?.[field]?.message;
+ const titleError = errorMessage('title');
+ const commentError = errorMessage('comment');
+ const linkError = errorMessage('link');
+ return (
+
+ {(provided, snapshot) => (
+
+
remove(index)}
+ itemLength={watchItems.length}
+ titleInput={
+
+ }
+ commentTextArea={
+
+ }
+ commentLength={
+
+ ({watchItems[index]?.comment?.length ?? 0}/100)
+
+ }
+ linkModal={
+ {
+ handleLinkModalCancel(index);
+ }}
+ onTriggerButtonClick={() => {
+ handleLinkModalOpen(index);
+ }}
+ onConfirmButtonClick={() => {
+ handleLinkModalConfirm(index);
+ }}
+ isLinkValid={!linkError && watchItems[index]?.link?.length !== 0}
+ >
+
+
+ {watchItems[index]?.link?.length !== 0 && linkError && (
+
{linkError}
+ )}
+
+ );
+ })}
+ {provided.placeholder}
+ {watchItems.length < 10 && (
+
+ append({
+ rank: 0,
+ title: '',
+ comment: '',
+ link: '',
+ })
+ }
+ />
+ )}
+
+ {type === 'link' && (
+ <>
+
+
{domain}
+
+ )}
+ {type === 'image' &&
}
+
+
- {/* */}
-
+ {step === 'list' ? (
+ {
+ handleStepChange('item');
+ }}
+ />
+ ) : (
+ {
+ handleStepChange('list');
+ }}
+ />
+ )}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 19153c10..fa45bfa6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
'use client';
import { ReactNode } from 'react';
+import '@/styles/globalStyles.css';
export default function TempLayout({ children }: { children: ReactNode }) {
return (
@@ -8,6 +9,7 @@ export default function TempLayout({ children }: { children: ReactNode }) {
ListyWave
+
{children}