Merge pull request #489 from depromeet/feat/motion-home

[Fix] 여러가지 수정사항 반영
depromeet · Feb 9, 2024 · 869ce32 · 869ce32
2 parents 6919ab0 + ef1d6c9
commit 869ce32
Show file tree

Hide file tree

Showing 24 changed files with 175 additions and 76 deletions.
diff --git a/src/app/home/FollowList.tsx b/src/app/home/FollowList.tsx
@@ -2,6 +2,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useFollowMembers } from '@/apis/follow';
 import UserProfile from '@/app/home/UserProfile';
 import { type FollowDataState } from '@/app/page';
+import MotionDiv from '@/components/Motion/MotionDiv';
 import { flex } from '@/styled-system/patterns';
 
 import ProfileItem from './ProfileItem';
@@ -25,14 +26,15 @@ function FollowList() {
       <UserProfile selected={id === null} onClick={onChangeFollowData} />
       {data &&
         data.map((profile) => (
-          <ProfileItem
-            key={profile.memberId}
-            id={profile.memberId}
-            onClick={onChangeFollowData}
-            url={profile.profileImageUrl}
-            name={profile.nickname}
-            selected={id === profile.memberId}
-          />
+          <MotionDiv key={profile.memberId}>
+            <ProfileItem
+              id={profile.memberId}
+              onClick={onChangeFollowData}
+              url={profile.profileImageUrl}
+              name={profile.nickname}
+              selected={id === profile.memberId}
+            />
+          </MotionDiv>
         ))}
     </section>
   );

diff --git a/src/app/home/FollowMissionList.tsx b/src/app/home/FollowMissionList.tsx
@@ -4,6 +4,7 @@ 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 StaggerWrapper from '@/components/Motion/StaggerWrapper';
 import { MISSION_CATEGORY_LABEL } from '@/constants/mission';
 import { ROUTER } from '@/constants/router';
 import { css } from '@styled-system/css';
@@ -19,9 +20,8 @@ function FollowMissionList({ followId }: FollowMissionListProps) {
       <h2 className={headingCss}>
         <span>미션 목록</span>
       </h2>
-      <ul className={listCss}>
-        <MissionFollowListInner followId={followId} />
-      </ul>
+
+      <MissionFollowListInner followId={followId} />
     </div>
   );
 }
@@ -52,7 +52,11 @@ const listCss = flex({
 export function MissionFollowListInner({ followId }: { followId: number }) {
   const { data, isLoading } = useFollowMissions(followId);
   if (isLoading) {
-    return <MissionListSkeleton />;
+    return (
+      <ul className={listCss}>
+        <MissionListSkeleton />
+      </ul>
+    );
   }
 
   if (!data) {
@@ -68,7 +72,7 @@ export function MissionFollowListInner({ followId }: { followId: number }) {
   }
 
   return (
-    <>
+    <StaggerWrapper wrapperOverrideCss={listCss}>
       {data.followMissions.map((item) => {
         const status = item.missionStatus;
 
@@ -84,6 +88,6 @@ export function MissionFollowListInner({ followId }: { followId: number }) {
           </Link>
         );
       })}
-    </>
+    </StaggerWrapper>
   );
 }
diff --git a/src/app/home/FollowSummary.tsx b/src/app/home/FollowSummary.tsx
@@ -5,7 +5,6 @@ import Banner from '@/components/Banner/Banner';
 import LevelProgressBar from '@/components/Graph/LevelProgressBar';
 import Icon from '@/components/Icon';
 import Thumbnail from '@/components/Thumbnail/Thumbnail';
-import { LEVEL_SYSTEM } from '@/constants/level';
 import { ROUTER } from '@/constants/router';
 import { gradientTextCss } from '@/constants/style/gradient';
 import { calcProgress, getLevel } from '@/utils/result';
@@ -21,7 +20,7 @@ function FollowSummary({ memberId: followId, nickname: followNickname, profileIm
   const progress = calcProgress(symbolStack);
 
   return (
-    <div>
+    <div key={followId}>
       <div className={followSummaryTitleCss}>
         <Thumbnail size={'h18'} url={profileImageUrl} variant="filled" />
         <Link href={ROUTER.PROFILE.DETAIL(followId)}>
@@ -39,7 +38,7 @@ function FollowSummary({ memberId: followId, nickname: followNickname, profileIm
           </div>
           <p className={LevelNameCss}>{currentLevel.label}</p>
           <div className={levelProgressBarWrapperCss}>
-            <LevelProgressBar current={progress} isLabel={false} backgroundColor={'purple.purple500'} />
+            <LevelProgressBar key={followId} current={progress} isLabel={false} backgroundColor={'purple.purple500'} />
           </div>
         </div>
       </div>

diff --git a/src/app/home/MissionInnerList.tsx b/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 StaggerWrapper from '@/components/Motion/StaggerWrapper';
 import { MISSION_CATEGORY_LABEL } from '@/constants/mission';
 import { ROUTER } from '@/constants/router';
 import { css } from '@styled-system/css';
@@ -25,7 +26,7 @@ function MissionListInner() {
   }
 
   return (
-    <>
+    <StaggerWrapper wrapperOverrideCss={listCss}>
       {missionList.map((item) => {
         const isProgressingMission = progressMissionId === String(item.missionId);
         const status = isProgressingMission ? MissionStatus.PROGRESSING : item.missionStatus;
@@ -47,12 +48,18 @@ function MissionListInner() {
           </Link>
         );
       })}
-    </>
+    </StaggerWrapper>
   );
 }
 
 export default MissionListInner;
 
+const listCss = css({
+  flex: 1,
+  gap: '8px',
+  height: '100%',
+});
+
 const containerCss = css({
   height: '100%',
   padding: '60px 0',

diff --git a/src/app/home/ProfileItem.tsx b/src/app/home/ProfileItem.tsx
@@ -3,13 +3,15 @@ import { type FollowDataState } from '@/app/page';
 import Thumbnail from '@/components/Thumbnail/Thumbnail';
 import { css, cx } from '@styled-system/css';
 
-function ProfileItem(props: {
+interface Props {
   name: string;
   id: number | null;
   onClick: (props: FollowDataState) => void;
   selected?: boolean;
   url?: string;
-}) {
+}
+
+function ProfileItem(props: Props) {
   const handleClick = () => {
     if (props.id === null) {
       props.onClick(null);
@@ -20,6 +22,7 @@ function ProfileItem(props: {
       nickname: props.name,
     });
   };
+
   return (
     <div className={itemCss} onClick={handleClick}>
       <Thumbnail size="h52" selected={props.selected} url={props.url} variant={props.selected ? 'filled' : 'dimed'} />

diff --git a/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner.tsx b/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import MotionDiv from '@/components/Motion/MotionDiv';
 import { css } from '@styled-system/css';
 
 // TODO : banner 컴포넌트 분리
@@ -13,33 +14,38 @@ function MissionHistoryBanner({
 }) {
   return (
     <div className={missionHistoryBannerCss}>
-      <Image width={36} height={36} alt={title} src={imageUrl} />
-      <div>
-        <p className={bannerTitleCss}>{title}</p>
-        <p className={bannerDescriptionCss}>{description}</p>
-      </div>
+      <MotionDiv className={bannerInnerCss}>
+        <Image width={36} height={36} alt={title} src={imageUrl} />
+        <div>
+          <p className={bannerTitleCss}>{title}</p>
+          <p className={bannerDescriptionCss}>{description}</p>
+        </div>
+      </MotionDiv>
     </div>
   );
 }
 
 export default MissionHistoryBanner;
 
 export const missionHistoryBannerCss = css({
-  display: 'flex',
-  flexDirection: 'row',
-  padding: '16px',
-  gap: '8px',
   borderRadius: '22px',
-  background: 'linear-gradient(93deg, rgba(25, 23, 27, 0.80) 0.82%, rgba(24, 25, 33, 0.80) 99.97%)',
-  boxShadow: '0px 5px 50px 4px rgba(92, 78, 122, 0.50) inset, 0px 4px 20px 0px rgba(16, 15, 23, 0.20)',
-  backdropFilter: 'blur(20px)',
+  boxShadow: '0px 5px 50px 4px #5C4E7A80 inset, 0px 4px 20px 0px #100F1733',
+  background: 'linear-gradient(92.59deg, rgba(25, 23, 27, 0.8) 0.82%, rgba(24, 25, 33, 0.8) 99.97%)',
+  transition: 'all 0.3s ease',
 
   '& img': {
     width: '36px',
     height: '36px',
   },
 });
 
+const bannerInnerCss = css({
+  display: 'flex',
+  flexDirection: 'row',
+  padding: '16px',
+  gap: '8px',
+});
+
 const bannerTitleCss = css({
   textStyle: 'body1',
   color: 'text.primary',

diff --git a/src/app/mission/[id]/follow/page.tsx b/src/app/mission/[id]/follow/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import MissionHistoryTab from '@/app/mission/[id]/detail/MissionHistoryTab';
+import BottomDim from '@/components/BottomDim/BottomDim';
 import Header from '@/components/Header/Header';
 import Tab from '@/components/Tab/Tab';
 import { css } from '@styled-system/css';
@@ -20,6 +21,7 @@ export default function FollowMissionDetailPage() {
         <Tab tabs={tabs} activeTab={'mission-history'} />
       </div>
       <MissionHistoryTab isFollow={true} />
+      <BottomDim />
     </main>
   );
 }

diff --git a/src/app/mypage/MyProfile.tsx b/src/app/mypage/MyProfile.tsx
@@ -50,8 +50,7 @@ export default function MyProfile() {
 }
 
 const tabWrapper = css({
-  margin: '20px 0',
-  padding: '16px 16px 0 16px',
+  margin: '36px 0 24px',
 });
 
 const profileEditButtonCss = css({

diff --git a/src/app/profile/[id]/FollowButton.tsx b/src/app/profile/[id]/FollowButton.tsx
@@ -68,7 +68,7 @@ const followingButtonCss = css({
   border: '1px solid',
   borderColor: 'gray.gray500',
   borderRadius: '20px',
-  backgroundColor: 'transparent',
+  backgroundColor: 'transparent !',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',

diff --git a/src/app/profile/[id]/ProfileContent.tsx b/src/app/profile/[id]/ProfileContent.tsx
@@ -70,7 +70,7 @@ const myTabContainerCss = css({
   backgroundColor: 'bg.surface2',
   borderTopRightRadius: '28px',
   borderTopLeftRadius: '28px',
-  padding: '52px 24px 0',
+  padding: '52px 16px 0',
 });
 const userNameCss = css({
   color: 'text.primary',

diff --git a/src/app/profile/[id]/follows/FollowingList.tsx b/src/app/profile/[id]/follows/FollowingList.tsx
@@ -15,6 +15,7 @@ import { css } from '@/styled-system/css';
 interface Props {
   list: FollowerMemberWithStatusType[];
   refetch: () => void;
+  isFetching: boolean;
 }
 
 function FollowingList(props: Props) {
@@ -30,6 +31,7 @@ function FollowingList(props: Props) {
               onUpdateItem(_item);
               props.refetch();
             }}
+            isLoading={props.isFetching}
           />
         </Link>
       ))}

diff --git a/src/app/profile/[id]/follows/page.tsx b/src/app/profile/[id]/follows/page.tsx
@@ -18,7 +18,7 @@ function FollowListPage({ params }: { params: { id: string } }) {
 
   const currentMemberId = Number(params.id);
 
-  const { data, refetch, isLoading } = useFetFollowList(Number(params.id));
+  const { data, refetch, isLoading, isFetching } = useFetFollowList(Number(params.id));
 
   const followingCount = data?.followingList.length ?? '';
   const followerCount = data?.followerList.length ?? '';
@@ -56,16 +56,31 @@ function FollowListPage({ params }: { params: { id: string } }) {
       {/* 내 팔로잉/팔로우 */}
       {isMyFollowList &&
         (activeTab === 'following' ? (
-          <FollowingList key="my-following" list={data?.followingList ?? []} refetch={refetch} />
+          <FollowingList
+            key="my-following"
+            list={data?.followingList ?? []}
+            refetch={refetch}
+            isFetching={isFetching}
+          />
         ) : (
           <MyFollowerList key="my-follower" list={data?.followerList ?? []} refetch={refetch} />
         ))}
       {/* 다른 사람 팔로잉/팔로우 */}
       {!isMyFollowList &&
         (activeTab === 'following' ? (
-          <FollowingList key={`${currentMemberId}-following`} list={data?.followingList ?? []} refetch={refetch} />
+          <FollowingList
+            key={`${currentMemberId}-following`}
+            list={data?.followingList ?? []}
+            refetch={refetch}
+            isFetching={isFetching}
+          />
         ) : (
-          <FollowingList key={`${currentMemberId}-follower`} list={data?.followerList ?? []} refetch={refetch} />
+          <FollowingList
+            key={`${currentMemberId}-follower`}
+            list={data?.followerList ?? []}
+            refetch={refetch}
+            isFetching={isFetching}
+          />
         ))}
     </div>
   );

diff --git a/src/app/record/[id]/page.tsx b/src/app/record/[id]/page.tsx
@@ -186,6 +186,7 @@ const mainWrapperCss = css({
   flexDirection: 'column',
   backgroundColor: 'bg.surface2',
   height: '100%',
+  paddingBottom: '60px',
 });
 
 const headerWrapperCss = css({

diff --git a/src/app/record/success/layout.tsx b/src/app/record/success/layout.tsx
@@ -5,16 +5,7 @@ import { motion } from 'framer-motion';
 
 export default function Layout({ children }: PropsWithChildren) {
   return (
-    <motion.div
-      initial={{ x: 300, opacity: 0 }}
-      animate={{ x: 0, opacity: 1 }}
-      exit={{ x: 300, opacity: 0 }}
-      transition={{
-        type: 'spring',
-        stiffness: 260,
-        damping: 20,
-      }}
-    >
+    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }}>
       <div className={containerCss}>{children}</div>
     </motion.div>
   );

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -16,7 +16,7 @@ function SearchPage() {
     <>
       <SearchBar placeholder="닉네임을 검색해 주세요." value={input} onChange={setInput} />
       <Suspense fallback={<div></div>}>
-        <List nickname={input} />
+        <List nickname={input} key={input} />
       </Suspense>
     </>
   );
@@ -25,7 +25,7 @@ function SearchPage() {
 export default SearchPage;
 
 function List({ nickname }: { nickname: string }) {
-  const { data, refetch } = useSuspenseGetSearchNickname(nickname);
+  const { data, refetch, isFetching } = useSuspenseGetSearchNickname(nickname);
 
   const onButtonClick = () => {
     refetch();
@@ -34,11 +34,11 @@ function List({ nickname }: { nickname: string }) {
   return (
     <StaggerWrapper wrapperOverrideCss={listContainer} staggerVariants={stagger(0.02)}>
       {data.map((item) => (
-        <Link key={item.memberId} href={ROUTER.PROFILE.DETAIL(item.memberId)}>
+        <Link key={item.memberId + item.followStatus} href={ROUTER.PROFILE.DETAIL(item.memberId)}>
           {item.followStatus === 'FOLLOWING' ? (
-            <FollowingMember {...item} onButtonClick={onButtonClick} />
+            <FollowingMember {...item} onButtonClick={onButtonClick} isLoading={isFetching} />
           ) : (
-            <NotFollowingMember {...item} onButtonClick={onButtonClick} />
+            <NotFollowingMember {...item} onButtonClick={onButtonClick} isLoading={isFetching} />
           )}
         </Link>
       ))}

diff --git a/src/components/BottomDim/BottomDim.tsx b/src/components/BottomDim/BottomDim.tsx
@@ -18,4 +18,5 @@ const containerCss = css({
   zIndex: 'bottomDim',
   background:
     'linear-gradient(180deg, rgba(24, 24, 29, 0.00) 0%, rgba(24, 24, 29, 0.09) 7.58%, rgba(24, 24, 29, 0.59) 34.59%, rgba(24, 24, 29, 0.69) 41.18%, rgba(24, 24, 29, 0.83) 51.39%, #18181D 63.25%)',
+  pointerEvents: 'none',
 });