Feat/#60 리뷰 회의 피드백 반영 (#85)

* fix: tabBar가 보이는 현상을 수정합니다.

* refactor: 지우기 로직을 제거합니다.

* refactor: 배경을 그라데이션으로 변경합니다.

* refactor: 배경을 그라데이션으로 변경합니다.

* fix: 화면 밖으로 벗어나는 현상을 수정합니다.

app/(app)/project/detail.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocalSearchParams } from 'expo-router';
+import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Suspense } from 'react';
 
 import { MOCK_PROJECT_DETAIL } from '@/__mock__/project';
@@ -16,6 +16,7 @@ type InnerProps = {
 
 function Inner({ id }: InnerProps) {
   const data = MOCK_PROJECT_DETAIL;
+  const router = useRouter();
 
   return (
     <CustomLayout backgroundColor={color.Background.Alternative}>
@@ -24,13 +25,9 @@ function Inner({ id }: InnerProps) {
         backgroundColor={color.Background.Alternative}
         title={data.name}
         left={
-          <Link
-            asChild
-            href={{ pathname: PROJECT_URLS.MAIN }}>
-            <CustomHeader.Button>
-              <CustomHeader.BackButton />
-            </CustomHeader.Button>
-          </Link>
+          <CustomHeader.Button onPress={() => router.replace({ pathname: PROJECT_URLS.MAIN })}>
+            <CustomHeader.BackButton />
+          </CustomHeader.Button>
         }
         right={
           <CustomHeader.Button>

app/(app)/project/review/create.tsx

@@ -1,8 +1,14 @@
 import styled from '@emotion/native';
 import dayjs from 'dayjs';
+import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Suspense, useCallback, useState } from 'react';
 import { View } from 'react-native';
+import Animated, {
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
 
 import type { QuestionType } from '@/apis/questionnaire/type';
 import SolidButton from '@/components/common/button/SolidButton';
@@ -11,17 +17,18 @@ import CustomLayout from '@/components/common/custom-layout';
 import ConfirmModal from '@/components/common/modal/ConfirmModal';
 import Typography from '@/components/common/typography';
 import CreateReviewList from '@/components/review/CreateReviewList';
-import { REVIEW_NAVIGATIONS, REVIEW_URLS } from '@/constants';
+import { COMPONENT_SIZE, REVIEW_NAVIGATIONS, REVIEW_URLS } from '@/constants';
 import type { EngCategoryType } from '@/enums/categoryEnum';
 import useGetCategory from '@/hooks/queries/useGetCategory';
 import { color } from '@/styles/theme';
-import { distributeItems } from '@/utils';
+import { distributeItems, getSize } from '@/utils';
 
 type WrapperProps = {
   id: string;
   categories: EngCategoryType[];
 };
 
+const GRADIENT_COLRORS = ['#FFE58E', '#AAC5FF'];
 const CREATE_REVIEW_LENGTH = 20;
 
 function assignQuestionsToCategories(categoriesData: QuestionType[]): QuestionType[] {
@@ -59,6 +66,7 @@ function Create() {
 }
 
 function Wrapper({ id, categories }: WrapperProps) {
+  const router = useRouter();
   const {
     data: { allQuestions },
   } = useGetCategory(categories);
@@ -69,23 +77,6 @@ function Wrapper({ id, categories }: WrapperProps) {
     assignQuestionsToCategories(allQuestions)
   );
 
-  const removeQuestion = useCallback(
-    (categoryType: EngCategoryType, questionId: number) => {
-      const updatedQuestions = selectedQuestions.map((category) => {
-        if (category.categoryType === categoryType) {
-          return {
-            ...category,
-            questions: category.questions.filter((question) => question.questionId !== questionId),
-          };
-        }
-        return category;
-      });
-
-      setSelectedQuestions(updatedQuestions);
-    },
-    [selectedQuestions]
-  );
-
   const getRandomNewQuestion = useCallback(
     (categoryType: EngCategoryType, questionId: number) => {
       const selectedCategory = selectedQuestions.find(
@@ -129,8 +120,25 @@ function Wrapper({ id, categories }: WrapperProps) {
     },
     [selectedQuestions, allQuestions]
   );
+  const scrollX = useSharedValue(0);
 
-  const router = useRouter();
+  // 스크롤 이벤트 핸들러로 scrollX 값을 업데이트
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollX.value = event.contentOffset.x;
+    },
+  });
+
+  // 그라데이션 배경을 스크롤에 따라 움직이도록 스타일 정의
+  const animatedGradientStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: scrollX.value * -0.2, // 배경 이동을 더 부드럽게 조정
+        },
+      ],
+    };
+  });
 
   return (
     <CustomLayout backgroundColor={color.Background.Normal}>
@@ -170,10 +178,26 @@ function Wrapper({ id, categories }: WrapperProps) {
       </S.GuideTextWrapper>
 
       <S.ListWrapper>
+        <S.GradientBackground
+          style={[
+            {
+              height: getSize.screenHeight,
+              width: getSize.screenWidth * 4 + getSize.screenWidth - 150,
+            },
+            animatedGradientStyle,
+          ]}>
+          <LinearGradient
+            start={{ x: 0, y: 0.5 }}
+            end={{ x: 1, y: 0.5 }}
+            colors={GRADIENT_COLRORS}
+            style={{ flex: 1 }}
+          />
+        </S.GradientBackground>
+
         <CreateReviewList
+          scrollHandler={scrollHandler}
           selectedQuestions={selectedQuestions}
           getRandomNewQuestion={getRandomNewQuestion}
-          removeQuestion={removeQuestion}
         />
       </S.ListWrapper>
 
@@ -192,15 +216,19 @@ const S = {
   ListWrapper: styled.View`
     flex-grow: 1;
     justify-content: center;
-    background-color: ${({ theme }) => theme.color.Background.Alternative};
   `,
   ButtonWrapper: styled.View`
     padding: 12px 20px 52px;
-    background-color: ${({ theme }) => theme.color.Background.Alternative};
   `,
   GuideTextWrapper: styled.View`
     padding: 20px;
-    background-color: ${({ theme }) => theme.color.Background.Normal};
+  `,
+  GradientBackground: styled(Animated.View)`
+    position: absolute;
+    top: 1px;
+    z-index: -1;
+    width: ${getSize.deviceWidth * 2}px;
+    height: ${getSize.deviceHeight - 55 - COMPONENT_SIZE.STATUSBAR}px;
   `,
 };
 

app/(app)/project/review/select.tsx

@@ -51,11 +51,7 @@ function Select() {
         title='나의 설문지'
         left={
           <CustomHeader.Button
-            onPress={() =>
-              router.canGoBack()
-                ? router.back()
-                : router.replace({ pathname: PROJECT_URLS.DETAIL, params: { id } })
-            }>
+            onPress={() => router.replace({ pathname: PROJECT_URLS.DETAIL, params: { id } })}>
             <CustomHeader.BackButton />
           </CustomHeader.Button>
         }

src/components/project/ProjectDetail/index.tsx

@@ -1,5 +1,5 @@
 import { AntDesign } from '@expo/vector-icons';
-import { Link } from 'expo-router';
+import { useRouter } from 'expo-router';
 import { ScrollView } from 'react-native';
 
 import SolidButton from '@/components/common/button/SolidButton';
@@ -35,6 +35,7 @@ type Props = {
 };
 
 function ProjectDetail({ id, data }: Props) {
+  const router = useRouter();
   return (
     <ScrollView
       style={{
@@ -142,11 +143,11 @@ function ProjectDetail({ id, data }: Props) {
           </S.LinkBox>
         </S.ProjectItem>
 
-        <Link
-          asChild={true}
-          href={{ pathname: REVIEW_URLS.SELECT, params: { id } }}>
-          <SolidButton full>설문지 만들기</SolidButton>
-        </Link>
+        <SolidButton
+          onPress={() => router.navigate({ pathname: REVIEW_URLS.SELECT, params: { id } })}
+          full>
+          설문지 만들기
+        </SolidButton>
       </S.Container>
     </ScrollView>
   );

src/components/project/ProjectItem/index.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'expo-router';
+import { useRouter } from 'expo-router';
 
 import SlideBar from '@/components/common/slide-bar';
 import Typography from '@/components/common/typography';
@@ -10,43 +10,43 @@ import { color } from '@/styles/theme';
 import * as S from './style';
 
 function ProjectItem({ name, member_num, profile, review_count, id }: ProjectItemType) {
+  const router = useRouter();
   return (
-    <Link
-      asChild={true}
-      href={{
-        pathname: PROJECT_URLS.DETAIL,
-        params: { id },
-      }}>
-      <S.Container>
-        <ProjectImage uri={profile} />
-        <S.ProjectStatusBox>
-          <Typography
-            variant='Caption1'
-            color={color.Label.Alternative}>
-            프로젝트
-          </Typography>
-          <S.ProgressBox>
-            <S.ProgressInfo>
-              <Typography
-                variant='Body1/Normal'
-                fontWeight='semiBold'
-                color={color.Label.Normal}>
-                {name}
-              </Typography>
-              <Typography
-                variant='Caption1'
-                color={color.Label.Assistive}>
-                {review_count} / {member_num}
-              </Typography>
-            </S.ProgressInfo>
-            <SlideBar
-              max_value={member_num}
-              current_value={review_count}
-            />
-          </S.ProgressBox>
-        </S.ProjectStatusBox>
-      </S.Container>
-    </Link>
+    <S.Container
+      onPress={() =>
+        router.replace({
+          pathname: PROJECT_URLS.DETAIL,
+          params: { id },
+        })
+      }>
+      <ProjectImage uri={profile} />
+      <S.ProjectStatusBox>
+        <Typography
+          variant='Caption1'
+          color={color.Label.Alternative}>
+          프로젝트
+        </Typography>
+        <S.ProgressBox>
+          <S.ProgressInfo>
+            <Typography
+              variant='Body1/Normal'
+              fontWeight='semiBold'
+              color={color.Label.Normal}>
+              {name}
+            </Typography>
+            <Typography
+              variant='Caption1'
+              color={color.Label.Assistive}>
+              {review_count} / {member_num}
+            </Typography>
+          </S.ProgressInfo>
+          <SlideBar
+            max_value={member_num}
+            current_value={review_count}
+          />
+        </S.ProgressBox>
+      </S.ProjectStatusBox>
+    </S.Container>
   );
 }