scheduler-SoHwaGi · urimeee · Feb 7, 2025 · Dec 29, 2024 · Dec 29, 2024 · Dec 29, 2024
diff --git a/.github/workflows/main.yml 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
@@ -13,6 +13,8 @@
 
 # misc
 .DS_Store
+
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/build.sh 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
diff --git a/package-lock.json b/package-lock.json
diff --git 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
diff --git 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
@@ -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
diff --git a/src/assets/fonts/Pretendard-Bold.ttf b/src/assets/fonts/Pretendard-Bold.ttf
diff --git a/src/assets/fonts/Pretendard-ExtraBold.ttf b/src/assets/fonts/Pretendard-ExtraBold.ttf
diff --git a/src/assets/fonts/Pretendard-ExtraLight.ttf b/src/assets/fonts/Pretendard-ExtraLight.ttf
diff --git a/src/assets/fonts/Pretendard-Light.ttf b/src/assets/fonts/Pretendard-Light.ttf
diff --git a/src/assets/fonts/Pretendard-Medium.ttf b/src/assets/fonts/Pretendard-Medium.ttf
diff --git a/src/assets/fonts/Pretendard-Regular.ttf b/src/assets/fonts/Pretendard-Regular.ttf
diff --git a/src/assets/fonts/Pretendard-SemiBold.ttf b/src/assets/fonts/Pretendard-SemiBold.ttf
diff --git a/src/assets/fonts/Pretendard-Thin.ttf b/src/assets/fonts/Pretendard-Thin.ttf
diff --git 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
@@ -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
@@ -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
@@ -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,33 +14,25 @@ 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);
   };
 
   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
@@ -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
@@ -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>[email protected]</div>
+        <div>{email}</div>
       </S.InfoContainer>
     </div>
   );

diff --git 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>
   );
 };