diff --git a/.env b/.env
new file mode 100644
index 00000000..cecee240
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_BASE_URL = "https://dev.api.listywave.com"
\ No newline at end of file
diff --git a/src/app/[userNickname]/collabolist/page.tsx b/src/app/[userNickname]/collabolist/page.tsx
index 02058891..7e772a2d 100644
--- a/src/app/[userNickname]/collabolist/page.tsx
+++ b/src/app/[userNickname]/collabolist/page.tsx
@@ -5,7 +5,7 @@
  - [ ] 반응형 UI 구현
  */
 
-import '@/styles/globalStyles.css';
+import '@/styles/GlobalStyles.css';
 
 import { USER_DATA_ME } from '../mockData/user'; // 삭제 예정
 
diff --git a/src/app/[userNickname]/mylist/page.tsx b/src/app/[userNickname]/mylist/page.tsx
index d4feb866..7a30978e 100644
--- a/src/app/[userNickname]/mylist/page.tsx
+++ b/src/app/[userNickname]/mylist/page.tsx
@@ -5,7 +5,7 @@
  - [ ] 반응형 UI 구현
  */
 
-import '@/styles/globalStyles.css';
+import '@/styles/GlobalStyles.css';
 
 import { USER_DATA_ME } from '../mockData/user'; // 삭제 예정
 
diff --git a/src/app/_api/category/getCategories.ts b/src/app/_api/category/getCategories.ts
index 637001e9..816c8f7d 100644
--- a/src/app/_api/category/getCategories.ts
+++ b/src/app/_api/category/getCategories.ts
@@ -1,8 +1,8 @@
 import axiosInstance from '@/lib/axios/axiosInstance';
-import { CategoriesType } from '@/lib/types/categoriesType';
+import { CategoryType } from '@/lib/types/categoriesType';
 
 export const getCategories = async () => {
-  const response = await axiosInstance.get<CategoriesType>('/categories');
+  const response = await axiosInstance.get<CategoryType[]>('/categories');
 
   return response.data;
 };
diff --git a/src/app/_api/list/createList.ts b/src/app/_api/list/createList.ts
index 99d78ac3..28e0a8dc 100644
--- a/src/app/_api/list/createList.ts
+++ b/src/app/_api/list/createList.ts
@@ -1 +1,8 @@
-// 리스트 생성 api
+import axiosInstance from '@/lib/axios/axiosInstance';
+import { ListCreateType } from '@/lib/types/listType';
+
+export const createList = async (data: ListCreateType) => {
+  const response = await axiosInstance.post<ListCreateType>('/lists', data);
+
+  return response.data;
+};
diff --git a/src/app/_api/user/getUsers.ts b/src/app/_api/user/getUsers.ts
new file mode 100644
index 00000000..73b94d11
--- /dev/null
+++ b/src/app/_api/user/getUsers.ts
@@ -0,0 +1,8 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+import { UserProfilesType } from '@/lib/types/userProfileType';
+
+export const getUsers = async () => {
+  const response = await axiosInstance.get<UserProfilesType>('/users');
+
+  return response.data;
+};
diff --git a/src/app/create/_components/CreateItem.tsx b/src/app/create/_components/CreateItem.tsx
index 7cd378e6..7b1f3095 100644
--- a/src/app/create/_components/CreateItem.tsx
+++ b/src/app/create/_components/CreateItem.tsx
@@ -1,14 +1,15 @@
 import { useFormContext } from 'react-hook-form';
 
 import BackIcon from '/public/icons/back.svg';
-import Items from './Items';
+import Items from './item/Items';
 import * as styles from './CreateItem.css';
 
 interface CreateItemProps {
   onBackClick: () => void;
+  onSubmit: () => void;
 }
 
-export default function CreateItem({ onBackClick }: CreateItemProps) {
+export default function CreateItem({ onBackClick, onSubmit }: CreateItemProps) {
   const {
     formState: { isValid },
   } = useFormContext();
@@ -21,9 +22,7 @@ export default function CreateItem({ onBackClick }: CreateItemProps) {
         </button>
         <h1 className={styles.headerTitle}>리스트 생성</h1>
         <button
-          onClick={() => {
-            console.log('제출');
-          }}
+          onClick={onSubmit}
           className={isValid ? styles.headerNextButton : styles.headerNextButtonDisabled}
           disabled={!isValid ? true : false}
         >
diff --git a/src/app/create/_components/CreateList.css.ts b/src/app/create/_components/CreateList.css.ts
index 98ef3122..8415eb67 100644
--- a/src/app/create/_components/CreateList.css.ts
+++ b/src/app/create/_components/CreateList.css.ts
@@ -1,30 +1,4 @@
 import { style } from '@vanilla-extract/css';
-import * as GlobalStyles from '@/styles/globalStyles.css';
-
-GlobalStyles;
-
-export const header = style({
-  width: '100%',
-  height: '90px',
-  paddingLeft: '20px',
-  paddingRight: '20px',
-
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-
-  borderBottom: '1px solid rgba(0, 0, 0, 0.10)',
-});
-
-export const headerTitle = style({
-  fontSize: '2rem',
-});
-
-export const headerNextButton = style({
-  fontSize: '1.6rem',
-  color: '#8d8d8d',
-});
 
 export const body = style({
   width: '100vw',
@@ -35,317 +9,3 @@ export const body = style({
   justifyContent: 'space-between',
   rowGap: '50px',
 });
-
-export const title = style({
-  marginBottom: '16px',
-  fontSize: '1.6rem',
-  fontWeight: '600',
-});
-
-export const required = style({
-  color: '#ff0000',
-});
-
-export const content = style({
-  fontSize: '1.5rem',
-});
-
-export const error = style({
-  margin: '10px',
-
-  fontSize: '1.5rem',
-
-  color: 'red',
-});
-
-export const listTitleContainer = style({
-  position: 'relative',
-});
-
-export const titleInputBox = style({
-  width: '100%',
-  padding: '11px',
-
-  position: 'relative',
-
-  fontSize: '1.5rem',
-  border: '0px',
-  borderBottom: '1px solid rgba(0, 0, 0, 0.10)',
-  outline: 'none',
-});
-
-export const clearButton = style({
-  position: 'absolute',
-  top: '20px',
-  right: '8px',
-  transform: 'translateY(-50%)',
-  cursor: 'pointer',
-});
-
-export const listDescriptionContainer = style({
-  position: 'relative',
-});
-
-export const descriptionInputBox = style({
-  width: '100%',
-  padding: '12px',
-
-  fontSize: '1.5rem',
-
-  resize: 'none',
-  whiteSpace: 'pre-wrap',
-  // overflowY: 'hidden',
-
-  border: '1px solid rgba(0, 0, 0, 0.10)',
-  borderRadius: '8px',
-
-  outline: 'none',
-});
-
-export const dragIcon = style({
-  position: 'absolute',
-  top: '50%',
-  right: '5px',
-  cursor: 'pointer',
-});
-
-export const categoryContainer = style({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  columnGap: '12px',
-
-  overflow: 'auto',
-  whiteSpace: 'nowrap',
-  scrollbarWidth: 'none',
-  '::-webkit-scrollbar': {
-    width: '0',
-  },
-});
-
-export const categoryInputBox = style({
-  display: 'none',
-});
-
-export const categoryButton = style({
-  width: '',
-  height: '40px',
-  padding: '8px 12px',
-
-  fontSize: '1.6rem',
-  fontWeight: '600',
-
-  backgroundColor: 'transparent',
-
-  whiteSpace: 'nowrap',
-
-  border: '1px solid #DEDEDE',
-  borderRadius: '10px',
-});
-
-export const categoryButtonActive = style({
-  backgroundColor: '#EBF4FF',
-});
-
-export const labelContainer = style({
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-export const labelInputBox = style({
-  width: '100%',
-  padding: '10px',
-
-  fontSize: '1.5rem',
-
-  borderRadius: '10px',
-  border: '1px solid rgba(0, 0, 0, 0.1)',
-  outline: 'none',
-  cursor: 'pointer',
-});
-
-export const labels = style({
-  marginTop: '10px',
-
-  display: 'flex',
-  flexDirection: 'row',
-  columnGap: '5px',
-});
-
-export const label = style({
-  width: 'fit-content',
-  padding: '7px',
-  paddingRight: '20px',
-
-  position: 'relative',
-
-  color: '#333333',
-  backgroundColor: '#EBF4FF',
-
-  fontSize: '1.3rem',
-
-  borderRadius: '10px',
-  border: '1px solid rgba(0, 0, 0, 0.1)',
-  cursor: 'pointer',
-});
-
-export const labelDeleteButton = style({
-  position: 'absolute',
-  top: '10px',
-  right: '5px',
-
-  stroke: '#8E8E93',
-  strokeWidth: '1.5',
-
-  cursor: 'pointer',
-});
-
-export const colaboContainer = style({
-  position: 'relative',
-});
-
-export const colaboInputBox = style({
-  width: '100%',
-  padding: '10px',
-  paddingLeft: '30px',
-
-  fontSize: '1.5rem',
-
-  borderRadius: '10px',
-  border: '1px solid rgba(0, 0, 0, 0.1)',
-  outline: 'none',
-  cursor: 'pointer',
-});
-
-export const colaboDropdown = style({
-  height: '152px',
-  marginTop: '5px',
-  marginBottom: '10px',
-  padding: '11px',
-
-  display: 'flex',
-  flexDirection: 'column',
-  rowGap: '5px',
-
-  borderRadius: '10px',
-  border: '1px solid rgba(0, 0, 0, 0.1)',
-
-  overflowY: 'auto',
-});
-
-export const colaboProfileContainer = style({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  columnGap: '16px',
-
-  fontSize: '1.5rem',
-});
-
-export const colaboList = style({
-  padding: '4.5px',
-
-  display: 'flex',
-  flexDirection: 'column',
-  rowGap: '5px',
-});
-
-export const colaboItem = style({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-});
-
-export const colaboPlaceholder = style({
-  fontSize: '1.5rem',
-  color: '#61646B',
-});
-
-export const colaboProfileImage = style({
-  borderRadius: '50%',
-});
-
-export const searchIcon = style({
-  width: '15.7px',
-  height: '15.7px',
-
-  position: 'absolute',
-  top: '20px',
-  left: '8px',
-  transform: 'translateY(-50%)',
-});
-
-export const backgroundContainer = style({
-  display: 'flex',
-  flexDirection: 'row',
-  columnGap: '12px',
-});
-
-export const colorCircle = style({
-  width: '50px',
-  height: '50px',
-
-  appearance: 'none',
-  MozAppearance: 'none',
-  WebkitAppearance: 'none',
-  outline: 'none',
-
-  accentColor: 'red',
-  backgroundColor: '#ffffff',
-
-  border: '3px #ffffff solid',
-  WebkitBorderBefore: '3px #ffffff solid',
-  borderRadius: '50%',
-  WebkitBorderRadius: '50%',
-  MozBorderRadius: '50%',
-  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-
-  cursor: 'pointer',
-});
-
-export const checkedColor = style({
-  borderColor: '#0047FF',
-});
-
-export const white = style({
-  backgroundColor: '#FFFFFF',
-});
-export const yellow = style({
-  backgroundColor: '#FFF6A5',
-});
-export const orange = style({
-  backgroundColor: '#FFDCB2',
-});
-export const green = style({
-  backgroundColor: '#D0FF89',
-});
-export const blue = style({
-  backgroundColor: '#B7EEFF',
-});
-export const purple = style({
-  backgroundColor: '#E6C6FF',
-});
-
-export const publicContainer = style({
-  marginBottom: '8px',
-
-  display: 'flex',
-  flexDirection: 'row',
-  columnGap: '16px',
-
-  accentColor: 'black',
-});
-
-export const publicMessage = style({
-  marginLeft: '5px',
-
-  fontSize: '1.4rem',
-  color: '#909090',
-});
-
-export const checkedIcon = style({
-  marginLeft: '5px',
-  color: '#008000',
-});
diff --git a/src/app/create/_components/CreateList.tsx b/src/app/create/_components/CreateList.tsx
index 8e80d36c..2366d99c 100644
--- a/src/app/create/_components/CreateList.tsx
+++ b/src/app/create/_components/CreateList.tsx
@@ -1,425 +1,155 @@
 'use client';
 
-import React, { useEffect, useRef, useState } from 'react';
-import Link from 'next/link';
+import { useEffect, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
+import { useSearchParams } from 'next/navigation';
 
-import '@/styles/globalStyles.css';
-import * as styles from './CreateList.css';
-
-import CloseButton from '/public/icons/close_button.svg';
-import EraseButton from '/public/icons/x_circle_fill.svg';
-import SearchIcon from '/public/icons/search.svg';
-import DefaultProfile from '/public/icons/default_profile.svg';
+import Header from './list/Header';
+import Section from './list/Section';
+import SimpleInput from './list/SimpleInput';
+import ButtonSelector from './list/ButtonSelector';
+import LabelInput from './list/LabelInput';
+import MemberSelector from './list/MemberSelector';
+import ColorSelector from './list/ColorSelector';
+import RadioInput from './list/RadioInput';
 
-import mockdata from '../CreateListMock';
-import Image from 'next/image';
+import * as styles from './CreateList.css';
 
-interface UserProfileType {
-  id: number;
-  profileImageUrl: string;
-  nickname: string;
+import { listPlaceholder } from '@/lib/constants/placeholder';
+import { BACKGROUND_COLOR } from '@/styles/Color';
+import { CategoryType } from '@/lib/types/categoriesType';
+import { UserProfileType } from '@/lib/types/userProfileType';
+import { getCategories } from '@/app/_api/category/getCategories';
+import { getUsers } from '@/app/_api/user/getUsers';
+import { listDescriptionRules, listLabelRules, listTitleRules } from '@/lib/constants/formInputValidationRules';
+import { listDescription } from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.css';
+
+interface CreateListProps {
+  onNextClick: () => void;
 }
 
-function CreateList({ onNextClick }: { onNextClick: () => void }) {
-  const { register, getValues, setValue, setError, control, formState } = useFormContext();
-  const { errors, isValid } = formState;
-
-  const category = useWatch({ control, name: 'category' });
-  const labels = useWatch({ control, name: 'labels' });
-  const colaboIDs = useWatch({ control, name: 'collaboratorIds' });
-  const backgroundColor = useWatch({ control, name: 'backgroundColor' });
-  const isPublic = useWatch({ control, name: 'isPublic' });
-
-  const [labelInput, setLabelInput] = useState('');
-  const [colaboInput, setColaboInput] = useState('');
-  const [colaboList, setColabolist] = useState<UserProfileType[]>([]);
-  const [isDropDownOpen, setIsDropDownOpen] = useState(false);
-
-  const colaboInputRef = useRef<HTMLInputElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
+/**
+ * CreateList 컴포넌트:
+ * 리스트 생성 과정 중
+ * 리스트에 대한 정보를 입력하는 페이지
+ *
+ * @param props.onNextClick - 헤더의 '다음'버튼을 클릭했을때 동작시킬 함수
+ */
+function CreateList({ onNextClick }: CreateListProps) {
+  const [categories, setCategories] = useState<CategoryType[]>([]);
+  const [users, setUsers] = useState<UserProfileType[]>([]);
+
+  const { setValue, control, formState } = useFormContext();
+  const { isValid } = formState;
+  const collaboIDs = useWatch({ control, name: 'collaboratorIds' });
+
+  const searchParams = useSearchParams();
+  const isTemplateCreation = searchParams.has('title') && searchParams.has('category');
+
+  const fetchUsers = async () => {
+    try {
+      const data = await getUsers();
+      setUsers(data.userInfos);
+    } catch (error) {}
+  };
 
   useEffect(() => {
-    const closeDropdown = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        colaboInputRef.current &&
-        !dropdownRef.current.contains(event.target as Node) &&
-        !colaboInputRef.current.contains(event.target as Node)
-      ) {
-        setIsDropDownOpen(false);
-      }
+    const fetchCategories = async () => {
+      try {
+        const data = await getCategories();
+        const filteredCategories = data.filter((category: CategoryType) => category.codeValue !== '0');
+        setCategories(filteredCategories);
+      } catch (error) {}
     };
-    document.addEventListener('click', closeDropdown);
+    fetchCategories();
 
-    return () => {
-      document.removeEventListener('click', closeDropdown);
+    const handleQueryParams = () => {
+      if (isTemplateCreation) {
+        setValue('title', searchParams.get('title'));
+        setValue('category', searchParams.get('category'));
+      }
     };
+    handleQueryParams();
   }, []);
 
   return (
     <div>
       {/* 헤더 */}
-      <div className={styles.header}>
-        <CloseButton width={'24'} height={'24'} />
-        <h1 className={styles.headerTitle}>리스트 생성</h1>
-        <button className={styles.headerNextButton} onClick={onNextClick}>
-          다음
-        </button>
-      </div>
+      <Header isNextActive={isValid} onClickNext={onNextClick} />
 
       <div className={styles.body}>
-        {/* 제목 */}
-        <div>
-          <div className={styles.title}>
-            타이틀 <span className={styles.required}>*</span>
-          </div>
-          <div className={styles.content}>
-            <div className={styles.listTitleContainer}>
-              <input
-                className={styles.titleInputBox}
-                type="text"
-                placeholder="리스트 제목을 적어주세요."
-                {...register('title', {
-                  required: '제목을 입력해주세요.',
-                  maxLength: { value: 30, message: '리스트 제목은 최대 30자까지 입력할 수 있어요.' },
-                })}
-              />
-              <EraseButton
-                className={styles.clearButton}
-                onClick={() => {
-                  setValue('title', '');
-                }}
-              />
-              {errors.title && <div className={styles.error}>{errors.title.message?.toString()}</div>}
-            </div>
-          </div>
-        </div>
-
-        {/* 한 줄 소개 */}
-        <div>
-          <div className={styles.title}>소개</div>
-          <div className={styles.content}>
-            <div className={styles.listDescriptionContainer}>
-              <textarea
-                className={styles.descriptionInputBox}
-                placeholder="리스트에 대한 간단한 소개를 작성해주세요."
-                {...register('description', {
-                  maxLength: { value: 200, message: '리스트 소개는 최대 200자까지 입력할 수 있어요.' },
-                })}
-              />
-              {errors.description && <div className={styles.error}>{errors.description.message?.toString()}</div>}
-            </div>
-          </div>
-        </div>
+        {/* 리스트 제목 */}
+        <Section title="타이틀" isRequired={true}>
+          <SimpleInput type="short" name="title" placeholder={listPlaceholder.title} rules={listTitleRules} />
+        </Section>
+
+        {/* 리스트 소개 */}
+        <Section title="소개">
+          <SimpleInput
+            type="long"
+            name="description"
+            placeholder={listPlaceholder.description}
+            rules={listDescriptionRules}
+          ></SimpleInput>
+        </Section>
 
         {/* 카테고리 */}
-        <div>
-          <div className={styles.title}>
-            카테고리 <span className={styles.required}>*</span>
-          </div>
-          <div className={styles.content}>
-            <div className={styles.categoryContainer}>
-              <input className={styles.categoryInputBox} />
-              <button
-                className={`${styles.categoryButton} ${category === '문화' ? styles.categoryButtonActive : ''}`}
-                onClick={() => {
-                  setValue('category', '문화');
-                }}
-              >
-                문화
-              </button>
-              <button
-                className={`${styles.categoryButton} ${category === '일상/생활' ? styles.categoryButtonActive : ''}`}
-                onClick={() => {
-                  setValue('category', '일상/생활');
-                }}
-              >
-                일상/생활
-              </button>
-              <button
-                className={`${styles.categoryButton} ${category === '장소' ? styles.categoryButtonActive : ''}`}
-                onClick={() => setValue('category', '장소')}
-              >
-                장소
-              </button>
-              <button
-                className={`${styles.categoryButton} ${category === '음악' ? styles.categoryButtonActive : ''}`}
-                onClick={() => setValue('category', '음악')}
-              >
-                음악
-              </button>
-              <button
-                className={`${styles.categoryButton} ${category === '영화/드라마' ? styles.categoryButtonActive : ''}`}
-                onClick={() => setValue('category', '영화/드라마')}
-              >
-                영화/드라마
-              </button>
-              <button
-                className={`${styles.categoryButton} ${category === '도서' ? styles.categoryButtonActive : ''}`}
-                onClick={() => setValue('category', '도서')}
-              >
-                도서
-              </button>
-              <button
-                className={`${styles.categoryButton} ${category === '동식물' ? styles.categoryButtonActive : ''}`}
-                onClick={() => setValue('category', '동식물')}
-              >
-                동식물
-              </button>
-              <button
-                className={`${styles.categoryButton} ${category === '기타' ? styles.categoryButtonActive : ''}`}
-                onClick={() => setValue('category', '기타')}
-              >
-                기타
-              </button>
-            </div>
-          </div>
-        </div>
+        <Section title="카테고리" isRequired={true}>
+          <ButtonSelector
+            list={categories}
+            onClick={(item: CategoryType) => {
+              setValue('category', item.nameValue);
+            }}
+            defaultValue={searchParams.get('category')}
+          />
+        </Section>
 
         {/* 라벨 */}
-        <div>
-          <div className={styles.title}>라벨</div>
-          <div className={styles.content}>
-            <div className="labelContainer">
-              <input
-                className={styles.labelInputBox}
-                type="text"
-                value={labelInput}
-                placeholder="라벨 입력 후 Enter를 눌러주세요. (최대 3개)"
-                onKeyDown={(e) => {
-                  if (e.nativeEvent.isComposing) {
-                    return;
-                  }
-                  if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (labelInput.length >= 10) {
-                      setError('labels', {
-                        type: 'manual',
-                        message: '라벨은 최대 10자까지 입력할 수 있어요.',
-                      });
-                      return;
-                    }
-                    if (labels.includes(labelInput)) {
-                      setError('labels', {
-                        type: 'manual',
-                        message: '같은 라벨을 2개 이상 등록할 수 없어요.',
-                      });
-                      return;
-                    }
-                    if (labels.length >= 3) {
-                      setError('labels', {
-                        type: 'manual',
-                        message: '라벨은 최대 3개까지 입력할 수 있어요.',
-                      });
-                      return;
-                    }
-                    setValue('labels', [...labels, labelInput]);
-                    setLabelInput('');
-                  }
-                }}
-                onChange={(e) => {
-                  setError('labels', {});
-                  setLabelInput(e.target.value);
-                }}
-              />
-              {errors.labels && <div className={styles.error}>{errors.labels.message?.toString()}</div>}
-              <div className={styles.labels}>
-                {labels.map((label: string) => (
-                  <div key={label} className={styles.label}>
-                    {label}
-                    <CloseButton
-                      width={'10'}
-                      height={'10'}
-                      fill={'#8E8E93'}
-                      className={styles.labelDeleteButton}
-                      onClick={() => {
-                        setValue(
-                          'labels',
-                          labels.filter((l: string) => l !== label)
-                        );
-                        setError('labels', {});
-                      }}
-                    />
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
+        <Section title="라벨">
+          <LabelInput name="labels" placeholder={listPlaceholder.label} rules={listLabelRules} />
+        </Section>
 
         {/* 콜라보레이터 */}
-        <div>
-          <div className={styles.title}>콜라보레이터 추가</div>
-          <div className={styles.content}>
-            <div className={styles.colaboContainer}>
-              <input
-                ref={colaboInputRef}
-                className={styles.colaboInputBox}
-                type={'text'}
-                placeholder="닉네임 또는 이메일을 입력해주세요."
-                onClick={() => {
-                  if (!isDropDownOpen) {
-                    setIsDropDownOpen(true);
-                  }
-                }}
-                onChange={(e) => {
-                  setColaboInput(e.target.value);
-                }}
-              />
-              <SearchIcon className={styles.searchIcon} />
-              {isDropDownOpen && (
-                <div className={styles.colaboDropdown} ref={dropdownRef}>
-                  {mockdata
-                    .filter((user) => user.nickname.toLocaleLowerCase().includes(colaboInput.toLocaleLowerCase()))
-                    .map((user) => (
-                      <div
-                        key={user.id}
-                        className={styles.colaboProfileContainer}
-                        onClick={(e) => {
-                          if (!colaboList.find((colaboUser: UserProfileType) => colaboUser.id === user.id)) {
-                            setColabolist([...colaboList, user]);
-                            setValue('collaboratorIds', [...colaboIDs, user.id]);
-                          }
-                        }}
-                      >
-                        {user.profileImageUrl ? (
-                          <Image
-                            className={styles.colaboProfileImage}
-                            src={user.profileImageUrl}
-                            width={'30'}
-                            height={'30'}
-                            alt={'프로필 이미지'}
-                          ></Image>
-                        ) : (
-                          <DefaultProfile width={'30'} height={'30'} />
-                        )}
-                        {user.nickname}
-                        {colaboList.find((colaboUser: UserProfileType) => colaboUser.id === user.id) && (
-                          <span className={styles.checkedIcon}>✓</span>
-                        )}
-                      </div>
-                    ))}
-                </div>
-              )}
-              <div className={styles.colaboList}>
-                {colaboList.map((colaboUser) => (
-                  <div key={colaboUser.id} className={styles.colaboItem}>
-                    <div className={styles.colaboProfileContainer}>
-                      {colaboUser.profileImageUrl ? (
-                        <Image
-                          className={styles.colaboProfileImage}
-                          src={colaboUser.profileImageUrl}
-                          width={'30'}
-                          height={'30'}
-                          alt={'프로필 이미지'}
-                        ></Image>
-                      ) : (
-                        <DefaultProfile width={'30'} height={'30'} />
-                      )}{' '}
-                      {colaboUser.nickname}
-                    </div>
-                    <EraseButton
-                      onClick={() => {
-                        setColabolist(colaboList.filter((user) => user.id !== colaboUser.id));
-                      }}
-                    />
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
+        <Section title="콜라보레이터 추가">
+          <MemberSelector
+            placeholder={listPlaceholder.collaborator}
+            members={users}
+            fetchData={fetchUsers}
+            onClickAdd={(userId: number) => {
+              setValue('collaboratorIds', [...collaboIDs, userId]);
+            }}
+            onClickDelete={(userId: number) => {
+              setValue(
+                'collaboratorIds',
+                collaboIDs.filter((collaboId: number) => collaboId !== userId)
+              );
+            }}
+          />
+        </Section>
 
         {/* 배경 색상 */}
-        <div>
-          <div className={styles.title}>
-            배경 색상 <span className={styles.required}>*</span>
-          </div>
-          <div className={styles.content}>
-            <div className={styles.backgroundContainer}>
-              <input
-                className={`${styles.colorCircle} ${styles.white} ${backgroundColor === '#FFFFFF' && styles.checkedColor}`}
-                type="checkbox"
-                checked={backgroundColor === '#FFFFFF'}
-                readOnly
-                onClick={() => setValue('backgroundColor', '#FFFFFF')}
-              />
-              <input
-                className={`${styles.colorCircle} ${styles.yellow} ${backgroundColor === '#FFF6A5' && styles.checkedColor}`}
-                type="checkbox"
-                checked={backgroundColor === '#FFF6A5'}
-                readOnly
-                onClick={() => setValue('backgroundColor', '#FFF6A5')}
-              />
-              <input
-                className={`${styles.colorCircle} ${styles.orange} ${backgroundColor === '#FFDCB2' && styles.checkedColor}`}
-                type="checkbox"
-                checked={backgroundColor === '#FFDCB2'}
-                readOnly
-                onClick={() => setValue('backgroundColor', '#FFDCB2')}
-              />
-              <input
-                className={`${styles.colorCircle} ${styles.green} ${backgroundColor === '#D0FF89' && styles.checkedColor}`}
-                type="checkbox"
-                checked={backgroundColor === '#D0FF89'}
-                readOnly
-                onClick={() => setValue('backgroundColor', '#D0FF89')}
-              />
-              <input
-                className={`${styles.colorCircle} ${styles.blue} ${backgroundColor === '#B7EEFF' && styles.checkedColor}`}
-                type="checkbox"
-                checked={backgroundColor === '#B7EEFF'}
-                readOnly
-                onClick={() => setValue('backgroundColor', '#B7EEFF')}
-              />
-              <input
-                className={`${styles.colorCircle} ${styles.purple} ${backgroundColor === '#E6C6FF' && styles.checkedColor}`}
-                type="checkbox"
-                checked={backgroundColor === '#E6C6FF'}
-                readOnly
-                onClick={() => setValue('backgroundColor', '#E6C6FF')}
-              />
-            </div>
-          </div>
-        </div>
+        <Section title="배경 색상" isRequired={true}>
+          <ColorSelector
+            defaultColor={BACKGROUND_COLOR.WHITE}
+            colors={Object.values(BACKGROUND_COLOR)}
+            onClick={(color: string) => {
+              setValue('backgroundColor', color);
+            }}
+          />
+        </Section>
 
         {/* 공개 설정 */}
-        <div>
-          <div className={styles.title}>
-            공개 설정 <span className={styles.required}>*</span>
-          </div>
-          <div className={styles.content}>
-            <div className={styles.publicContainer}>
-              <label>
-                <input
-                  type="radio"
-                  checked={isPublic}
-                  readOnly
-                  onClick={() => {
-                    setValue('isPublic', true);
-                  }}
-                />
-                공개
-              </label>
-
-              <label>
-                <input
-                  type="radio"
-                  checked={!isPublic}
-                  readOnly
-                  onClick={() => {
-                    setValue('isPublic', false);
-                  }}
-                />
-                비공개
-              </label>
-            </div>
-            <div className={styles.publicMessage}>
-              {isPublic ? '모든 사람이 이 리스트를 볼 수 있어요.' : '이 리스트는 나만 볼 수 있어요.'}
-            </div>
-          </div>
-        </div>
+        <Section title="공개 설정" isRequired={true}>
+          <RadioInput
+            messages={{
+              trueMessage: '모든 사람이 이 리스트를 볼 수 있어요.',
+              falseMessage: '이 리스트는 나만 볼 수 있어요.',
+            }}
+            onClick={(b: boolean) => {
+              setValue('isPublic', b);
+            }}
+          />
+        </Section>
       </div>
     </div>
   );
diff --git a/src/app/create/_components/AddItemButton.css.ts b/src/app/create/_components/item/AddItemButton.css.ts
similarity index 100%
rename from src/app/create/_components/AddItemButton.css.ts
rename to src/app/create/_components/item/AddItemButton.css.ts
diff --git a/src/app/create/_components/AddItemButton.tsx b/src/app/create/_components/item/AddItemButton.tsx
similarity index 100%
rename from src/app/create/_components/AddItemButton.tsx
rename to src/app/create/_components/item/AddItemButton.tsx
diff --git a/src/app/create/_components/ItemLayout.css.ts b/src/app/create/_components/item/ItemLayout.css.ts
similarity index 100%
rename from src/app/create/_components/ItemLayout.css.ts
rename to src/app/create/_components/item/ItemLayout.css.ts
diff --git a/src/app/create/_components/ItemLayout.tsx b/src/app/create/_components/item/ItemLayout.tsx
similarity index 100%
rename from src/app/create/_components/ItemLayout.tsx
rename to src/app/create/_components/item/ItemLayout.tsx
diff --git a/src/app/create/_components/Items.css.ts b/src/app/create/_components/item/Items.css.ts
similarity index 100%
rename from src/app/create/_components/Items.css.ts
rename to src/app/create/_components/item/Items.css.ts
diff --git a/src/app/create/_components/Items.tsx b/src/app/create/_components/item/Items.tsx
similarity index 98%
rename from src/app/create/_components/Items.tsx
rename to src/app/create/_components/item/Items.tsx
index 4792155a..2d50ead3 100644
--- a/src/app/create/_components/Items.tsx
+++ b/src/app/create/_components/item/Items.tsx
@@ -5,7 +5,7 @@ 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 { FormErrors } from '../../page';
 import ItemLayout from './ItemLayout';
 import LinkModal from './LinkModal';
 import LinkPreview from './LinkPreview';
@@ -45,7 +45,7 @@ export default function Items() {
     rules: { minLength: 3, maxLength: 10 },
   });
 
-  const [current, setCurrent] = useState<string | null>(null);
+  const [current, setCurrent] = useState<string>('');
 
   const watchItems = useWatch({ control, name: 'items' });
 
diff --git a/src/app/create/_components/LinkModal.tsx b/src/app/create/_components/item/LinkModal.tsx
similarity index 100%
rename from src/app/create/_components/LinkModal.tsx
rename to src/app/create/_components/item/LinkModal.tsx
diff --git a/src/app/create/_components/LinkPreview.css.ts b/src/app/create/_components/item/LinkPreview.css.ts
similarity index 100%
rename from src/app/create/_components/LinkPreview.css.ts
rename to src/app/create/_components/item/LinkPreview.css.ts
diff --git a/src/app/create/_components/LinkPreview.tsx b/src/app/create/_components/item/LinkPreview.tsx
similarity index 100%
rename from src/app/create/_components/LinkPreview.tsx
rename to src/app/create/_components/item/LinkPreview.tsx
diff --git a/src/app/create/_components/list/ButtonSelector.css.ts b/src/app/create/_components/list/ButtonSelector.css.ts
new file mode 100644
index 00000000..f3e5fada
--- /dev/null
+++ b/src/app/create/_components/list/ButtonSelector.css.ts
@@ -0,0 +1,34 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  columnGap: '12px',
+
+  overflow: 'auto',
+  whiteSpace: 'nowrap',
+  scrollbarWidth: 'none',
+  '::-webkit-scrollbar': {
+    width: '0',
+  },
+});
+
+export const button = style({
+  height: '40px',
+  padding: '8px 12px',
+
+  fontSize: '1.6rem',
+  fontWeight: '600',
+
+  backgroundColor: 'transparent',
+
+  whiteSpace: 'nowrap',
+
+  border: '1px solid #DEDEDE',
+  borderRadius: '10px',
+});
+
+export const buttonActive = style({
+  backgroundColor: '#EBF4FF',
+});
diff --git a/src/app/create/_components/list/ButtonSelector.tsx b/src/app/create/_components/list/ButtonSelector.tsx
new file mode 100644
index 00000000..4d119306
--- /dev/null
+++ b/src/app/create/_components/list/ButtonSelector.tsx
@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import * as styles from './ButtonSelector.css';
+import { CategoryType } from '@/lib/types/categoriesType';
+
+interface ButtonSelectorProps {
+  list: CategoryType[];
+  onClick: (item: CategoryType) => void;
+  defaultValue?: string | null;
+}
+
+/**
+ * ButtonSelector 컴포넌트:
+ * 사용자가 좌우스크롤로 이동하며 클릭을 통해
+ * 카테고리를 선택할 수 있는 컴포넌트
+ *
+ * @param list - 버튼으로 보여줄 목록
+ * @param onClick - 버튼을 클릭했을때 동작시킬 함수
+ * @param defaultValue - 기본으로 선택되어있는 요소
+ */
+function ButtonSelector({ list, onClick, defaultValue }: ButtonSelectorProps) {
+  const [selectedButton, setSelectedButton] = useState<string>(defaultValue || '');
+
+  return (
+    <div className={styles.container}>
+      {list.map((item) => (
+        <button
+          key={item.codeValue}
+          className={`${styles.button} ${item.nameValue === selectedButton ? styles.buttonActive : ''}`}
+          onClick={() => {
+            onClick(item);
+            setSelectedButton(item.nameValue);
+          }}
+        >
+          {item.korNameValue}
+        </button>
+      ))}
+    </div>
+  );
+}
+export default ButtonSelector;
diff --git a/src/app/create/_components/list/ColorSelector.css.ts b/src/app/create/_components/list/ColorSelector.css.ts
new file mode 100644
index 00000000..60fa3ed1
--- /dev/null
+++ b/src/app/create/_components/list/ColorSelector.css.ts
@@ -0,0 +1,33 @@
+import { style } from '@vanilla-extract/css';
+
+export const backgroundContainer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  columnGap: '12px',
+});
+
+export const colorCircle = style({
+  width: '50px',
+  height: '50px',
+
+  appearance: 'none',
+  MozAppearance: 'none',
+  WebkitAppearance: 'none',
+  outline: 'none',
+
+  accentColor: 'red',
+  backgroundColor: '#ffffff',
+
+  border: '3px #ffffff solid',
+  WebkitBorderBefore: '3px #ffffff solid',
+  borderRadius: '50%',
+  WebkitBorderRadius: '50%',
+  MozBorderRadius: '50%',
+  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+
+  cursor: 'pointer',
+});
+
+export const selectedColor = style({
+  borderColor: '#0047FF',
+});
diff --git a/src/app/create/_components/list/ColorSelector.tsx b/src/app/create/_components/list/ColorSelector.tsx
new file mode 100644
index 00000000..7b52c3b6
--- /dev/null
+++ b/src/app/create/_components/list/ColorSelector.tsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import * as styles from './ColorSelector.css';
+
+interface ColorSelectorProps {
+  defaultColor: string;
+  colors: string[];
+  onClick: (color: string) => void;
+}
+
+/**
+ * ColorSelector 컴포넌트:
+ * 동그란 모양의 컬러팔레트로 구성된
+ * 사용자의 클릭으로 색상을 선택할 수 있는 컴포넌트
+ *
+ * @param defaultColor - 기본 선택되는 색상 (#포함 6자리 hex코드 ("#ffffff"))
+ * @param colors - #포함 6자리 hex코드 리스트 (["#ffffff",])
+ * @param onClick - 색상 원을 클릭했을때 동작시킬 함수
+ */
+function ColorSelector({ defaultColor, colors, onClick }: ColorSelectorProps) {
+  const [selectedColor, setSelectedColor] = useState(defaultColor);
+
+  return (
+    <div className={styles.backgroundContainer}>
+      {colors.map((color) => (
+        <button
+          key={color}
+          className={`${styles.colorCircle} ${selectedColor === color && styles.selectedColor}`}
+          style={{ backgroundColor: color }}
+          onClick={() => {
+            onClick(color);
+            setSelectedColor(color);
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default ColorSelector;
diff --git a/src/app/create/CreateListMock.ts b/src/app/create/_components/list/CreateListMock.ts
similarity index 89%
rename from src/app/create/CreateListMock.ts
rename to src/app/create/_components/list/CreateListMock.ts
index a1a5f0dd..3cf25dce 100644
--- a/src/app/create/CreateListMock.ts
+++ b/src/app/create/_components/list/CreateListMock.ts
@@ -8,54 +8,54 @@ const generateMockData = (count: number): UserProfileType[] => {
   const mockData: UserProfileType[] = [];
 
   mockData.push({
-    id: 101,
+    id: 1,
     profileImageUrl: `/images/mock_profile.png`,
     nickname: '안유진',
   });
 
   mockData.push({
-    id: 102,
+    id: 2,
     profileImageUrl: `/images/mock_profile.png`,
     nickname: '강나현',
   });
 
   mockData.push({
-    id: 103,
+    id: 3,
     profileImageUrl: `/images/mock_profile.png`,
     nickname: '민서영',
   });
 
   mockData.push({
-    id: 104,
+    id: 4,
     profileImageUrl: `/images/mock_profile.png`,
     nickname: '박소현',
   });
 
   mockData.push({
-    id: 105,
+    id: 5,
     profileImageUrl: `/images/mock_profile.png`,
     nickname: '강현지',
   });
 
   mockData.push({
-    id: 106,
+    id: 6,
     profileImageUrl: `/images/mock_profile.png`,
     nickname: '신은서',
   });
 
   mockData.push({
-    id: 107,
+    id: 7,
     profileImageUrl: `/images/mock_profile.png`,
     nickname: '동호',
   });
 
   mockData.push({
-    id: 108,
+    id: 8,
     profileImageUrl: `/images/mock_profile.png`,
     nickname: 'JJUNGSU',
   });
 
-  for (let i = 1; i <= count; i++) {
+  for (let i = 100; i <= count; i++) {
     const user: UserProfileType = {
       id: i,
       profileImageUrl: '',
diff --git a/src/app/create/_components/list/Header.css.ts b/src/app/create/_components/list/Header.css.ts
new file mode 100644
index 00000000..278cf8ee
--- /dev/null
+++ b/src/app/create/_components/list/Header.css.ts
@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+
+export const header = style({
+  width: '100%',
+  height: '90px',
+  paddingLeft: '20px',
+  paddingRight: '20px',
+
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+
+  borderBottom: '1px solid rgba(0, 0, 0, 0.10)',
+});
+
+export const headerTitle = style({
+  fontSize: '2rem',
+});
+
+export const headerNextButton = style({
+  fontSize: '1.6rem',
+  color: '#AFB1B6',
+  cursor: 'default',
+});
+
+export const headerNextButtonActive = style({
+  fontSize: '1.6rem',
+});
diff --git a/src/app/create/_components/list/Header.tsx b/src/app/create/_components/list/Header.tsx
new file mode 100644
index 00000000..4df31324
--- /dev/null
+++ b/src/app/create/_components/list/Header.tsx
@@ -0,0 +1,21 @@
+import CloseButton from '/public/icons/close_button.svg';
+import * as styles from './Header.css';
+
+interface HeaderProps {
+  isNextActive: boolean;
+  onClickNext: () => void;
+}
+
+function Header({ isNextActive, onClickNext }: HeaderProps) {
+  return (
+    <div className={styles.header}>
+      <CloseButton width={'24'} height={'24'} />
+      <h1 className={styles.headerTitle}>리스트 생성</h1>
+      <button className={isNextActive ? styles.headerNextButtonActive : styles.headerNextButton} onClick={onClickNext}>
+        다음
+      </button>
+    </div>
+  );
+}
+
+export default Header;
diff --git a/src/app/create/_components/list/LabelInput.css.ts b/src/app/create/_components/list/LabelInput.css.ts
new file mode 100644
index 00000000..a43d882d
--- /dev/null
+++ b/src/app/create/_components/list/LabelInput.css.ts
@@ -0,0 +1,57 @@
+import { style } from '@vanilla-extract/css';
+
+export const inputBox = style({
+  width: '100%',
+  padding: '10px',
+
+  fontSize: '1.5rem',
+
+  borderRadius: '10px',
+  border: '1px solid rgba(0, 0, 0, 0.1)',
+  outline: 'none',
+  cursor: 'pointer',
+});
+
+export const labels = style({
+  marginTop: '10px',
+
+  display: 'flex',
+  flexDirection: 'row',
+  columnGap: '5px',
+});
+
+export const label = style({
+  width: 'fit-content',
+  padding: '7px',
+  paddingRight: '20px',
+
+  position: 'relative',
+
+  color: '#333333',
+  backgroundColor: '#EBF4FF',
+
+  fontSize: '1.3rem',
+
+  borderRadius: '10px',
+  border: '1px solid rgba(0, 0, 0, 0.1)',
+  cursor: 'pointer',
+});
+
+export const deleteButton = style({
+  position: 'absolute',
+  top: '10px',
+  right: '5px',
+
+  stroke: '#8E8E93',
+  strokeWidth: '1.5',
+
+  cursor: 'pointer',
+});
+
+export const error = style({
+  margin: '10px',
+
+  fontSize: '1.5rem',
+
+  color: 'red',
+});
diff --git a/src/app/create/_components/list/LabelInput.tsx b/src/app/create/_components/list/LabelInput.tsx
new file mode 100644
index 00000000..1925e50c
--- /dev/null
+++ b/src/app/create/_components/list/LabelInput.tsx
@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+import CloseButton from '/public/icons/close_button.svg';
+import * as styles from './LabelInput.css';
+
+interface LabelInputProps {
+  name: string;
+  placeholder: string;
+  rules: {
+    maxNumRule?: { num: number; errorMessage: string };
+    maxLengthRule?: { length: number; errorMessage: string };
+    uniqueRule?: { errorMessage: string };
+  };
+}
+
+/**
+ * LabelInput 컴포넌트:
+ * 사용자의 엔터 입력을 통해 직접 라벨을 만들고
+ * 만든 라벨들을 확인하고
+ * 삭제할 수 있는 컴포넌트
+ *
+ * @param name 라벨의 리액트훅폼 프로퍼티명
+ * @param placeholder 라벨입력 input의 placeholder
+ * @param rules 라벨 개수, 길이, 고유성 규칙과 그 에러메시지
+ */
+function LabelInput({ name, placeholder, rules }: LabelInputProps) {
+  const { setValue, setError, formState, control } = useFormContext();
+  const { errors } = formState;
+  const labels = useWatch({ control, name: name });
+
+  const [labelInput, setLabelInput] = useState('');
+
+  const handleEnterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.nativeEvent.isComposing) {
+      return;
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (rules.maxLengthRule && labelInput.length >= rules.maxLengthRule.length) {
+        setError(name, { message: rules.maxLengthRule.errorMessage });
+        return;
+      }
+      if (rules.uniqueRule && labels.includes(labelInput)) {
+        setError(name, { message: rules.uniqueRule.errorMessage });
+
+        return;
+      }
+      if (rules.maxNumRule && labels.length >= rules.maxNumRule.num) {
+        setError(name, { message: rules.maxNumRule.errorMessage });
+
+        return;
+      }
+      setValue(name, [...labels, labelInput]);
+      setLabelInput('');
+    }
+  };
+
+  return (
+    <div>
+      {/* 라벨 입력받는 input box */}
+      <input
+        className={styles.inputBox}
+        type="text"
+        value={labelInput}
+        placeholder={placeholder}
+        onKeyDown={handleEnterKeyDown}
+        onChange={(e) => {
+          setError(name, { message: '' });
+          setLabelInput(e.target.value);
+        }}
+      />
+
+      {/* 에러메시지 */}
+      {errors.labels && <div className={styles.error}>{errors.labels.message?.toString()}</div>}
+
+      {/* 선택된 라벨들 표시 */}
+      <div className={styles.labels}>
+        {labels.map((label: string) => (
+          <div key={label} className={styles.label}>
+            {label}
+            <CloseButton
+              width={'10'}
+              height={'10'}
+              fill={'#8E8E93'}
+              className={styles.deleteButton}
+              onClick={() => {
+                setValue(
+                  name,
+                  labels.filter((l: string) => l !== label)
+                );
+                setError(name, {});
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default LabelInput;
diff --git a/src/app/create/_components/list/MemberSelector.css.ts b/src/app/create/_components/list/MemberSelector.css.ts
new file mode 100644
index 00000000..e9dcb571
--- /dev/null
+++ b/src/app/create/_components/list/MemberSelector.css.ts
@@ -0,0 +1,83 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  position: 'relative',
+});
+
+export const inputBox = style({
+  width: '100%',
+  padding: '10px',
+  paddingLeft: '30px',
+
+  fontSize: '1.5rem',
+
+  borderRadius: '10px',
+  border: '1px solid rgba(0, 0, 0, 0.1)',
+  outline: 'none',
+  cursor: 'pointer',
+});
+
+export const dropdown = style({
+  height: '152px',
+  marginTop: '5px',
+  marginBottom: '10px',
+  padding: '11px',
+
+  display: 'flex',
+  flexDirection: 'column',
+  rowGap: '5px',
+
+  borderRadius: '10px',
+  border: '1px solid rgba(0, 0, 0, 0.1)',
+
+  overflowY: 'auto',
+  transition: 'height 0.3s ease-in-out',
+});
+
+export const profileContainer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  columnGap: '16px',
+
+  fontSize: '1.5rem',
+});
+
+export const list = style({
+  padding: '4.5px',
+
+  display: 'flex',
+  flexDirection: 'column',
+  rowGap: '5px',
+});
+
+export const item = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+export const profileImage = style({
+  borderRadius: '50%',
+});
+
+export const searchIcon = style({
+  width: '15.7px',
+  height: '15.7px',
+
+  position: 'absolute',
+  top: '20px',
+  left: '8px',
+  transform: 'translateY(-50%)',
+});
+
+export const checkedIcon = style({
+  marginLeft: '5px',
+  color: '#008000',
+});
+
+export const noResultMessage = style({
+  textAlign: 'center',
+  color: '#909090',
+});
diff --git a/src/app/create/_components/list/MemberSelector.tsx b/src/app/create/_components/list/MemberSelector.tsx
new file mode 100644
index 00000000..4a22f990
--- /dev/null
+++ b/src/app/create/_components/list/MemberSelector.tsx
@@ -0,0 +1,156 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
+import axios from 'axios';
+
+import SearchIcon from '/public/icons/search.svg';
+import EraseButton from '/public/icons/x_circle_fill.svg';
+import DefaultProfile from '/public/icons/default_profile.svg';
+
+import * as styles from './MemberSelector.css';
+
+import { UserProfileType } from '@/lib/types/userProfileType';
+
+interface MemberSelectorProps {
+  placeholder: string;
+  members: UserProfileType[];
+  fetchData: () => Promise<void>;
+  onClickAdd: (userId: number) => void;
+  onClickDelete: (userId: number) => void;
+}
+
+/**
+ * MemberSelector 컴포넌트:
+ * 사용자의 프로필 목록을 보여주고, 검색을 통해 사용자를 선택하는 기능 제공
+ *
+ * @param placeholder - 검색 입력란에 보여질 placeholder
+ * @param members - 드롭다운 보여질 사용자 프로필 목록
+ * @param fetchData - 검색어가 입력됨에따라 보여질 멤버 목록을 업데이트할 함수
+ * @param onClickAdd - 선택한 멤버를 추가하는 함수
+ * @param onClickDelete - 사용자를 선택 취소하는 함수
+ */
+function MemberSelector({ placeholder, members = [], fetchData, onClickAdd, onClickDelete }: MemberSelectorProps) {
+  const [input, setInput] = useState('');
+  const [selectedList, setSelectedList] = useState<UserProfileType[]>([]);
+  const [isDropDownOpen, setIsDropDownOpen] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const closeDropdown = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        inputRef.current &&
+        listRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        !inputRef.current.contains(event.target as Node) &&
+        !listRef.current.contains(event.target as Node)
+      ) {
+        setIsDropDownOpen(false);
+      }
+    };
+    document.addEventListener('click', closeDropdown);
+
+    fetchData();
+
+    return () => {
+      document.removeEventListener('click', closeDropdown);
+    };
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      {/* 멤버 검색 인풋박스 */}
+      <input
+        ref={inputRef}
+        className={styles.inputBox}
+        type={'text'}
+        placeholder={placeholder}
+        onClick={() => {
+          setIsDropDownOpen(true);
+        }}
+        onChange={(e) => {
+          setInput(e.target.value);
+        }}
+      />
+      <SearchIcon className={styles.searchIcon} />
+
+      {/* 멤버 검색 드롭다운 */}
+      {isDropDownOpen && (
+        <div className={styles.dropdown} ref={dropdownRef} style={{ height: isDropDownOpen ? '152px' : '0' }}>
+          {members
+            .filter((user) => user.nickname.toLocaleLowerCase().includes(input.toLocaleLowerCase()))
+            .map((user) => (
+              <div
+                key={user.id}
+                className={styles.profileContainer}
+                onClick={() => {
+                  if (!selectedList.find((selectedUser: UserProfileType) => selectedUser.id === user.id)) {
+                    setSelectedList([...selectedList, user]);
+                    onClickAdd(user.id);
+                  }
+                }}
+              >
+                <UserProfileImage src={user.profileImageUrl} />
+                {user.nickname}
+                {selectedList.find((collaboUser: UserProfileType) => collaboUser.id === user.id) && (
+                  <span className={styles.checkedIcon}>✓</span>
+                )}
+              </div>
+            ))}
+          {members.filter((user) => user.nickname.toLocaleLowerCase().includes(input.toLocaleLowerCase())).length ===
+            0 && <div className={styles.noResultMessage}>검색결과가 없어요.</div>}
+        </div>
+      )}
+
+      {/* 선택한 멤버 리스트 */}
+      <div ref={listRef} className={styles.list}>
+        {selectedList.map((selectedUser) => (
+          <div key={selectedUser.id} className={styles.item}>
+            <div className={styles.profileContainer}>
+              <UserProfileImage src={selectedUser.profileImageUrl} />
+              {selectedUser.nickname}
+            </div>
+            <EraseButton
+              onClick={() => {
+                setSelectedList(selectedList.filter((user) => user.id !== selectedUser.id));
+                onClickDelete(selectedUser.id);
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default MemberSelector;
+
+function UserProfileImage({ src }: { src: string }) {
+  const [isValidImage, setIsValidImage] = useState(false);
+
+  useEffect(() => {
+    const handleFetchImage = async () => {
+      if (!src) {
+        setIsValidImage(false);
+        return;
+      }
+      try {
+        const response = await axios.get(src);
+      } catch (error) {
+        setIsValidImage(false);
+        return;
+      }
+      setIsValidImage(true);
+    };
+    handleFetchImage();
+  }, []);
+
+  return isValidImage ? (
+    <Image className={styles.profileImage} src={src} width={'30'} height={'30'} alt="이미지 프로필" />
+  ) : (
+    <DefaultProfile width={'30'} height={'30'} />
+  );
+}
diff --git a/src/app/create/_components/list/RadioInput.css.ts b/src/app/create/_components/list/RadioInput.css.ts
new file mode 100644
index 00000000..7e83dac5
--- /dev/null
+++ b/src/app/create/_components/list/RadioInput.css.ts
@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  marginBottom: '8px',
+
+  display: 'flex',
+  flexDirection: 'row',
+  columnGap: '16px',
+
+  accentColor: 'black',
+});
+
+export const message = style({
+  marginLeft: '5px',
+
+  fontSize: '1.4rem',
+  color: '#909090',
+});
diff --git a/src/app/create/_components/list/RadioInput.tsx b/src/app/create/_components/list/RadioInput.tsx
new file mode 100644
index 00000000..2cc7082a
--- /dev/null
+++ b/src/app/create/_components/list/RadioInput.tsx
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import * as styles from './RadioInput.css';
+
+interface RadioInputProps {
+  messages: {
+    trueMessage: string;
+    falseMessage: string;
+  };
+  onClick: (value: boolean) => void;
+}
+
+/**
+ * RadioInput 컴포넌트:
+ * 두 개의 radio input 중 하나를 선택할 수 있는 기능을 제공
+ *
+ * @param props.messages - radio input을 선택했을때 아래 표시될 메시지들
+ * @param props.onClick - radio input을 클릭했을때 실행시킬 함수
+ */
+function RadioInput({ messages, onClick }: RadioInputProps) {
+  const [value, setValue] = useState(true);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <label>
+          <input
+            type="radio"
+            checked={value}
+            readOnly
+            onClick={() => {
+              onClick(true);
+              setValue(true);
+            }}
+          />
+          공개
+        </label>
+
+        <label>
+          <input
+            type="radio"
+            checked={!value}
+            readOnly
+            onClick={() => {
+              onClick(false);
+              setValue(false);
+            }}
+          />
+          비공개
+        </label>
+      </div>
+      <div className={styles.message}>{value ? messages.trueMessage : messages.falseMessage}</div>
+    </>
+  );
+}
+
+export default RadioInput;
diff --git a/src/app/create/_components/list/Section.css.ts b/src/app/create/_components/list/Section.css.ts
new file mode 100644
index 00000000..90e9918f
--- /dev/null
+++ b/src/app/create/_components/list/Section.css.ts
@@ -0,0 +1,15 @@
+import { style } from '@vanilla-extract/css';
+
+export const title = style({
+  marginBottom: '16px',
+  fontSize: '1.6rem',
+  fontWeight: '600',
+});
+
+export const required = style({
+  color: '#ff0000',
+});
+
+export const content = style({
+  fontSize: '1.5rem',
+});
diff --git a/src/app/create/_components/list/Section.tsx b/src/app/create/_components/list/Section.tsx
new file mode 100644
index 00000000..f4bd8113
--- /dev/null
+++ b/src/app/create/_components/list/Section.tsx
@@ -0,0 +1,28 @@
+import * as styles from './Section.css';
+
+interface SectionProps {
+  children: React.ReactNode;
+  title: string;
+  isRequired?: boolean;
+}
+
+/**
+ * Section 컴포넌트:
+ * 리액트 생성 페이지의 영역을 나누는 레이아웃용 컴포넌트
+ *
+ * @param props.title - 영역의 이름
+ * @param props.isRequired - 필수 입력 영역, 빨간 *가 표시된다.
+ * @param props.children - 영역 안에 포함될 tsx 내용
+ */
+function Section({ title, isRequired, children }: SectionProps) {
+  return (
+    <div>
+      <div className={styles.title}>
+        {title} {isRequired && <span className={styles.required}>*</span>}
+      </div>
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}
+
+export default Section;
diff --git a/src/app/create/_components/list/SimpleInput.css.ts b/src/app/create/_components/list/SimpleInput.css.ts
new file mode 100644
index 00000000..4a64a9ba
--- /dev/null
+++ b/src/app/create/_components/list/SimpleInput.css.ts
@@ -0,0 +1,50 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  width: '100%',
+  position: 'relative',
+});
+
+export const inputBox = style({
+  width: '100%',
+  padding: '11px',
+
+  position: 'relative',
+
+  fontSize: '1.5rem',
+  border: '0px',
+  borderBottom: '1px solid rgba(0, 0, 0, 0.10)',
+  outline: 'none',
+});
+
+export const textareaBox = style({
+  width: '100%',
+  padding: '12px',
+
+  fontSize: '1.5rem',
+
+  resize: 'none',
+  whiteSpace: 'pre-wrap',
+  // overflowY: 'hidden',
+
+  border: '1px solid rgba(0, 0, 0, 0.10)',
+  borderRadius: '8px',
+
+  outline: 'none',
+});
+
+export const clearButton = style({
+  position: 'absolute',
+  top: '20px',
+  right: '8px',
+  transform: 'translateY(-50%)',
+  cursor: 'pointer',
+});
+
+export const error = style({
+  margin: '10px',
+
+  fontSize: '1.5rem',
+
+  color: 'red',
+});
diff --git a/src/app/create/_components/list/SimpleInput.tsx b/src/app/create/_components/list/SimpleInput.tsx
new file mode 100644
index 00000000..df83b0de
--- /dev/null
+++ b/src/app/create/_components/list/SimpleInput.tsx
@@ -0,0 +1,75 @@
+import { useFormContext } from 'react-hook-form';
+import ClearButton from '/public/icons/x_circle_fill.svg';
+import * as styles from './SimpleInput.css';
+
+interface SimpleInputProps {
+  type: 'short' | 'long';
+  name: string;
+  placeholder: string;
+  rules: {
+    required?: {
+      errorMessage: string;
+    };
+    maxLength?: {
+      length: number;
+      errorMessage: string;
+    };
+  };
+}
+
+/**
+ * SimpleInput 컴포넌트: 
+ * 텍스트를 입력받는 컴포넌트
+ *
+ * @param props.type - 인풋의 길이에 따른 타입
+ * @param props.name - 인풋을 관리할 리액트훅폼 프로퍼티 이름
+ * @param props.placeholder - 입력란에 들어갈 placeholder 
+ * @param props.rules - 길이제한, 개수제한, 요구, 중복허용 등 입력 제한과 오류메시지를 위한 룰
+
+ */
+function SimpleInput({ type, name, placeholder, rules }: SimpleInputProps) {
+  const { register, setValue, formState } = useFormContext();
+  const { errors } = formState;
+
+  return (
+    <div className={styles.container}>
+      {type === 'long' ? (
+        <textarea
+          className={styles.textareaBox}
+          placeholder={placeholder}
+          {...register(name, {
+            required: rules.required && rules.required.errorMessage,
+            maxLength: rules.maxLength && {
+              value: rules.maxLength.length,
+              message: rules.maxLength.errorMessage,
+            },
+          })}
+        />
+      ) : (
+        <>
+          <input
+            className={styles.inputBox}
+            type="text"
+            placeholder={placeholder}
+            {...register(name, {
+              required: rules.required && rules.required.errorMessage,
+              maxLength: rules.maxLength && {
+                value: rules.maxLength.length,
+                message: rules.maxLength.errorMessage,
+              },
+            })}
+          />
+          <ClearButton
+            className={styles.clearButton}
+            onClick={() => {
+              setValue(name, '');
+            }}
+          />
+        </>
+      )}
+      {errors[name] && <div className={styles.error}>{errors[name]?.message?.toString()}</div>}
+    </div>
+  );
+}
+
+export default SimpleInput;
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index a7271021..2aaf15ef 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -1,43 +1,24 @@
 'use client';
 
+import { useState } from 'react';
 import { FieldErrors, FormProvider, useForm } from 'react-hook-form';
+
 import CreateItem from '@/app/create/_components/CreateItem';
 import CreateList from '@/app/create/_components/CreateList';
-import { useState } from 'react';
 
-interface Item {
-  rank: number;
-  title: string;
-  comment: string | null;
-  link: string | null;
-}
-
-interface FormValues {
-  ownerId: number;
-  category: string;
-  labels: string[];
-  collaboratorIds: number[];
-  title: string;
-  description: string;
-  isPublic: boolean;
-  backgroundColor: string;
-  items: Item[];
-}
+import { ListCreateType } from '@/lib/types/listType';
+import { createList } from '../_api/list/createList';
 
-export type FormErrors = FieldErrors<FormValues>;
+export type FormErrors = FieldErrors<ListCreateType>;
 
 export default function CreatePage() {
   const [step, setStep] = useState<'list' | 'item'>('list');
 
-  const handleStepChange = (step: 'list' | 'item') => {
-    setStep(step);
-  };
-
-  const methods = useForm<FormValues>({
+  const methods = useForm<ListCreateType>({
     mode: 'onChange',
     defaultValues: {
-      ownerId: 0,
-      category: '문화',
+      ownerId: 2, //로그인 후 수정 필요
+      category: 'culture',
       labels: [],
       collaboratorIds: [],
       title: '',
@@ -48,30 +29,69 @@ export default function CreatePage() {
         {
           rank: 0,
           title: '',
-          comment: null,
-          link: null,
+          comment: '',
+          link: '',
+          image: null,
         },
         {
           rank: 0,
           title: '',
-          comment: null,
-          link: null,
+          comment: '',
+          link: '',
+          image: null,
         },
         {
           rank: 0,
           title: '',
-          comment: null,
-          link: null,
+          comment: '',
+          link: '',
+          image: null,
         },
       ],
     },
   });
-  const itemValue = methods.watch('items');
 
-  //rank 정리하는 함수. 마지막에 한 번만 실행되게끔 하기 (submit)
-  itemValue.forEach((item, index) => {
-    item.rank = index + 1;
-  });
+  const handleStepChange = (step: 'list' | 'item') => {
+    setStep(step);
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const response = await createList(formatData().requestData);
+      // console.log(response.data);
+    } catch (error) {
+      // console.error(error);
+    }
+  };
+
+  //request용 데이터 만드는 함수.
+  const formatData = () => {
+    const originData = methods.getValues();
+
+    originData.items.forEach((item, index) => {
+      //rank 정리
+      item.rank = index + 1;
+    });
+
+    const requestData = {
+      ...originData,
+      items: originData.items.map(({ image, ...rest }) => rest),
+    };
+
+    const imageData = {
+      ownerId: originData.ownerId,
+      listId: 1, //temp
+      extensionsRanks: originData.items
+        .map(({ rank, image }) => {
+          return { rank: rank, extension: image?.[0].type.split('/')[1] };
+        })
+        .filter(({ extension }) => {
+          return extension !== undefined;
+        }),
+    };
+
+    return { requestData, imageData };
+  };
 
   return (
     <div>
@@ -88,6 +108,9 @@ export default function CreatePage() {
               onBackClick={() => {
                 handleStepChange('list');
               }}
+              onSubmit={() => {
+                handleSubmit();
+              }}
             />
           )}
         </FormProvider>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2ba93d43..4908be29 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,7 @@
 
 import { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import '@/styles/globalStyles.css';
+import '@/styles/GlobalStyles.css';
 
 const queryClient = new QueryClient();
 
diff --git a/src/lib/constants/formInputValidationRules.ts b/src/lib/constants/formInputValidationRules.ts
index 84c0f5d3..7df9f168 100644
--- a/src/lib/constants/formInputValidationRules.ts
+++ b/src/lib/constants/formInputValidationRules.ts
@@ -13,3 +13,23 @@ export const itemLinkRules = {
     message: '올바른 URL 형식이 아니에요.',
   },
 };
+
+//list
+
+export const listTitleRules = {
+  required: { errorMessage: '제목을 입력해주세요' },
+  maxLength: {
+    length: 30,
+    errorMessage: '리스트 제목은 최대 30자까지 입력할 수 있어요.',
+  },
+};
+
+export const listDescriptionRules = {
+  maxLength: { length: 200, errorMessage: '리스트 소개는 최대 200자까지 입력할 수 있어요.' },
+};
+
+export const listLabelRules = {
+  maxNumRule: { num: 3, errorMessage: '라벨은 최대 3개까지 등록할 수 있어요.' },
+  maxLengthRule: { length: 10, errorMessage: '라벨은 최대 10자까지 입력할 수 있어요.' },
+  uniqueRule: { errorMessage: '같은 라벨을 2개 이상 등록할 수 없어요.' },
+};
diff --git a/src/lib/constants/placeholder.ts b/src/lib/constants/placeholder.ts
index 61dd7405..56e0ce7f 100644
--- a/src/lib/constants/placeholder.ts
+++ b/src/lib/constants/placeholder.ts
@@ -1,3 +1,10 @@
+export const listPlaceholder = {
+  title: '리스트 제목을 적어주세요',
+  description: '리스트에 대한 간단한 소개를 작성해주세요.',
+  label: '라벨 입력 후 Enter를 눌러주세요. (최대 3개)',
+  collaborator: '닉네임 또는 이메일을 입력해주세요.',
+};
+
 //item
 export const itemPlaceholder = {
   title: '아이템을 입력해주세요.',
diff --git a/src/lib/types/categoriesType.ts b/src/lib/types/categoriesType.ts
index 8dd57758..19a8f630 100644
--- a/src/lib/types/categoriesType.ts
+++ b/src/lib/types/categoriesType.ts
@@ -1,7 +1,3 @@
-export interface CategoriesType {
-  categories: CategoryType[];
-}
-
 export interface CategoryType {
   codeValue: string;
   nameValue: string;
diff --git a/src/lib/types/listType.ts b/src/lib/types/listType.ts
index 5aeef337..e150d575 100644
--- a/src/lib/types/listType.ts
+++ b/src/lib/types/listType.ts
@@ -1 +1,23 @@
-// 리스트 관련 타입
+// 아이템 생성 타입
+export interface ItemCreateType {
+  rank: number;
+  title: string;
+  comment: string | null;
+  link: string | null;
+  image?: FileList | null;
+}
+
+// 리스트 생성 타입
+export interface ListCreateType {
+  ownerId: number;
+  category: string;
+  labels: string[];
+  collaboratorIds: number[];
+  title: string;
+  description: string;
+  isPublic: boolean;
+  backgroundColor: string;
+  items: ItemCreateType[];
+}
+
+// 리스트 생성 이미지 생성 타입
diff --git a/src/lib/types/userProfileType.ts b/src/lib/types/userProfileType.ts
new file mode 100644
index 00000000..8ab7c437
--- /dev/null
+++ b/src/lib/types/userProfileType.ts
@@ -0,0 +1,10 @@
+// 전체 유저 조회 관련
+export interface UserProfilesType {
+  userInfos: UserProfileType[];
+}
+
+export interface UserProfileType {
+  id: number;
+  profileImageUrl: string;
+  nickname: string;
+}
diff --git a/src/styles/Color.ts b/src/styles/Color.ts
new file mode 100644
index 00000000..af7435a7
--- /dev/null
+++ b/src/styles/Color.ts
@@ -0,0 +1,8 @@
+export const BACKGROUND_COLOR = {
+  WHITE: '#FFFFFF',
+  YELLOW: '#FFF6A5',
+  ORANGE: '#FFDCB2',
+  GREEN: '#D0FF89',
+  BLUE: '#B7EEFF',
+  PURPLE: '#E6C6FF',
+};
diff --git a/src/styles/globalStyles.css.ts b/src/styles/GlobalStyles.css.ts
similarity index 100%
rename from src/styles/globalStyles.css.ts
rename to src/styles/GlobalStyles.css.ts