Merge pull request #227 from sharemindteam/fix/restrict-charaters-num

[Fix] 공개상담 제목, 본문 최대 입력 글자 수 제한, 헤더 고정
sharemindteam · Apr 16, 2024 · 21e180a · 21e180a
2 parents 3de9f10 + 1fa9b2f
commit 21e180a
Show file tree

Hide file tree

Showing 14 changed files with 77 additions and 51 deletions.
diff --git a/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx b/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx
@@ -30,8 +30,16 @@ function FinalWritePopup({ title, content, category }: FianlWritePopupProps) {
       content: content,
       isCompleted: true,
     };
-    await patchOpenConsult(body);
-    navigate('/consult/?type=open-consult');
+    try {
+      const res: any = await patchOpenConsult(body);
+      if (res?.status === 200) {
+        navigate('/consult/?type=open-consult');
+      } else {
+        console.log(res);
+      }
+    } catch (err) {
+      alert(err);
+    }
   };
   return (
     <IsSendModalBox>

diff --git a/src/components/Common/Header.tsx b/src/components/Common/Header.tsx
@@ -40,7 +40,7 @@ export const Header = ({ isBuyer, onClick }: HeaderProps) => {
     );
   }
 };
-const Wrapper = styled.div`
+const Wrapper = styled.header`
   width: 100%;
   height: 6rem;
   display: flex;

diff --git a/src/components/Common/TabA1.tsx b/src/components/Common/TabA1.tsx
@@ -121,7 +121,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
     </Wrapper>
   );
 };
-const Wrapper = styled.div`
+const Wrapper = styled.nav`
   width: 100%;
   height: 4.4rem;
   display: flex;

diff --git a/src/components/Seller/SellerMyPageReview/SellerReviewHeader.tsx b/src/components/Seller/SellerMyPageReview/SellerReviewHeader.tsx
@@ -19,7 +19,7 @@ export const SellerReviewHeader = () => {
     </SellerReviewHeaderWrapper>
   );
 };
-export const SellerReviewHeaderWrapper = styled.div`
+export const SellerReviewHeaderWrapper = styled.header`
   display: flex;
   align-items: center;
   background-color: ${White};

diff --git a/src/components/Seller/SellerMyPageViewProfile/NoProfileSection.tsx b/src/components/Seller/SellerMyPageViewProfile/NoProfileSection.tsx
@@ -33,7 +33,7 @@ function NoProfileSection() {
     </>
   );
 }
-const NotWriteSection = styled.div`
+const NotWriteSection = styled.section`
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/components/Seller/SellerMyPageViewProfile/ViewProfileHeader.tsx b/src/components/Seller/SellerMyPageViewProfile/ViewProfileHeader.tsx
@@ -9,7 +9,10 @@ export const ViewProfileHeader = () => {
 
   return (
     <ViewProfileHeaderWrapper>
-      <div style={{ position: 'absolute', left: '2rem', cursor: 'pointer' }}>
+      <div
+        className="back-button"
+        style={{ position: 'absolute', left: '2rem', cursor: 'pointer' }}
+      >
         <LeftArrowIcon
           onClick={() => {
             navigate('/minder/mypage');
@@ -20,7 +23,7 @@ export const ViewProfileHeader = () => {
     </ViewProfileHeaderWrapper>
   );
 };
-const ViewProfileHeaderWrapper = styled.div`
+const ViewProfileHeaderWrapper = styled.header`
   display: flex;
   align-items: center;
   background-color: ${White};

diff --git a/src/components/Seller/SellerMyPageViewProfile/ViewProfileMainSection.tsx b/src/components/Seller/SellerMyPageViewProfile/ViewProfileMainSection.tsx
@@ -10,7 +10,6 @@ import { consultStyleToCharNum } from 'utils/convertStringToCharNum';
 import { convertTimeRange } from 'utils/convertTimeToString';
 
 interface ViewProfileMainSectionProps {
-  profileIdentifier: number;
   name: string | undefined;
   category: string[] | undefined;
   chatStyle: string | undefined;
@@ -37,7 +36,6 @@ const dayEngtoKor: Record<string, string> = {
 const daysOfWeek = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
 
 export const ViewProfileMainSection = ({
-  profileIdentifier,
   name,
   category,
   chatStyle,

diff --git a/src/pages/Buyer/BuyerSavedCounselor.tsx b/src/pages/Buyer/BuyerSavedCounselor.tsx
@@ -100,12 +100,17 @@ export const BuyerSavedCounselor = () => {
             <Heading color={Grey1}>찜 목록</Heading>
           </HeaderWrapper>
           <Space height="1.2rem" />
-          <SavedCounselorResults wishlistData={wishlistData} />
-          {!isLastElem ? (
-            <div ref={setTarget} style={{ height: '3.5rem' }} />
-          ) : (
-            <div style={{ height: '3.5rem' }} />
-          )}
+          <div
+            className="save-counselor-list"
+            style={{ height: 'calc(100vh - 6.5rem)', overflow: 'scroll' }}
+          >
+            <SavedCounselorResults wishlistData={wishlistData} />
+            {!isLastElem ? (
+              <div ref={setTarget} style={{ height: '3.5rem' }} />
+            ) : (
+              <div style={{ height: '3.5rem' }} />
+            )}
+          </div>
         </>
       );
     } else {

diff --git a/src/pages/Buyer/BuyerWriteOpenConsult.tsx b/src/pages/Buyer/BuyerWriteOpenConsult.tsx
@@ -102,13 +102,15 @@ function BuyerWriteOpenConsult() {
           <TitleInput
             placeholder="제목"
             value={titleInput}
+            maxLength={50}
             onChange={(e) => {
               setTitleInput(e.target.value);
             }}
           />
           <TextArea
             value={input}
             placeholder="고민 내용을 남겨주세요."
+            maxLength={1000}
             onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
               setInput(e.target.value);
             }}

diff --git a/src/pages/Seller/SellerConsult.tsx b/src/pages/Seller/SellerConsult.tsx
@@ -14,7 +14,12 @@ export const SellerConsult = () => {
         }}
       />
       <TabA1 isBuyer={false} initState={2} />
-      <SellerConsultSection />
+      <section
+        className="consult-container"
+        style={{ height: 'calc(100vh - 10.4rem)', overflow: 'scroll' }}
+      >
+        <SellerConsultSection />
+      </section>
     </>
   );
 };
diff --git a/src/pages/Seller/SellerHome.tsx b/src/pages/Seller/SellerHome.tsx
@@ -18,19 +18,21 @@ export const SellerHome = () => {
         }}
       />
       <TabA1 isBuyer={false} initState={1} />
-      <main
-        style={{
-          paddingBottom: '1.86rem',
-          borderBottom: `1px solid ${Grey6} `,
-        }}
-      >
-        <OnGoingConsultSection />
-        <IncomeManagementSection />
-        <ConsultReviewSection />
-      </main>
-      <footer>
-        <HomeAboutFooterSection isBuyer={false} />
-      </footer>
+      <div style={{ height: 'calc(100vh - 5rem)', overflow: 'scroll' }}>
+        <main
+          style={{
+            paddingBottom: '1.86rem',
+            borderBottom: `1px solid ${Grey6} `,
+          }}
+        >
+          <OnGoingConsultSection />
+          <IncomeManagementSection />
+          <ConsultReviewSection />
+        </main>
+        <footer>
+          <HomeAboutFooterSection isBuyer={false} />
+        </footer>
+      </div>
     </>
   );
 };

diff --git a/src/pages/Seller/SellerMyPageReview.tsx b/src/pages/Seller/SellerMyPageReview.tsx
@@ -1,14 +1,14 @@
 import { SellerReviewHeader } from 'components/Seller/SellerMyPageReview/SellerReviewHeader';
 import { SellerReviewMainSection } from 'components/Seller/SellerMyPageReview/SellerReviewMainSection';
-import styled from 'styled-components';
 
 export const SellerMyPageReview = () => {
   return (
     <>
       <SellerReviewHeader />
-      <SellerReviewMainSection />
+      <div style={{ height: 'calc(100% - 5rem)', overflow: 'scroll' }}>
+        <SellerReviewMainSection />
+      </div>
     </>
   );
 };
 
-const SellerMyPageReviewWrapper = styled.div``;
diff --git a/src/pages/Seller/SellerMyPageViewProfile.tsx b/src/pages/Seller/SellerMyPageViewProfile.tsx
@@ -57,22 +57,23 @@ export const SellerMypageViewProfile = () => {
       ) : isNoProfile ? (
         <NoProfileSection />
       ) : (
-        <ViewProfileMainSection
-          profileIdentifier={3}
-          name={profile?.nickname}
-          category={profile?.consultCategories}
-          chatStyle={profile?.consultStyle}
-          type={profile?.consultTypes}
-          chatTime={profile?.consultTimes}
-          letterFee={profile?.consultCosts?.편지}
-          chatFee={profile?.consultCosts?.채팅}
-          oneLiner={profile?.introduction}
-          experience={profile?.experience}
-          isEvaluationPending={isEvaluationPending}
-          // accountNum="1234567890000"
-          // bankType="우리은행"
-          // bankOwner="정인영"
-        />
+        <div style={{ overflow: 'scroll', height: 'calc(100vh - 5.3rem)' }}>
+          <ViewProfileMainSection
+            name={profile?.nickname}
+            category={profile?.consultCategories}
+            chatStyle={profile?.consultStyle}
+            type={profile?.consultTypes}
+            chatTime={profile?.consultTimes}
+            letterFee={profile?.consultCosts?.편지}
+            chatFee={profile?.consultCosts?.채팅}
+            oneLiner={profile?.introduction}
+            experience={profile?.experience}
+            isEvaluationPending={isEvaluationPending}
+            // accountNum="1234567890000"
+            // bankType="우리은행"
+            // bankOwner="정인영"
+          />
+        </div>
       )}
     </>
   );

diff --git a/src/utils/convertStringToCharNum.ts b/src/utils/convertStringToCharNum.ts
@@ -1,5 +1,5 @@
 // 서버에서 념겨준 consultStyle을 Character num 으로 mapping..
-export const consultStyleToCharNum = (consultStyle: string) => {
+export const consultStyleToCharNum = (consultStyle: string | undefined) => {
   switch (consultStyle) {
     case '조언':
       return 9;
@@ -12,7 +12,9 @@ export const consultStyleToCharNum = (consultStyle: string) => {
   }
 };
 
-export const consultCategoryToCharNum = (consultCategory: string) => {
+export const consultCategoryToCharNum = (
+  consultCategory: string | undefined,
+) => {
   switch (consultCategory) {
     case '연애갈등':
       return 1;