diff --git a/src/api/afterManage/index.ts b/src/api/afterManage/index.ts
index 12f327b..c27cfbc 100644
--- a/src/api/afterManage/index.ts
+++ b/src/api/afterManage/index.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { instance } from "..";
-import { ChangeStatus, ClubList } from "../type";
+import { ChangeStatus, ClubList, Type } from "../type";
 
 export const GetClubList = (club: string) => {
   return useQuery<ClubList[]>({
@@ -23,3 +23,13 @@ export const FixStatus = () => {
     },
   });
 };
+
+export const AllStudent = () => {
+  return useQuery<Type[]>({
+    queryKey: ["AllStudent"],
+    queryFn: async () => {
+      const response = await instance.get(`/after/search`);
+      return response.data;
+    },
+  });
+};
diff --git a/src/api/type.ts b/src/api/type.ts
index fba08c0..42c6510 100644
--- a/src/api/type.ts
+++ b/src/api/type.ts
@@ -66,3 +66,10 @@ export interface CountOutListType {
   request: number;
   classMove: number;
 }
+
+export interface Type {
+  grade: number;
+  class_num: number;
+  num: number;
+  name: string;
+}
diff --git a/src/app/afterManage/page.tsx b/src/app/afterManage/page.tsx
index ba8c29c..f1e4cba 100644
--- a/src/app/afterManage/page.tsx
+++ b/src/app/afterManage/page.tsx
@@ -5,6 +5,7 @@ import BackGround from "@/components/background";
 import Button from "@/components/button";
 import Dropdown from "@/components/dropdown";
 import AfterList from "@/components/list/afterManage";
+import Modal from "@/components/modal";
 import { getStudentString } from "@/util/util";
 import { useEffect, useState } from "react";
 
@@ -13,6 +14,7 @@ const AfterManage = () => {
   const [selectedTab, setSelectedTab] = useState<boolean>(true);
   const [selectClassTime, setSelectClassTime] = useState<number>(8);
   const [selectClub, setSelectClub] = useState<string>("대동여지도");
+  const [modal, setMadal] = useState<boolean>(false);
   const { data: getClub } = GetClubList(selectClub);
   const { mutate: changeStatus } = FixStatus();
 
@@ -56,6 +58,10 @@ const AfterManage = () => {
     setSelectedTab(tab);
   };
 
+  const onAdd = () => {
+    setMadal(true);
+  };
+
   return (
     <BackGround
       title="방과후 관리"
@@ -63,15 +69,30 @@ const AfterManage = () => {
       leftTab="전공 동아리"
       rightTab="방과후(창조실)"
       Dropdown={
-        <div className="flex gap-2">
-          <Dropdown type="club" onChange={handleClubChange} />
-          <Dropdown type="classTime" onChange={handleClassTimeChange} />
-        </div>
+        <>
+          {selectedTab ? (
+            <div className="flex gap-2">
+              <Dropdown type="club" onChange={handleClubChange} />
+              <Dropdown type="classTime" onChange={handleClassTimeChange} />
+            </div>
+          ) : (
+            <div className="flex justify-between gap-2">
+              <Dropdown type="club" onChange={handleClubChange} />
+              <Button
+                colorType="tertiary"
+                buttonSize="extraSmall"
+                onClick={onAdd}
+              >
+                인원 추가
+              </Button>
+            </div>
+          )}
+        </>
       }
       TabOnclick={onClickTab}
     >
       <div className="overflow-y-scroll h-96 flex flex-col gap-4">
-        {selectedTab &&
+        {selectedTab ? (
           clubList.map((item, index) => (
             <AfterList
               key={index}
@@ -82,7 +103,19 @@ const AfterManage = () => {
               state2={item.status7}
               state3={item.status8}
             />
-          ))}
+          ))
+        ) : (
+          <div></div>
+        )}
+        {modal && (
+          <Modal
+            type="add"
+            heading1=""
+            buttonMessage="추가"
+            onCancel={() => {}}
+            onConfirm={() => {}}
+          />
+        )}
       </div>
       <div className="absolute bottom-4% w-5/6 left-50%">
         <Button
diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
index 726b987..f6cb72d 100644
--- a/src/app/main/page.tsx
+++ b/src/app/main/page.tsx
@@ -6,13 +6,14 @@ import CheckPage from "./checkPage";
 import { GetName, GetTodaydirector } from "@/api/main";
 import { getToday, getWeekDay } from "@/util/date";
 import AfterManageImg from "@/assets/svg/aferManege.svg";
-import attendanceImg from "@/assets/svg/attendance.svg"
-import outingImg from "@/assets/svg/outing.svg"
-import moveClassImg from "@/assets/svg/moveClass.svg"
+import attendanceImg from "@/assets/svg/attendance.svg";
+import outingImg from "@/assets/svg/outing.svg";
+import moveClassImg from "@/assets/svg/moveClass.svg";
 
 const Main = () => {
   const [floor, setFloor] = useState<string>();
   const { data: getDirector } = GetTodaydirector();
+  GetName();
 
   useEffect(() => {
     if (getDirector) setFloor(getDirector);
diff --git a/src/assets/svg/cancel.svg b/src/assets/svg/cancel.svg
new file mode 100644
index 0000000..7ac7c78
--- /dev/null
+++ b/src/assets/svg/cancel.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 5.5L8.5 8.5M8.5 5.5L5.5 8.5M13 7C13 7.78793 12.8448 8.56815 12.5433 9.2961C12.2417 10.0241 11.7998 10.6855 11.2426 11.2426C10.6855 11.7998 10.0241 12.2417 9.2961 12.5433C8.56815 12.8448 7.78793 13 7 13C6.21207 13 5.43185 12.8448 4.7039 12.5433C3.97595 12.2417 3.31451 11.7998 2.75736 11.2426C2.20021 10.6855 1.75825 10.0241 1.45672 9.2961C1.15519 8.56815 1 7.78793 1 7C1 5.4087 1.63214 3.88258 2.75736 2.75736C3.88258 1.63214 5.4087 1 7 1C8.5913 1 10.1174 1.63214 11.2426 2.75736C12.3679 3.88258 13 5.4087 13 7Z" stroke="#101828" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/background/index.tsx b/src/components/background/index.tsx
index 07a2df5..6e95b6f 100644
--- a/src/components/background/index.tsx
+++ b/src/components/background/index.tsx
@@ -24,26 +24,28 @@ const BackGround: React.FC<Prop> = ({
   TabOnclick,
 }) => {
   return (
-    <div className="min-w-fit min-h-full h-dvh px-6 py-3 bg-primary-1200">
+    <>
       <Header />
-      <div className="py-3 gap-5 flex flex-col">
-        <div className="flex items-center gap-3 font-sans">
-          <div className="text-sub-title1-M">{title}</div>
-          <div className="text-sun-title3-M text-neutral-300">{subTitle}</div>
-        </div>
-        {Dropdown && <div>{Dropdown}</div>}
-        <div className="flex flex-col gap-6">
-          {TabOK && (
-            <Tab
-              firstText={leftTab || "Left Tab"}
-              SecondText={rightTab || "Right Tab"}
-              onClick={TabOnclick}
-            />
-          )}
-          {children}
+      <div className="min-w-fit min-h-full h-dvh px-6 py-3 bg-primary-1200">
+        <div className="py-3 gap-5 flex flex-col">
+          <div className="flex items-center gap-3 font-sans">
+            <div className="text-sub-title1-M">{title}</div>
+            <div className="text-sun-title3-M text-neutral-300">{subTitle}</div>
+          </div>
+          {Dropdown && <div>{Dropdown}</div>}
+          <div className="flex flex-col gap-6">
+            {TabOK && (
+              <Tab
+                firstText={leftTab || "Left Tab"}
+                SecondText={rightTab || "Right Tab"}
+                onClick={TabOnclick}
+              />
+            )}
+            {children}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/input/auto.tsx b/src/components/input/auto.tsx
new file mode 100644
index 0000000..a2d755e
--- /dev/null
+++ b/src/components/input/auto.tsx
@@ -0,0 +1,150 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import SelectedBadges from "./bedge/index";
+import { AllStudent } from "@/api/afterManage";
+import { setStudentNum } from "@/util/util";
+import { Type } from "@/api/type";
+
+interface ChangeProps {
+  text: string;
+  name: string;
+}
+
+interface InputProps {
+  placeholder?: string;
+  width?: string;
+  name?: string;
+  onChange: ({ text, name }: ChangeProps) => void;
+  value: string;
+}
+
+interface AutoInputProps extends InputProps {
+  selectedValues?: string[];
+  onRemoveBadge?: (value: string) => void;
+}
+
+export const PostSelectedValues: React.FC<AutoInputProps> = ({
+  selectedValues,
+}) => {
+  return selectedValues;
+};
+
+const AutoInput: React.FC<AutoInputProps> = ({
+  placeholder,
+  width,
+  onChange,
+  value,
+  name = "",
+}) => {
+  const [isAutoCompleteVisible, setIsAutoCompleteVisible] =
+    useState<boolean>(false);
+  const [filteredData, setFilteredData] = useState<string[]>([]);
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const { data: GetStudentMutate } = AllStudent();
+
+  const containerClassName = `font-sans w-${width} h-auto border border-neutral-900 rounded flex justify-between items-center px-2 bg-neutral-900 hover:border-neutral-500 hover:bg-white active:border-secondary-500 caret-primary-500 focus:border-secondary-500`;
+
+  const [data, setData] = useState<Type[]>([]);
+
+  useEffect(() => {
+    localStorage.setItem("students", JSON.stringify(selectedValues));
+  }, [selectedValues]);
+
+  useEffect(() => {
+    if (GetStudentMutate) {
+      setData(GetStudentMutate);
+    }
+  }, [GetStudentMutate]);
+
+  useEffect(() => {
+    const students = data?.map((item) => `${setStudentNum(item)} ${item.name}`);
+    setStudent(students);
+  }, [data]);
+
+  const [student, setStudent] = useState<string[]>([]);
+
+  const inputClassName =
+    "h-10 px-2 border-none bg-transparent placeholder-neutral-500 focus:outline-none rounded font-sans w-full";
+
+  const handleInputChange = (inputText: string) => {
+    const filtered = student?.filter((item) =>
+      item.toLowerCase().includes(inputText.toLowerCase())
+    );
+    setFilteredData(filtered?.map((item) => item) || []);
+    setIsAutoCompleteVisible(true);
+
+    onChange({ text: inputText, name });
+  };
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsAutoCompleteVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const handleSelectOption = (selectedOption: string) => {
+    onChange({ text: selectedOption, name });
+    setIsAutoCompleteVisible(false);
+
+    setSelectedValues((prevValues) => [...prevValues, selectedOption]);
+  };
+
+  const handleRemoveBadge = (value: string) => {
+    setSelectedValues((prevValues) => prevValues.filter((v) => v !== value));
+  };
+
+  const renderAutoComplete = () => (
+    <div className="absolute top-full left-0 bg-white border rounded-lg w-full text-Button-S z-20 h-auto max-h-64 overflow-y-scroll">
+      {filteredData.map((option) => (
+        <div
+          key={option}
+          onClick={() => {
+            handleSelectOption(option);
+            handleInputChange("");
+            setIsAutoCompleteVisible(false);
+          }}
+          className="flex py-2 px-3 hover:bg-primary-200 hover:text-white cursor-pointer"
+        >
+          {option}
+        </div>
+      ))}
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col gap-3" ref={dropdownRef}>
+      <div className="flex flex-col items-start relative">
+        <div className={containerClassName}>
+          <input
+            className={inputClassName}
+            type="text"
+            placeholder={placeholder}
+            width="full"
+            value={value}
+            onChange={(e) => handleInputChange(e.target.value)}
+          />
+        </div>
+        {isAutoCompleteVisible && renderAutoComplete()}
+      </div>
+      <div className="flex gap-3 h-20 overflow-y-scroll">
+        <SelectedBadges
+          selectedValues={selectedValues}
+          onRemoveBadge={handleRemoveBadge}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AutoInput;
diff --git a/src/components/input/bedge/index.tsx b/src/components/input/bedge/index.tsx
new file mode 100644
index 0000000..cecd9d6
--- /dev/null
+++ b/src/components/input/bedge/index.tsx
@@ -0,0 +1,40 @@
+import Image from "next/image";
+import React from "react";
+import cancel from "@/assets/svg/cancel.svg";
+
+interface BadgeProps {
+  value: string;
+  onRemove: () => void;
+}
+
+const Badge: React.FC<BadgeProps> = ({ value, onRemove }) => (
+  <div className=" w-max bg-neutral-900 text-neutral-50 rounded-lg px-3 justify-center py-2 flex items-center text-caption1 gap-2">
+    <span>{value}</span>
+    <Image
+      src={cancel}
+      alt=""
+      width={16}
+      height={16}
+      onClick={onRemove}
+      className="cursor-pointer"
+    />
+  </div>
+);
+
+interface SelectedBadgesProps {
+  selectedValues: string[];
+  onRemoveBadge: (value: string) => void;
+}
+
+const SelectedBadges: React.FC<SelectedBadgesProps> = ({
+  selectedValues,
+  onRemoveBadge,
+}) => (
+  <div className="flex gap-2 flex-wrap">
+    {selectedValues?.map((value) => (
+      <Badge key={value} value={value} onRemove={() => onRemoveBadge(value)} />
+    ))}
+  </div>
+);
+
+export default SelectedBadges;
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
index 76705d9..8f69d03 100644
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import Button from "../button";
-//import AutoInput from "../input/auto/page";
+import AutoInput from "../input/auto";
 
 interface ChangeProps {
   text: string;
@@ -76,24 +76,21 @@ const Modal: React.FC<ModalProps> = ({
         <div className=" z-10 bg-white rounded-xl px-5 py-6">
           <div className="flex flex-col gap-8 items-center">
             <div className=" text-neutral-50 text-center">
-              {heading1 && (
-                <div className=" flex flex-col gap-9 max-w-none items-center">
-                  <div className=" text-sub-title2-M flex gap-2">
-                    <div className=" text-purple-400">창조실</div> 인원추가
-                  </div>
-                  <div className=" w-full">
-                    {/* <AutoInput
-                      type="student"
-                      placeholder="학번과 이름을 입력하세요"
-                      width="full"
-                      onChange={AutohandleChange}
-                      value={addstudent.student}
-                      name="student"
-                    /> */}
-                  </div>
-                  {renderButtons()}
+              <div className=" flex flex-col gap-9 max-w-none items-center">
+                <div className=" text-sub-title2-M flex gap-2">
+                  <div className=" text-purple-400">창조실</div> 인원추가
                 </div>
-              )}
+                <div className=" w-full">
+                  <AutoInput
+                    placeholder="학번과 이름을 입력하세요"
+                    width="full"
+                    onChange={AutohandleChange}
+                    value={addstudent.student}
+                    name="student"
+                  />
+                </div>
+                {renderButtons()}
+              </div>
             </div>
           </div>
         </div>