Merge pull request #528 from depromeet/develop

배포용 pr

Author: woobottle

src/app/home/FollowList.tsx

@@ -1,9 +1,13 @@
+import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useFollowMembers } from '@/apis/follow';
 import UserProfile from '@/app/home/UserProfile';
 import { type FollowDataState } from '@/app/page';
+import Icon from '@/components/Icon';
 import MotionDiv from '@/components/Motion/MotionDiv';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
+import { ROUTER } from '@/constants/router';
+import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 import { eventLogger } from '@/utils';
 
@@ -41,6 +45,9 @@ function FollowList() {
             />
           </MotionDiv>
         ))}
+      <Link href={ROUTER.SEARCH.HOME} className={plusWrapperCss}>
+        <Icon name="plus" size={18} color="purple.purple400" />
+      </Link>
     </section>
   );
 }
@@ -58,3 +65,16 @@ const containerCss = flex({
     display: 'none',
   },
 });
+
+const plusWrapperCss = css({
+  backgroundColor: 'purple.purple000',
+  width: '28px',
+  height: '28px',
+  borderRadius: '12px',
+  flex: 0,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minWidth: '28px',
+  marginTop: '12px',
+});

src/app/home/FollowMissionList.tsx

@@ -1,9 +1,9 @@
 import Link from 'next/link';
 import { useFollowMissions } from '@/apis/follow';
-import { MissionListSkeleton } from '@/app/home/home.styles';
 import MissionBadge from '@/app/home/MissionBadge';
 import Empty from '@/components/Empty/Empty';
 import { TwoLineListItem } from '@/components/ListItem';
+import { stagger } from '@/components/Motion/Motion.constants';
 import StaggerWrapper from '@/components/Motion/StaggerWrapper';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { MISSION_CATEGORY_LABEL } from '@/constants/mission';
@@ -52,14 +52,14 @@ const listCss = flex({
 });
 
 export function MissionFollowListInner({ followId }: { followId: number }) {
-  const { data, isLoading } = useFollowMissions(followId);
-  if (isLoading) {
-    return (
-      <ul className={listCss}>
-        <MissionListSkeleton />
-      </ul>
-    );
-  }
+  const { data } = useFollowMissions(followId);
+  // if (isLoading) {
+  //   return (
+  //     <ul className={listCss}>
+  //       <MissionListSkeleton />
+  //     </ul>
+  //   );
+  // }
 
   if (!data) {
     return null;
@@ -74,7 +74,7 @@ export function MissionFollowListInner({ followId }: { followId: number }) {
   }
 
   return (
-    <StaggerWrapper wrapperOverrideCss={listCss}>
+    <StaggerWrapper wrapperOverrideCss={listCss} staggerVariants={stagger(0.02)}>
       {data.followMissions.map((item) => {
         const status = item.missionStatus;
 

src/app/home/MissionInnerList.tsx

@@ -5,6 +5,7 @@ import { MissionListSkeleton } from '@/app/home/home.styles';
 import MissionBadge from '@/app/home/MissionBadge';
 import MissionEmptyList from '@/app/home/MissionEmptyList';
 import { TwoLineListItem } from '@/components/ListItem';
+import { stagger } from '@/components/Motion/Motion.constants';
 import StaggerWrapper from '@/components/Motion/StaggerWrapper';
 import { MISSION_CATEGORY_LABEL } from '@/constants/mission';
 import { ROUTER } from '@/constants/router';
@@ -26,7 +27,7 @@ function MissionListInner() {
   }
 
   return (
-    <StaggerWrapper wrapperOverrideCss={listCss}>
+    <StaggerWrapper wrapperOverrideCss={listCss} staggerVariants={stagger(0.02)}>
       {missionList.map((item) => {
         const isProgressingMission = progressMissionId === String(item.missionId);
         const status = isProgressingMission ? MissionStatus.PROGRESSING : item.missionStatus;

src/app/home/MissionList.tsx

@@ -9,7 +9,7 @@ import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 import { eventLogger } from '@/utils';
 
-function Header() {
+function MissionListHeader() {
   const handlePlusClick = () => {
     eventLogger.logEvent(EVENT_LOG_CATEGORY.HOME, EVENT_LOG_NAME.HOME.CLICK_PLUS_BUTTON);
   };
@@ -18,7 +18,7 @@ function Header() {
     <h2 className={headingCss}>
       <span>내 미션 목록</span>
       <Link href={ROUTER.MISSION.NEW} onClick={handlePlusClick}>
-        <Icon name="plus" size={20} />
+        <Icon name="plus" size={20} color="icon.primary" />
       </Link>
     </h2>
   );
@@ -27,7 +27,7 @@ function Header() {
 function MissionList() {
   return (
     <div className={containerCss}>
-      <Header />
+      <MissionListHeader />
       <ul className={listCss}>
         <MissionListInner />
       </ul>

src/app/record/success/page.tsx

@@ -1,17 +1,23 @@
 'use client';
 
+import { useEffect } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 // import lottieJson from '@/assets/lotties/lottieExample.json';
 import Button from '@/components/Button/Button';
 import { ROUTER } from '@/constants/router';
+import { NATIVE_METHODS } from '@/utils/nativeMethod';
 import { css } from '@styled-system/css';
 // import Lottie from 'react-lottie-player';
 
 export default function MissionSuccessPage() {
   const router = useRouter();
   const onClickConfirmButton = () => router.replace(ROUTER.HOME);
 
+  useEffect(() => {
+    NATIVE_METHODS.VIBRATE();
+  }, []);
+
   return (
     <main className={mainWrapperCss}>
       <div className={containerCss}>

src/components/AppBarBottom/AppBarBottomVIew.tsx

@@ -1,10 +1,12 @@
 import Link from 'next/link';
 import Icon from '@/components/Icon';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
+import { NATIVE_CUSTOM_EVENTS } from '@/constants/nativeCustomEvent';
 import { NAVIGATION, type NavigationItemType } from '@/constants/navigation';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 import { eventLogger } from '@/utils';
+import { NATIVE_METHODS } from '@/utils/nativeMethod';
 
 interface Props {
   current: string;
@@ -13,6 +15,7 @@ interface Props {
 
 function AppBarBottomView(props: Props) {
   const handleClick = (tabName: string) => {
+    NATIVE_METHODS.HAPTIC();
     eventLogger.logEvent(EVENT_LOG_NAME.BOTTOM_APP_BAR.CLICK_TAB, EVENT_LOG_CATEGORY.BOTTOM_APP_BAR, {
       tabName,
     });

src/constants/nativeCustomEvent.ts

@@ -3,4 +3,6 @@ export const NATIVE_CUSTOM_EVENTS = {
   APPLE_LOGIN: 'appleLogin',
   KAKAO_LOGIN_CALLBACK: 'kakaoLoginCallback',
   APPLE_LOGIN_CALLBACK: 'appleLoginCallback',
+  VIBRATE: 'vibrate',
+  HAPTIC: 'haptic',
 } as const;

src/utils/nativeMethod.ts

@@ -0,0 +1,18 @@
+import { NATIVE_CUSTOM_EVENTS } from '@/constants/nativeCustomEvent';
+
+export const NATIVE_METHODS = {
+  HAPTIC: () => {
+    window.ReactNativeWebView?.postMessage(
+      JSON.stringify({
+        type: NATIVE_CUSTOM_EVENTS.HAPTIC,
+      }),
+    );
+  },
+  VIBRATE: () => {
+    window.ReactNativeWebView?.postMessage(
+      JSON.stringify({
+        type: NATIVE_CUSTOM_EVENTS.VIBRATE,
+      }),
+    );
+  },
+};