From 4e79f5fa5f04fe38aeb1b59dc1f2a25df6d7cdc4 Mon Sep 17 00:00:00 2001
From: nebulaBdj <dongdung5070@gmail.com>
Date: Fri, 29 Mar 2024 12:42:00 +0900
Subject: [PATCH] =?UTF-8?q?[Docs]=20=EC=BD=94=EB=94=94=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80=20Main=20#36?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/Components/Molecules/FeedSearch.tsx   | 164 +++++++++---------
 weatherfit_refactoring/src/app/feed/page.tsx  |  29 ++--
 2 files changed, 96 insertions(+), 97 deletions(-)

diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedSearch.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedSearch.tsx
index 0cba8c0..1f68380 100644
--- a/weatherfit_refactoring/src/Components/Molecules/FeedSearch.tsx
+++ b/weatherfit_refactoring/src/Components/Molecules/FeedSearch.tsx
@@ -1,98 +1,96 @@
-"use client"
+'use client'
 
-import IconStore, { IconStyle } from "../Atoms/Icon/IconStore";
-import InputStore, { InputStyle } from "../Atoms/Input/InputStore";
-import ButtonStore, { ButtonStyle } from "../Atoms/Button/ButtonStore";
-import { ChangeEventHandler, useEffect, useState } from "react";
+import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+import InputStore, { InputStyle } from '../Atoms/Input/InputStore'
+import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
+import { ChangeEventHandler, useEffect, useState } from 'react'
 import { FeedData } from '@/Store/FeedData'
 
-export default function FeedSearch(){
-    const {feedData, setFeedData} = FeedData()
-    const [hashValue, setHashValue] = useState<string>("");
-    
-    let url = "https://www.jerneithe.site/board/search?categories=?hashtags="
+export default function FeedSearch() {
+  const { feedData, setFeedData } = FeedData()
+  const [hashValue, setHashValue] = useState<string>('')
 
-    //해시태그 취소
-    const hashTagArrayClear = () => {
-        setHashValue("");
-    }
+  let url = 'https://www.jerneithe.site/board/search?categories=?hashtags='
 
-    //해시태그 검색 자동완성 << 백엔드 ec2 생성 후 완성 예정
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === "Enter"){
-            console.log(e)
-            console.log("검색 url", url)
-        }
-        
-        // if (e.key != "Enter"){
-        //     return
-        // }
-        // const text = e.target.value
+  //해시태그 취소
+  const hashTagArrayClear = () => {
+    setHashValue('')
+  }
 
+  //해시태그 검색 자동완성 << 백엔드 ec2 생성 후 완성 예정
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      console.log(e)
+      console.log('검색 url', url)
     }
 
-    // 해시태그 문자열 분해
-    const hashToArray = () => {
-        const searchHashtagData:string[] = hashValue.split('#').filter(Boolean);
-        //filter(Boolean) 공백 제거
-        console.log('해시태그 검색 배열', searchHashtagData);
-        
-        for(let i=0; i<searchHashtagData.length ; i++) { 
-                url +=searchHashtagData[i];
-        }
-        console.log("검색 url", url)
+    if (e.key != 'Enter') {
+      return
     }
+    // const text = e.target.value
+  }
 
-    // 해시태그 검색
-    const searchHashTag = async() => {
-        
-        hashToArray()
-        
-        try {
-            const hashSearch = await fetch(url, {
-                method: "GET"
-            })
+  // 해시태그 문자열 분해
+  const hashToArray = () => {
+    const searchHashtagData: string[] = hashValue.split('#').filter(Boolean)
+    //filter(Boolean) 공백 제거
+    console.log('해시태그 검색 배열', searchHashtagData)
 
-            const callData = await hashSearch.json()
-            console.log("불러온 데이터", callData)
-            // if (hashSearch.ok) {
-            //     const callData = await hashSearch.json()
-            //     setFeedData(callData)
-            // } else {
-            //     console.error("에러 발생" ,hashSearch.status)
-            // }
-        } catch (error) {
-            console.error("에러 발생", error)
-        }
+    for (let i = 0; i < searchHashtagData.length; i++) {
+      url += searchHashtagData[i]
     }
+    console.log('검색 url', url)
+  }
+
+  // 해시태그 검색
+  const searchHashTag = async () => {
+    hashToArray()
 
-    
+    try {
+      const hashSearch = await fetch(url, {
+        method: 'GET',
+      })
+
+      const callData = await hashSearch.json()
+      console.log('불러온 데이터', callData)
+      // if (hashSearch.ok) {
+      //     const callData = await hashSearch.json()
+      //     setFeedData(callData)
+      // } else {
+      //     console.error("에러 발생" ,hashSearch.status)
+      // }
+    } catch (error) {
+      console.error('에러 발생', error)
+    }
+  }
 
-    return(
-        <div className=" flex py-[10px] px-[10px]">
-            <div className="flex border rounded-[9px] mx-1">
-                <InputStore 
-                    value={hashValue}
-                    onChageFunction={(e:React.ChangeEvent<HTMLInputElement>) => setHashValue(e.target.value)}
-                    onKeyDown={handleKeyDown}
-                    inputStyle={InputStyle.INPUT_SEARCH} 
-                    inputType="text"
-                    placeholderContents="#해시태그를 입력하세요" 
-                    style="font-gmarketsans font-thin outline-none text-[14px] w-[65vw] h-[38px] mx-1"
-                    />
-                <IconStore 
-                    iconStyle={IconStyle.SEARCH} 
-                    size={16} 
-                    style="mr-[10px]"
-                    onClickFunction={searchHashTag}
-                    />
-            </div>
-            <ButtonStore 
-                buttonStyle={ButtonStyle.CANCEL_BTN} 
-                style="font-NanumSquareRound text-gray-500 text-[16px] w-[70px]" 
-                onClickFunction={hashTagArrayClear}>
-                취소
-            </ButtonStore>
-        </div>
-    )
+  return (
+    <div className=" flex py-[10px] px-[10px]">
+      <div className="flex border rounded-[9px] mx-1">
+        <InputStore
+          value={hashValue}
+          onChageFunction={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setHashValue(e.target.value)
+          }
+          onKeyDown={handleKeyDown}
+          inputStyle={InputStyle.INPUT_SEARCH}
+          inputType="text"
+          placeholderContents="#해시태그를 입력하세요"
+          style="font-gmarketsans font-thin outline-none text-[14px] w-[65vw] h-[38px] mx-1"
+        />
+        <IconStore
+          iconStyle={IconStyle.SEARCH}
+          size={16}
+          style="mr-[10px]"
+          onClickFunction={searchHashTag}
+        />
+      </div>
+      <ButtonStore
+        buttonStyle={ButtonStyle.CANCEL_BTN}
+        style="font-NanumSquareRound text-gray-500 text-[16px] w-[70px]"
+        onClickFunction={hashTagArrayClear}>
+        취소
+      </ButtonStore>
+    </div>
+  )
 }
diff --git a/weatherfit_refactoring/src/app/feed/page.tsx b/weatherfit_refactoring/src/app/feed/page.tsx
index a80c5ee..7fbe469 100644
--- a/weatherfit_refactoring/src/app/feed/page.tsx
+++ b/weatherfit_refactoring/src/app/feed/page.tsx
@@ -1,18 +1,19 @@
-import FeedSearchSort from "@/Components/Organisms/FeedSearchSort";
-import FeedContents from "@/Components/Organisms/FeedContents";
+import FeedSearchSort from '@/Components/Organisms/FeedSearchSort'
+import FeedContents from '@/Components/Organisms/FeedContents'
 import NavBar from '@/Components/Molecules/NavBar'
 
-export default async function Feedpage(){
-    const feedDataFetch = await fetch('https://www.jerneithe.site/board/list', {
-      method: 'GET',
-    }) 
+export default async function Feedpage() {
+  const feedDataFetch = await fetch('https://www.jerneithe.site/board/list', {
+    method: 'GET',
+  })
 
+  const feedContentsData: FEEDDATA[] = await feedDataFetch.json()
 
-    const feedContentsData: FEEDDATA[] = await feedDataFetch.json()
-    
-    return(<>
-        <FeedSearchSort />
-        <FeedContents response={feedContentsData} />
-        <NavBar/>
-    </>)
-}
\ No newline at end of file
+  return (
+    <>
+      <FeedSearchSort />
+      <FeedContents response={feedContentsData} />
+      <NavBar />
+    </>
+  )
+}