feat: conflict 해결

scheduler-SoHwaGi · Feb 7, 2025 · 5db1348 · 5db1348
2 parents b11c0b4 + b3b4c50
commit 5db1348
Show file tree

Hide file tree

Showing 30 changed files with 258 additions and 131 deletions.
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
@@ -9,4 +9,4 @@ cp -R ./output ./sohawgi_Front/
 cd sohawgi_Front || exit 1
 
 npm install
-CI=false npm run build
+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,48 +14,39 @@ 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);
     }
   };
 
   useEffect(() => {
-    // getSchedules();
+    getSchedules();
   }, []);
 
   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>
   );
 };

diff --git a/src/custom.d.ts b/src/custom.d.ts
@@ -16,6 +16,12 @@ interface Window {
       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
@@ -4,12 +4,17 @@ export const AddPageContainer = styled.div`
   background-color: #fff;
   width: 100%;
   height: 100%;
-  padding-left: 17px;
-  padding-right: 17px;
 `;
 
 export const AddPageBelowContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2.3125rem;
 `;
+
+export const AddPageContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 17px;
+  padding-right: 17px;
+`;