Merge pull request kdt-8-4#53 from kdt-8-4/feed

[Fix] 피드페이지 수정(좋아요 기능 토큰 연결, 검색 기능 수정) Feed kdt-8-4#7
hyeiis · Mar 27, 2024 · 8bd2487 · 8bd2487
2 parents 349bf8c + 9c0c83b
commit 8bd2487
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 78 deletions.
diff --git a/weatherfit_refactoring/src/Components/Atoms/Input/InputStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Input/InputStore.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { FocusEventHandler, FormEventHandler } from 'react'
+import { FocusEventHandler, FormEventHandler, KeyboardEventHandler } from 'react'
 
 export enum InputStyle {
   INPUT_WHITE = 'INPUT_WHITE',
@@ -8,16 +8,17 @@ export enum InputStyle {
 }
 
 interface Props {
-  inputStyle: InputStyle
-  inputType?: string
-  placeholderContents?: string
-  value?: string | number
-  style?: string
+  inputStyle: InputStyle;
+  inputType?: string;
+  placeholderContents?: string;
+  value?: string | number;
+  style?: string;
   onChageFunction?:
     | FormEventHandler<HTMLDivElement>
     | React.ChangeEventHandler<HTMLInputElement>
-    | undefined
-  onBlur?: FocusEventHandler<HTMLDivElement>
+    | undefined;
+  onBlur?: FocusEventHandler<HTMLDivElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>
 }
 
 export default function InputStore({
@@ -27,6 +28,7 @@ export default function InputStore({
   style,
   onChageFunction,
   onBlur,
+  onKeyDown,
   value,
 }: Props) {
   const selectInput = (): React.ReactNode => {
@@ -37,6 +39,7 @@ export default function InputStore({
             value={value}
             onChange={onChageFunction}
             onBlur={onBlur}
+            onKeyDown={onKeyDown}
             type={inputType}
             className={`border rounded-lg bg-white border-gray-500 p-1 ${style}`}
             placeholder={placeholderContents}

diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedCategory.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedCategory.tsx
@@ -2,20 +2,19 @@
 import ButtonStore, { ButtonStyle } from "../Atoms/Button/ButtonStore"
 import { CategoryData } from "@/Store/CategoryData"
 import IconStore, { IconStyle } from "../Atoms/Icon/IconStore";
-import { useState } from "react";
 import FeedCategorySelect from "./FeedCategorySelect";
-
+import { CategoryControl } from "@/Store/CategoryControl";
 
 export default function FeedCategory() {
 
     const {categoryData} = CategoryData();
-    const [tabControl, setControl] = useState<boolean>(false);
+    const {categoryControl, setCategoryControl} = CategoryControl()
 
     const tabBooleanControl = () => {
-        if(tabControl == false) {
-            setControl(true);
+        if(categoryControl == false) {
+            setCategoryControl(true);
         } else {
-            setControl(false);
+            setCategoryControl(false);
         }
     }
 
@@ -32,7 +31,7 @@ export default function FeedCategory() {
                 })
             }
             </div>
-            {tabControl && <FeedCategorySelect setControl={setControl} />}
+            {categoryControl && <FeedCategorySelect/>}
         </div>
 
 

diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedCategorySelect.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedCategorySelect.tsx
@@ -5,53 +5,48 @@ import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import InputStore, { InputStyle } from "../Atoms/Input/InputStore";
 import { WeatherTempMax } from '@/Store/WeatherMaxTemp'
 import { WeatherTempMin } from '@/Store/WeatherMinTemp'
+import { CategoryControl } from "@/Store/CategoryControl";
 
 
-interface Props {
-    setControl: Dispatch<SetStateAction<boolean>>;
-}
-
-export default function FeedCategorySelect ({setControl} : Props) {
+export default function FeedCategorySelect () {
 
     const {categoryData} = CategoryData();
+    const { setTempMin } = WeatherTempMin();
+    const { setTempMax } = WeatherTempMax();
+    const {categoryControl, setCategoryControl} = CategoryControl();
     const {selectData, setSelectData} = CategorySelectData();
+
     const [categoryTitleStyle, setCategoryTitleStyle] = useState<string>("");
     const [categoryList, setCategoryList] = useState<SelecList[]>([]);
-    const { temperatureMin, setTempMin } = WeatherTempMin()
-    const { temperatureMax, setTempMax } = WeatherTempMax()
+    const [localTempMax, setLocalTempMax] = useState<number | null>(null)
+    const [localTempMin, setLocalTempMin] = useState<number | null>(null)
 
+    //카테고리에 맞춰서 하위 카테고리 불러오기
     const selectCategory = (selectedCategory: string) => {
         console.log("선택한 카테고리 타이틀", selectedCategory);
         const filtering:TabMenu[] = categoryData.filter((categorydata) => categorydata.value == selectedCategory)
         setCategoryList(filtering[0].selectLists)
     }
 
+    //하위 카테고리 선택시 검색 데이터에 넣기
     const categorySearch = (inputData : string) => {
         setSelectData([...selectData, inputData])
     }
 
+    //검색 데이터에서 삭제 버튼을 누른 카테고리 없애기
     const selectCancle = (selectCancle : string) => {
         const filterCansleCategory:string[] = selectData.filter((selectdata) => selectdata != selectCancle)
         console.log("삭제할 카테고리", selectCancle);
         setSelectData(filterCansleCategory)
     }
 
-    const cancleSelectCategory = () => {
-        setControl(false);
-    }
-
-    const resetCategory = () => {
-        setSelectData([])
-    }
-
     const searchCategory = async() => {
         // 상위 컴포넌트에서 함수 받아온후 바로 실행해버리자
         console.log(selectData)
         let url:string = "https://www.jerneithe.site//board/search?categories="
         for (let i = 0; i < selectData.length; i++){
             url += selectData[i]
         }
-        url += "&hashtags=";
         console.log(url)
         const callSearchData = await fetch(url,{
             method: "GET"
@@ -60,24 +55,28 @@ export default function FeedCategorySelect ({setControl} : Props) {
         const callSearchDataToJson = await callSearchData.json()
 
         console.log("카테고리 검색 데이터", callSearchDataToJson)
-        setControl(false);
 
-    }
+        if (localTempMax != undefined) {
+            setTempMax(localTempMax)
+        }
 
-    const setMaxTempFunc = (e:React.ChangeEvent<HTMLInputElement>) => { 
-        setTempMax(parseInt(e.target.value))
-    }
+        if (localTempMin != undefined) {
+            setTempMin(localTempMin)
+        }
 
-    const setMinTempFunc = (e:React.ChangeEvent<HTMLInputElement>) => {
-        setTempMin(parseInt(e.target.value))
+        setCategoryControl(false);
+
     }
 
+
     return (
         <div className=" absolute z-50 bg-white w-[100vw] h-[620px]  ">
+
             <div className="text-center font-neurimboGothic my-2">
-               <button onClick={cancleSelectCategory} className="mr-[150px]">Ｘ</button>
+               <button onClick={() => setCategoryControl(false)} className="mr-[150px]">Ｘ</button>
                <span className="mr-[140px]">카테고리</span> 
             </div>
+
             <div className=" flex whitespace-nowrap space-x-6 mx-8 font-gmarketsans">
                 {categoryData.map((categoryTitle)=>{
                     return(
@@ -89,6 +88,7 @@ export default function FeedCategorySelect ({setControl} : Props) {
                     )
                 })}
             </div>
+
             <div className="h-[400px]">
                 {categoryList && 
                     categoryList.map((categoryList)=>{
@@ -102,19 +102,20 @@ export default function FeedCategorySelect ({setControl} : Props) {
                     })
                 }
             </div>
+
             <div className="flex m-2">
                 <p className=" font-neurimboGothic whitespace-nowrap">온도 설정 : </p>
                 <InputStore inputStyle={InputStyle.INPUT_WHITE} 
-                onChageFunction={setMaxTempFunc} 
-                value={temperatureMax}
-                placeholderContents="최고온도를 입력해주세요."
-                style=" w-[70px] h-[30px] text-[13px] ml-2 mr-1"
+                    onChageFunction={(e:React.ChangeEvent<HTMLInputElement>) => setLocalTempMax(parseInt(e.target.value))} 
+                    value={localTempMax || ""}
+                    placeholderContents="최고온도를 입력해주세요."
+                    style=" w-[70px] h-[30px] text-[13px] ml-2 mr-1"
                 /><span className=" font-neurimboGothic">℃</span>
                 <InputStore inputStyle={InputStyle.INPUT_WHITE} 
-                onChageFunction={setMinTempFunc} 
-                value={temperatureMin}
-                placeholderContents="최저온도를 입력해주세요."
-                style=" w-[70px] h-[30px] text-[13px] ml-2 mr-1"
+                    onChageFunction={(e:React.ChangeEvent<HTMLInputElement>) => setLocalTempMin(parseInt(e.target.value))} 
+                    value={localTempMin || ""}
+                    placeholderContents="최저온도를 입력해주세요."
+                    style=" w-[70px] h-[30px] text-[13px] ml-2 mr-1"
                 /><span className=" font-neurimboGothic">℃</span>
             </div>
             <div className="flex overflow-x-auto h-[50px]">
@@ -128,7 +129,7 @@ export default function FeedCategorySelect ({setControl} : Props) {
                 })}
             </div>
             <div className=" font-gmarketsans flex">
-                <button className=" bg-white w-[25%]  border-[1px] mx-1 p-1" onClick={resetCategory}>초기화</button>
+                <button className=" bg-white w-[25%]  border-[1px] mx-1 p-1" onClick={() => setSelectData([])}>초기화</button>
                 <button className="bg-blue-300 w-[70%] text-white mx-1 p-1" onClick={searchCategory}>선택 카테고리 검색하기</button>
             </div>
         </div>

diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedContent.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedContent.tsx
@@ -3,6 +3,8 @@
 import Image from 'next/image'
 import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
 import Link from 'next/link'
+import { AuthTokenStore } from '@/Store/AuthToken'
+import { AuthUserNickStore } from '@/Store/AuthUserNick'
 import { FeedData } from '@/Store/FeedData'
 
 
@@ -13,31 +15,28 @@ export default function FeedContent({ DataforFeed }: Props) {
   const {feedData, setFeedData} = FeedData()
   const date = new Date(DataforFeed.createDate);
   const createDate:string = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDay()}`;
-  const nickName:string = "황동준";
-  const loginToken:string = "로그인 토큰 프로바이더 생성 후 적용"
+  const { accesstoken } = AuthTokenStore()
+  const { userNick } = AuthUserNickStore()
 
-  const likeChecker = ( likelist:LIKE[], nickName:string ) => {
+  const likeChecker = ( likelist:LIKE[], nickName:string | null ) => {
     if( likelist.some((list) => list.nickName === nickName ) ) {
       return true
     } else {
       return false
     }
   }
 
-  const isUserLiked:boolean = likeChecker( DataforFeed.likelist, nickName); 
+  const isUserLiked:boolean = likeChecker( DataforFeed.likelist, userNick ); 
 
-  const likeUpdate = () => {
-
-  }
 
   const clickLike = async() => {
     const sendToLikeAPI = `https://www.jerneithe.site/board/like/${DataforFeed.boardId}`
     try {
       const res = await fetch(sendToLikeAPI, {
         method: "POST",
-        headers: { 
-          Authorization: "Bearer " + loginToken, 
+        headers: {  
           "Content-Type": "application/json",
+          Authorization: "Bearer " + accesstoken,
         }
       })
 

diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedSearch.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedSearch.tsx
@@ -4,33 +4,37 @@ 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="
-
-    const inputHashTag = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setHashValue(e.target.value)
-    }
+
+    let url = "https://www.jerneithe.site/board/search?categories=?hashtags="
 
+    //해시태그 취소
     const hashTagArrayClear = () => {
         setHashValue("");
     }
 
-    const searchHashTag = async() => {
+    //해시태그 검색 자동완성 << 백엔드 ec2 생성 후 완성 예정
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter"){
+            console.log(e)
+            console.log("검색 url", url)
+        }
 
-        hashToArray()
-        //백엔드에서 따로 검색 구현할 시
-        // const callHashData = await fetch(url, {
-        //     method: "GET"
-        // })
+        // if (e.key != "Enter"){
+        //     return
+        // }
+        // const text = e.target.value
 
-        // const callDataToJson = await callHashData.json()
     }
 
+    // 해시태그 문자열 분해
     const hashToArray = () => {
         const searchHashtagData:string[] = hashValue.split('#').filter(Boolean);
+        //filter(Boolean) 공백 제거
         console.log('해시태그 검색 배열', searchHashtagData);
 
         for(let i=0; i<searchHashtagData.length ; i++) { 
@@ -39,14 +43,38 @@ export default function FeedSearch(){
         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={inputHashTag}
+                    onChageFunction={(e:React.ChangeEvent<HTMLInputElement>) => setHashValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
                     inputStyle={InputStyle.INPUT_SEARCH} 
                     inputType="text"
                     placeholderContents="#해시태그를 입력하세요" 

diff --git a/weatherfit_refactoring/src/Components/Molecules/FeedSortBase.tsx b/weatherfit_refactoring/src/Components/Molecules/FeedSortBase.tsx
@@ -1,5 +1,4 @@
 "use client"
-
 import { FeedSort } from "@/Store/FeedSort";
 import { FeedData } from "@/Store/FeedData";
 
@@ -8,6 +7,7 @@ export default function FeedSortBase(){
     const {feedSort ,setFeedSort} = FeedSort();
     const {feedData, setFeedData} = FeedData();
 
+
     const sortByLikes = () => {
         const sorted = [...feedData].sort((a, b) => b.likeCount - a.likeCount);
         setFeedData(sorted);
@@ -49,7 +49,6 @@ export default function FeedSortBase(){
             setFeedSort("OLD");
             sortByOldest();
         }
-
     }
 
     return (