[bugfix]검색 onblur기능주석처리 해제, 검색 더 불러오기 중복 값 버그 픽스, 검색된 이력서 디자인 grid로 변경

Happiness-Meta · Apr 20, 2024 · bea4af4 · bea4af4
1 parent 4e65b28
commit bea4af4
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 25 deletions.
diff --git a/.../components/newHomePageComponents/mainBodySections/middleSectionComponents/ResumePart.tsx b/.../components/newHomePageComponents/mainBodySections/middleSectionComponents/ResumePart.tsx
@@ -90,7 +90,9 @@ const ResumePart = () => {
                         )}
                       </div>
                       <div css={resumeStyles.rightSection}>
-                        <div css={[resumeStyles.position(resume.position)]}>{resume.position}</div>
+                        <div css={[resumeStyles.position(resume.position)]}>
+                          {resume.position}
+                        </div>
                         <p css={resumeStyles.intro}>
                           {resume.intro.slice(0, 40)}
                           {resume.intro.length > 40 && "..."}
@@ -104,8 +106,13 @@ const ResumePart = () => {
                               </div>
                             );
                           })}
-                          {resume.techStack.length > 6 && (
-                            <p css={[resumeStyles.intro, resumeStyles.plusShowing]}>
+                          {resume.techStack.length > 5 && (
+                            <p
+                              css={[
+                                resumeStyles.intro,
+                                resumeStyles.plusShowing,
+                              ]}
+                            >
                               +{resume.techStack.length - 5}개
                             </p>
                           )}
@@ -121,8 +128,15 @@ const ResumePart = () => {
                       css={[resumeStyles.chatButton]}
                     >
                       <div css={[`display: flex; gap: 5px;`]}>
-                        <Image src={coffee} alt="chatting-icon" width={22} height={22} />
-                        <p css={[`transform: translateY(2.5px);`]}>커피챗 하러가기</p>
+                        <Image
+                          src={coffee}
+                          alt="chatting-icon"
+                          width={22}
+                          height={22}
+                        />
+                        <p css={[`transform: translateY(2.5px);`]}>
+                          커피챗 하러가기
+                        </p>
                       </div>
                     </button>
                   </div>

diff --git a/...mponents/newHomePageComponents/mainBodySections/middleSectionComponents/SearchBarPart.tsx b/...mponents/newHomePageComponents/mainBodySections/middleSectionComponents/SearchBarPart.tsx
@@ -40,7 +40,6 @@ const SearchBarPart = () => {
     setSearchedWordPosition,
     addSearchedWordTech,
     setSearchedWordTech,
-    pageNum,
     resetPageNum,
     setSearchedData,
     resetSearchedData,
@@ -62,10 +61,9 @@ const SearchBarPart = () => {
         techStacks: searchedWord.techStack,
       };
       const response = await userAxiosWithAuth.post(
-        `${process.env.NEXT_PUBLIC_BASE_URL}/search?searchType=${apiPageType}&page=${pageNum}&size=6`,
+        `${process.env.NEXT_PUBLIC_BASE_URL}/search?searchType=${apiPageType}&page=${0}&size=6`,
         body
       );
-
       resetPageNum();
       resetSearchedData();
 
@@ -124,9 +122,9 @@ const SearchBarPart = () => {
               onFocus={() => {
                 setIsTechStacksVisible(true);
               }}
-              // onBlur={() =>
-              //   setTimeout(() => setIsTechStacksVisible(false), 100)
-              // }
+              onBlur={() =>
+                setTimeout(() => setIsTechStacksVisible(false), 100)
+              }
               value={searchInputValue}
               css={[searchBarStyles.input]}
             />

diff --git a/src/app/components/searchComponents/SearchMainBody.tsx b/src/app/components/searchComponents/SearchMainBody.tsx
@@ -26,6 +26,7 @@ import useChattingStore from "@/app/store/chattingStore/useChattingStore";
 import { useRouter } from "next/navigation";
 import { SyntheticEvent } from "react";
 import { useCookies } from "react-cookie";
+import { labelStyles } from "@/app/styleComponents/projectTemplateStyles/templateStyle";
 
 const SearchMainBody = () => {
   const router = useRouter();
@@ -51,10 +52,12 @@ const SearchMainBody = () => {
         position: searchedWord.position,
         techStacks: searchedWord.techStack,
       };
+      console.log(pageNum);
       const response = await userAxiosWithAuth.post(
         `${process.env.NEXT_PUBLIC_BASE_URL}/search?searchType=${apiPageType}&page=${pageNum}&size=6`,
         body
       );
+      console.log(response.data.data);
       if (response.data.data.length === 0) {
         return alert("더 이상의 결과가 없습니다.");
       }
@@ -66,7 +69,6 @@ const SearchMainBody = () => {
   });
 
   const handleUserClick = (e: SyntheticEvent, name: string) => {
-    e.stopPropagation();
     e.preventDefault();
     setSelectedUserName(name); // 클릭된 유저의 userName으로 상태 업데이트
     router.push(`/pages/chattingPage/${encodeURIComponent(name)}`);
@@ -84,14 +86,14 @@ const SearchMainBody = () => {
             <h3>🔍 검색 결과</h3>
           </div>
           <hr />
-          <div css={[resumeStyles.resumeSpace, `gap: 0;`]}>
+          <div css={[resumeStyles.resumeSpace]}>
             {searchedData.length > 0 ? (
               searchedData.map((resume, index) => {
                 return (
                   <Link
                     key={index}
                     href={`/pages/resumeRead/${resume.id}`}
-                    css={[resumeStyles.resume, `width: 50%;`]}
+                    css={[resumeStyles.resume]}
                     onClick={(e) => {
                       if (!cookies.accessToken) {
                         e.preventDefault();
@@ -138,13 +140,23 @@ const SearchMainBody = () => {
                           </p>
 
                           <div css={resumeStyles.techStackSpace}>
-                            {resume.techStack.map((ts, i) => {
+                            {resume.techStack.slice(0, 5).map((ts, i) => {
                               return (
                                 <div key={i} css={resumeStyles.techStack}>
                                   {ts}
                                 </div>
                               );
                             })}
+                            {resume.techStack.length > 5 && (
+                              <p
+                                css={[
+                                  resumeStyles.intro,
+                                  resumeStyles.plusShowing,
+                                ]}
+                              >
+                                +{resume.techStack.length - 5}개
+                              </p>
+                            )}
                           </div>
                         </div>
                       </div>

diff --git a/src/app/styleComponents/newHomePageStyles/middleSectionStyles.ts b/src/app/styleComponents/newHomePageStyles/middleSectionStyles.ts
@@ -172,20 +172,27 @@ export const resumeStyles = {
   ],
   resumeSpace: [
     css`
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      gap: 10px;
-      row-gap: 10px;
+      // display: flex;
+      // flex-wrap: wrap;
+      // justify-content: space-between;
+      // gap: 10px;
+      // row-gap: 10px;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(calc(33% - 5px), 1fr));
+      grid-gap: 10px;
       width: 100%;
+
+      @media (max-width: 950px) {
+        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+      }
     `,
   ],
   resume: [
     css`
       display: flex;
       justify-content: space-between;
       gap: 5px;
-      width: 32.3%;
+      width: 100%;
       padding: 10px;
       border-radius: 15px;
       transition: 0.3s;
@@ -197,10 +204,6 @@ export const resumeStyles = {
         transform: translateY(-5px);
         box-shadow: 0 3px 3px gray;
       }
-
-      @media (max-width: 950px) {
-        width: 100%;
-      }
     `,
   ],
   resumeInner: [