From f99208b0b261972dd0a526811c49364e729a4963 Mon Sep 17 00:00:00 2001
From: sirldev <sirl0@naver.com>
Date: Thu, 23 May 2024 00:43:21 +0900
Subject: [PATCH] feat: Update hub fetch and filter

---
 frontend/app/hub/page.tsx                     |  9 +++-
 frontend/components/TemplateHub/index.tsx     | 45 ++++++++++++++++---
 .../components/UsePage/UserInput/Index.tsx    | 12 ++---
 3 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/frontend/app/hub/page.tsx b/frontend/app/hub/page.tsx
index b16ddae854..e8dcdc409d 100644
--- a/frontend/app/hub/page.tsx
+++ b/frontend/app/hub/page.tsx
@@ -2,10 +2,17 @@ import TemplateHub from '@/components/TemplateHub';
 import axios from 'axios';
 
 async function getTemplates() {
-  const { data } = await axios.get(
+  // const { data } = await axios.get(
+  //   `${process.env.NEXT_PUBLIC_API_BASE_URL}/templates`,
+  // );
+
+  const result = await fetch(
     `${process.env.NEXT_PUBLIC_API_BASE_URL}/templates`,
+    { cache: 'no-store' },
   );
 
+  const data = await result.json();
+
   return data;
 }
 
diff --git a/frontend/components/TemplateHub/index.tsx b/frontend/components/TemplateHub/index.tsx
index 763ead8aeb..4e71852ced 100644
--- a/frontend/components/TemplateHub/index.tsx
+++ b/frontend/components/TemplateHub/index.tsx
@@ -36,18 +36,21 @@ export default function TemplateHub({ templates }: IHub) {
   const [searchResults, setSearchResults] = useState<string[]>([]);
   const [filteredTemplates, setFilteredTemplates] = useState<any[]>([]);
 
+  const [filterArray, setFilterArray] = useState<string[]>([]);
+
   useEffect(() => {
     filterTemplates();
   }, [searchResults || []]);
 
   const filterTemplates = () => {
-    const results = templates.filter(template =>
-      searchResults.every(tag => template.hashtag && template.hashtag.includes(tag))
+    const results = templates.filter((template) =>
+      searchResults.every(
+        (tag) => template.hashtag && template.hashtag.includes(tag),
+      ),
     );
     setFilteredTemplates(results);
   };
 
-
   const handleIconClick = () => {
     if (value.length > 0) {
       setShowResults(true);
@@ -82,7 +85,10 @@ export default function TemplateHub({ templates }: IHub) {
   const handleTagInput = (tags: string[]) => {
     // 입력된 태그들을 필터링하여 allItems 배열에 있는 태그만 남김
     const validTags = tags.filter((tag) => allItems.includes(tag));
+    console.log(tags);
     setValue(validTags);
+
+    setFilterArray(validTags);
   };
 
   const resourceColors: { [key: string]: string } = {};
@@ -94,6 +100,8 @@ export default function TemplateHub({ templates }: IHub) {
     });
   });
 
+  console.log(templates);
+
   return (
     <div className={classes.wrapper}>
       <Container size="xl" className={classes.inner}>
@@ -112,7 +120,34 @@ export default function TemplateHub({ templates }: IHub) {
           />
         </Container>
         <Container mt={80} size={'xl'}>
-          {showResults ? (
+          {filterArray.length > 0 && (
+            <div className={classes.badges}>
+              {filterArray.map((item: string, index: any) => {
+                return (
+                  <Badge
+                    key={index}
+                    variant="light"
+                    color={resourceColors[item]}
+                  >
+                    {item}
+                  </Badge>
+                );
+              })}
+              <Text>검색 결과</Text>
+            </div>
+          )}
+
+          <HubItems
+            templates={
+              filterArray.length > 0
+                ? templates.filter((template) =>
+                    filterArray.every((tag) => template.hashtag.includes(tag)),
+                  )
+                : templates
+            }
+          />
+
+          {/* {showResults ? (
             <>
               <div className={classes.badges}>
                 {searchResults.map((item: string, index: any) => {
@@ -136,7 +171,7 @@ export default function TemplateHub({ templates }: IHub) {
               <Text>​</Text>
               <HubItems templates={templates} />
             </>
-          )}
+          )} */}
         </Container>
       </Container>
     </div>
diff --git a/frontend/components/UsePage/UserInput/Index.tsx b/frontend/components/UsePage/UserInput/Index.tsx
index efd8652518..47cee18f04 100644
--- a/frontend/components/UsePage/UserInput/Index.tsx
+++ b/frontend/components/UsePage/UserInput/Index.tsx
@@ -37,14 +37,16 @@ export default function UserInput({
         구체적이고 명확하게 입력해 주세요
       </Text>
       <Text size="sm" c="dimmed" lh={1.6}>
-        {`여러분이 원하는 템플릿의 기능과 구성 요소에 대해 가능한 한 구체적으로
-        설명해 주세요. 예를 들어, "EC2 인스턴스를 생성하고 싶어요"
-        보다는 "t2.micro 타입의 EC2 인스턴스를 2개 생성하고, 각 인스턴스에
-        10GB의 EBS 볼륨을 연결하고 싶어요"가 더 도움이 됩니다.`}
+        여러분이 원하는 템플릿의 기능과 구성 요소에 대해 가능한 한 구체적으로
+        설명해 주세요.
+        <br />
+        예를 들어, &quot;EC2 인스턴스를 생성하고 싶어요&quot; 보다는
+        &quot;t2.micro 타입의 EC2 인스턴스를 2개 생성하고, 각 인스턴스에 10GB의
+        EBS 볼륨을 연결하고 싶어요&quot;가 더 도움이 됩니다.
       </Text>
 
       <Text mt="sm" mb={7}>
-        주의사항 어쩌구 해주세요
+        주의사항을 확인해주세요
       </Text>
       <Text size="sm" c="dimmed" lh={1.6}>
         프로젝트에 적용되어야 하는 특정 제약사항이나 필요 조건이 있다면, 이를