Merge pull request #340 from TEAM-SEONYAK/fix/#338/juniorPromiseQA

[ Fix ] junior promise page QA 반영
TEAM-SEONYAK · Nov 17, 2024 · 1c7d3a3 · 1c7d3a3
2 parents 9cf5e15 + 92cecbe
commit 1c7d3a3
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 13 deletions.
diff --git a/src/components/commons/SeniorCard.tsx b/src/components/commons/SeniorCard.tsx
@@ -69,6 +69,8 @@ const SeniorCardWrapper = styled.div<{ $isSmall: boolean }>`
   border-radius: 8px;
 
   background: ${({ theme }) => theme.colors.grayScaleWhite};
+
+  cursor: pointer;
 `;
 const SeniorImg = styled.img<{ $isSmall: boolean }>`
   width: ${({ $isSmall }) => ($isSmall ? '8.8rem' : '11.4rem')};

diff --git a/src/pages/juniorPromise/JuniorPromisePage.tsx b/src/pages/juniorPromise/JuniorPromisePage.tsx
@@ -1,5 +1,8 @@
-import { ArrowLeftIc } from '@assets/svgs';
+import { HeaderLogoIc, AlarmIc } from '@assets/svgs';
 import { Header } from '@components/commons/Header';
+import { AutoCloseModal } from '@components/commons/modal/AutoCloseModal';
+import img_modal_accept from '@assets/images/img_modal_accept.png';
+
 import Nav from '@components/commons/Nav';
 import { SeniorCard } from '@components/commons/SeniorCard';
 import styled from '@emotion/styled';
@@ -17,6 +20,8 @@ import { useNavigate } from 'react-router-dom';
 import useSeniorProfileQueries from '@hooks/seniorProfileQueries';
 
 const JuniorPromisePage = () => {
+  const [showModal, setShowModal] = useState(false);
+
   const navigate = useNavigate();
 
   // 바텀 시트 내 버튼& 내용 필터 버튼
@@ -113,11 +118,12 @@ const JuniorPromisePage = () => {
       {isSeniorCardClicked ? (
         <>
           <Header
-            LeftSvg={ArrowLeftIc}
-            onClickLeft={() => {
-              setIsSeniorCardClicked(false);
-            }}
+            LeftSvg={HeaderLogoIc}
+            RightSvg={AlarmIc}
+            onClickRight={() => setShowModal(true)}
+            bgColor="transparent"
           />
+
           <PreView variant="secondary" seniorId={seniorId + ''} />
           <FullBtn text="약속 신청하기" onClick={handlePromiseClicked} />
         </>
@@ -151,6 +157,13 @@ const JuniorPromisePage = () => {
           <Nav />
         </PreventScroll>
       )}
+      {/* 모달 컴포넌트 추가 */}
+      <AutoCloseModal
+        text="알림은 문자를 확인해주세요 !"
+        showModal={showModal}
+        handleShowModal={(show: boolean) => setShowModal(show)}>
+        <ModalImg src={img_modal_accept} />
+      </AutoCloseModal>
     </>
   );
 };
@@ -187,3 +200,7 @@ const SeniorCardListLayout = styled.div`
   margin-bottom: 10rem;
   padding: 0.8rem 2rem;
 `;
+const ModalImg = styled.img`
+  width: 27rem;
+  height: 17.2rem;
+`;
diff --git a/src/pages/juniorPromise/components/BottomSheet.tsx b/src/pages/juniorPromise/components/BottomSheet.tsx
@@ -142,6 +142,10 @@ const Content = styled.div`
   overflow: auto;
 
   height: 35.2rem;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const FieldLayout = styled.div`
@@ -219,4 +223,7 @@ const ExitBottomSheet = styled.button<SelectedChipListProps>`
 
   color: ${({ theme }) => theme.colors.grayScaleWhite};
   ${({ theme }) => theme.fonts.Head2_SB_18};
+
+  cursor: ${({ $chipFieldName, $chipPositionName }) =>
+    $chipFieldName.length > 0 || $chipPositionName.length > 0 ? 'pointer' : 'default'};
 `;
diff --git a/src/pages/juniorPromise/components/FieldList.tsx b/src/pages/juniorPromise/components/FieldList.tsx
@@ -29,6 +29,8 @@ const FieldWrapper = styled.div`
   justify-content: space-between;
 
   padding: 1rem 0;
+
+  cursor: pointer;
 `;
 const FieldTitle = styled.p<{ isSelected: boolean }>`
   ${({ theme }) => theme.fonts.Title1_SB_16};

diff --git a/src/pages/juniorPromise/components/PositionList.tsx b/src/pages/juniorPromise/components/PositionList.tsx
@@ -39,4 +39,6 @@ const PositionTitle = styled.p<{ $selectedPositionIndex: boolean }>`
   ${({ theme }) => theme.fonts.Caption2_SB_12};
   color: ${({ theme, $selectedPositionIndex }) =>
     $selectedPositionIndex ? theme.colors.Blue : theme.colors.grayScaleDG};
+
+  cursor: pointer;
 `;
diff --git a/src/pages/juniorPromise/components/SeniorSearch.tsx b/src/pages/juniorPromise/components/SeniorSearch.tsx
@@ -55,23 +55,23 @@ export const SeniorSearch = (props: SeniorSearchPropTypes) => {
           <LineWrapper>
             <Line292Ic />
           </LineWrapper>
-          <ResetIc onClick={handleReset} />
+          <ResetIcon onClick={handleReset} />
         </BtnLayout>
         <SelectedChipList $chipFieldName={chipFieldName} $chipPositionName={chipPositionName}>
           {chipFieldName.map((field, fieldId) => (
             <Chip key={fieldId}>
               {field}
-              <CloseButton onClick={() => handleDeleteFieldChip(field)}>
+              <CloseIcon onClick={() => handleDeleteFieldChip(field)}>
                 <CloseIc />
-              </CloseButton>
+              </CloseIcon>
             </Chip>
           ))}
           {chipPositionName.map((position, positionId) => (
             <Chip key={positionId}>
               {position}
-              <CloseButton onClick={() => handleDeletePositionChip(position)}>
+              <CloseIcon onClick={() => handleDeletePositionChip(position)}>
                 <CloseIc />
-              </CloseButton>
+              </CloseIcon>
             </Chip>
           ))}
         </SelectedChipList>
@@ -136,10 +136,16 @@ const Chip = styled.div`
   color: ${({ theme }) => theme.colors.grayScaleDG};
 `;
 
-const CloseButton = styled(CloseIc)`
+const CloseIcon = styled(CloseIc)`
   padding: 0.4962rem 0.4839rem 0.4962rem 0.5084rem;
+
+  cursor: pointer;
 `;
 
 const LineWrapper = styled.div`
   padding-left: 13.7rem;
 `;
+
+const ResetIcon = styled(ResetIc)`
+  cursor: pointer;
+`;
diff --git a/src/pages/juniorPromise/components/seniorFilter/Banner.tsx b/src/pages/juniorPromise/components/seniorFilter/Banner.tsx
@@ -2,19 +2,30 @@ import styled from '@emotion/styled';
 import { Header } from '@components/commons/Header';
 import { HeaderLogoIc, AlarmIc } from '@assets/svgs';
 import img_hbhome_main from '@assets/images/img_hbhome_main.png';
+import { useState } from 'react';
+import { AutoCloseModal } from '@components/commons/modal/AutoCloseModal';
+import img_modal_accept from '@assets/images/img_modal_accept.png';
+
 interface BannerPropTypes {
-  // 오류시 '후배'
   myNickname: string | undefined;
 }
 
 export const Banner = ({ myNickname }: BannerPropTypes) => {
+  const [showModal, setShowModal] = useState(false);
+
   return (
     <>
-      <Header LeftSvg={HeaderLogoIc} RightSvg={AlarmIc} bgColor="transparent" />
+      <Header LeftSvg={HeaderLogoIc} RightSvg={AlarmIc} onClickRight={() => setShowModal(true)} bgColor="transparent" />
       <Background>
         <HbHomeMainImg src={img_hbhome_main} />
       </Background>
       <Title>반가워요 {myNickname ? myNickname : '후배'}님,고민을 해결해볼까요?</Title>
+      <AutoCloseModal
+        text="알림은 문자를 확인해주세요 !"
+        showModal={showModal}
+        handleShowModal={(show: boolean) => setShowModal(show)}>
+        <ModalImg src={img_modal_accept} />
+      </AutoCloseModal>
     </>
   );
 };
@@ -46,3 +57,8 @@ const HbHomeMainImg = styled.img`
   right: 0;
   bottom: 0;
 `;
+
+const ModalImg = styled.img`
+  width: 27rem;
+  height: 17.2rem;
+`;