Feat: 리스트 아이템 구현 및 리스트 생성 페이지 합체

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

next.config.js

@@ -10,6 +10,14 @@ const nextConfig = {
     });
     return config;
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*',
+      },
+    ],
+  },
 };
 
 module.exports = withVanillaExtract(nextConfig);

package.json

@@ -31,15 +31,17 @@
     "axios": "^1.6.5",
     "next": "14.0.4",
     "react": "^18",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18",
-    "react-hook-form": "^7.49.3",
+    "react-hook-form": "^7.50.0",
     "react-scripts": "^5.0.1",
     "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
     "@commitlint/cli": "^18.6.0",
     "@commitlint/config-conventional": "^18.6.0",
+    "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/react-hooks": "^8.0.1",
@@ -48,6 +50,7 @@
     "@types/jest": "^29.5.11",
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.0.4",

src/app/create/_components/AddItemButton.css.ts

@@ -0,0 +1,23 @@
+import { style } from '@vanilla-extract/css';
+
+export const addButton = style({
+  width: '100%',
+  height: '60px',
+
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '12px',
+
+  //body1
+  fontSize: '1.6rem',
+  fontWeight: '400',
+  lineHeight: '1.6rem',
+  letterSpacing: '-0.48px',
+  color: '#61646B',
+
+  backgroundColor: '#FFF',
+
+  border: 'solid 1px #AFB1B6 ',
+  borderRadius: '15px',
+});

src/app/create/_components/AddItemButton.tsx

@@ -0,0 +1,14 @@
+import AddIcon from '/public/icons/add.svg';
+import * as styles from './AddItemButton.css';
+
+interface AddItemButton {
+  handleAddButtonClick: () => void;
+}
+
+export default function AddItemButton({ handleAddButtonClick }: AddItemButton) {
+  return (
+    <button className={styles.addButton} type="button" onClick={handleAddButtonClick}>
+      <AddIcon /> 아이템 추가
+    </button>
+  );
+}

src/app/create/_components/CreateItem.css.ts

@@ -0,0 +1,71 @@
+import { style } from '@vanilla-extract/css';
+
+export const header = style({
+  width: '100%',
+  height: '90px',
+  paddingLeft: '20px',
+  paddingRight: '20px',
+
+  position: 'sticky',
+  top: '0',
+  left: '0',
+  zIndex: '10',
+
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+
+  backgroundColor: '#fff',
+
+  borderBottom: '1px solid rgba(0, 0, 0, 0.10)',
+});
+
+export const headerTitle = style({
+  fontSize: '2rem',
+});
+
+export const headerNextButton = style({
+  fontSize: '1.6rem',
+  backgroundColor: 'transparent',
+});
+
+export const headerNextButtonDisabled = style([
+  headerNextButton,
+  {
+    color: '#AFB1B6', //활성화 검정, 아닐때는 회색
+  },
+]);
+
+export const article = style({
+  padding: '16px 20px 30px',
+});
+
+//body1
+export const label = style({
+  marginBottom: '1.6rem',
+
+  fontSize: '1.6rem',
+  fontWeight: '600',
+  letterSpacing: '-0.048rem',
+});
+
+export const required = style({
+  marginLeft: '6px',
+
+  fontSize: '1.6rem',
+  fontWeight: '500',
+  letterSpacing: '-0.048rem',
+  color: '#FF5454',
+});
+
+//body3
+export const description = style({
+  marginBottom: '1.6rem',
+
+  fontSize: '1.4rem',
+  color: '#8A8A8E',
+  fontWeight: '400',
+  lineHeight: '2.5rem',
+  letterSpacing: '-0.042rem',
+});

src/app/create/_components/CreateItem.tsx

@@ -0,0 +1,46 @@
+import { useFormContext } from 'react-hook-form';
+
+import BackIcon from '/public/icons/back.svg';
+import Items from './Items';
+import * as styles from './CreateItem.css';
+
+interface CreateItemProps {
+  onBackClick: () => void;
+}
+
+export default function CreateItem({ onBackClick }: CreateItemProps) {
+  const {
+    formState: { isValid },
+  } = useFormContext();
+
+  return (
+    <div>
+      <div className={styles.header}>
+        <button onClick={onBackClick}>
+          <BackIcon alt="뒤로가기 버튼" />
+        </button>
+        <h1 className={styles.headerTitle}>리스트 생성</h1>
+        <button
+          onClick={() => {
+            console.log('제출');
+          }}
+          className={isValid ? styles.headerNextButton : styles.headerNextButtonDisabled}
+          disabled={!isValid ? true : false}
+        >
+          완료
+        </button>
+      </div>
+      <div className={styles.article}>
+        <h3 className={styles.label}>
+          아이템 추가 <span className={styles.required}>*</span>
+        </h3>
+
+        <p className={styles.description}>
+          최소 3개, 최대 10개까지 아이템을 추가할 수 있어요. <br />
+          아이템의 순서대로 순위가 정해져요.
+        </p>
+        <Items />
+      </div>
+    </div>
+  );
+}

src/app/create/_components/CreateList.tsx

@@ -21,7 +21,7 @@ interface UserProfileType {
   nickname: string;
 }
 
-function CreateList() {
+function CreateList({ onNextClick }: { onNextClick: () => void }) {
   const { register, getValues, setValue, setError, control, formState } = useFormContext();
   const { errors, isValid } = formState;
 
@@ -63,9 +63,9 @@ function CreateList() {
       <div className={styles.header}>
         <CloseButton width={'24'} height={'24'} />
         <h1 className={styles.headerTitle}>리스트 생성</h1>
-        <Link href="/" className={styles.headerNextButton}>
+        <button className={styles.headerNextButton} onClick={onNextClick}>
           다음
-        </Link>
+        </button>
       </div>
 
       <div className={styles.body}>

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',
+});