diff --git a/next.config.js b/next.config.js
index 3ac320c3..6f7f1a88 100644
--- a/next.config.js
+++ b/next.config.js
@@ -12,6 +12,7 @@ const nextConfig = {
       'd1sgygn8l0lfd5.cloudfront.net',
       'dcpshnp4boilw.cloudfront.net',
       'd1e39uzon1ymuo.cloudfront.net',
+      'likelion13bucket.s3.amazonaws.com',
     ],
   },
   webpack(config) {
diff --git a/src/apis/admin.ts b/src/apis/admin.ts
new file mode 100644
index 00000000..1ec85a60
--- /dev/null
+++ b/src/apis/admin.ts
@@ -0,0 +1,17 @@
+import axios from 'axios';
+import { url } from '.';
+import { getAuthAxios } from './authAxios';
+import { IToken } from '@utils/state';
+import { IProjectDetail, UploadData } from '@@types/request';
+
+// export function postGalleryData(data: IProjectDetail, token: IToken) {
+//   const authAxios = getAuthAxios(token);
+//   return authAxios.post(`/api/admin/postProject`, {
+//     data,
+//   });
+// }
+
+export async function postGalleryData(data: FormData) {
+  const result = await axios.post(`${process.env.NEXT_PUBLIC_API_KEY}/api/project`, data);
+  return result;
+}
diff --git a/src/apis/gallery.ts b/src/apis/gallery.ts
index 6967e9b8..4670751c 100644
--- a/src/apis/gallery.ts
+++ b/src/apis/gallery.ts
@@ -3,15 +3,13 @@ import axios from 'axios';
 import { url } from '.';
 
 export async function getGalleries() {
-  const data = await axios.get<ResponseData<ArchivingArrayType<IGalleryData>>>(
-    `${url}/api/gallery`,
-  ).then(res => res.data.data);
+  const data = await axios
+    .get<ResponseData<ArchivingArrayType<IGalleryData>>>(`${url}/api/gallery`)
+    .then((res) => res.data.data);
   return data;
 }
 
 export async function getGalleryDetail(id: string) {
-  const data = await axios.get<ResponseData<IGalleryDetail>>(
-    `${url}/api/gallery/${id}`,
-  ).then(res => res.data.data);
+  const data = await axios.get<ResponseData<IGalleryDetail>>(`${url}api/gallery/${id}`).then((res) => res.data.data);
   return data;
 }
diff --git a/src/apis/project.ts b/src/apis/project.ts
index d0f38ef2..276c59e3 100644
--- a/src/apis/project.ts
+++ b/src/apis/project.ts
@@ -10,8 +10,7 @@ export async function getProjects() {
 }
 
 export async function getProjectDetail(id: string) {
-  const data = await axios
-    .get<ResponseData<IProjectDetail>>(`${url}/api/project/${id}`)
-    .then((res) => res.data.data);
+  const data = await axios.get<ResponseData<IProjectDetail>>(`${url}/api/project/${id}`).then((res) => res.data.data);
+  console.log(data);
   return data;
 }
diff --git a/src/components/admin/PostAdmin.tsx b/src/components/admin/PostAdmin.tsx
new file mode 100644
index 00000000..65095d3e
--- /dev/null
+++ b/src/components/admin/PostAdmin.tsx
@@ -0,0 +1,144 @@
+import { IProjectDetail, UploadData } from '@@types/request';
+import React, { useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { postGalleryData } from 'src/apis/admin';
+import { token } from '@utils/state';
+import useInput from 'src/hooks/useInput';
+import styled from 'styled-components';
+
+const PostAdmin = () => {
+  // Input 상태 관리
+  const [title, onChangeTitle] = useInput('');
+  const [subTitle, onChangeSubTitle] = useInput('');
+  const [devStack, onChangeDevStack] = useInput('');
+  const [version, onChangeVersion] = useInput('');
+  const [teamName, onChangeTeamName] = useInput('');
+  const [pm, onChangePm] = useInput('');
+  const [de, onChangeDe] = useInput('');
+  const [fe, onChangeFe] = useInput('');
+  const [be, onChangeBe] = useInput('');
+  const [start, onChangeStart] = useInput('');
+  const [end, onChangeEnd] = useInput('');
+  const [description, onChangeDescription] = useInput('');
+  const [webLink, onChangeWebLink] = useInput('');
+  const [category, onChangeCategory] = useInput('');
+  const [thumbnail, setThumbnail] = useState<File | null>(null);
+  const [images, setImages] = useState<File[]>([]);
+  const a: string = 'aaa';
+  // 파일 업로드 핸들러
+  const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setThumbnail(e.target.files[0]);
+    }
+  };
+
+  const handleImagesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      // e.target.files가 null이 아니면 Array.from()으로 파일을 배열로 변환하여 추가
+      setImages((prevImages) => [
+        ...prevImages,
+        ...Array.from(e.target.files as FileList), // FileList로 명시적 타입 캐스팅
+      ]);
+    }
+  };
+
+  // 제출 핸들러
+  const handleSubmit = async () => {
+    if (!thumbnail || images.length === 0) {
+      alert('썸네일과 이미지를 모두 업로드해주세요.');
+      return;
+    }
+
+    const formData = new FormData();
+
+    formData.append('title', title);
+    formData.append('subtitle', subTitle);
+    formData.append('dev_stack', devStack);
+    formData.append('version', version);
+    formData.append('team_name', teamName);
+    formData.append('start_date', start);
+    formData.append('end_date', end);
+    formData.append('description', description);
+    formData.append('category', category);
+    formData.append('login_email', 'adsf'); // 로그인 이메일은 임시 데이터
+    formData.append(
+      'team_member',
+      JSON.stringify({
+        pm: pm.split(','),
+        design: de.split(','),
+        frontend: fe.split(','),
+        backend: be.split(','),
+      }),
+    );
+
+    formData.append(
+      'link',
+      JSON.stringify({
+        github: 'fadsf',
+        youtube: 'ffasd',
+        web: webLink,
+      }),
+    );
+
+    // 썸네일 파일 추가
+    formData.append('thumbnail', thumbnail);
+
+    // 이미지 배열 추가
+    images.forEach((image) => {
+      formData.append('images', image);
+    });
+
+    try {
+      const result = await postGalleryData(formData);
+      console.log(result);
+      alert('업로드 성공');
+    } catch (error) {
+      console.error(error);
+      alert('업로드 실패');
+    }
+  };
+
+  return (
+    <Wrapper>
+      <h1>프로젝트 업로드</h1>
+      <input type="text" value={title} onChange={onChangeTitle} placeholder="제목" />
+      <input type="text" value={subTitle} onChange={onChangeSubTitle} placeholder="부제목" />
+      <input type="text" value={devStack} onChange={onChangeDevStack} placeholder="개발 스택" />
+      <input type="text" value={version} onChange={onChangeVersion} placeholder="버전" />
+      <input type="text" value={teamName} onChange={onChangeTeamName} placeholder="팀 이름" />
+      <input type="text" value={pm} onChange={onChangePm} placeholder="PM" />
+      <input type="text" value={de} onChange={onChangeDe} placeholder="디자인" />
+      <input type="text" value={fe} onChange={onChangeFe} placeholder="프론트엔드" />
+      <input type="text" value={be} onChange={onChangeBe} placeholder="백엔드" />
+      <input type="string" value={start} onChange={onChangeStart} placeholder="시작 날짜" />
+      <input type="string" value={end} onChange={onChangeEnd} placeholder="종료 날짜" />
+      <input type="string" onChange={onChangeDescription} placeholder="설명"></input>
+      <input type="url" value={webLink} onChange={onChangeWebLink} placeholder="웹 링크" />
+      <input type="text" value={category} onChange={onChangeCategory} placeholder="카테고리" />
+
+      <Title>프로젝트 썸네일 이미지</Title>
+      <input type="file" accept="image/*" onChange={handleThumbnailChange} />
+
+      <Title>프로젝트 이미지</Title>
+      <input type="file" accept="image/*" multiple onChange={handleImagesChange} />
+
+      <button onClick={handleSubmit}>업로드하기</button>
+    </Wrapper>
+  );
+};
+
+export default PostAdmin;
+
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+
+const Title = styled.div`
+  font-size: 2rem;
+  font-weight: bold;
+`;
diff --git a/src/components/archiving/Card.tsx b/src/components/archiving/Card.tsx
index dfb1fc14..6461155f 100644
--- a/src/components/archiving/Card.tsx
+++ b/src/components/archiving/Card.tsx
@@ -16,13 +16,7 @@ const Card = ({ id, thumbnail, title, dev_stack, category, link, subtitle }: ICa
     <Link href={`${link}/${id}`}>
       <Wrapper>
         <ImageWrapper>
-          <CustomImage
-            src={thumbnail}
-            alt="썸네일"
-            layout="fill"
-            objectFit="contain"
-            objectPosition="center"
-          />
+          <CustomImage src={thumbnail} alt="썸네일" layout="fill" objectFit="contain" objectPosition="center" />
         </ImageWrapper>
         <TextWrapper>
           <Category link={link}>{category}</Category>
@@ -36,8 +30,7 @@ const Card = ({ id, thumbnail, title, dev_stack, category, link, subtitle }: ICa
 };
 
 export default Card;
-const CustomImage = styled(Image)`
-`;
+const CustomImage = styled(Image)``;
 
 const Wrapper = styled.div`
   border-radius: 20px;
@@ -98,9 +91,8 @@ const TextWrapper = styled.div`
   @media (min-width: 330px) and (max-width: 444px) {
     width: 180px;
   }
-
 `;
-const Category = styled.div<{ link: string; }>`
+const Category = styled.div<{ link: string }>`
   border-radius: 25px;
   border: ${(props) => (props.link === '/gallery' ? 'none' : `1px solid ${GreyScale.default}`)};
   display: flex;
@@ -135,5 +127,4 @@ const ProjectDesc = styled.div`
   @media (max-width: 1300px) {
     font-size: 10px;
   }
-
 `;
diff --git a/src/components/gallery/GalleryListSection.tsx b/src/components/gallery/GalleryListSection.tsx
index 44e3df8f..49b47490 100644
--- a/src/components/gallery/GalleryListSection.tsx
+++ b/src/components/gallery/GalleryListSection.tsx
@@ -6,14 +6,16 @@ import { useQuery } from 'react-query';
 import { getGalleries } from 'src/apis/gallery';
 import styled from 'styled-components';
 
-const GalleryListSection = ({ staticData }: { staticData: ArchivingArrayType<IGalleryData>; }) => {
+const GalleryListSection = ({ staticData }: { staticData: ArchivingArrayType<IGalleryData> }) => {
   const { data, isLoading } = useQuery<ArchivingArrayType<IGalleryData>>(['galleries'], getGalleries);
 
   return (
     <Wrapper>
-      {sortArchivingListDesc(isLoading ? staticData : (data as ArchivingArrayType<IGalleryData>))!.map(([year, value]) => (
-        <Archiving archivingType={'gallery'} archivingIndex={year} archivingData={value} key={year} />
-      ))}
+      {sortArchivingListDesc(isLoading ? staticData : (data as ArchivingArrayType<IGalleryData>))!.map(
+        ([year, value]) => (
+          <Archiving archivingType={'gallery'} archivingIndex={year} archivingData={value} key={year} />
+        ),
+      )}
     </Wrapper>
   );
 };
@@ -24,4 +26,4 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   margin: 3rem;
-`;
\ No newline at end of file
+`;
diff --git a/src/components/signup/component/ToggleBox.tsx b/src/components/signup/component/ToggleBox.tsx
index 48d1a9ad..0eeadec0 100644
--- a/src/components/signup/component/ToggleBox.tsx
+++ b/src/components/signup/component/ToggleBox.tsx
@@ -3,119 +3,119 @@ import React from 'react';
 import styled from 'styled-components';
 
 interface IProps {
-    title: string;
-    toggle: boolean[];
-    description: string;
-    setToggle: (a: boolean[]) => void;
+  title: string;
+  toggle: boolean[];
+  description: string;
+  setToggle: (a: boolean[]) => void;
 }
 
 const ToggleBox = ({ title, toggle, description, setToggle }: IProps) => {
-    const handleToggleButton = (i: number) => {
-        const copy = new Array(toggle.length).fill(false);
-        copy[i] = true;
-        setToggle(copy);
-    };
-    return (
-        <RowContainer>
-            <Title>{title}</Title>
-            <InputRow>
-                <ToggleWrapper>
-                    {toggle.map((t, i) => (
-                        <ToggleItem key={i} >
-                            <ButtonWrapper onClick={() => handleToggleButton(i)} isClicked={toggle[i]} >
-                                <Button />
-                            </ButtonWrapper>
-                            <ToggleTitle>{title.split('/')[i]}</ToggleTitle>
-                        </ToggleItem>
-                    ))}
-                </ToggleWrapper>
-                <Description>*{description}</Description>
-            </InputRow>
-        </RowContainer>
-    );
+  const handleToggleButton = (i: number) => {
+    const copy = new Array(toggle.length).fill(false);
+    copy[i] = true;
+    setToggle(copy);
+  };
+  return (
+    <RowContainer>
+      <Title>{title}</Title>
+      <InputRow>
+        <ToggleWrapper>
+          {toggle.map((t, i) => (
+            <ToggleItem key={i}>
+              <ButtonWrapper onClick={() => handleToggleButton(i)} isClicked={toggle[i]}>
+                <Button />
+              </ButtonWrapper>
+              <ToggleTitle>{title.split('/')[i]}</ToggleTitle>
+            </ToggleItem>
+          ))}
+        </ToggleWrapper>
+        <Description>*{description}</Description>
+      </InputRow>
+    </RowContainer>
+  );
 };
 
 export default ToggleBox;
 
 const RowContainer = styled.div`
-    display: flex;
-    width: 100%;
-    align-items: center;
-    min-height: 100px;
-    height: 100px;
-    border-bottom: 1px solid ${GreyScale.default};
+  display: flex;
+  width: 100%;
+  align-items: center;
+  min-height: 100px;
+  height: 100px;
+  border-bottom: 1px solid ${GreyScale.default};
 `;
 
 const InputRow = styled.div`
-    height: 60px;
-    display: flex;
-    align-items: center;
-    padding: 20px;
-    width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  width: 100%;
 
-    @media (max-width: 900px){
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-    }
+  @media (max-width: 900px) {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+  }
 `;
 
 const Title = styled.div`
-    flex-basis: 20%;
-    font-family: 'Pretendard';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 1.4rem;
-    background-color: ${Primary.light};
-    height: 100%;
-    min-width: 180px;
-    padding: 1rem;
-    display: flex;
-    align-items: center;
+  flex-basis: 20%;
+  font-family: 'Pretendard';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.4rem;
+  background-color: ${Primary.light};
+  height: 100%;
+  min-width: 180px;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
 `;
 
 const ToggleWrapper = styled.div`
-    display: flex;
-    flex-basis: 35%;
+  display: flex;
+  flex-basis: 35%;
 `;
 
 const Description = styled.div`
-    font-size: 1.4rem;
-    font-family: 'Pretendard';
-    font-style: normal;
-    font-weight: 500;
-    color: ${GreyScale.default};
+  font-size: 1.4rem;
+  font-family: 'Pretendard';
+  font-style: normal;
+  font-weight: 500;
+  color: ${GreyScale.default};
 `;
 
-const ToggleItem = styled.div`
-    width: 50%;
-    display: flex;
-    gap: 8px;
-    align-items: center;
+const ToggleItem = styled.div<{ key: number; children: React.ReactNode }>`
+  width: 50%;
+  display: flex;
+  gap: 8px;
+  align-items: center;
 `;
 
-const ButtonWrapper = styled.div<{ isClicked: boolean; }>`
-    cursor: pointer;
-    width: 20px;
-    height: 20px;
-    border-radius: 100%;
-    background-color: ${props => props.isClicked ? Primary.default : GreyScale.light};
-    display: flex;
-    justify-content: center;
-    align-items: center;
+const ButtonWrapper = styled.div<{ isClicked: boolean; onClick: () => void; children: React.ReactNode }>`
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+  background-color: ${(props) => (props.isClicked ? Primary.default : GreyScale.light)};
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 
 const Button = styled.div`
-    background-color: ${BackgroundColor};
-    width: 10px;
-    height: 10px;
-    border-radius: 100%;
+  background-color: ${BackgroundColor};
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
 `;
 
 const ToggleTitle = styled.div`
-    font-family: 'Pretendard';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 1.4rem;
-    color: ${Basic.default};
-`;
\ No newline at end of file
+  font-family: 'Pretendard';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.4rem;
+  color: ${Basic.default};
+`;
diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts
index cadce129..cc95808e 100644
--- a/src/hooks/useInput.ts
+++ b/src/hooks/useInput.ts
@@ -4,19 +4,18 @@ type Handler = (e: any) => void;
 type ReturnTypes<T = any> = [T, Handler, Dispatch<SetStateAction<T>>];
 
 const useInput = <T = any>(initialValue: T, regExp?: RegExp): ReturnTypes<T> => {
-    const [value, setValue] = useState(initialValue);
-    const handler: Handler = (e) => {
-        if (regExp) {
-            if (regExp.test(e.target.value)) {
-                setValue(e.target.value);
-            }
-        }
-        else {
-            setValue(e.target.value);
-        }
-    };
+  const [value, setValue] = useState(initialValue);
+  const handler: Handler = (e) => {
+    if (regExp) {
+      if (regExp.test(e.target.value)) {
+        setValue(e.target.value);
+      }
+    } else {
+      setValue(e.target.value);
+    }
+  };
 
-    return [value, handler, setValue];
+  return [value, handler, setValue];
 };
 
-export default useInput;
\ No newline at end of file
+export default useInput;
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
new file mode 100644
index 00000000..835f5b90
--- /dev/null
+++ b/src/pages/admin/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import PostAdmin from 'src/components/admin/PostAdmin';
+import styled from 'styled-components';
+
+const Admin = () => {
+  return (
+    <Wrapper>
+      <Title>관리자 페이지</Title>
+      <PostAdmin />
+    </Wrapper>
+  );
+};
+
+export default Admin;
+
+const Wrapper = styled.div`
+  position: relative;
+  width: 100%;
+  /* height: 100vh; */
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  @media (max-width: 900px) {
+    height: 100%;
+    margin: 90px 0px;
+  }
+`;
+
+const Title = styled.div`
+  font-size: 4rem;
+  font-weight: bold;
+`;
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index fe58c647..42c992f4 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -69,7 +69,7 @@ const StContentsWrapper = styled.div`
   position: relative;
   height: 100rem;
   width: 100rem;
-  
+
   @media (max-width: 1200px) {
     width: 100%;
     padding: 0;
@@ -84,5 +84,4 @@ const StBorderWrapper = styled.div`
   @media (max-width: 1200px) {
     display: none;
   }
-
 `;
diff --git a/src/types/request.d.ts b/src/types/request.d.ts
index 87615a03..116d3dfb 100644
--- a/src/types/request.d.ts
+++ b/src/types/request.d.ts
@@ -11,6 +11,32 @@ export interface IShareURL {
   youtube: string;
 }
 
+export interface UploadData {
+  title: string;
+  subtitle: string;
+  dev_stack: string;
+  tumbnail: File | null;
+  version: number;
+  team_name: string;
+  team_member: {
+    pm: string[];
+    design: string[];
+    frontend: string[];
+    backend: string[];
+  };
+  start_date: string;
+  end_date: string;
+  description: string;
+  link: {
+    github: string;
+    youtube: string;
+    web: string;
+  };
+  category: string;
+  login_email: string;
+  images: File[];
+}
+
 export interface IArchivingData {
   id: number;
   title: string;