Merge branch 'dev' into feature/modal

.vscode/settings.json

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

next.config.js

@@ -2,6 +2,22 @@ const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
 const withVanillaExtract = createVanillaExtractPlugin();
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+    return config;
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '*',
+      },
+    ],
+  },
+};
 
 module.exports = withVanillaExtract(nextConfig);

package.json

@@ -27,16 +27,21 @@
     "@tanstack/react-query-devtools": "^5.17.12",
     "@vanilla-extract/integration": "^6.2.4",
     "@vanilla-extract/next-plugin": "^2.3.2",
+    "@yaireo/tagify": "^4.19.0",
     "axios": "^1.6.5",
     "next": "14.0.4",
     "react": "^18",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18",
+    "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",
@@ -45,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/CreateListMock.ts

@@ -0,0 +1,71 @@
+interface UserProfileType {
+  id: number;
+  profileImageUrl: string;
+  nickname: string;
+}
+
+const generateMockData = (count: number): UserProfileType[] => {
+  const mockData: UserProfileType[] = [];
+
+  mockData.push({
+    id: 101,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '안유진',
+  });
+
+  mockData.push({
+    id: 102,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '강나현',
+  });
+
+  mockData.push({
+    id: 103,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '민서영',
+  });
+
+  mockData.push({
+    id: 104,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '박소현',
+  });
+
+  mockData.push({
+    id: 105,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '강현지',
+  });
+
+  mockData.push({
+    id: 106,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '신은서',
+  });
+
+  mockData.push({
+    id: 107,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: '동호',
+  });
+
+  mockData.push({
+    id: 108,
+    profileImageUrl: `/images/mock_profile.png`,
+    nickname: 'JJUNGSU',
+  });
+
+  for (let i = 1; i <= count; i++) {
+    const user: UserProfileType = {
+      id: i,
+      profileImageUrl: '',
+      nickname: `User${i}`,
+    };
+
+    mockData.push(user);
+  }
+
+  return mockData;
+};
+
+export default generateMockData(20);

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