Merge pull request #153 from Team-INSERT/refactor/search

refactor: search 페이지
Team-INSERT · Apr 16, 2024 · a14e858 · a14e858
2 parents b931b12 + 6459293
commit a14e858
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 28 deletions.
diff --git a/app/search/[keyword]/SearchNotFound.tsx b/app/search/[keyword]/SearchNotFound.tsx
@@ -0,0 +1,17 @@
+import Container from "@/components/Container";
+import Link from "next/link";
+import { FC } from "react";
+import * as styles from "./style.css";
+
+const SearchNotFound: FC<{ keyword: string }> = ({ keyword }) => {
+  return (
+    <Container title={`검색결과#${decodeURI(keyword)}`} docsType="검색 결과">
+      <h1 className={styles.searchTitle}>검색 결과가 없습니다.</h1>
+      <Link href="/create" className={styles.searchCreateLink}>
+        직접 문서를 생성해보세요
+      </Link>
+    </Container>
+  );
+};
+
+export default SearchNotFound;
diff --git a/app/search/[keyword]/SearchResult.tsx b/app/search/[keyword]/SearchResult.tsx
@@ -12,42 +12,33 @@ import { theme } from "@/styles";
 import { useDate } from "@/hooks";
 import { MoonLoader } from "react-spinners";
 import * as styles from "./style.css";
+import SearchNotFound from "./SearchNotFound";
 
 const SearchResult: FC<{ keyword: string }> = ({ keyword }) => {
   const { data: result } = useQuery(docsQuery.keyword(keyword));
   const router = useRouter();
   const { formatDate } = useDate();
 
-  if (!result) {
-    return (
-      <Container title={`검색결과#${decodeURI(keyword)}`} docsType="user">
-        <div className={styles.searchNotFoundBox}>
-          <h1 className={styles.searchTitle}>검색 결과가 없습니다.</h1>
-          <Link href="/create" className={styles.searchCreateLink}>
-            직접 문서를 생성해보세요
-          </Link>
-        </div>
-      </Container>
-    );
-  }
+  if (!result) return <SearchNotFound keyword={keyword} />;
 
+  /** 결과값이 한 개면 바로 리다이렉트 */
   if (result.length === 1) {
     router.push(`/docs/${result[0].title}`);
   } else {
     return (
       <Container title={`검색결과#${decodeURI(keyword)}`} docsType="user">
         {result.map((docs) => (
           <Link href={`/docs/${docs.title}`} key={docs.id} className={styles.container}>
-            <div className={styles.docs}>
+            <article className={styles.docs}>
               <hgroup className={styles.titleBox}>
                 <h1 className={styles.title}>{docs.title}</h1>
-                <span className={styles.lastModifiedAt}>
+                <time className={styles.lastModifiedAt}>
                   최근 수정일 ·&nbsp;
                   {formatDate(docs.lastModifiedAt)}
-                </span>
+                </time>
               </hgroup>
               <p className={styles.simpleContents}>{tagRemover(docs.simpleContents)}</p>
-            </div>
+            </article>
             {docs.thumbnail && (
               <Image
                 width={170}
@@ -63,8 +54,9 @@ const SearchResult: FC<{ keyword: string }> = ({ keyword }) => {
     );
   }
 
+  /** 로딩 중일 경우 */
   return (
-    <div className={styles.loader}>
+    <div className={styles.loaderBox}>
       <MoonLoader size={40} color={theme.primary} />
     </div>
   );

diff --git a/app/search/[keyword]/style.css.ts b/app/search/[keyword]/style.css.ts
@@ -67,11 +67,6 @@ export const thumbnail = style({
   },
 });
 
-export const searchNotFoundBox = style({
-  gap: "8px",
-  ...flex.COLUMN_FLEX,
-});
-
 export const searchTitle = style({
   ...font.p2,
 });
@@ -86,7 +81,7 @@ export const searchCreateLink = style({
   },
 });
 
-export const loader = style({
+export const loaderBox = style({
   width: "100%",
   height: "100vh",
   ...flex.CENTER,

diff --git a/styles/document.css.ts b/styles/document.css.ts
@@ -16,7 +16,6 @@ export const summary = style({
   ...font.H2,
   ...flex.FLEX,
 
-  // "::-webkit-details-marker": {},
   selectors: {
     [`${details} > &::-webkit-details-marker`]: {
       display: "none",
@@ -48,6 +47,7 @@ export const summary = style({
 
 export const link = style({
   color: theme.link,
+  display: "inline",
   ":hover": {
     textDecoration: "underline",
   },
@@ -60,7 +60,6 @@ export const block = style({
   backgroundColor: `${theme.hover}`,
   padding: "16px 20px",
   margin: "10px 0",
-  ...flex.COLUMN_FLEX,
   ...font.H5,
 });
 
@@ -70,7 +69,6 @@ export const quote = style({
   border: `1px solid ${theme.gray}`,
   padding: "10px 20px",
   ...font.H6,
-  ...flex.COLUMN_FLEX,
 });
 
 const shakeAnimation = keyframes({
@@ -92,7 +90,7 @@ const shakeAnimation = keyframes({
 });
 
 export const shake = style({
-  animation: `${shakeAnimation} 0.5s linear infinite`,
+  animation: `${shakeAnimation} 1s linear infinite`,
 });
 
 const spinAnimation = keyframes({
@@ -105,7 +103,8 @@ const spinAnimation = keyframes({
 });
 
 export const spin = style({
-  animation: `${spinAnimation} 0.5s linear infinite`,
+  width: "fit-content",
+  animation: `${spinAnimation} 1s linear infinite`,
 });
 
 export const rainbow = style({