Merge pull request #144 from MZ-OFFISSU/feat/sprint-final

Feat/sprint final

TERMTERM/App.tsx

@@ -4,38 +4,13 @@ import Toast from "react-native-toast-message";
 import { toastConfig } from "@components/popup/toast";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { LogBox } from "react-native";
-import { useNotification } from "@hooks/useNotification";
-import { useEffect, useState } from "react";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 
 export default function App() {
   LogBox.ignoreLogs([
     "Sending `onAnimatedValueUpdate` with no listeners registered.",
     "Warning: Each child in a list should have a unique",
     "Warning: Encountered two children with the same key",
   ]);
-  const [notificationStatus, setNotificationStatus] = useState<string | null>(
-    null
-  );
-  const { requestPermission, scheduleNotification } = useNotification();
-
-  const setNotification = async () => {
-    const noti = await AsyncStorage.getItem("noti_allow");
-    setNotificationStatus(noti);
-
-    if (!noti) {
-      const per = await requestPermission();
-      await AsyncStorage.setItem("noti_allow", per ? "allow" : "deny");
-      if (per) {
-        scheduleNotification(8, 30);
-        scheduleNotification(19, 0);
-      }
-    }
-  };
-
-  useEffect(() => {
-    setNotification();
-  }, []);
 
   return (
     <ActionSheetProvider>

TERMTERM/package.json

@@ -25,7 +25,6 @@
     "expo-apple-authentication": "~5.0.1",
     "expo-haptics": "~12.0.1",
     "expo-image-picker": "^14.1.1",
-    "expo-notifications": "~0.17.0",
     "expo-sharing": "~11.0.1",
     "expo-splash-screen": "^0.17.5",
     "expo-status-bar": "~1.4.2",

TERMTERM/src/api/PointApi.ts

@@ -22,8 +22,8 @@ class PointApi {
   };
 
   /** 폴더 한도 1개 추가 (폴더 구매) */
-  buyFolder = async (id: number) => {
-    await put(`/v1/point/pay/folder/${id}`);
+  buyFolder = async () => {
+    await put(`/v1/point/pay/folder`);
   };
 }
 

TERMTERM/src/components/header/BookmarkBar.tsx

@@ -5,6 +5,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { useThemeStyle } from "@hooks/useThemeStyle";
 import BackArrowIcon from "@assets/icon/BackArrowIcon";
 import { useBookmarkHeader } from "@hooks/useBookmarkHeader";
+import { useShare } from "@hooks/useShare";
 
 interface Props {
   onBack: () => void;
@@ -27,6 +28,7 @@ const BookmarkBar = ({
 }: Props) => {
   const [COLOR, mode] = useThemeStyle();
   const { bookmarked, handleBookmarkState } = useBookmarkHeader();
+  const { handleShare } = useShare();
 
   return (
     <HeaderWrapper style={{ justifyContent: "space-between" }}>
@@ -59,7 +61,7 @@ const BookmarkBar = ({
             />
           )}
         </CaretBtn>
-        <CaretBtn onPress={() => onShare()}>
+        <CaretBtn onPress={() => handleShare()}>
           <Ionicons
             name="share-social-outline"
             size={24}

TERMTERM/src/components/header/CarouselBar.tsx

@@ -5,6 +5,7 @@ import { AntDesign, Ionicons } from "@expo/vector-icons";
 import { useThemeStyle } from "@hooks/useThemeStyle";
 import { useHeader } from "@hooks/useHeader";
 import BackArrowIcon from "@assets/icon/BackArrowIcon";
+import { useShare } from "@hooks/useShare";
 
 interface Props {
   onBack: () => void;
@@ -18,6 +19,7 @@ interface Props {
 const CarouselBar = ({ onBack, onBookmark, onShare }: Props) => {
   const [COLOR, mode] = useThemeStyle();
   const { headerState, bookmarkHandler } = useHeader();
+  const { handleShare } = useShare();
 
   return (
     <HeaderWrapper
@@ -47,7 +49,7 @@ const CarouselBar = ({ onBack, onBookmark, onShare }: Props) => {
             />
           )}
         </CaretBtn>
-        <CaretBtn onPress={() => onShare()}>
+        <CaretBtn onPress={() => handleShare()}>
           <Ionicons
             name="share-social-outline"
             size={24}

TERMTERM/src/components/header/IconBar.tsx

@@ -4,12 +4,10 @@ import {
   CaretBtn,
   TitleWrapper,
 } from "../common/NavigatorTitle";
-import { AntDesign, Ionicons } from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
 import { useThemeStyle } from "@hooks/useThemeStyle";
 import styled from "styled-components/native";
 import AutoSizedImage from "@components/common/AutoSizedImage";
-import { iconHeaderState } from "@recoil/iconHeaderState";
-import { useRecoilValue } from "recoil";
 import { useCallback } from "react";
 import { Feather } from "@expo/vector-icons";
 import * as Sharing from "expo-sharing";
@@ -19,6 +17,7 @@ import { useHeader } from "@hooks/useHeader";
 import FolderApi from "@api/FolderApi";
 import { useHaptics } from "@hooks/useHaptics";
 import { Toast } from "react-native-toast-message/lib/src/Toast";
+import { useShare } from "@hooks/useShare";
 
 export enum Icon {
   fold,
@@ -37,6 +36,7 @@ interface Props {
  */
 const IconBar = ({ onBack, icon, onPress, bookmarkBar }: Props) => {
   const folderApi = new FolderApi();
+  const { handleShare } = useShare();
 
   const [COLOR, mode] = useThemeStyle();
   const {
@@ -119,14 +119,6 @@ const IconBar = ({ onBack, icon, onPress, bookmarkBar }: Props) => {
     );
   };
 
-  const handleShare = async (url: string) => {
-    if (!(await Sharing.isAvailableAsync())) {
-      return;
-    }
-    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
-    Sharing.shareAsync(url);
-  };
-
   return (
     <HeaderWrapper style={{ justifyContent: "space-between" }}>
       <CaretBtn onPress={() => onBack()} style={{ marginLeft: 20 }}>
@@ -147,7 +139,7 @@ const IconBar = ({ onBack, icon, onPress, bookmarkBar }: Props) => {
         <CaretBtn onPress={() => onPress()} style={{ marginRight: 13 }}>
           {icon === Icon.fold ? <Fold /> : <Collapse />}
         </CaretBtn>
-        <CaretBtn onPress={() => handleShare("https://www.naver.com/")}>
+        <CaretBtn onPress={() => handleShare()}>
           <Feather name="share-2" size={20} color={COLOR.Text.active} />
         </CaretBtn>
       </ElementWrapper>

TERMTERM/src/components/my/MenuList/DefaultList.tsx

@@ -10,6 +10,7 @@ import { useMember } from "@hooks/useMember";
 import { logoutSucceed } from "@utils/showToast";
 import { useHaptics } from "@hooks/useHaptics";
 import { Linking } from "react-native";
+import { useShare } from "@hooks/useShare";
 
 interface MenuProps {
   title: string;
@@ -23,6 +24,7 @@ interface MenuProps {
 const DefaultList = () => {
   const { haptic } = useHaptics();
   const { logout, loading } = useMember();
+  const { handleShare } = useShare();
 
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const [isModal, setIsModal] = useState(false);
@@ -46,7 +48,7 @@ const DefaultList = () => {
     ],
     [
       { title: "문의하기", onPress: () => navigation.push("Support") },
-      { title: "앱 공유하기", onPress: () => null },
+      { title: "앱 공유하기", onPress: () => handleShare() },
     ],
     [{ title: "버전 정보", subtitle: "v 1.0", onPress: () => null }],
     [

TERMTERM/src/components/my/Point/HistoryBox.tsx

@@ -18,7 +18,7 @@ const HistoryBox = ({ history, ...props }: Props) => {
           <ContentText COLOR={COLOR}>{content.detail}</ContentText>
           <ContentText COLOR={COLOR}>
             <ContentText COLOR={COLOR} style={{ fontWeight: `700` }}>
-              {Number(content.point) > 0 ? `+${content.point}` : content.point}
+              {Number(content.point) > 0 ? content.point : content.point}
             </ContentText>{" "}
             포인트
           </ContentText>

TERMTERM/src/components/my/Point/HistoryWrapper.tsx

@@ -19,7 +19,7 @@ const HistoryWrapper = ({ ...props }: ViewProps) => {
   const [visible, setVisible] = useState<number>(0);
   const [max, setMax] = useState(false);
 
-  const { history } = usePoint();
+  const { history, getCurPoint, getHistoryByPage } = usePoint();
 
   /**
    * 시간 순으로 정렬
@@ -51,6 +51,11 @@ const HistoryWrapper = ({ ...props }: ViewProps) => {
     }
   }, [history]);
 
+  useEffect(() => {
+    getCurPoint();
+    getHistoryByPage();
+  }, []);
+
   return (
     <Container {...props}>
       <TitleBox COLOR={COLOR}>포인트 사용 내역</TitleBox>

TERMTERM/src/components/popup/tutorials/index.tsx

@@ -9,34 +9,21 @@ import { AntDesign } from "@expo/vector-icons";
 import TutorialCarousel from "./Carousel";
 import { useRecoilState } from "recoil";
 import { tutorialState } from "@recoil/tutorialState";
+import { useCoach } from "@hooks/useCoach";
+
+interface Props {
+  visible: boolean;
+  checked: boolean;
+  handleCheck: () => void;
+  hideTutorial: () => void;
+}
 
 /**
  * 모달창 컴포넌트
  * 그냥 사용만해도 뒷 배경이 흐릿해진다!
  */
-const Tutorial = () => {
+const Tutorial = ({ visible, checked, handleCheck, hideTutorial }: Props) => {
   const [COLOR, mode] = useThemeStyle();
-  const [visible, setVisible] = useRecoilState(tutorialState);
-  const [checked, setChecked] = useState(false);
-
-  const getVisible = async () => {
-    const data = await AsyncStorage.getItem("tutorial");
-    if (!data) setVisible(true);
-    else return;
-  };
-
-  const hideTutorial = async () => {
-    if (checked) await AsyncStorage.setItem("tutorial", "hide");
-    setVisible(false);
-  };
-
-  const handleCheck = () => {
-    setChecked((prev) => !prev);
-  };
-
-  useEffect(() => {
-    getVisible();
-  }, []);
 
   return (
     <Modal

TERMTERM/src/components/terms/WordCarousel.tsx

@@ -44,7 +44,7 @@ const WordCarousel = ({
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
 
   const navigateToTermDetail = (id: number) => {
-    navigation.push("TermsDetail", { id: id });
+    navigation.push("TermDetail", { id: `${id}` });
   };
 
   const moveToDetail = (index: number) => {

TERMTERM/src/hooks/useCoach.tsx

@@ -1,20 +1,19 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { tutorialState } from "@recoil/tutorialState";
+import { coachState, tutorialState } from "@recoil/tutorialState";
 import { useState } from "react";
-import { useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 
 export type CoachType = "folder" | "slide" | "comment" | "collapse";
 
 export const useCoach = () => {
-  const isTutorialOpen = useRecoilValue(tutorialState);
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useRecoilState(coachState);
   const [whatCoach, setWhatCoach] = useState<CoachType>("folder");
   const [checked, setChecked] = useState(false);
 
   const openCoach = async (type: CoachType) => {
     const checkPrevState = await AsyncStorage.getItem(`coach_${type}`);
 
-    if (!checkPrevState && !isTutorialOpen) {
+    if (!checkPrevState) {
       setIsOpen(true);
       setWhatCoach(type);
     }

TERMTERM/src/hooks/useCuration.tsx

@@ -1,23 +1,21 @@
 import CurationApi from "@api/CurationApi";
+import PointApi from "@api/PointApi";
 import {
   archivedCurationListState,
   curationDetailState,
   curationListState,
 } from "@recoil/curationState";
-import {
-  Category,
-  CurationDetail,
-  CurationPreview,
-  MoreRecommendedCuration,
-} from "Curation";
-import { useEffect, useState } from "react";
+import { Category } from "Curation";
 import { useRecoilState } from "recoil";
+import { usePoint } from "./usePoint";
 
 /**
  * 큐레이션 관리 훅
  */
 export const useCuration = () => {
   const curationApi = new CurationApi();
+  const pointApi = new PointApi();
+
   const [arcihivedCurationList, setArchivedCurationList] = useRecoilState(
     archivedCurationListState
   );
@@ -26,6 +24,8 @@ export const useCuration = () => {
   const [categoryCurationList, setCategoryCurationList] =
     useRecoilState(curationListState);
 
+  const { getCurPoint } = usePoint();
+
   /** 아카이브한 큐레이션 목록 가져오기 */
   const getArchivecurationList = async (): Promise<boolean> => {
     try {
@@ -87,6 +87,17 @@ export const useCuration = () => {
     }
   };
 
+  /** 포인트 지불하여 큐레이션 구매 함수 */
+  const buyThisCuration = async (id: number) => {
+    try {
+      await pointApi.buyCuration(id);
+      getCurPoint();
+      return true;
+    } catch (err) {
+      return false;
+    }
+  };
+
   return {
     getArchivecurationList,
     arcihivedCurationList,
@@ -97,5 +108,6 @@ export const useCuration = () => {
     categoryCurationList,
     setCategoryCurationList,
     deleteCurationBookmark,
+    buyThisCuration,
   };
 };