diff --git a/Front-end/src/App.tsx b/Front-end/src/App.tsx
index 20af681..8bc6072 100644
--- a/Front-end/src/App.tsx
+++ b/Front-end/src/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import './App.css';
+import '@kirock/App.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 // Components
diff --git a/Front-end/src/apis/institution.ts b/Front-end/src/apis/institution.ts
index 0a785f6..7a5e699 100644
--- a/Front-end/src/apis/institution.ts
+++ b/Front-end/src/apis/institution.ts
@@ -1,5 +1,5 @@
 // Type
-import { TinstitutionLogin } from '../utils/type';
+import { TinstitutionLogin } from '@kirok-fe/utils/type';
 
 import axios from 'axios';
 axios.defaults.withCredentials = true;
diff --git a/Front-end/src/apis/kids.ts b/Front-end/src/apis/kids.ts
index 1ca16f9..b23af85 100644
--- a/Front-end/src/apis/kids.ts
+++ b/Front-end/src/apis/kids.ts
@@ -1,5 +1,5 @@
 // Type
-import { TuserKidsRegist } from '../utils/type';
+import { TuserKidsRegist } from '@kirok-fe/utils/type';
 
 import axios from 'axios';
 axios.defaults.withCredentials = true;
diff --git a/Front-end/src/components/Button/LongBtn.tsx b/Front-end/src/components/Button/LongBtn.tsx
index 75557f2..8f86480 100644
--- a/Front-end/src/components/Button/LongBtn.tsx
+++ b/Front-end/src/components/Button/LongBtn.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
-import { fonts } from '../../constants';
+import { fonts } from '@kirok-fe/constants';
 import { useNavigate } from 'react-router-dom';
 
 // Recoil
 import { useRecoilValue } from 'recoil';
-import { parentsState } from '../../recoil/parentsState';
-import { kakaoState } from '../../recoil/kakaoState';
+import { parentsState } from '@kirok-fe/recoil/parentsState';
+import { kakaoState } from '@kirok-fe/recoil/kakaoState';
 
 // Api
-import { childRegistration } from '../../apis/kids';
+import { childRegistration } from '@kirok-fe/apis/kids';
 
 interface Prop {
 	type: 'edit' | 'request';
diff --git a/Front-end/src/components/Button/ShortBtn.tsx b/Front-end/src/components/Button/ShortBtn.tsx
index 58c1d08..6bbe260 100644
--- a/Front-end/src/components/Button/ShortBtn.tsx
+++ b/Front-end/src/components/Button/ShortBtn.tsx
@@ -4,11 +4,11 @@ import { useNavigate } from 'react-router-dom';
 
 // recoil
 import { useRecoilValue } from 'recoil';
-import { kakaoState } from '../../recoil/kakaoState';
+import { kakaoState } from '@kirok-fe/recoil/kakaoState';
 
 // api
-import { kakaoOpen } from '../../apis/kakao';
-import { PageUrls } from '@constants/page-urls';
+import { kakaoOpen } from '@kirok-fe/apis/kakao';
+import { PageUrls } from '@kirok-fe/constants/page-urls';
 
 const ShortBtn = (props: any) => {
 	const { title } = props;
diff --git a/Front-end/src/components/Input/InputKids.tsx b/Front-end/src/components/Input/InputKids.tsx
index 9afbad4..c497340 100644
--- a/Front-end/src/components/Input/InputKids.tsx
+++ b/Front-end/src/components/Input/InputKids.tsx
@@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react';
 
 // recoil
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { kidState } from '../../recoil/kidState';
-import { kakaoState } from '../../recoil/kakaoState';
+import { kidState } from '@kirok-fe/recoil/kidState';
+import { kakaoState } from '@kirok-fe/recoil/kakaoState';
 
 // apis
-import { childRegistration } from '../../apis/kids';
-import { getAllInstitution } from '../../apis/institution';
+import { childRegistration } from '@kirok-fe/apis/kids';
+import { getAllInstitution } from '@kirok-fe/apis/institution';
 
 /* 
   이 파일은 테스트용으로 만들어봤던 파일임.
diff --git a/Front-end/src/components/Login.tsx b/Front-end/src/components/Login.tsx
index 39d2c11..2ea2781 100644
--- a/Front-end/src/components/Login.tsx
+++ b/Front-end/src/components/Login.tsx
@@ -3,10 +3,10 @@ import styled from 'styled-components';
 
 // Recoil
 import { useRecoilState } from 'recoil';
-import { institutionState } from '../recoil/institutionState';
+import { institutionState } from '@kirok-fe/recoil/institutionState';
 
 // Api
-import { institutionLogin } from '../apis/institution';
+import { institutionLogin } from '@kirok-fe/apis/institution';
 
 const Login = () => {
 	const [institution, setInstitution] = useRecoilState(institutionState);
diff --git a/Front-end/src/components/LoginButton.tsx b/Front-end/src/components/LoginButton.tsx
index dffbb7e..cdfd240 100644
--- a/Front-end/src/components/LoginButton.tsx
+++ b/Front-end/src/components/LoginButton.tsx
@@ -3,10 +3,10 @@ import { styled } from 'styled-components';
 
 // Recoil
 import { useRecoilValue } from 'recoil';
-import { kakaoState } from '../recoil/kakaoState';
+import { kakaoState } from '@kirok-fe/recoil/kakaoState';
 
 // Api
-import { kakaoOpen } from '../apis/kakao';
+import { kakaoOpen } from '@kirok-fe/apis/kakao';
 
 const LoginButton = () => {
 	const { isLogin } = useRecoilValue(kakaoState);
diff --git a/Front-end/src/components/ProgressBtn.tsx b/Front-end/src/components/ProgressBtn.tsx
index 0682ac9..65338a6 100644
--- a/Front-end/src/components/ProgressBtn.tsx
+++ b/Front-end/src/components/ProgressBtn.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { styled } from 'styled-components';
-import { fonts } from '../constants/index';
+import { fonts } from '@kirok-fe/constants/index';
 
 interface ProgressBtnProps {
 	title: string;
diff --git a/Front-end/src/components/RegistrationRequest.tsx b/Front-end/src/components/RegistrationRequest.tsx
index 0cd17a2..a7e6728 100644
--- a/Front-end/src/components/RegistrationRequest.tsx
+++ b/Front-end/src/components/RegistrationRequest.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
-import { institutionState } from '../recoil/institutionState';
+import { institutionState } from '@kirok-fe/recoil/institutionState';
 
 // DB
-import { firestore } from '../utils/firestore';
+import { firestore } from '@kirok-fe/utils/firestore';
 import { onSnapshot, query, collection } from 'firebase/firestore';
 
 /*
diff --git a/Front-end/src/constants/index.ts b/Front-end/src/constants/index.ts
index c7c18b6..703e39f 100644
--- a/Front-end/src/constants/index.ts
+++ b/Front-end/src/constants/index.ts
@@ -1,4 +1,4 @@
-import fonts from './fonts';
+import fonts from '@kirok-fe/constants/fonts';
 
 export const MIN_Y = 280; //바텀시트가 최대로 높이 올라갔을 때 y값
 export const MAX_Y = window.innerHeight - 220; //바텀시트가 최소로 내려갔을 때의 y값
diff --git a/Front-end/src/pages/Callback.tsx b/Front-end/src/pages/Callback.tsx
index 982d914..ffe15dd 100644
--- a/Front-end/src/pages/Callback.tsx
+++ b/Front-end/src/pages/Callback.tsx
@@ -10,7 +10,7 @@ import { TkakaoState } from '../utils/type';
 
 // api
 import { postCodeToServer } from '../apis/kakao';
-import { PageUrls } from '@constants/page-urls';
+import { PageUrls } from '@kirok-fe/constants/page-urls';
 
 const Callback = () => {
 	const navigate = useNavigate();
diff --git a/Front-end/src/pages/CheckKidsinfo.tsx b/Front-end/src/pages/CheckKidsinfo.tsx
index 21ee25d..4f95ae3 100644
--- a/Front-end/src/pages/CheckKidsinfo.tsx
+++ b/Front-end/src/pages/CheckKidsinfo.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import styled from 'styled-components';
-import { fonts } from '../constants';
+import { fonts } from '@kirok-fe/constants';
 import { useNavigate } from 'react-router-dom';
 
 // Recoil
 import { useRecoilState } from 'recoil';
-import { parentsState } from '../recoil/parentsState';
+import { parentsState } from '@kirok-fe/recoil/parentsState';
 
 // Components
-import CheckInfo from '../components/CheckKidsInfo/CheckInfo';
-import HeaderContainer from '../components/Header/HeaderContainer';
-import LongBtn from '../components/Button/LongBtn';
+import CheckInfo from '@kirok-fe/components/CheckKidsInfo/CheckInfo';
+import HeaderContainer from '@kirok-fe/components/Header/HeaderContainer';
+import LongBtn from '@kirok-fe/components/Button/LongBtn';
 
 const CheckKidsinfo = () => {
 	const [parent] = useRecoilState(parentsState);
diff --git a/Front-end/src/pages/Institution.tsx b/Front-end/src/pages/Institution.tsx
index 9d122f5..fe56728 100644
--- a/Front-end/src/pages/Institution.tsx
+++ b/Front-end/src/pages/Institution.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 
 // Components
-import Login from '../components/Login';
-import RegistrationRequest from '../components/RegistrationRequest';
+import Login from '@kirok-fe/components/Login';
+import RegistrationRequest from '@kirok-fe/components/RegistrationRequest';
 
 // Recoil
 import { useRecoilValue, useResetRecoilState } from 'recoil';
-import { institutionState } from '../recoil/institutionState';
+import { institutionState } from '@kirok-fe/recoil/institutionState';
 
 const Institution = () => {
 	const { isLogin } = useRecoilValue(institutionState);
diff --git a/Front-end/src/pages/Main.tsx b/Front-end/src/pages/Main.tsx
index 093b593..d6154d0 100644
--- a/Front-end/src/pages/Main.tsx
+++ b/Front-end/src/pages/Main.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
-import { kakaoState } from '../recoil/kakaoState';
+import { kakaoState } from '@kirok-fe/recoil/kakaoState';
 import styled from 'styled-components';
-import ShortBtn from '../components/Button/ShortBtn';
+import ShortBtn from '@kirok-fe/components/Button/ShortBtn';
 import { useNavigate } from 'react-router-dom';
-import { PageUrls } from '@constants/page-urls';
+import { PageUrls } from '@kirok-fe/constants/page-urls';
 
 const Main = () => {
 	const kakao = useRecoilValue(kakaoState);
diff --git a/Front-end/src/pages/Parents.tsx b/Front-end/src/pages/Parents.tsx
index 6e55fe6..67f7c21 100644
--- a/Front-end/src/pages/Parents.tsx
+++ b/Front-end/src/pages/Parents.tsx
@@ -1,24 +1,24 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { styled } from 'styled-components';
-import useValid from '../hooks/useValid';
+import useValid from '@kirok-fe/hooks/useValid';
 import { useNavigate } from 'react-router-dom';
-import { fonts } from '../constants';
+import { fonts } from '@kirok-fe/constants';
 
 // Components
-import BottomSheet from '../components/BottomSheetModal/BottomSheet';
-import InputText from '../components/Input/InputText';
-import LastBottomSheet from '../components/BottomSheetModal/LastBottomSheet';
-import GenderBtn from '../components/Input/GenderBtn';
-import ProgressBtn from '../components/ProgressBtn';
+import BottomSheet from '@kirok-fe/components/BottomSheetModal/BottomSheet';
+import InputText from '@kirok-fe/components/Input/InputText';
+import LastBottomSheet from '@kirok-fe/components/BottomSheetModal/LastBottomSheet';
+import GenderBtn from '@kirok-fe/components/Input/GenderBtn';
+import ProgressBtn from '@kirok-fe/components/ProgressBtn';
 
 // Api
-import { getAllInstitution } from '../apis/institution';
+import { getAllInstitution } from '@kirok-fe/apis/institution';
 
 // Recoil
-import { parentsState } from '../recoil/parentsState';
+import { parentsState } from '@kirok-fe/recoil/parentsState';
 import { useRecoilState } from 'recoil';
-import { addKidsState } from '../recoil/addKidsState';
-import { PageUrls } from '@constants/page-urls';
+import { addKidsState } from '@kirok-fe/recoil/addKidsState';
+import { PageUrls } from '@kirok-fe/constants/page-urls';
 
 const Parents = () => {
 	const [isModalOpen, setIsModalOpen] = useState(false);
diff --git a/Front-end/tsconfig.json b/Front-end/tsconfig.json
index 41a7deb..13b007f 100644
--- a/Front-end/tsconfig.json
+++ b/Front-end/tsconfig.json
@@ -15,9 +15,11 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "baseUrl": "./src",
+    "baseUrl": ".",
     "paths": {
-      "@constants/*": ["constants/*"]
+      "@kirok-fe/*": [
+        "./src/*"
+      ],
     }
   },
   "include": ["src/**/*"],