From bea4af4f77a41a8053fb0d25d28e4414fa0fe7ad Mon Sep 17 00:00:00 2001 From: HermannChoi Date: Sat, 20 Apr 2024 20:07:45 +0900 Subject: [PATCH] =?UTF-8?q?[bugfix]=EA=B2=80=EC=83=89=20onblur=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=EC=A3=BC=EC=84=9D=EC=B2=98=EB=A6=AC=20=ED=95=B4?= =?UTF-8?q?=EC=A0=9C,=20=EA=B2=80=EC=83=89=20=EB=8D=94=20=EB=B6=88?= =?UTF-8?q?=EB=9F=AC=EC=98=A4=EA=B8=B0=20=EC=A4=91=EB=B3=B5=20=EA=B0=92=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=ED=94=BD=EC=8A=A4,=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=EB=90=9C=20=EC=9D=B4=EB=A0=A5=EC=84=9C=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20grid=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../middleSectionComponents/ResumePart.tsx | 24 +++++++++++++++---- .../middleSectionComponents/SearchBarPart.tsx | 10 ++++---- .../searchComponents/SearchMainBody.tsx | 20 ++++++++++++---- .../newHomePageStyles/middleSectionStyles.ts | 23 ++++++++++-------- 4 files changed, 52 insertions(+), 25 deletions(-) diff --git a/src/app/components/newHomePageComponents/mainBodySections/middleSectionComponents/ResumePart.tsx b/src/app/components/newHomePageComponents/mainBodySections/middleSectionComponents/ResumePart.tsx index 8ba8dfe..a1dc4cf 100644 --- a/src/app/components/newHomePageComponents/mainBodySections/middleSectionComponents/ResumePart.tsx +++ b/src/app/components/newHomePageComponents/mainBodySections/middleSectionComponents/ResumePart.tsx @@ -90,7 +90,9 @@ const ResumePart = () => { )}
-
{resume.position}
+
+ {resume.position} +

{resume.intro.slice(0, 40)} {resume.intro.length > 40 && "..."} @@ -104,8 +106,13 @@ const ResumePart = () => {

); })} - {resume.techStack.length > 6 && ( -

+ {resume.techStack.length > 5 && ( +

+{resume.techStack.length - 5}개

)} @@ -121,8 +128,15 @@ const ResumePart = () => { css={[resumeStyles.chatButton]} >
- chatting-icon -

커피챗 하러가기

+ chatting-icon +

+ 커피챗 하러가기 +

diff --git a/src/app/components/newHomePageComponents/mainBodySections/middleSectionComponents/SearchBarPart.tsx b/src/app/components/newHomePageComponents/mainBodySections/middleSectionComponents/SearchBarPart.tsx index 96f9622..366e6db 100644 --- a/src/app/components/newHomePageComponents/mainBodySections/middleSectionComponents/SearchBarPart.tsx +++ b/src/app/components/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 index 3916302..74891d2 100644 --- 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 = () => {

🔍 검색 결과

-
+
{searchedData.length > 0 ? ( searchedData.map((resume, index) => { return ( { if (!cookies.accessToken) { e.preventDefault(); @@ -138,13 +140,23 @@ const SearchMainBody = () => {

- {resume.techStack.map((ts, i) => { + {resume.techStack.slice(0, 5).map((ts, i) => { return (
{ts}
); })} + {resume.techStack.length > 5 && ( +

+ +{resume.techStack.length - 5}개 +

+ )}
diff --git a/src/app/styleComponents/newHomePageStyles/middleSectionStyles.ts b/src/app/styleComponents/newHomePageStyles/middleSectionStyles.ts index 9ff091c..dc69fc0 100644 --- a/src/app/styleComponents/newHomePageStyles/middleSectionStyles.ts +++ b/src/app/styleComponents/newHomePageStyles/middleSectionStyles.ts @@ -172,12 +172,19 @@ 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: [ @@ -185,7 +192,7 @@ export const resumeStyles = { 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: [