Merge pull request #68 from 2024-Team-Techeer-Salon/design/#67

[design] 디자인 오류 사항 수정
2024-Team-Techeer-Salon · Jun 19, 2024 · 7e2fa4c · 7e2fa4c
2 parents 6f451bb + 8197229
commit 7e2fa4c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 46 deletions.
diff --git a/src/app/account/[userIdParam]/Profile.tsx b/src/app/account/[userIdParam]/Profile.tsx
@@ -110,7 +110,7 @@ function Profile({ id }: accountIdProps) {
 
     return (
       <div className="z-10 flex w-[67.5rem] flex-col">
-        <div className="-mt-2 flex h-full w-full flex-row items-end justify-start">
+        <div className="-mt-2 mb-3 flex h-full w-full flex-row items-end justify-start">
           <div className="flex w-2/3 flex-row items-center justify-start">
             <figure className="relative -mt-12 flex min-h-28 min-w-28 rounded-full bg-white">
               {isEdit && (
@@ -247,10 +247,11 @@ function Profile({ id }: accountIdProps) {
                   setStatusMessage(statusMessageRef.current);
                 }
               }}
+              placeholder="소개 메세지를 입력해주세요."
             />
           ) : (
             <p className="h-10 w-full items-center border-2 border-white p-2">
-              {statusMessage}
+              {statusMessage || `${name}님의 프로필입니다.`}
             </p>
           )}
         </div>
@@ -259,7 +260,7 @@ function Profile({ id }: accountIdProps) {
   };
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center">
+    <div className="flex w-full flex-col items-center justify-start">
       <WarningAlert showAlert={isAlert} errorMessage={alertMessage} />
       <BannerImage />
       <ProfileImage />

diff --git a/src/app/account/[userIdParam]/page.tsx b/src/app/account/[userIdParam]/page.tsx
@@ -7,7 +7,7 @@ function Account(props: any) {
   const userId = Number(decodeURIComponent(props.params.userIdParam));
 
   return (
-    <div className="flex w-full flex-col items-center justify-center">
+    <div className="flex w-full flex-col items-center justify-start">
       <Profile id={userId} />
       <Classification id={userId} />
     </div>

diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
@@ -27,9 +27,9 @@ function Header() {
 
   // 토큰이 있는데 401 에러가 발생하면 새로고침
   if (isError && getCookie('accessToken')) {
-    setTimeout(() => {
-      window.location.reload();
-    }, 100);
+    // setTimeout(() => {
+    //   window.location.reload();
+    // }, 100);
   }
 
   if (ignorePath().includes(path)) {
@@ -145,7 +145,7 @@ function Header() {
               {category.category_name.map((item: string, index: number) => (
                 <Link
                   key={index}
-                  href={`search?type=category&keyword=${index}`}
+                  href={`/search?type=category&keyword=${index}`}
                   className="text-md p-2"
                   onClick={() => setOpenMenu(false)}
                 >

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -31,9 +31,7 @@ export default function RootLayout({
           <Suspense fallback={<div>로딩중인데요?ㅋㅋ</div>}>
             <Header />
             <StoreProvider>
-              <div className="flex min-h-screen min-w-full justify-center">
-                {children}
-              </div>
+              <div className="flex min-h-screen min-w-full">{children}</div>
             </StoreProvider>
             <Footer />
           </Suspense>

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -84,6 +84,12 @@ function page() {
     },
   });
 
+  const noResult = () => (
+    <div className="flex w-full flex-col items-center justify-center">
+      <span className="text-2xl">검색 결과가 없습니다. 😢</span>
+    </div>
+  );
+
   useEffect(() => {
     if (!hasNextPage) return;
     const observer = new IntersectionObserver(
@@ -107,46 +113,57 @@ function page() {
 
   return (
     <div className="flex h-full w-full flex-col items-center justify-center">
-      <div className="flex h-full w-96 flex-col items-center justify-center md:w-[38rem] lg:w-[58rem] xl:w-[67.5rem]">
-        {searchType === 'category' ? (
-          <div className="flex w-full flex-row items-center justify-start text-2xl">
-            <figure className="relative m-6 flex h-32 w-32">
-              <Image
-                src={category.category_image[Number(searchKeyword)]}
-                alt="category icon"
-                className="rounded-full border border-gray-300"
-                layout="fill"
-                objectFit="cover"
-              />
-            </figure>
-            <span className="text-4xl font-bold">
-              #{category.category_name[Number(searchKeyword)]}
-            </span>
-          </div>
-        ) : (
-          <div className="flex w-full flex-row items-center justify-center text-2xl">
-            <span className="text-4xl font-bold">
-              &quot;{searchKeyword}&quot;&nbsp;
-            </span>
-            검색 결과
-          </div>
-        )}
+      <div className="mb-12 flex h-48 w-screen items-center justify-center bg-zinc-100">
+        <div className="flex h-full w-96 flex-col items-center justify-center md:w-[38rem] lg:w-[58rem] xl:w-[67.5rem]">
+          {searchType === 'category' ? (
+            <div className="flex w-full flex-row items-center justify-start text-2xl">
+              <figure className="relative m-6 flex h-32 w-32">
+                <Image
+                  src={category.category_image[Number(searchKeyword)]}
+                  alt="category icon"
+                  className="rounded-full border border-gray-300"
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </figure>
+              <span className="text-4xl font-bold">
+                #{category.category_name[Number(searchKeyword)]}
+              </span>
+            </div>
+          ) : (
+            <div className="flex w-full flex-row items-center justify-start text-2xl">
+              <span className="text-4xl font-bold">
+                &quot;{searchKeyword}&quot;&nbsp;
+              </span>
+              검색 결과
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="flex h-full w-96 flex-col flex-nowrap items-start justify-start md:w-[38rem] lg:w-[58rem] xl:w-[67.5rem]">
         <div className="flex flex-row flex-wrap items-center justify-start">
           {data?.pages.map((page: any, pageIndex) =>
             page?.meeting_list.map((meeting: any, index: any) => (
-              <Post
-                key={`${pageIndex}-${index}`} // 각 페이지와 인덱스를 조합하여 고유 키 생성
-                titleImage={
-                  meeting.image_url ||
-                  category.category_image[Number(searchKeyword)]
-                }
-                title={meeting.title}
-                location={meeting.road_address_name}
-                meetingId={meeting.meeting_id}
-                endTime={meeting.end_time}
-              />
+              <>
+                <Post
+                  key={`${pageIndex}-${index}`} // 각 페이지와 인덱스를 조합하여 고유 키 생성
+                  titleImage={
+                    meeting.image_url ||
+                    category.category_image[
+                      searchType === 'category'
+                        ? Number(searchKeyword)
+                        : meeting.category_id
+                    ]
+                  }
+                  title={meeting.title}
+                  location={meeting.road_address_name}
+                  meetingId={meeting.meeting_id}
+                  endTime={meeting.end_time}
+                />
+              </>
             )),
           )}
+          {data?.pages.length === 1 && noResult()}
           <div ref={loadMoreRef} />
         </div>
       </div>