diff --git a/components/Cards/index.tsx b/components/Cards/index.tsx
deleted file mode 100644
index eacd7411c..000000000
--- a/components/Cards/index.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useFetch } from '@/hooks/useFetch';
-import { formatDate, generateTimeText } from '@/hooks/date';
-import styles from '@/components/Cards/index.module.css';
-import Image from 'next/image';
-import { SyntheticEvent } from 'react';
-
-export interface Link {
-  id: string;
-  url: string;
-  imageSource?: string;
-  title: string;
-  createdAt: Date;
-  description: string;
-}
-
-interface FolderData {
-  folder: {
-    links: Link[];
-  };
-}
-
-const AddThumbnail = (e: SyntheticEvent<HTMLImageElement, Event>) => {
-  e.currentTarget.src = '/thumbnail.svg';
-};
-
-function Cards({ url }: { url: string }) {
-  // props를 비구조화 할당하여 사용
-  const CardData = useFetch<FolderData>(url);
-
-  return (
-    <div className={styles.card_grid_container}>
-      {CardData ? (
-        CardData.folder.links.map((link: Link) => (
-          <a href={link.url} key={link.id}>
-            <div className={styles.card}>
-              <div className={styles.card_img_div}>
-                {link.imageSource ? (
-                  <img
-                    src={link.imageSource}
-                    className={styles.card_img}
-                    alt={link.title}
-                    onError={AddThumbnail}
-                  />
-                ) : (
-                  <Image
-                    width="320"
-                    height="200"
-                    src={'/thumbnail.svg'}
-                    className={styles.card_img}
-                    alt="thumbnail_img"
-                  />
-                )}
-              </div>
-              <div className={styles.card_txt_div}>
-                <div className={styles.card_txt_div_top}>
-                  <p className={styles.left_time_p}>
-                    {generateTimeText(link.createdAt)}
-                  </p>
-                </div>
-                <div className={styles.card_txt_div_body}>
-                  <p className={styles.card_txt_div_body}>{link.description}</p>
-                </div>
-                <div className={styles.card_txt_date}>
-                  {formatDate(link.createdAt)}
-                </div>
-              </div>
-            </div>
-          </a>
-        ))
-      ) : (
-        <div className={styles.noLinkText}>저장된 링크가 없습니다</div>
-      )}
-    </div>
-  );
-}
-
-export default Cards;
diff --git a/components/Cardsfolder/index.module.css b/components/FolderCards/index.module.css
similarity index 96%
rename from components/Cardsfolder/index.module.css
rename to components/FolderCards/index.module.css
index 5e6643fd7..f48d1d790 100644
--- a/components/Cardsfolder/index.module.css
+++ b/components/FolderCards/index.module.css
@@ -6,6 +6,10 @@
   border-radius: 10px;
 }
 
+.card :hover {
+  background-color: var(--gray10);
+}
+
 .card_txt_div_body {
   margin: 0.8rem 0;
   font-size: 1.2rem;
@@ -100,8 +104,7 @@
   text-align: center;
   padding: 0.7rem 0;
 }
-
-.isHovering {
+.options:hover {
   background-color: var(--gray10);
 }
 
diff --git a/components/Cardsfolder/index.tsx b/components/FolderCards/index.tsx
similarity index 64%
rename from components/Cardsfolder/index.tsx
rename to components/FolderCards/index.tsx
index 66ce25a65..2f22f4621 100644
--- a/components/Cardsfolder/index.tsx
+++ b/components/FolderCards/index.tsx
@@ -1,27 +1,28 @@
 import { useFetch } from '@/hooks/useFetch';
-import { formatDate, generateTimeText } from '../../hooks/date';
+import { formatDate, generateTimeText } from '../../utils/date';
 import thumbnail from '@/public/thumbnail.svg';
-import styles from '@/components/Cardsfolder/index.module.css';
+import styles from '@/components/FolderCards/index.module.css';
 import starticon from '@/public/staricon.svg';
 import moreoptionicon from '@/public/moreoptionicon.svg';
 import { useState } from 'react';
 import ModalFolder from '@/components/modal/ModalFolder';
 import ModalDelete from '@/components/modal/ModalDelete';
 import Image from 'next/image';
+import Link from 'next/link';
 
 interface Link {
   id: string;
   url: string;
-  image_source?: string; // 이미지 소스는 옵셔널
+  image_source?: string;
+  thumbnail?: string;
   title: string;
   created_at: Date;
   description: string;
 }
 
-function Cardsfolder({ url }: { url: string }) {
-  // props를 비구조화 할당하여 사용
-  const cardData = useFetch<{ data: Link[] }>(url);
-  const [hoverStates, setHoverStates] = useState<boolean[]>([]);
+function FolderCards({ url }: { url: string }) {
+  const card = useFetch<{ data: Link[] }>(url);
+  const cardData = card?.data;
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
   const [popoverStates, setPopoverStates] = useState<{
@@ -30,22 +31,6 @@ function Cardsfolder({ url }: { url: string }) {
   const [selectedCardDescription, setSelectedCardDescription] =
     useState<string>('');
 
-  const handleMouseOver = (index: number) => {
-    setHoverStates((prevStates) => {
-      const updatedStates = [...prevStates];
-      updatedStates[index] = true;
-      return updatedStates;
-    });
-  };
-
-  const handleMouseOut = (index: number) => {
-    setHoverStates((prevStates) => {
-      const updatedStates = [...prevStates];
-      updatedStates[index] = false;
-      return updatedStates;
-    });
-  };
-
   const handleCloseModal = () => {
     setIsModalOpen(false);
   };
@@ -56,6 +41,7 @@ function Cardsfolder({ url }: { url: string }) {
 
   const handleClickButton = () => {
     setIsModalOpen((prev) => !prev);
+    setIsModalDeleteOpen(false);
   };
 
   const handleDeleteClickButton = (linkDescription: string) => {
@@ -71,46 +57,25 @@ function Cardsfolder({ url }: { url: string }) {
     setSelectedCardDescription(linkDescription);
   };
 
-  const handleFavoriteButtonClick = (
-    e: React.MouseEvent<HTMLButtonElement>
-  ) => {
-    e.stopPropagation();
-  };
-
-  if (!cardData) {
-    return null;
-  }
-
   return (
     <div className={styles.card_grid_container}>
-      {cardData.data.length ? (
-        cardData.data.map((link, index) => (
-          <div
-            className={`${styles.card_container} ${
-              hoverStates[index] ? styles.isHovering : ''
-            }`}
-            key={link.id}
-            onMouseOver={() => handleMouseOver(index)}
-            onMouseOut={() => handleMouseOut(index)}
-          >
-            <a href={link.url}>
+      {!cardData ? (
+        <div className={styles.noLinkText}>
+          <p>저장된 링크가 없습니다</p>
+        </div>
+      ) : (
+        cardData.map((link) => (
+          <div className={styles.card_container} key={link.id}>
+            <Link href={link.url}>
               <div className={styles.card}>
                 <div className={styles.card_img_div}>
-                  {link.image_source ? (
-                    <img
-                      src={link.image_source}
-                      className={styles.card_img}
-                      alt={link.title}
-                    />
-                  ) : (
-                    <Image
-                      width="320"
-                      height="200"
-                      src={thumbnail}
-                      className={styles.card_img}
-                      alt={link.title}
-                    />
-                  )}
+                  <Image
+                    width="320"
+                    height="200"
+                    src={link.image_source ? link.image_source : thumbnail}
+                    className={styles.card_img}
+                    alt={link.title}
+                  />
                 </div>
                 <div className={styles.card_txt_div}>
                   <div className={styles.card_txt_div_top}>
@@ -128,7 +93,7 @@ function Cardsfolder({ url }: { url: string }) {
                   </div>
                 </div>
               </div>
-            </a>
+            </Link>
             <button
               className={styles.card_moreoption_icon}
               onClick={() => handleOptionButtonClick(link.id, link.description)}
@@ -149,18 +114,11 @@ function Cardsfolder({ url }: { url: string }) {
                 </div>
               </div>
             )}
-            <button
-              className={styles.card_favorite_icon}
-              onClick={handleFavoriteButtonClick}
-            >
+            <button className={styles.card_favorite_icon}>
               <Image src={starticon} alt="즐겨찾기 별 아이콘" />
             </button>
           </div>
         ))
-      ) : (
-        <div className={styles.noLinkText}>
-          <p>저장된 링크가 없습니다</p>
-        </div>
       )}
       {isModalOpen && (
         <ModalFolder
@@ -183,4 +141,4 @@ function Cardsfolder({ url }: { url: string }) {
   );
 }
 
-export default Cardsfolder;
+export default FolderCards;
diff --git a/components/Folderdata/index.module.css b/components/Folderdata/index.module.css
index 08122d9c1..2048a6b1d 100644
--- a/components/Folderdata/index.module.css
+++ b/components/Folderdata/index.module.css
@@ -17,3 +17,12 @@
   flex-direction: column;
   align-items: center;
 }
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 24.4rem;
+  padding: 2rem 0 6rem;
+  background-color: var(--light-blue);
+}
diff --git a/components/Folderdata/index.tsx b/components/Folderdata/index.tsx
index 55cc9cae2..dd072edd4 100644
--- a/components/Folderdata/index.tsx
+++ b/components/Folderdata/index.tsx
@@ -1,6 +1,6 @@
 import { useFetch } from '@/hooks/useFetch';
 import styles from './index.module.css';
-import styled from 'styled-components';
+import Image from 'next/image';
 
 // Folder 데이터의 타입 정의
 interface Owner {
@@ -20,25 +20,15 @@ interface FolderDataResponse {
 const BASE_URL_FOLDER = 'https://bootcamp-api.codeit.kr/api/sample/folder';
 
 function FolderData() {
-  // useFetch 훅을 이용하여 데이터 가져오기
   const folderData = useFetch<FolderDataResponse>(BASE_URL_FOLDER);
 
-  // styled-components를 사용하여 스타일링된 컴포넌트 생성
-  const Container = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 24.4rem;
-    padding: 2rem 0 6rem;
-    background-color: var(--light-blue);
-  `;
-
   return (
-    <Container>
+    <div className={styles.container}>
       {folderData && (
         <div className={styles.folderInfo}>
-          <img
+          <Image
+            width="60"
+            height="60"
             src={folderData.folder.owner.profileImageSource}
             className={styles.folderProfile}
             alt="프로필"
@@ -49,7 +39,7 @@ function FolderData() {
           <h1 className={styles.folderName}>{folderData.folder.name}</h1>
         </div>
       )}
-    </Container>
+    </div>
   );
 }
 
diff --git a/components/Foldermenu/foldermenu.module.css b/components/Foldermenu/foldermenu.module.css
new file mode 100644
index 000000000..d630765a2
--- /dev/null
+++ b/components/Foldermenu/foldermenu.module.css
@@ -0,0 +1,23 @@
+.folderListContainer {
+  display: flex;
+  justify-content: start;
+  gap: 0.8rem;
+  position: relative;
+  flex-wrap: wrap;
+}
+
+.folderMenuContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2.4rem;
+  height: 3.2rem;
+  margin-bottom: 2.4rem;
+}
+
+.imageContainer {
+  display: flex;
+  justify-content: center;
+  gap: 1.2rem;
+  height: 1.8rem;
+}
diff --git a/components/Foldermenu/index.tsx b/components/Foldermenu/index.tsx
index 82709fc83..7fb467edb 100644
--- a/components/Foldermenu/index.tsx
+++ b/components/Foldermenu/index.tsx
@@ -1,21 +1,24 @@
 import { useFetch } from '../../hooks/useFetch';
-import styled from 'styled-components';
 import styles from './index.module.css';
 import addfolderIcon from '@/public/addfolder.svg';
 import deleteicon from '@/public/deleteicon.svg';
 import changenameicon from '@/public/changenameicon.svg';
 import shareicon from '@/public/shareicon.svg';
 import { useState } from 'react';
-import Cardsfolder from '@/components/Cardsfolder';
+import FolderCards from '@/components/FolderCards';
 import ModalFolder from '@/components/modal/ModalFolder';
 import ModalShare from '@/components/modal/ModalShare';
 import ModalDelete from '@/components/modal/ModalDelete';
 import SearchableBar from '@/components/SearchableBar';
 import Image from 'next/image';
-
-const BASE_FOLDER_ID = 'all';
-
-interface Link {
+import S from './foldermenu.module.css';
+import {
+  BASE_URL_FOLDER,
+  BASE_URL_ALL_FOLDER,
+  BASE_FOLDER_ID,
+} from '@/constant/folder-constant';
+
+interface Card {
   id: string;
   url: string;
   title: string;
@@ -30,75 +33,36 @@ interface FolderResponse {
   data: Folder[];
 }
 
-const BASE_URL_FOLDER = 'https://bootcamp-api.codeit.kr/api/users/1/folders';
-const BASE_URL_ALL_FOLDER = 'https://bootcamp-api.codeit.kr/api/users/1/links';
-
-const FolderListContainer = styled.div`
-  display: flex;
-  justify-content: start;
-  gap: 0.8rem;
-  position: relative;
-  flex-wrap: wrap;
-`;
-
-const FolderMenuContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 2.4rem;
-  height: 3.2rem;
-  margin-bottom: 2.4rem;
-`;
-
-const ImageContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  gap: 1.2rem;
-  height: 1.8rem;
-`;
-
 function Foldermenu() {
-  const folderData = useFetch<FolderResponse>(BASE_URL_FOLDER);
+  const folder = useFetch<FolderResponse>(BASE_URL_FOLDER);
+  const folderNames = folder?.data;
   const [activeButton, setActiveButton] = useState('전체');
   const [url, setUrl] = useState(BASE_URL_ALL_FOLDER);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isModalShareOpen, setIsModalShareOpen] = useState(false);
-  const [isModalRenameOpen, setIsModalRenameOpen] = useState(false);
-  const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
   const [currentFolderId, setCurrentFolderId] = useState<string | null>(
     BASE_FOLDER_ID
   );
-  const [filteredLinks, setFilteredLinks] = useState<Link[]>([]);
-
-  function handleCloseModal() {
-    setIsModalOpen(false);
-  }
-  function handleClickButton() {
-    setIsModalOpen(true);
-  }
-
-  function handleCloseShareModal() {
-    setIsModalShareOpen(false);
-  }
-  function handleClickShareButton() {
-    setIsModalShareOpen(true);
-  }
-
-  function handleCloseRenameModal() {
-    setIsModalRenameOpen(false);
-  }
-  function handleClickRenameButton() {
-    setIsModalRenameOpen(true);
-  }
-
-  function handleCloseDeleteModal() {
-    setIsModalDeleteOpen(false);
-  }
-  function handleClickDeleteButton() {
-    setIsModalDeleteOpen(true);
-  }
+  const [filteredLinks, setFilteredLinks] = useState<Card[]>([]);
+  const [modalState, setModalState] = useState({
+    addFolder: false,
+    shareFolder: false,
+    renameFolder: false,
+    deleteFolder: false,
+  });
+
+  const handleModalOpen = (modalType: string) => {
+    setModalState((prevState) => ({
+      ...prevState,
+      [modalType]: true,
+    }));
+  };
 
-  const handleSearch = (filteredLinks: Link[]) => {
+  const handleModalClose = (modalType: string) => {
+    setModalState((prevState) => ({
+      ...prevState,
+      [modalType]: false,
+    }));
+  };
+  const handleSearch = (filteredLinks: Card[]) => {
     setFilteredLinks(filteredLinks);
   };
 
@@ -119,7 +83,7 @@ function Foldermenu() {
     <div>
       <SearchableBar links={filteredLinks} onSearch={handleSearch} />
       <div className={styles.buttonContainer}>
-        <FolderListContainer>
+        <div className={S.folderListContainer}>
           <button
             className={`${styles.folderButtons} ${styles.allFolders} ${
               currentFolderId == BASE_FOLDER_ID ? styles.active : ''
@@ -129,21 +93,21 @@ function Foldermenu() {
           >
             전체
           </button>
-          {folderData?.data &&
-            folderData?.data.map((folderdata) => (
+          {folderNames &&
+            folderNames.map((foldername) => (
               <button
                 className={`${styles.folderButtons} ${
-                  currentFolderId == folderdata.id ? styles.active : ''
+                  currentFolderId == foldername.id ? styles.active : ''
                 }`}
-                key={folderdata.id}
+                key={foldername.id}
                 onClick={handleOnClick}
-                id={folderdata.id}
+                id={foldername.id}
               >
-                {folderdata.name}
+                {foldername.name}
               </button>
             ))}
-        </FolderListContainer>
-        <button onClick={handleClickButton}>
+        </div>
+        <button onClick={() => handleModalOpen('addFolder')}>
           <Image
             className={styles.addFolderIcon}
             src={addfolderIcon}
@@ -151,57 +115,57 @@ function Foldermenu() {
           />
         </button>
       </div>
-      <FolderMenuContainer>
+      <div className={S.folderMenuContainer}>
         <p className={styles.folderName}>{activeButton}</p>
         {activeButton === '전체' && (
-          <ImageContainer>
-            <button onClick={handleClickShareButton}>
+          <div className={S.imageContainer}>
+            <button onClick={() => handleModalOpen('shareFolder')}>
               <Image src={shareicon} alt="폴더 공유 아이콘" />
             </button>
-            <button onClick={handleClickRenameButton}>
+            <button onClick={() => handleModalOpen('renameFolder')}>
               <Image src={changenameicon} alt="폴더 이름 변경 아이콘" />
             </button>
-            <button onClick={handleClickDeleteButton}>
+            <button onClick={() => handleModalOpen('deleteFolder')}>
               <Image src={deleteicon} alt="폴더 삭제 아이콘" />
             </button>
-          </ImageContainer>
+          </div>
         )}
-      </FolderMenuContainer>
-      <Cardsfolder url={url} />
+      </div>
+      <FolderCards url={url} />
 
-      {isModalOpen && (
+      {modalState.addFolder && (
         <ModalFolder
           title={'폴더 추가'}
           folderName={''}
-          onClose={handleCloseModal}
+          onClose={() => handleModalClose('addFolder')}
           buttonName={'추가하기'}
-          isModalOpen={isModalOpen}
+          isModalOpen={modalState.addFolder}
         />
       )}
-      {isModalShareOpen && (
+      {modalState.shareFolder && (
         <ModalShare
           title={'폴더 공유'}
           targetName={activeButton}
-          onClose={handleCloseShareModal}
-          isModalOpen={isModalShareOpen}
+          onClose={() => handleModalClose('shareFolder')}
+          isModalOpen={modalState.shareFolder}
           currentFolderId={currentFolderId}
         />
       )}
-      {isModalRenameOpen && (
+      {modalState.renameFolder && (
         <ModalFolder
           title={'폴더 이름 변경'}
           folderName={activeButton}
-          onClose={handleCloseRenameModal}
+          onClose={() => handleModalClose('renameFolder')}
           buttonName={'변경하기'}
-          isModalOpen={isModalRenameOpen}
+          isModalOpen={modalState.renameFolder}
         />
       )}
-      {isModalDeleteOpen && (
+      {modalState.deleteFolder && (
         <ModalDelete
           title={'폴더 삭제'}
           DeleteName={activeButton}
-          onClose={handleCloseDeleteModal}
-          isModalOpen={isModalDeleteOpen}
+          onClose={() => handleModalClose('deleteFolder')}
+          isModalOpen={modalState.deleteFolder}
         />
       )}
     </div>
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
index 2b38b30c1..7e6bc7097 100644
--- a/components/Footer/index.tsx
+++ b/components/Footer/index.tsx
@@ -1,54 +1,7 @@
-import facebook from '@/public/facebook.svg';
-import twitter from '@/public/twitter.svg';
-import youtube from '@/public/youtube.svg';
-import instagram from '@/public/instagram.svg';
+import { snsLists } from '@/constant/footer-constant';
 import styles from '@/components/Footer/index.module.css';
 import Image from 'next/image';
 
-interface SnsList {
-  id: string;
-  link: string;
-  img: string;
-  height: string;
-  width: string;
-  alt: string;
-}
-
-const snsLists: SnsList[] = [
-  {
-    id: '페이스북',
-    link: 'https://facebook.com/',
-    img: facebook,
-    height: '20',
-    width: '20',
-    alt: '페이스북 아이콘',
-  },
-  {
-    id: '트위터',
-    link: 'https://twitter.com/',
-    img: twitter,
-    height: '20',
-    width: '20',
-    alt: '트위터 아이콘',
-  },
-  {
-    id: '유튜브',
-    link: 'https://youtube.com/',
-    img: youtube,
-    height: '20',
-    width: '20',
-    alt: '유튜브 아이콘',
-  },
-  {
-    id: '인스타그램',
-    link: 'https://instagram.com/',
-    img: instagram,
-    height: '20',
-    width: '20',
-    alt: '인스타그램 아이콘',
-  },
-];
-
 function Footer() {
   return (
     <div className={styles.footer}>
diff --git a/components/IdInput/index.module.css b/components/IdInput/index.module.css
index 4df68bcd2..fc8cc0fcd 100644
--- a/components/IdInput/index.module.css
+++ b/components/IdInput/index.module.css
@@ -17,7 +17,7 @@
   color: var(--text-content-gray);
 }
 
-.focused {
+.input__form:focus {
   border: 1px solid var(--primary);
 }
 
diff --git a/components/IdInput/index.tsx b/components/IdInput/index.tsx
index 88e3e1b02..3904739b4 100644
--- a/components/IdInput/index.tsx
+++ b/components/IdInput/index.tsx
@@ -1,25 +1,26 @@
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import styles from '@/components/IdInput/index.module.css';
 
-function IdInput({ placeholder = '내용을 입력하세요' }) {
-  const [value, setValue] = useState<string>('');
-  const [isError, setIsError] = useState(false);
-  const [ErrorMsg, setErrorMsg] = useState('');
-  const [isFocused, setIsFocused] = useState<boolean>(false);
-
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
+export interface InputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  isError: boolean;
+  ErrorMsg: string;
+  onBlur: () => void;
+}
 
-  const handleBlur = () => {
-    setIsFocused(false);
-    if (value == '') {
-      setIsError(true);
-      setErrorMsg('내용을 입력하세요.');
-    } else {
-      setIsError(false);
-      setErrorMsg('');
-    }
+function IdInput({
+  value,
+  onChange,
+  placeholder,
+  isError,
+  ErrorMsg,
+  onBlur,
+}: InputProps) {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    onChange(newValue);
   };
 
   return (
@@ -30,12 +31,9 @@ function IdInput({ placeholder = '내용을 입력하세요' }) {
           placeholder={placeholder}
           alt="아이디 인풋 폼"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          className={`${styles.input__form} ${
-            isFocused ? styles.focused : ''
-          } ${isError ? styles.error : ''}`}
+          onChange={handleChange}
+          onBlur={onBlur}
+          className={`${styles.input__form} ${isError ? styles.error : ''}`}
         />
       </div>
       {isError && <p className={styles.error__msg}>{ErrorMsg}</p>}
diff --git a/components/Navigation/index.module.css b/components/Navigation/index.module.css
index fb0cc6ee7..af501dad6 100644
--- a/components/Navigation/index.module.css
+++ b/components/Navigation/index.module.css
@@ -3,7 +3,7 @@
   justify-content: center;
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 99;
   width: 100%;
   background-color: var(--light-blue);
 }
diff --git a/components/Navigation/index.tsx b/components/Navigation/index.tsx
index 3ef59c9a1..9cb5fa8a6 100644
--- a/components/Navigation/index.tsx
+++ b/components/Navigation/index.tsx
@@ -3,6 +3,7 @@ import styles from './index.module.css';
 import { useFetch } from '@/hooks/useFetch';
 import Image from 'next/image';
 import Link from 'next/link';
+import { BASE_URL_USER } from '@/constant/navigation-constant';
 
 interface UserProfile {
   data: {
@@ -11,8 +12,6 @@ interface UserProfile {
   }[];
 }
 
-const BASE_URL_USER = 'https://bootcamp-api.codeit.kr/api/users/1';
-
 function Navigation() {
   const userProfile = useFetch<UserProfile>(BASE_URL_USER);
 
@@ -28,7 +27,9 @@ function Navigation() {
         </Link>
         {userProfile ? (
           <div className={styles.userProfile}>
-            <img
+            <Image
+              width="28"
+              height="28"
               src={userProfile.data[0].image_source}
               alt="유저 프로필사진"
               className={styles.userProfileImg}
diff --git a/components/PasswordInput/index.module.css b/components/PasswordInput/index.module.css
index e3d50ee88..ef3207ee7 100644
--- a/components/PasswordInput/index.module.css
+++ b/components/PasswordInput/index.module.css
@@ -17,7 +17,7 @@
   color: var(--text-content-gray);
 }
 
-.focused {
+.input__form:focus {
   border: 1px solid var(--primary);
 }
 
diff --git a/components/PasswordInput/index.tsx b/components/PasswordInput/index.tsx
index 943d60542..6dbace879 100644
--- a/components/PasswordInput/index.tsx
+++ b/components/PasswordInput/index.tsx
@@ -1,49 +1,40 @@
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import styles from '@/components/PasswordInput/index.module.css';
 import eyeOnIcon from '@/public/eye-on.svg';
 import eyeOffIcon from '@/public/eye-off.svg';
 import Image from 'next/image';
+import type { InputProps } from '@/components/IdInput';
 
-function PasswordInput({ placeholder }) {
-  const [value, setValue] = useState<string>('');
-  const [isEyeOn, setIsEyeOn] = useState(false);
-  const [isError, setIsError] = useState(false);
-  const [ErrorMsg, setErrorMsg] = useState('');
-  const [isFocused, setIsFocused] = useState<boolean>(false);
+function PasswordInput({
+  value,
+  onChange,
+  placeholder,
+  isError,
+  ErrorMsg,
+  onBlur,
+}: InputProps) {
+  const [isEyeOn, setIsEyeOn] = useState<boolean>(false);
 
   const toggleEyeButton = () => {
     setIsEyeOn(!isEyeOn);
   };
 
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-    if (value == '') {
-      setIsError(true);
-      setErrorMsg('내용을 입력하세요.');
-    } else {
-      setIsError(false);
-      setErrorMsg('');
-    }
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    onChange(newValue);
   };
 
   return (
     <>
       <div className={styles.input__wrapper}>
         <input
-          type={isEyeOn ? 'password' : 'text'}
+          type={isEyeOn ? 'text' : 'password'}
           placeholder={placeholder}
           alt="인풋 폼"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          className={`${styles.input__form} ${
-            isFocused ? styles.focused : ''
-          } ${isError ? styles.error : ''}`}
+          onChange={handleChange}
+          onBlur={onBlur}
+          className={`${styles.input__form}  ${isError ? styles.error : ''}`}
         />
         <button
           type="button"
diff --git a/components/Cards/index.module.css b/components/ShareCards/index.module.css
similarity index 100%
rename from components/Cards/index.module.css
rename to components/ShareCards/index.module.css
diff --git a/components/ShareCards/index.tsx b/components/ShareCards/index.tsx
new file mode 100644
index 000000000..713b1ac4b
--- /dev/null
+++ b/components/ShareCards/index.tsx
@@ -0,0 +1,80 @@
+import { useFetch } from '@/hooks/useFetch';
+import { formatDate, generateTimeText } from '@/utils/date';
+import styles from '@/components/ShareCards/index.module.css';
+import Image from 'next/image';
+import { SyntheticEvent, useState } from 'react';
+import thumbnail from '@/public/thumbnail.svg';
+import Link from 'next/link';
+
+export interface CardData {
+  id: string;
+  url: string;
+  imageSource?: string;
+  title: string;
+  createdAt: Date;
+  description: string;
+}
+
+interface FolderData {
+  folder: {
+    links: CardData[];
+  };
+}
+
+function ShareCards({ url }: { url: string }) {
+  const Card = useFetch<FolderData>(url);
+  const CardDatas = Card?.folder.links;
+  const [imageErrors, setImageErrors] = useState<{ [key: string]: boolean }>(
+    {}
+  );
+
+  const handleImageError = (id: string) => {
+    setImageErrors((prev) => ({ ...prev, [id]: true }));
+  };
+
+  return (
+    <div className={styles.card_grid_container}>
+      {!CardDatas ? (
+        <div className={styles.noLinkText}>저장된 링크가 없습니다</div>
+      ) : (
+        CardDatas.map((CardData: CardData) => (
+          <Link href={CardData.url} key={CardData.id}>
+            <div className={styles.card}>
+              <div className={styles.card_img_div}>
+                <Image
+                  width="320"
+                  height="200"
+                  src={
+                    imageErrors[CardData.id]
+                      ? thumbnail
+                      : CardData.imageSource || thumbnail
+                  }
+                  className={styles.card_img}
+                  alt={CardData.imageSource ? CardData.title : '썸네일'}
+                  onError={() => handleImageError(CardData.id)}
+                />
+              </div>
+              <div className={styles.card_txt_div}>
+                <div className={styles.card_txt_div_top}>
+                  <p className={styles.left_time_p}>
+                    {generateTimeText(CardData.createdAt)}
+                  </p>
+                </div>
+                <div className={styles.card_txt_div_body}>
+                  <p className={styles.card_txt_div_body}>
+                    {CardData.description}
+                  </p>
+                </div>
+                <div className={styles.card_txt_date}>
+                  {formatDate(CardData.createdAt)}
+                </div>
+              </div>
+            </div>
+          </Link>
+        ))
+      )}
+    </div>
+  );
+}
+
+export default ShareCards;
diff --git a/components/modal/ModalDelete.tsx b/components/modal/ModalDelete.tsx
index 14e10ee10..2ecd17ae8 100644
--- a/components/modal/ModalDelete.tsx
+++ b/components/modal/ModalDelete.tsx
@@ -21,7 +21,7 @@ const ModalDelete: React.FC<ModalDeleteProps> = ({
   };
 
   return (
-    <div className={`${styles.modal} ${isModalOpen ? styles.show : ''}`}>
+    <div className={styles.modal}>
       <div className={styles.modal__content}>
         <div className={styles.modal__content__header}>{title}</div>
 
diff --git a/components/modal/modalDelete.module.css b/components/modal/modalDelete.module.css
index 97956ce4c..6462c3d36 100644
--- a/components/modal/modalDelete.module.css
+++ b/components/modal/modalDelete.module.css
@@ -51,7 +51,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-
   width: 100%;
   cursor: pointer;
   padding: 1.6rem 11.2rem;
diff --git a/constant/folder-constant.js b/constant/folder-constant.js
new file mode 100644
index 000000000..c49f59f60
--- /dev/null
+++ b/constant/folder-constant.js
@@ -0,0 +1,5 @@
+export const BASE_URL_FOLDER =
+  'https://bootcamp-api.codeit.kr/api/users/1/folders';
+export const BASE_URL_ALL_FOLDER =
+  'https://bootcamp-api.codeit.kr/api/users/1/links';
+export const BASE_FOLDER_ID = 'all';
diff --git a/constant/footer-constant.ts b/constant/footer-constant.ts
new file mode 100644
index 000000000..433b5a7ab
--- /dev/null
+++ b/constant/footer-constant.ts
@@ -0,0 +1,48 @@
+import facebook from '@/public/facebook.svg';
+import twitter from '@/public/twitter.svg';
+import youtube from '@/public/youtube.svg';
+import instagram from '@/public/instagram.svg';
+
+interface SnsList {
+  id: string;
+  link: string;
+  img: string;
+  height: string;
+  width: string;
+  alt: string;
+}
+
+export const snsLists: SnsList[] = [
+  {
+    id: '페이스북',
+    link: 'https://facebook.com/',
+    img: facebook,
+    height: '20',
+    width: '20',
+    alt: '페이스북 아이콘',
+  },
+  {
+    id: '트위터',
+    link: 'https://twitter.com/',
+    img: twitter,
+    height: '20',
+    width: '20',
+    alt: '트위터 아이콘',
+  },
+  {
+    id: '유튜브',
+    link: 'https://youtube.com/',
+    img: youtube,
+    height: '20',
+    width: '20',
+    alt: '유튜브 아이콘',
+  },
+  {
+    id: '인스타그램',
+    link: 'https://instagram.com/',
+    img: instagram,
+    height: '20',
+    width: '20',
+    alt: '인스타그램 아이콘',
+  },
+];
diff --git a/constant/navigation-constant.js b/constant/navigation-constant.js
new file mode 100644
index 000000000..3806fc747
--- /dev/null
+++ b/constant/navigation-constant.js
@@ -0,0 +1 @@
+export const BASE_URL_USER = 'https://bootcamp-api.codeit.kr/api/users/1';
diff --git a/constant/shared-constant.js b/constant/shared-constant.js
new file mode 100644
index 000000000..367ea8bb5
--- /dev/null
+++ b/constant/shared-constant.js
@@ -0,0 +1,2 @@
+export const BASE_URL_FOLDER_SAMPLE =
+  'https://bootcamp-api.codeit.kr/api/sample/folder';
diff --git a/constant/signin-constant.js b/constant/signin-constant.js
new file mode 100644
index 000000000..db3646b20
--- /dev/null
+++ b/constant/signin-constant.js
@@ -0,0 +1 @@
+export const SIGN_IN_BASE_URL = 'https://bootcamp-api.codeit.kr/api/sign-in';
diff --git a/constant/signup-constant.js b/constant/signup-constant.js
new file mode 100644
index 000000000..3d5438ae2
--- /dev/null
+++ b/constant/signup-constant.js
@@ -0,0 +1,4 @@
+export const CHECK_DUPLICATE_BASE_URL =
+  'https://bootcamp-api.codeit.kr/api/check-email';
+
+export const SIGN_UP_BASE_URL = 'https://bootcamp-api.codeit.kr/api/sign-up';
diff --git a/constant/testuser.js b/constant/testuser.js
new file mode 100644
index 000000000..4504586bc
--- /dev/null
+++ b/constant/testuser.js
@@ -0,0 +1,4 @@
+export const testUser = {
+  email: 'test@codeit.com',
+  password: 'codeit101',
+};
diff --git a/hooks/useSignInId.ts b/hooks/useSignInId.ts
new file mode 100644
index 000000000..8fd39bcbd
--- /dev/null
+++ b/hooks/useSignInId.ts
@@ -0,0 +1,40 @@
+import validateEmail from '@/utils/emailRegrex';
+import { useState } from 'react';
+
+function useSignInId() {
+  const [email, setEmail] = useState<string>('');
+  const [isIdError, setIsIdError] = useState<boolean>(false);
+  const [idErrorMsg, setIdErrorMsg] = useState<string>('');
+
+  const handleEmailChange = (newValue: string) => {
+    setEmail(newValue);
+  };
+
+  const handleIdBlur = () => {
+    if (email == '') {
+      setIsIdError(true);
+      setIdErrorMsg('이메일을 입력해 주세요.');
+    } else if (!validateEmail(email)) {
+      setIsIdError(true);
+      setIdErrorMsg('올바른 이메일 주소가 아닙니다.');
+    } else {
+      setIsIdError(false);
+      setIdErrorMsg('');
+    }
+  };
+  const handleIdErrorOnSubmit = () => {
+    setIsIdError(true);
+    setIdErrorMsg('이메일을 확인해 주세요.');
+  };
+
+  return {
+    email,
+    isIdError,
+    idErrorMsg,
+    handleEmailChange,
+    handleIdBlur,
+    handleIdErrorOnSubmit,
+  };
+}
+
+export default useSignInId;
diff --git a/hooks/useSignInPwd.ts b/hooks/useSignInPwd.ts
new file mode 100644
index 000000000..a720a4524
--- /dev/null
+++ b/hooks/useSignInPwd.ts
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+function useSignInPwd() {
+  const [password, setPassword] = useState<string>('');
+
+  const [isPwdError, setIsPwdError] = useState<boolean>(false);
+  const [pwdErrorMsg, setPwdErrorMsg] = useState<string>('');
+
+  const handlePasswordChange = (newValue: string) => {
+    setPassword(newValue);
+  };
+
+  const handlePwdBlur = () => {
+    if (password == '') {
+      setIsPwdError(true);
+      setPwdErrorMsg('비밀번호를 입력해 주세요.');
+    } else {
+      setIsPwdError(false);
+      setPwdErrorMsg('');
+    }
+  };
+  const handlePWdErrorOnSubmit = () => {
+    setIsPwdError(true);
+    setPwdErrorMsg('비밀번호를 확인해 주세요.');
+  };
+
+  return {
+    password,
+    isPwdError,
+    pwdErrorMsg,
+    handlePasswordChange,
+    handlePwdBlur,
+    handlePWdErrorOnSubmit,
+  };
+}
+
+export default useSignInPwd;
diff --git a/hooks/useSignUpId.ts b/hooks/useSignUpId.ts
new file mode 100644
index 000000000..376b60f37
--- /dev/null
+++ b/hooks/useSignUpId.ts
@@ -0,0 +1,72 @@
+import validateEmail from '@/utils/emailRegrex';
+import { useState } from 'react';
+import { CHECK_DUPLICATE_BASE_URL } from '@/constant/signup-constant';
+
+function useSignUpId() {
+  const [email, setEmail] = useState<string>('');
+  const [isIdError, setIsIdError] = useState<boolean>(false);
+  const [idErrorMsg, setIdErrorMsg] = useState<string>('');
+
+  const handleEmailChange = (newValue: string) => {
+    setEmail(newValue);
+  };
+
+  const handleIdBlur = async () => {
+    if (email == '') {
+      setIsIdError(true);
+      setIdErrorMsg('이메일을 입력해 주세요.');
+      return;
+    }
+
+    if (!validateEmail(email)) {
+      setIsIdError(true);
+      setIdErrorMsg('올바른 이메일 주소가 아닙니다.');
+      return;
+    }
+
+    try {
+      const response = await fetch(CHECK_DUPLICATE_BASE_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+
+        if (!data.isUsableNickname) {
+          setIsIdError(false);
+          setIdErrorMsg('');
+        }
+      } else {
+        if (response.status === 409) {
+          setIsIdError(true);
+          setIdErrorMsg('이미 사용 중인 이메일입니다.');
+        } else {
+          throw new Error('이메일 중복 확인에 실패했습니다.');
+        }
+      }
+    } catch (error) {
+      console.error('Error:', error);
+      setIsIdError(true);
+      setIdErrorMsg('이메일 중복 확인에 실패했습니다.');
+    }
+  };
+  const handleIdErrorOnSubmit = () => {
+    setIsIdError(true);
+    setIdErrorMsg('이메일을 확인해 주세요.');
+  };
+
+  return {
+    email,
+    isIdError,
+    idErrorMsg,
+    handleEmailChange,
+    handleIdBlur,
+    handleIdErrorOnSubmit,
+  };
+}
+
+export default useSignUpId;
diff --git a/hooks/useSignUpPwd.ts b/hooks/useSignUpPwd.ts
new file mode 100644
index 000000000..6a72522ef
--- /dev/null
+++ b/hooks/useSignUpPwd.ts
@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+function useSignUpPwd() {
+  const [password, setPassword] = useState<string>('');
+  const [isPwdError, setIsPwdError] = useState<boolean>(false);
+  const [pwdErrorMsg, setPwdErrorMsg] = useState<string>('');
+
+  const handlePasswordChange = (newValue: string) => {
+    setPassword(newValue);
+  };
+
+  const handlePwdBlur = () => {
+    const hasNumber = /\d/.test(password);
+    const hasAlphabet = /[a-z]/.test(password);
+    const isLengthValid = password.length >= 8;
+
+    if (!hasNumber || !hasAlphabet || !isLengthValid) {
+      setIsPwdError(true);
+      setPwdErrorMsg('비밀번호는 영문,숫자 조합 8자 이상 입력해 주세요.');
+    } else {
+      setIsPwdError(false);
+      setPwdErrorMsg('');
+    }
+  };
+  const handlePWdErrorOnSubmit = () => {
+    setIsPwdError(true);
+    setPwdErrorMsg('비밀번호를 확인해 주세요.');
+  };
+
+  return {
+    password,
+    isPwdError,
+    pwdErrorMsg,
+    handlePasswordChange,
+    handlePwdBlur,
+    handlePWdErrorOnSubmit,
+  };
+}
+
+export default useSignUpPwd;
diff --git a/hooks/useSignUpPwdCheck.ts b/hooks/useSignUpPwdCheck.ts
new file mode 100644
index 000000000..4602f0f0a
--- /dev/null
+++ b/hooks/useSignUpPwdCheck.ts
@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import useSignUpPwd from './useSignUpPwd';
+
+function useSignUpPwdCheck({ password }: { password: string }) {
+  const [passwordCheck, setPasswordCheck] = useState<string>('');
+  const [isPwdCheckError, setIsPwdCheckError] = useState<boolean>(false);
+  const [pwdCheckErrorMsg, setPwdCheckErrorMsg] = useState<string>('');
+
+  const handlePasswordCheckChange = (newValue: string) => {
+    setPasswordCheck(newValue);
+  };
+
+  const handlePwdCheckBlur = () => {
+    console.log(password);
+    if (passwordCheck === '') {
+      setIsPwdCheckError(true);
+      setPwdCheckErrorMsg('비밀번호를 입력해 주세요.');
+    } else if (passwordCheck !== password) {
+      setIsPwdCheckError(true);
+      setPwdCheckErrorMsg('비밀번호가 일치하지 않아요.');
+    } else {
+      setIsPwdCheckError(false);
+      setPwdCheckErrorMsg('');
+    }
+  };
+
+  const handlePWdCheckErrorOnSubmit = () => {
+    setIsPwdCheckError(true);
+    setPwdCheckErrorMsg('비밀번호를 확인해 주세요.');
+  };
+
+  return {
+    passwordCheck,
+    isPwdCheckError,
+    pwdCheckErrorMsg,
+    handlePasswordCheckChange,
+    handlePwdCheckBlur,
+    handlePWdCheckErrorOnSubmit,
+  };
+}
+
+export default useSignUpPwdCheck;
diff --git a/next.config.js b/next.config.js
index 40dc63821..13700dd90 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,7 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ['ssl.pstatic.net'],
+    remotePatterns: [{ hostname: '**' }],
   },
 };
 
diff --git a/pages/folder/index.tsx b/pages/folder/index.tsx
index 84da4d663..9937004d0 100644
--- a/pages/folder/index.tsx
+++ b/pages/folder/index.tsx
@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import Footer from '@/components/Footer';
 import Addlink from '@/components/Addlink';
 import Foldermenu from '@/components/Foldermenu';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
 /*테블릿 1124 이상 모바일 최소여백 32       테블릿 768~1199 모바일 375 ~767    */
 
@@ -38,19 +40,32 @@ const FooterWrapper = styled.footer`
 `;
 
 function FolderPage() {
+  const router = useRouter();
+
+  const handleLogout = () => {
+    localStorage.removeItem('accessToken');
+    router.push('/signin'); // 로그인 페이지로 이동
+  };
+
+  useEffect(() => {
+    const accessToken = localStorage.getItem('accessToken');
+    if (!accessToken) {
+      router.push('/signin'); // accessToken이 없으면 로그인 페이지로 이동
+    }
+  }, []);
+
   return (
-    <>
-      <PageWrapper>
-        <Navigation />
-        <Addlink />
-        <PageDisplay>
-          <Foldermenu />
-        </PageDisplay>
-        <FooterWrapper>
-          <Footer />
-        </FooterWrapper>
-      </PageWrapper>
-    </>
+    <PageWrapper>
+      <Navigation />
+      <Addlink />
+      <PageDisplay>
+        <button onClick={handleLogout}>로그아웃</button>
+        <Foldermenu />
+      </PageDisplay>
+      <FooterWrapper>
+        <Footer />
+      </FooterWrapper>
+    </PageWrapper>
   );
 }
 
diff --git a/pages/shared/index.module.css b/pages/shared/index.module.css
new file mode 100644
index 000000000..6f6e9fe02
--- /dev/null
+++ b/pages/shared/index.module.css
@@ -0,0 +1,21 @@
+.pageDisplay {
+  display: flex;
+  row-gap: 4rem;
+  padding: 4rem 0 10rem;
+  flex-direction: column;
+  margin: 0 auto;
+  width: 106rem;
+
+  @media (max-width: 1199px) {
+    margin-left: min(3.2rem) max(auto);
+    margin-right: min(3.2rem) max(auto);
+  }
+
+  @media (max-width: 1123px) {
+    width: 70.4rem;
+
+    @media (max-width: 767px) {
+      width: 32.5rem;
+    }
+  }
+}
diff --git a/pages/shared/index.tsx b/pages/shared/index.tsx
index 6d509b00d..4a01673dd 100644
--- a/pages/shared/index.tsx
+++ b/pages/shared/index.tsx
@@ -1,45 +1,22 @@
 import FolderData from '@/components/Folderdata';
 import Navigation from '@/components/Navigation';
 import SearchBar from '@/components/SearchBar';
-import Cards from '@/components/Cards';
-import styled from 'styled-components';
+import ShareCards from '@/components/ShareCards';
+import styles from './index.module.css';
 import Footer from '@/components/Footer';
-
-const BASE_URL_FOLDER_SAMPLE =
-  'https://bootcamp-api.codeit.kr/api/sample/folder';
+import { BASE_URL_FOLDER_SAMPLE } from '@/constant/shared-constant';
 
 /*테블릿 1124 이상 모바일 최소여백 32       테블릿 768~1199 모바일 375 ~767    */
-const PageDisplay = styled.div`
-  display: flex;
-  row-gap: 4rem;
-  padding: 4rem 0 10rem;
-  flex-direction: column;
-  margin: 0 auto;
-  width: 106rem;
-
-  @media (max-width: 1199px) {
-    margin-left: min(3.2rem) max(auto);
-    margin-right: min(3.2rem) max(auto);
-  }
-
-  @media (max-width: 1123px) {
-    width: 70.4rem;
-
-    @media (max-width: 767px) {
-      width: 32.5rem;
-    }
-  }
-`;
 
 function SharedPage() {
   return (
     <>
       <Navigation />
       <FolderData />
-      <PageDisplay>
+      <div className={styles.pageDisplay}>
         <SearchBar />
-        <Cards url={BASE_URL_FOLDER_SAMPLE} />
-      </PageDisplay>
+        <ShareCards url={BASE_URL_FOLDER_SAMPLE} />
+      </div>
       <Footer />
     </>
   );
diff --git a/pages/signin/index.module.css b/pages/signin/index.module.css
index e26b5e787..71909c8f9 100644
--- a/pages/signin/index.module.css
+++ b/pages/signin/index.module.css
@@ -4,7 +4,7 @@
   align-items: center;
   padding: 238px 0 253px;
   background-color: var(--light-blue);
-  height: 100%;
+  height: 100vh;
 
   @media (max-width: 1200px) {
     padding: 200px 0 291px;
diff --git a/pages/signin/index.tsx b/pages/signin/index.tsx
index ad16fb59b..38467b738 100644
--- a/pages/signin/index.tsx
+++ b/pages/signin/index.tsx
@@ -6,8 +6,65 @@ import S from './index.module.css';
 import Link from 'next/link';
 import googleIcon from '@/public/googlesns.svg';
 import kakaoIcon from '@/public/kakaosns.svg';
+import { SIGN_IN_BASE_URL } from '../../constant/signin-constant';
+import { useRouter } from 'next/router';
+import useSignInId from '@/hooks/useSignInId';
+import useSignInPwd from '@/hooks/useSignInPwd';
+import { useEffect } from 'react';
 
 export default function SignInPage() {
+  const router = useRouter();
+  useEffect(() => {
+    const accessToken = localStorage.getItem('accessToken');
+    if (accessToken) {
+      router.push('/folder');
+    }
+  }, []);
+  const {
+    email,
+    isIdError,
+    idErrorMsg,
+    handleEmailChange,
+    handleIdBlur,
+    handleIdErrorOnSubmit,
+  } = useSignInId();
+
+  const {
+    password,
+    isPwdError,
+    pwdErrorMsg,
+    handlePasswordChange,
+    handlePwdBlur,
+    handlePWdErrorOnSubmit,
+  } = useSignInPwd();
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    try {
+      const response = await fetch(SIGN_IN_BASE_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email, password }),
+      });
+
+      if (!response.ok) {
+        throw new Error('로그인에 실패했습니다.');
+      }
+      const data = await response.json();
+      const { accessToken, refreshToken } = data;
+      localStorage.setItem('accessToken', accessToken);
+      localStorage.setItem('refreshToken', refreshToken);
+
+      router.push('/folder');
+    } catch (error) {
+      console.error('Error:', error);
+      handleIdErrorOnSubmit();
+      handlePWdErrorOnSubmit();
+    }
+  }
   return (
     <>
       <div className={S.signInPageWrapper}>
@@ -24,24 +81,42 @@ export default function SignInPage() {
               </Link>
             </p>
           </div>
-          <div className={S.idInputWrapper}>
-            <label className={S.idInputLabel}>이메일</label>
-            <IdInput placeholder={'이메일을 입력해 주세요'} />
-          </div>
-          <div className={S.pwdInputWrapper}>
-            <label className={S.pwdInputLabel}>비밀번호</label>
-            <PasswordInput placeholder={'비밀번호를 입력해 주세요'} />
-          </div>
-          <button className={S.signInBtn}> 로그인</button>
+          <form onSubmit={handleSubmit}>
+            <div className={S.idInputWrapper}>
+              <label className={S.idInputLabel}>이메일</label>
+              <IdInput
+                value={email}
+                onChange={handleEmailChange}
+                placeholder={'이메일을 입력해 주세요'}
+                isError={isIdError}
+                ErrorMsg={idErrorMsg}
+                onBlur={handleIdBlur}
+              />
+            </div>
+            <div className={S.pwdInputWrapper}>
+              <label className={S.pwdInputLabel}>비밀번호</label>
+              <PasswordInput
+                value={password}
+                onChange={handlePasswordChange}
+                placeholder={'비밀번호를 입력해 주세요'}
+                isError={isPwdError}
+                ErrorMsg={pwdErrorMsg}
+                onBlur={handlePwdBlur}
+              />
+            </div>
+            <button type="submit" className={S.signInBtn}>
+              로그인
+            </button>
+          </form>
           <div className={S.snsLink}>
             <p> 소셜 로그인</p>
             <div className={S.snsLinkIcon}>
-              <button>
+              <Link href="https://www.google.com">
                 <Image src={googleIcon} alt="구글 아이콘" />
-              </button>
-              <button>
+              </Link>
+              <Link href="https://www.kakaocorp.com/page">
                 <Image src={kakaoIcon} alt="카카오 아이콘" />
-              </button>
+              </Link>
             </div>
           </div>
         </div>
diff --git a/pages/signup/index.module.css b/pages/signup/index.module.css
index 26c1d2f0e..774a1c9d5 100644
--- a/pages/signup/index.module.css
+++ b/pages/signup/index.module.css
@@ -4,7 +4,7 @@
   align-items: center;
   padding: 238px 0 253px;
   background-color: var(--light-blue);
-  height: 100%;
+  height: 100vh;
 
   @media (max-width: 1200px) {
     padding: 200px 0 291px;
diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
index fa7049927..5850ad5c0 100644
--- a/pages/signup/index.tsx
+++ b/pages/signup/index.tsx
@@ -6,8 +6,78 @@ import S from './index.module.css';
 import Link from 'next/link';
 import googleIcon from '@/public/googlesns.svg';
 import kakaoIcon from '@/public/kakaosns.svg';
+import useSignUpId from '@/hooks/useSignUpId';
+import useSignUpPwd from '@/hooks/useSignUpPwd';
+import useSignUpPwdCheck from '@/hooks/useSignUpPwdCheck';
+import { useRouter } from 'next/router';
+import { SIGN_UP_BASE_URL } from '@/constant/signup-constant';
+import { useEffect } from 'react';
 
 export default function SignUpPage() {
+  const router = useRouter();
+  useEffect(() => {
+    const accessToken = localStorage.getItem('accessToken');
+    if (accessToken) {
+      router.push('/folder');
+    }
+  }, []);
+
+  const {
+    email,
+    isIdError,
+    idErrorMsg,
+    handleEmailChange,
+    handleIdBlur,
+    handleIdErrorOnSubmit,
+  } = useSignUpId();
+
+  const {
+    password,
+    isPwdError,
+    pwdErrorMsg,
+    handlePasswordChange,
+    handlePwdBlur,
+    handlePWdErrorOnSubmit,
+  } = useSignUpPwd();
+
+  const {
+    passwordCheck,
+    isPwdCheckError,
+    pwdCheckErrorMsg,
+    handlePasswordCheckChange,
+    handlePwdCheckBlur,
+    handlePWdCheckErrorOnSubmit,
+  } = useSignUpPwdCheck({ password });
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    try {
+      const response = await fetch(SIGN_UP_BASE_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email, password }),
+      });
+
+      if (!response.ok) {
+        throw new Error('로그인에 실패했습니다.');
+      }
+      const data = await response.json();
+      const { accessToken, refreshToken } = data;
+      localStorage.setItem('accessToken', accessToken);
+      localStorage.setItem('refreshToken', refreshToken);
+
+      router.push('/folder');
+    } catch (error) {
+      console.error('Error:', error);
+      handleIdErrorOnSubmit();
+      handlePWdErrorOnSubmit();
+      handlePWdCheckErrorOnSubmit;
+    }
+  }
+
   return (
     <>
       <div className={S.signUpPageWrapper}>
@@ -24,32 +94,51 @@ export default function SignUpPage() {
               </Link>
             </p>
           </div>
-          <div className={S.idInputWrapper}>
-            <label className={S.idInputLabel}>이메일</label>
-            <IdInput placeholder={'이메일을 입력해 주세요'} />
-          </div>
-          <div className={S.pwdInputWrapper}>
-            <label className={S.pwdInputLabel}>비밀번호</label>
-            <PasswordInput
-              placeholder={'영문, 숫자를 조합해 8자 이상 입력해 주세요.'}
-            />
-          </div>
-          <div className={S.pwdCheckInputWrapper}>
-            <label className={S.pwdCheckInputLabel}>비밀번호 확인</label>
-            <PasswordInput
-              placeholder={'비밀번호와 일치하는 값을 입력해 주세요'}
-            />
-          </div>
-          <button className={S.signInBtn}> 회원가입</button>
+          <form onSubmit={handleSubmit}>
+            <div className={S.idInputWrapper}>
+              <label className={S.idInputLabel}>이메일</label>
+              <IdInput
+                value={email}
+                onChange={handleEmailChange}
+                placeholder={'이메일을 입력해 주세요'}
+                isError={isIdError}
+                ErrorMsg={idErrorMsg}
+                onBlur={handleIdBlur}
+              />
+            </div>
+            <div className={S.pwdInputWrapper}>
+              <label className={S.pwdInputLabel}>비밀번호</label>
+              <PasswordInput
+                value={password}
+                onChange={handlePasswordChange}
+                placeholder={'영문,숫자를 조합해 8자 이상 입력해 주세요.'}
+                isError={isPwdError}
+                ErrorMsg={pwdErrorMsg}
+                onBlur={handlePwdBlur}
+              />
+            </div>
+            <div className={S.pwdCheckInputWrapper}>
+              <label className={S.pwdCheckInputLabel}>비밀번호 확인</label>
+              <PasswordInput
+                value={passwordCheck}
+                onChange={handlePasswordCheckChange}
+                placeholder={'비밀번호와 일치하는 값을 입력해 주세요.'}
+                isError={isPwdCheckError}
+                ErrorMsg={pwdCheckErrorMsg}
+                onBlur={handlePwdCheckBlur}
+              />
+            </div>
+            <button className={S.signInBtn}> 회원가입</button>
+          </form>
           <div className={S.snsLink}>
             <p> 다른 방식으로 가입하기</p>
             <div className={S.snsLinkIcon}>
-              <button>
+              <Link href="https://www.google.com">
                 <Image src={googleIcon} alt="구글 아이콘" />
-              </button>
-              <button>
+              </Link>
+              <Link href="https://www.kakaocorp.com/page">
                 <Image src={kakaoIcon} alt="카카오 아이콘" />
-              </button>
+              </Link>
             </div>
           </div>
         </div>
diff --git a/pages/test/index.tsx b/pages/test/index.tsx
deleted file mode 100644
index 42133398b..000000000
--- a/pages/test/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import IdInput from '@/components/IdInput';
-import PasswordInput from '@/components/PasswordInput';
-
-function Test() {
-  return (
-    <>
-      <PasswordInput />;
-      <IdInput />
-    </>
-  );
-}
-
-export default Test;
diff --git a/hooks/date.ts b/utils/date.ts
similarity index 100%
rename from hooks/date.ts
rename to utils/date.ts
diff --git a/utils/emailRegrex.js b/utils/emailRegrex.js
new file mode 100644
index 000000000..53c5ea4cf
--- /dev/null
+++ b/utils/emailRegrex.js
@@ -0,0 +1,6 @@
+const emailRegrex = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
+
+//이메일 검사
+export default function validateEmail(email) {
+  return new RegExp(emailRegrex).test(email);
+}