diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 0000000..cdf184c
--- /dev/null
+++ b/.github/workflows/main.yml
@@ -0,0 +1,47 @@
+name: git push into another repo to deploy to vercel
+
+on:
+  push:
+    branches:
+      - "dev"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "18"
+
+      - name: creates .env file
+        run: |
+          echo "${{ secrets.APPLICATION_ENV }}" | base64 --decode > .env
+
+      - name: Create output
+        run: sh ./build.sh
+
+      - name: Extract branch name
+        id: extract_branch
+        run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
+
+      - name: Push to another repository
+        id: push_directory
+        uses: cpina/github-action-push-to-another-repository@main
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.AUTO_ACTIONS }}
+        with:
+          source-directory: "output"
+          destination-github-username: "urimeee"
+          destination-repository-name: "sohawgi_Front"
+          user-email: ${{ secrets.EMAIL }}
+          commit-message: |
+            ${{ github.event.commits[0].message }} / ${{ github.run_id }}
+          target-branch: ${{ steps.extract_branch.outputs.branch }}
+          create-target-branch-if-needed: true
+
+      - name: Test get variable exported by push-to-another-repository
+        run: echo $DESTINATION_CLONED_DIRECTORY
diff --git a/.gitignore b/.gitignore
index 4d29575..e37be8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,8 @@
 
 # misc
 .DS_Store
+
+.env
 .env.local
 .env.development.local
 .env.test.local
diff --git a/build.sh b/build.sh
new file mode 100644
index 0000000..b3c4b4d
--- /dev/null
+++ b/build.sh
@@ -0,0 +1,12 @@
+#!/bin/sh
+set -e
+
+cd ../
+mkdir output
+cp -R ./sohawgi_Front/* ./output
+cp -R ./output ./sohawgi_Front/
+
+cd sohawgi_Front || exit 1
+
+npm install
+CI=false npm run build
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d846a4d..45cad13 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/styled-components": "^5.1.34",
+        "axios": "^1.7.9",
         "react": "^18.3.1",
         "react-device-detect": "^2.2.3",
         "react-dom": "^18.3.1",
@@ -6031,6 +6032,31 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -16729,6 +16755,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/package.json b/package.json
index 613e616..ea3c891 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/styled-components": "^5.1.34",
+    "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
diff --git a/public/fonts/PretendardVariable.woff2 b/public/fonts/PretendardVariable.woff2
new file mode 100644
index 0000000..a8d0637
Binary files /dev/null and b/public/fonts/PretendardVariable.woff2 differ
diff --git a/public/index.html b/public/index.html
index 228cda0..e7bdae2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" charset="utf-8" />
+  <meta charset="utf-8" />
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
@@ -15,7 +15,7 @@
     manifest.json provides metadata used when your web app is installed on a
     user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
   -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="/manifest" href="%PUBLIC_URL%/manifest.json" />
   <!--
     Notice the use of %PUBLIC_URL% in the tags above.
     It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.js b/src/App.js
index e8c2378..f54e01a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,7 +25,10 @@ const ContentWrapper = styled.div`
   word-break: break-all;
   white-space: normal;
   min-width: 340px;
+  width: 100%;
   height: 100%;
+  display: flex;
+  justify-content: center;
 `;
 
 function App() {
diff --git a/src/assets/fonts/Pretendard-Black.ttf b/src/assets/fonts/Pretendard-Black.ttf
deleted file mode 100644
index d0c1db8..0000000
Binary files a/src/assets/fonts/Pretendard-Black.ttf and /dev/null differ
diff --git a/src/assets/fonts/Pretendard-Bold.ttf b/src/assets/fonts/Pretendard-Bold.ttf
deleted file mode 100644
index fb07fc6..0000000
Binary files a/src/assets/fonts/Pretendard-Bold.ttf and /dev/null differ
diff --git a/src/assets/fonts/Pretendard-ExtraBold.ttf b/src/assets/fonts/Pretendard-ExtraBold.ttf
deleted file mode 100644
index 9d5fe07..0000000
Binary files a/src/assets/fonts/Pretendard-ExtraBold.ttf and /dev/null differ
diff --git a/src/assets/fonts/Pretendard-ExtraLight.ttf b/src/assets/fonts/Pretendard-ExtraLight.ttf
deleted file mode 100644
index 09e6542..0000000
Binary files a/src/assets/fonts/Pretendard-ExtraLight.ttf and /dev/null differ
diff --git a/src/assets/fonts/Pretendard-Light.ttf b/src/assets/fonts/Pretendard-Light.ttf
deleted file mode 100644
index 2e8541d..0000000
Binary files a/src/assets/fonts/Pretendard-Light.ttf and /dev/null differ
diff --git a/src/assets/fonts/Pretendard-Medium.ttf b/src/assets/fonts/Pretendard-Medium.ttf
deleted file mode 100644
index 1db67c6..0000000
Binary files a/src/assets/fonts/Pretendard-Medium.ttf and /dev/null differ
diff --git a/src/assets/fonts/Pretendard-Regular.ttf b/src/assets/fonts/Pretendard-Regular.ttf
deleted file mode 100644
index 01147e9..0000000
Binary files a/src/assets/fonts/Pretendard-Regular.ttf and /dev/null differ
diff --git a/src/assets/fonts/Pretendard-SemiBold.ttf b/src/assets/fonts/Pretendard-SemiBold.ttf
deleted file mode 100644
index 9f2690f..0000000
Binary files a/src/assets/fonts/Pretendard-SemiBold.ttf and /dev/null differ
diff --git a/src/assets/fonts/Pretendard-Thin.ttf b/src/assets/fonts/Pretendard-Thin.ttf
deleted file mode 100644
index fe9825f..0000000
Binary files a/src/assets/fonts/Pretendard-Thin.ttf and /dev/null differ
diff --git a/src/components/AddPageContainer/AddPageContainer.tsx b/src/components/AddPageContainer/AddPageContainer.tsx
index fde8c75..0e757ac 100644
--- a/src/components/AddPageContainer/AddPageContainer.tsx
+++ b/src/components/AddPageContainer/AddPageContainer.tsx
@@ -14,10 +14,38 @@ type Props = {
 
 const AddPageContainer = ({ title, contentTitles }: Props) => {
   const onClickHandler = (contentTitle: string) => {
-    if (EXTERNAL_LINKS[contentTitle]) {
-      window.open(EXTERNAL_LINKS[contentTitle], 'popup');
+    if (title === '정보') {
+      if (EXTERNAL_LINKS[contentTitle]) {
+        window.open(EXTERNAL_LINKS[contentTitle], 'popup');
+      } else {
+        console.log('접근 가능한 링크가 없습니다.');
+      }
     } else {
-      console.log('접근 가능한 링크가 없습니다.');
+      // title === '설정'
+      if (contentTitle === '로그아웃') {
+        if (
+          window.webkit &&
+          window.webkit.messageHandlers &&
+          window.webkit.messageHandlers.logoutHandler
+        ) {
+          window.webkit.messageHandlers.logoutHandler.postMessage('logout');
+        } else {
+          console.error('Logout handler not found');
+        }
+      }
+      if (contentTitle === '회원탈퇴') {
+        if (
+          window.webkit &&
+          window.webkit.messageHandlers &&
+          window.webkit.messageHandlers.deleteAccountHandler
+        ) {
+          window.webkit.messageHandlers.deleteAccountHandler.postMessage(
+            'deleteAccount',
+          );
+        } else {
+          console.error('DeleteAccount handler not found');
+        }
+      }
     }
   };
 
diff --git a/src/components/BottomNavi/BottomNavi.style.ts b/src/components/BottomNavi/BottomNavi.style.ts
index 687390a..804fbbf 100644
--- a/src/components/BottomNavi/BottomNavi.style.ts
+++ b/src/components/BottomNavi/BottomNavi.style.ts
@@ -6,8 +6,8 @@ export const StyledLink = styled(Link)`
 `;
 
 export const BottomNavWrapper = styled.div`
-  position: fixed; /* 하단에 고정 */
-  bottom: 0;
+  position: fixed;
+  bottom: env(safe-area-inset-bottom);
   left: 0;
   right: 0;
   display: flex;
@@ -58,5 +58,5 @@ export const MoreText = styled.span<{ $isActive: boolean }>`
   font-size: ${({ theme }) => theme.fonts.Body_05};
   color: ${({ $isActive, theme }) =>
     $isActive ? theme.colors.Grey_06 : theme.colors.Grey_02};
-  text-decoration: none; /* 밑줄 제거 */
+  text-decoration: none;
 `;
diff --git a/src/components/ScheduleCard/ScheduleCard.style.ts b/src/components/ScheduleCard/ScheduleCard.style.ts
index 19913ae..41e8053 100644
--- a/src/components/ScheduleCard/ScheduleCard.style.ts
+++ b/src/components/ScheduleCard/ScheduleCard.style.ts
@@ -2,17 +2,20 @@
 import styled from 'styled-components';
 
 export const WrapperContainer = styled.div`
-  display: grid;
-  gap: 1.5rem; /* '일정' 텍스트와 그리드 사이 간격 */
-  width: 100%; /* 부모 요소에 맞게 너비를 조정 */
-  background-color: ${({ theme }) => theme.colors.White}; /* 배경 색상 추가 */
-  padding: 1.88rem 1.69rem; /* 내부 여백 추가 */
-  border-radius: 1.7rem; /* 모서리를 둥글게 */
-  box-sizing: border-box; /* 패딩을 너비에 포함하여 크기 조정 */ 텍스트 필드와 너비 같이 될 수 있도록
+    display: grid;
+    gap: 1.5rem; /* '일정' 텍스트와 그리드 사이 간격 */
+    width: 100%; /* 부모 요소에 맞게 너비를 조정 */
+    background-color: ${({ theme }) => theme.colors.White}; /* 배경 색상 추가 */
+    padding: 1.88rem 1.69rem; /* 내부 여백 추가 */
+    border-radius: 1.7rem; /* 모서리를 둥글게 */
+    box-sizing: border-box; /* 패딩을 너비에 포함하여 크기 조정 */
+    height: fit-content;
+    텍스트 필드와 너비 같이 될 수 있도록
 `;
 
 export const Title = styled.div`
-  font-family: ${({ theme }) => theme.fonts.Body_01}; /* 테마에 정의된 폰트 스타일 사용 */
+  font-family: ${({ theme }) =>
+    theme.fonts.Body_01}; /* 테마에 정의된 폰트 스타일 사용 */
   color: ${({ theme }) => theme.colors.Grey_06}; /* 테마에 정의된 색상 사용 */
 `;
 
diff --git a/src/components/ScheduleCard/ScheduleCard.tsx b/src/components/ScheduleCard/ScheduleCard.tsx
index 6d5f938..6ef6d21 100644
--- a/src/components/ScheduleCard/ScheduleCard.tsx
+++ b/src/components/ScheduleCard/ScheduleCard.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import ScheduleDetail from '../ScheduleDetail/ScheduleDetail'; // ScheduleDetail 컴포넌트 경로에 맞게 수정
 import BottomSheet from '../BottomSheet/BottomSheet'; // BottomSheet 컴포넌트 불러오기
 import * as S from './ScheduleCard.style';
+import { api } from '../../utils/axios';
 
 interface Schedule {
   scheduleId: number;
@@ -13,7 +14,7 @@ interface Schedule {
 
 const ScheduleCard = () => {
   const [isSheetOpen, setSheetOpen] = useState<boolean>(false);
-  const [scheduleList, setScheduleList] = useState<Schedule[]>([]);
+  const [scheduleList, setScheduleList] = useState<Schedule[] | null>([]);
 
   const handleSheet = () => {
     setSheetOpen(!isSheetOpen);
@@ -21,25 +22,17 @@ const ScheduleCard = () => {
 
   const getSchedules = async () => {
     try {
-      const response = await fetch(
-        'http://15.165.191.48:8080/api/v1/schedules',
-        {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            'Nickname': 'jini',
-          },
-          credentials: 'include',
-        },
-      );
+      const accessToken = localStorage.getItem('accessToken');
+      const refreshToken = localStorage.getItem('refreshToken');
+      const response = await api.get('/schedules');
 
-      if (!response.ok) {
+      if (response.data.length < 0) {
         throw new Error(response.statusText);
       }
 
-      const data = await response.json();
-      console.log(response);
-      setScheduleList(data);
+      // const data = await response.json();
+      console.log(response.data);
+      setScheduleList(response.data);
     } catch (e) {
       console.log(e);
     }
@@ -51,10 +44,9 @@ const ScheduleCard = () => {
 
   return (
     <S.WrapperContainer>
-      <S.Title>일정</S.Title> {/* Title 컴포넌트를 사용하여 스타일 적용 */}
+      <S.Title>일정</S.Title>
       <S.GridContainer>
-        {/* 여러 개의 ScheduleDetail 컴포넌트를 그리드로 나열 */}
-        {scheduleList.map((schedule) => (
+        {scheduleList?.map((schedule) => (
           <div key={schedule.scheduleId}>
             <ScheduleDetail
               title={schedule.title}
@@ -65,7 +57,6 @@ const ScheduleCard = () => {
           </div>
         ))}
       </S.GridContainer>
-      {/* 바텀시트 컴포넌트 */}
       <BottomSheet isOpen={isSheetOpen} onClose={handleSheet} />
     </S.WrapperContainer>
   );
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 1e700ee..f8c50d4 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import * as S from './TextField.style';
 
 const TextField: React.FC = () => {
@@ -8,12 +9,13 @@ const TextField: React.FC = () => {
   const postSchedule = async (e: React.MouseEvent<HTMLButtonElement>) => {
     try {
       const response = await fetch(
-        'http://15.165.191.48:8080/api/v1/schedules',
+        `${process.env.REACT_APP_BASE_SERVER_URL}/schedules`,
         {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
-            'Nickname': 'jini',
+            'X-ACCESS-TOKEN': `${process.env.REACT_APP_X_ACCESS_TOKEN}`,
+            'X-REFRESH-TOKEN': `${process.env.REACT_APP_X_REFRESH_TOKEN}`,
           },
           credentials: 'include',
           body: JSON.stringify({ text: schedule }),
@@ -38,7 +40,7 @@ const TextField: React.FC = () => {
         onBlur={() => setIsFocused(false)}
         onChange={(e) => setSchedule(e.target.value)}
       />
-      <S.Button type="submit" onClick={postSchedule}>
+      <S.Button type="button" onClick={postSchedule}>
         등록
       </S.Button>
     </S.Form>
diff --git a/src/components/UserProfile/UserInfo/UserInfo.tsx b/src/components/UserProfile/UserInfo/UserInfo.tsx
index 03ac416..b3803e4 100644
--- a/src/components/UserProfile/UserInfo/UserInfo.tsx
+++ b/src/components/UserProfile/UserInfo/UserInfo.tsx
@@ -1,14 +1,19 @@
+import React from 'react';
 import appleIcon from '../../../assets/images/appleIcon.png';
 import * as S from './UserInfo.style';
-import React from 'react';
 
-const UserInfo = () => {
+type Props = {
+  name: string;
+  email: string;
+};
+
+const UserInfo = ({ name, email }: Props) => {
   return (
     <div>
-      <div>구나연</div>
+      <div>{name}</div>
       <S.InfoContainer>
         <S.appleImg src={appleIcon} alt={'appleIcon'} />
-        <div>abc@naver.com</div>
+        <div>{email}</div>
       </S.InfoContainer>
     </div>
   );
diff --git a/src/components/UserProfile/UserProfile.tsx b/src/components/UserProfile/UserProfile.tsx
index df2a8da..676e4f5 100644
--- a/src/components/UserProfile/UserProfile.tsx
+++ b/src/components/UserProfile/UserProfile.tsx
@@ -1,13 +1,19 @@
-import hamtori from '../../assets/images/hamtori.svg';
 import React from 'react';
+
+import hamtori from '../../assets/images/hamtori.svg';
 import UserInfo from './UserInfo/UserInfo';
 import * as S from './UserProfile.style';
 
-const UserProfile = () => {
+type Props = {
+  name: string;
+  email: string;
+};
+
+const UserProfile = ({ name, email }: Props) => {
   return (
     <S.Container>
       <img src={hamtori} alt={'hamtori'} />
-      <UserInfo />
+      <UserInfo name={name} email={email} />
     </S.Container>
   );
 };
diff --git a/src/custom.d.ts b/src/custom.d.ts
index 5f679a4..6f52c0f 100644
--- a/src/custom.d.ts
+++ b/src/custom.d.ts
@@ -2,7 +2,26 @@ declare module '*.svg' {
   const content: any;
   export default content;
 }
+
 declare module '*.png' {
   const content: any;
   export default content;
 }
+
+interface Window {
+  // receiveUserInfo?: (userInfo: import('./types/userInfo').UserInfo) => void;
+  receiveUserInfo?: (userInfo: any) => void;
+  webkit?: {
+    messageHandlers?: {
+      webViewReady?: {
+        postMessage: (message: any) => void;
+      };
+      logoutHandler?: {
+        postMessage: (message: any) => void;
+      };
+      deleteAccountHandler?: {
+        postMessage: (message: any) => void;
+      };
+    };
+  };
+}
diff --git a/src/pages/PlusPage/PlusPage.style.ts b/src/pages/PlusPage/PlusPage.style.ts
index 39fafc0..1d186ed 100644
--- a/src/pages/PlusPage/PlusPage.style.ts
+++ b/src/pages/PlusPage/PlusPage.style.ts
@@ -4,8 +4,6 @@ export const AddPageContainer = styled.div`
   background-color: #fff;
   width: 100%;
   height: 100%;
-  padding-left: 17px;
-  padding-right: 17px;
 `;
 
 export const AddPageBelowContainer = styled.div`
@@ -13,3 +11,10 @@ export const AddPageBelowContainer = styled.div`
   flex-direction: column;
   gap: 2.3125rem;
 `;
+
+export const AddPageContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 17px;
+  padding-right: 17px;
+`;
diff --git a/src/pages/PlusPage/PlusPage.tsx b/src/pages/PlusPage/PlusPage.tsx
index 6f598ce..fddf47d 100644
--- a/src/pages/PlusPage/PlusPage.tsx
+++ b/src/pages/PlusPage/PlusPage.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+
+import { api } from '../../utils/axios';
 
 // import css
 import * as S from './PlusPage.style';
@@ -8,18 +10,47 @@ import UserProfile from '../../components/UserProfile/UserProfile';
 import AddPageContainer from '../../components/AddPageContainer/AddPageContainer';
 import VersionInfo from '../../components/VersionInfo/VersionInfo';
 
+interface UserInfo {
+  name: string;
+  email: string;
+}
+
+type Props = {
+  name: string;
+  email: string;
+};
+
 const PlusPage = () => {
   const addPageInfoTitles = ['서비스 이용약관', '개인정보 처리방침'];
   const addPageSettingTitles = ['로그아웃', '회원탈퇴'];
+  const [user, setUser] = useState<UserInfo | null>();
+
+  const getUserInfo = async () => {
+    try {
+      const response = await api.get('/users/me');
+      setUser(response.data);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  useEffect(() => {
+    getUserInfo();
+  }, []);
 
   return (
     <S.AddPageContainer>
-      <UserProfile />
-      <S.AddPageBelowContainer>
-        <AddPageContainer title={'정보'} contentTitles={addPageInfoTitles} />
-        <AddPageContainer title={'설정'} contentTitles={addPageSettingTitles} />
-      </S.AddPageBelowContainer>
-      <VersionInfo />
+      <S.AddPageContentContainer>
+        <UserProfile name={user?.name} email={user?.email} />
+        <S.AddPageBelowContainer>
+          <AddPageContainer title={'정보'} contentTitles={addPageInfoTitles} />
+          <AddPageContainer
+            title={'설정'}
+            contentTitles={addPageSettingTitles}
+          />
+        </S.AddPageBelowContainer>
+        <VersionInfo />
+      </S.AddPageContentContainer>
     </S.AddPageContainer>
   );
 };
diff --git a/src/pages/SchedulePage/SchedulePage.style.ts b/src/pages/SchedulePage/SchedulePage.style.ts
index b2d4cd6..6025405 100644
--- a/src/pages/SchedulePage/SchedulePage.style.ts
+++ b/src/pages/SchedulePage/SchedulePage.style.ts
@@ -5,7 +5,14 @@ export const Container = styled.div`
   display: grid;
   grid-template-rows: auto 1fr; /* TextField와 ScheduleCard를 세로로 나열 */
   gap: 2.31rem; /* 각 요소 사이의 간격 */
+  padding: 2.75rem 0rem 10rem 0rem;
   width: 100%;
-  padding: 2.75rem 0rem 10rem 0rem; /* 전체 컨테이너의 내부 여백 * 상우하좌 순서임/
-  
+`;
+
+export const SchedulePageContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 37px;
+  padding-left: 17px;
+  padding-right: 17px;
 `;
diff --git a/src/pages/SchedulePage/SchedulePage.tsx b/src/pages/SchedulePage/SchedulePage.tsx
index 1d8b015..8d329e6 100644
--- a/src/pages/SchedulePage/SchedulePage.tsx
+++ b/src/pages/SchedulePage/SchedulePage.tsx
@@ -1,13 +1,40 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+
 import TextField from '../../components/TextField/TextField';
 import ScheduleCard from '../../components/ScheduleCard/ScheduleCard';
+
 import * as S from './SchedulePage.style';
 
 const SchedulePage = () => {
+  useEffect(() => {
+    if (
+      window.webkit &&
+      window.webkit.messageHandlers &&
+      window.webkit.messageHandlers.webViewReady
+    ) {
+      window.webkit.messageHandlers.webViewReady.postMessage('WebViewReady');
+    }
+
+    window.receiveUserInfo = function (info) {
+      console.log('Received info:', info);
+      
+      localStorage.setItem('userID', JSON.stringify(info.userID));
+      localStorage.setItem('accessToken', JSON.stringify(info.accessToken));
+      localStorage.setItem('refreshToken', JSON.stringify(info.refreshToken));
+      localStorage.setItem(
+        'authorizationCode',
+        JSON.stringify(info.authorizationCode),
+      );
+      return info;
+    };
+  }, []);
+
   return (
     <S.Container>
-      <TextField />
-      <ScheduleCard />
+      <S.SchedulePageContent>
+        <TextField />
+        <ScheduleCard />
+      </S.SchedulePageContent>
     </S.Container>
   );
 };
diff --git a/src/style/globalStyles.ts b/src/style/globalStyles.ts
index 7f0e7d3..2e15901 100644
--- a/src/style/globalStyles.ts
+++ b/src/style/globalStyles.ts
@@ -3,65 +3,9 @@ import { createGlobalStyle } from 'styled-components';
 const GlobalStyle = createGlobalStyle`
     @font-face {
         font-family: 'Pretendard';
-        src: url('/assets/fonts/Pretendard-Thin.ttf') format('truetype');
-        font-weight: 100;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: 'Pretendard';
-        src: url('/assets/fonts/Pretendard-ExtraLight.ttf') format('truetype');
-        font-weight: 200;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: 'Pretendard';
-        src: url('/assets/fonts/Pretendard-Light.ttf') format('truetype');
-        font-weight: 300;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: 'Pretendard';
-        src: url('/assets/fonts/Pretendard-Regular.ttf') format('truetype');
-        font-weight: 400;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: 'Pretendard';
-        src: url('/assets/fonts/Pretendard-Medium.ttf') format('truetype');
-        font-weight: 500;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: 'Pretendard';
-        src: url('/assets/fonts/Pretendard-SemiBold.ttf') format('truetype');
-        font-weight: 600;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: 'Pretendard';
-        src: url('/assets/fonts/Pretendard-Bold.ttf') format('truetype');
-        font-weight: 700;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: 'Pretendard';
-        src: url('/assets/fonts/Pretendard-ExtraBold.ttf') format('truetype');
-        font-weight: 800;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: 'Pretendard';
-        src: url('/assets/fonts/Pretendard-Black.ttf') format('truetype');
-        font-weight: 900;
-        font-style: normal;
+        src: url('/fonts/PretendardVariable.woff2') format('woff2');
+        font-weight: 100 900;
+        font-display: swap;
     }
 
     html, body {
@@ -71,6 +15,7 @@ const GlobalStyle = createGlobalStyle`
         height: 100%;
         overflow: auto; /* 스크롤 가능 */
         background-color: ${({ theme }) => theme.colors.Grey_01};
+        font-family: 'Pretendard', 'sans-serif';
     }
 
     /* Webkit 기반 브라우저에서 스크롤바를 숨김 */
diff --git a/src/types/userInfo.ts b/src/types/userInfo.ts
new file mode 100644
index 0000000..6714b6a
--- /dev/null
+++ b/src/types/userInfo.ts
@@ -0,0 +1,5 @@
+// export interface UserInfo {
+//   fullName?: string;
+//   email?: string;
+//   userIdentifier?: string;
+// }
diff --git a/src/utils/axios.js b/src/utils/axios.js
new file mode 100644
index 0000000..dfd19ce
--- /dev/null
+++ b/src/utils/axios.js
@@ -0,0 +1,60 @@
+import axios from 'axios';
+
+export const api = axios.create({
+  baseURL: `${process.env.REACT_APP_BASE_SERVER_URL}`,
+  headers: {
+    'content-type': 'application/json',
+  },
+});
+
+// 요청 인터셉터
+api.interceptors.request.use(
+  (config) => {
+    // const accessToken = localStorage.getItem('accessToken');
+    const accessToken = `${process.env.REACT_APP_X_ACCESS_TOKEN}`;
+    const refreshToken = `${process.env.REACT_APP_X_REFRESH_TOKEN}`;
+
+    if (accessToken) {
+      config.headers['X-ACCESS-TOKEN'] = `${accessToken}`;
+      config.headers['X-REFRESH-TOKEN'] = `${refreshToken}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+// 응답 인터셉터
+api.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+    if (error.response.status === 403 && !originalRequest._retry) {
+      // 만료된 access token일 때
+      originalRequest._retry = true;
+
+      try {
+        const refreshToken = `${process.env.REACT_APP_X_REFRESH_TOKEN}`;
+        if (refreshToken) {
+          originalRequest.headers['New-access-token'] =
+            `${process.env.REACT_APP_NEW_ACCESS_TOKEN}`;
+        }
+        return axios(originalRequest);
+      } catch (error) {
+        // refreshtoken으로 인한 재발급에서도 오류가 나는 상황 -> swift에 브릿지 연결
+        handleErrorInTokenRefresh();
+      }
+    }
+  },
+);
+
+function handleErrorInTokenRefresh() {
+  if (
+    window.webkit &&
+    window.webkit.messageHandlers &&
+    window.webkit.messageHandlers.webViewReady
+  ) {
+    window.webkit.messageHandlers.webViewReady.postMessage('errorOccured');
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 3d02ee9..b281056 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,10 +11,14 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-
+    "typeRoots": [
+      "@types"
+    ]
   },
   "include": [
-    "src/**/*"
+    "src",
+    "src/custom.d.ts",
+    ".eslintrc.cjs"
   ],
   "exclude": [
     "node_modules"