Merge pull request #328 from sharemindteam/dev

[0629]
sharemindteam · Jun 29, 2024 · 24236e1 · 24236e1
2 parents cf1835d + 69fd0b1
commit 24236e1
Show file tree

Hide file tree

Showing 112 changed files with 2,031 additions and 1,256 deletions.
diff --git a/src/components/Buyer/BuyerAvailCounselor/AvailCounselorSearchResult.tsx b/src/components/Buyer/BuyerAvailCounselor/AvailCounselorSearchResult.tsx
@@ -1,22 +1,30 @@
-import styled from 'styled-components';
 import { ReadyConsultCard } from '../Common/ReadyConsultCard';
 import { SearchResultData } from 'utils/type';
 import { AppendCategoryType } from 'utils/AppendCategoryType';
 import { consultStyleToCharNum } from 'utils/convertStringToCharNum';
+import { Flex } from 'components/Common/Flex';
+
 //
 //
 //
+
 interface AvailCounselorSearchResultsProps {
   searchData: SearchResultData[];
 }
+
 //
 //
-//임의로 ConsultInReady 그대로 사용
+//
+
 export const AvailCounselorSearchResults = ({
   searchData,
 }: AvailCounselorSearchResultsProps) => {
   return (
-    <Wrapper>
+    <Flex
+      direction="column"
+      gap="0.8rem"
+      style={{ padding: '0 2rem 3.5rem 2rem' }}
+    >
       {searchData.map((value, index) => {
         return (
           <ReadyConsultCard
@@ -42,13 +50,6 @@ export const AvailCounselorSearchResults = ({
           />
         );
       })}
-    </Wrapper>
+    </Flex>
   );
 };
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  margin-bottom: 3.5rem;
-`;
diff --git a/src/components/Buyer/BuyerCategoryResult/CategorySearchResult.tsx b/src/components/Buyer/BuyerCategoryResult/CategorySearchResult.tsx
@@ -3,6 +3,7 @@ import { ReadyConsultCard } from '../Common/ReadyConsultCard';
 import { SearchResultData } from 'utils/type';
 import { AppendCategoryType } from 'utils/AppendCategoryType';
 import { consultStyleToCharNum } from 'utils/convertStringToCharNum';
+import { Flex } from 'components/Common/Flex';
 interface CategorySearchResultsProps {
   searchData: SearchResultData[];
 }
@@ -12,7 +13,7 @@ export const CategorySearchResults = ({
   searchData,
 }: CategorySearchResultsProps) => {
   return (
-    <Wrapper>
+    <Flex direction="column" gap="0.8rem" style={{ padding: '0 2rem' }}>
       {searchData.map((value) => {
         return (
           <ReadyConsultCard
@@ -37,12 +38,6 @@ export const CategorySearchResults = ({
           />
         );
       })}
-    </Wrapper>
+    </Flex>
   );
 };
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-`;
diff --git a/src/components/Buyer/BuyerChat/BuyerChatFooter.tsx b/src/components/Buyer/BuyerChat/BuyerChatFooter.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { Green, Grey1, Grey3, Grey6, White } from 'styles/color';
 import { ReactComponent as Search } from 'assets/icons/chat-send-button.svg';
+import { APP_WIDTH } from 'styles/AppStyle';
 
 //
 //
@@ -66,11 +67,11 @@ const BuyerChatFooter = ({
 const FooterWrapper = styled.footer`
   position: fixed;
   @media (min-width: 768px) {
-    width: 37.5rem;
-  }
-  @media (max-width: 767px) {
-    width: 100vw;
+    width: ${APP_WIDTH};
   }
+
+  width: 100%;
+
   background-color: ${White};
   bottom: 0;
   display: flex;

diff --git a/src/components/Buyer/BuyerChat/BuyerChatSection.tsx b/src/components/Buyer/BuyerChat/BuyerChatSection.tsx
@@ -289,6 +289,8 @@ const SectionWrapper = styled.section<{ inputHeight: number }>`
   .counselor-info-container {
     display: flex;
     width: 100%;
+    box-sizing: border-box;
+    padding: 0 2rem;
     justify-content: center;
   }
   .my-box-container {

diff --git a/src/components/Buyer/BuyerChat/ChatCounselorInfoBox.tsx b/src/components/Buyer/BuyerChat/ChatCounselorInfoBox.tsx
@@ -84,7 +84,7 @@ export const ChatCounselorInfoBox = ({ info }: ChatCounselorInfoBoxProps) => {
 
 const CounselorInfoBox = styled.div`
   background-color: ${White};
-  width: 89.33%;
+  width: 100%;
   margin-top: 1.8rem;
   margin-bottom: 0.4rem;
   box-sizing: border-box;

diff --git a/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx b/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx
@@ -9,18 +9,30 @@ import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg';
 import { Heading } from 'styles/font';
 import { Space } from 'components/Common/Space';
 
+//
+//
+//
+
 interface BuyerConsultLetterSectionProps {
   sortType: number;
   isChecked: boolean;
 }
 
+//
+//
+//
+
 export const BuyerConsultLetterSection = ({
   sortType,
   isChecked,
 }: BuyerConsultLetterSectionProps) => {
   const [cardData, setCardData] = useState<consultApiObject[]>([]); //card에 넘길 데이터
 
   const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  //
+  //
+  //
   useLayoutEffect(() => {
     const fetchData = async () => {
       setIsLoading(true);
@@ -47,8 +59,14 @@ export const BuyerConsultLetterSection = ({
         setIsLoading(false);
       }
     };
+
     fetchData();
   }, [sortType, isChecked, setIsLoading]);
+
+  //
+  //
+  //
+
   if (isLoading) {
     return (
       <>
@@ -64,41 +82,46 @@ export const BuyerConsultLetterSection = ({
         </div>
       </>
     );
-  } else {
-    return (
-      <>
-        {cardData.length !== 0 ? (
-          <BuyerConsultLetterSectionWrapper>
-            {cardData.map((value) => {
-              return (
-                <ConsultCard
-                  key={value.id}
-                  consultStyle={value.consultStyle}
-                  id={value.id}
-                  latestMessageContent={value.latestMessageContent}
-                  latestMessageIsCustomer={value.latestMessageIsCustomer}
-                  latestMessageUpdatedAt={value.latestMessageUpdatedAt}
-                  opponentNickname={value.opponentNickname}
-                  status={value.status}
-                  unreadMessageCount={value.unreadMessageCount}
-                  reviewCompleted={value.reviewCompleted}
-                  consultId={value.consultId}
-                  isLetter={true}
-                />
-              );
-            })}
-            <Space height="4rem" />
-          </BuyerConsultLetterSectionWrapper>
-        ) : (
-          <EmptyWrapper>
-            <EmptyIcon />
-            <Heading>아직 진행한 상담이 없어요</Heading>
-          </EmptyWrapper>
-        )}{' '}
-      </>
-    );
   }
+
+  return (
+    <>
+      {cardData.length !== 0 ? (
+        <BuyerConsultLetterSectionWrapper>
+          {cardData.map((value) => {
+            return (
+              <ConsultCard
+                key={value.id}
+                consultStyle={value.consultStyle}
+                id={value.id}
+                latestMessageContent={value.latestMessageContent}
+                latestMessageIsCustomer={value.latestMessageIsCustomer}
+                latestMessageUpdatedAt={value.latestMessageUpdatedAt}
+                opponentNickname={value.opponentNickname}
+                status={value.status}
+                unreadMessageCount={value.unreadMessageCount}
+                reviewCompleted={value.reviewCompleted}
+                consultId={value.consultId}
+                isLetter={true}
+              />
+            );
+          })}
+          <Space height="4rem" />
+        </BuyerConsultLetterSectionWrapper>
+      ) : (
+        <EmptyWrapper>
+          <EmptyIcon />
+          <Heading>아직 진행한 상담이 없어요</Heading>
+        </EmptyWrapper>
+      )}
+    </>
+  );
 };
+
+//
+//
+//
+
 const BuyerConsultLetterSectionWrapper = styled.section`
   margin-bottom: 2rem;
   display: flex;
@@ -110,6 +133,7 @@ const BuyerConsultLetterSectionWrapper = styled.section`
 const EmptyIcon = styled(Empty)`
   padding: 4.7rem 4.41rem 4.603rem 4.5rem;
 `;
+
 const EmptyWrapper = styled.div`
   margin-top: 10vh;
   display: flex;

diff --git a/src/components/Buyer/BuyerConsult/BuyerOpenConsultSection.tsx b/src/components/Buyer/BuyerConsult/BuyerOpenConsultSection.tsx
@@ -227,7 +227,6 @@ function BuyerOpenConsultSection({ isChecked }: BuyerOpenConsultSectionProps) {
 
 const BuyerOpenConsultCardList = styled.div`
   display: flex;
-  padding: 1.2rem 2rem;
   flex-direction: column;
   align-items: flex-start;
   gap: 1.2rem;

diff --git a/src/components/Buyer/BuyerConsult/ConsultModal.tsx b/src/components/Buyer/BuyerConsult/ConsultModal.tsx
@@ -7,6 +7,7 @@ import { Body1 } from 'styles/font';
 import { isConsultModalOpenState, scrollLockState } from 'utils/atom';
 import { ReactComponent as Bar } from 'assets/icons/icon-modal-bar.svg';
 import { SetURLSearchParams } from 'react-router-dom';
+import { APP_WIDTH } from 'styles/AppStyle';
 
 //
 //
@@ -32,16 +33,10 @@ export const ConsultModal = ({
 }: SortModalProps) => {
   //modal 여부
   const [isModalOpen, setIsModalOpen] = useRecoilState(isConsultModalOpenState);
-  //여기서 unmount 시 sortType 바꾸고 새로 request
-  //바뀌고 unmount 될 때 sortType 바꾸기 위해 따로 정의
+
   const [modalSortType, setModalSortType] = useState<number>(sortType);
   //scorll 막기
   const setScrollLock = useSetRecoilState(scrollLockState);
-  // useEffect(() => {
-  //   return () => {
-  //     setSortType(modalSortType);
-  //   };
-  // });
 
   //
   //
@@ -93,6 +88,7 @@ export const ConsultModal = ({
     </Wrapper>
   );
 };
+
 const slideIn = keyframes`
   from{
     transform : translateY(100%);
@@ -101,6 +97,7 @@ const slideIn = keyframes`
     transform : translateY(0%);
   }
 `;
+
 const slideOut = keyframes`
   from{
     transform : translateY(0%);
@@ -109,12 +106,12 @@ const slideOut = keyframes`
     transform : translateY(100%);
   }
 `;
+
 const Wrapper = styled.div<{ visible: boolean }>`
-  @media (max-width: 767px) {
-    width: 100vw;
-  }
+  width: 100%;
+
   @media (min-width: 768px) {
-    width: 37.5rem;
+    width: ${APP_WIDTH};
   }
   position: fixed;
   height: 14.3rem;

diff --git a/src/components/Buyer/BuyerConsult/IsBuyPopup.tsx b/src/components/Buyer/BuyerConsult/IsBuyPopup.tsx
@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
+import { APP_WIDTH } from 'styles/AppStyle';
 import { Green, LightGreen, White } from 'styles/color';
 import { Body1 } from 'styles/font';
 import { isBuyPopupOpenState } from 'utils/atom';
@@ -47,12 +48,10 @@ const IsSendModalBox = styled.div`
   display: flex;
   justify-content: center;
   position: absolute;
-  top: 22.3rem;
-  @media (max-width: 767px) {
-    width: 100vw;
-  }
+  top: 36vh;
+
   @media (min-width: 768px) {
-    width: 37.5rem;
+    width: ${APP_WIDTH};
   }
 `;