Skip to content

Commit

Permalink
Merge branch 'develop' of https://github.com/kdt-8-4/Weatherfit_front…
Browse files Browse the repository at this point in the history 
…end_refactoring into develop
  • Loading branch information
@hyeiis
hyeiis committed Mar 29, 2024
2 parents fe6b8a1 + 2d8e346 commit 8c10949
Show file tree
Hide file tree
Showing 9 changed files with 396 additions and 370 deletions.
69 changes: 35 additions & 34 deletions weatherfit_refactoring/src/Components/Molecules/FeedCategory.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,40 @@
"use client"
import ButtonStore, { ButtonStyle } from "../Atoms/Button/ButtonStore"
import { CategoryData } from "@/Store/CategoryData"
import IconStore, { IconStyle } from "../Atoms/Icon/IconStore";
import FeedCategorySelect from "./FeedCategorySelect";
import { CategoryControl } from "@/Store/CategoryControl";
'use client'
import ButtonStore, { ButtonStyle } from '../Atoms/Button/ButtonStore'
import { CategoryData } from '@/Store/CategoryData'
import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
import FeedCategorySelect from './FeedCategorySelect'
import { CategoryControl } from '@/Store/CategoryControl'

export default function FeedCategory() {

const {categoryData} = CategoryData();
const {categoryControl, setCategoryControl} = CategoryControl()
const { categoryData } = CategoryData()
const { categoryControl, setCategoryControl } = CategoryControl()

const tabBooleanControl = () => {
if(categoryControl == false) {
setCategoryControl(true);
} else {
setCategoryControl(false);
}
const tabBooleanControl = () => {
if (categoryControl == false) {
setCategoryControl(true)
} else {
setCategoryControl(false)
}
}


return (
<nav>
<div onClick={tabBooleanControl} className=" font-NanumSquareRound flex flex-nowrap my-1">
{
categoryData.map((val) => {
return<ButtonStore buttonStyle={ButtonStyle.CATEGORY_BTN} key={val.id} style="h-[30px] p-1 m-1 flex whitespace-nowrap">
{val.title}
<IconStore iconStyle={IconStyle.TOGGLE2} size={20} />
</ButtonStore>
})
}
</div>
{categoryControl && <FeedCategorySelect/>}
</nav>


)
}
return (
<nav>
<div
onClick={tabBooleanControl}
className=" font-NanumSquareRound flex flex-nowrap my-1">
{categoryData.map(val => {
return (
<ButtonStore
buttonStyle={ButtonStyle.CATEGORY_BTN}
key={val.id}
style="h-[30px] p-1 m-1 flex whitespace-nowrap">
{val.title}
<IconStore iconStyle={IconStyle.TOGGLE2} size={20} />
</ButtonStore>
)
})}
</div>
{categoryControl && <FeedCategorySelect />}
</nav>
)
}
265 changes: 145 additions & 120 deletions weatherfit_refactoring/src/Components/Molecules/FeedCategorySelect.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,137 +1,162 @@
import { CategoryData } from "@/Store/CategoryData"
import { CategorySelectData } from "@/Store/CategorySelectData";
import { unstable_getStaticParams } from "next/dist/build/templates/pages";
import { Dispatch, SetStateAction, useEffect, useState } from "react";
import InputStore, { InputStyle } from "../Atoms/Input/InputStore";
import { CategoryData } from '@/Store/CategoryData'
import { CategorySelectData } from '@/Store/CategorySelectData'
import { unstable_getStaticParams } from 'next/dist/build/templates/pages'
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";
import { CategoryControl } from '@/Store/CategoryControl'

export default function FeedCategorySelect() {
const { categoryData } = CategoryData()
const { setTempMin } = WeatherTempMin()
const { setTempMax } = WeatherTempMax()
const { categoryControl, setCategoryControl } = CategoryControl()
const { selectData, setSelectData } = CategorySelectData()

export default function FeedCategorySelect () {
const [categoryTitleStyle, setCategoryTitleStyle] = useState<string>('')
const [categoryList, setCategoryList] = useState<SelecList[]>([])
const [localTempMax, setLocalTempMax] = useState<number | null>(null)
const [localTempMin, setLocalTempMin] = useState<number | null>(null)

const {categoryData} = CategoryData();
const { setTempMin } = WeatherTempMin();
const { setTempMax } = WeatherTempMax();
const {categoryControl, setCategoryControl} = CategoryControl();
const {selectData, setSelectData} = CategorySelectData();
//카테고리에 맞춰서 하위 카테고리 불러오기
const selectCategory = (selectedCategory: string) => {
console.log('선택한 카테고리 타이틀', selectedCategory)
const filtering: TabMenu[] = categoryData.filter(
categorydata => categorydata.value == selectedCategory,
)
setCategoryList(filtering[0].selectLists)
}

const [categoryTitleStyle, setCategoryTitleStyle] = useState<string>("");
const [categoryList, setCategoryList] = useState<SelecList[]>([]);
const [localTempMax, setLocalTempMax] = useState<number | null>(null)
const [localTempMin, setLocalTempMin] = useState<number | null>(null)
//하위 카테고리 선택시 검색 데이터에 넣기
const categorySearch = (inputData: string) => {
setSelectData([...selectData, inputData])
}

//카테고리에 맞춰서 하위 카테고리 불러오기
const selectCategory = (selectedCategory: string) => {
console.log("선택한 카테고리 타이틀", selectedCategory);
const filtering:TabMenu[] = categoryData.filter((categorydata) => categorydata.value == selectedCategory)
setCategoryList(filtering[0].selectLists)
}
//검색 데이터에서 삭제 버튼을 누른 카테고리 없애기
const selectCancle = (selectCancle: string) => {
const filterCansleCategory: string[] = selectData.filter(
selectdata => selectdata != selectCancle,
)
console.log('삭제할 카테고리', selectCancle)
setSelectData(filterCansleCategory)
}

//하위 카테고리 선택시 검색 데이터에 넣기
const categorySearch = (inputData : string) => {
setSelectData([...selectData, inputData])
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]
}
console.log(url)
const callSearchData = await fetch(url, {
method: 'GET',
})

const callSearchDataToJson = await callSearchData.json()

//검색 데이터에서 삭제 버튼을 누른 카테고리 없애기
const selectCancle = (selectCancle : string) => {
const filterCansleCategory:string[] = selectData.filter((selectdata) => selectdata != selectCancle)
console.log("삭제할 카테고리", selectCancle);
setSelectData(filterCansleCategory)
console.log('카테고리 검색 데이터', callSearchDataToJson)

if (localTempMax != undefined) {
setTempMax(localTempMax)
}

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]
}
console.log(url)
const callSearchData = await fetch(url,{
method: "GET"
})
if (localTempMin != undefined) {
setTempMin(localTempMin)
}

const callSearchDataToJson = await callSearchData.json()
setCategoryControl(false)
}

console.log("카테고리 검색 데이터", callSearchDataToJson)

if (localTempMax != undefined) {
setTempMax(localTempMax)
}
return (
<div className=" absolute z-50 bg-white w-[100vw] h-[620px] ">
<div className="text-center font-neurimboGothic my-2">
<button
onClick={() => setCategoryControl(false)}
className="mr-[150px]">
Ｘ
</button>
<span className="mr-[140px]">카테고리</span>
</div>

if (localTempMin != undefined) {
setTempMin(localTempMin)
}
<div className=" flex whitespace-nowrap space-x-6 mx-8 font-gmarketsans">
{categoryData.map(categoryTitle => {
return (
<button
key={categoryTitle.id}
onClick={() => selectCategory(categoryTitle.value)}
className={categoryTitleStyle}>
{categoryTitle.title}
</button>
)
})}
</div>

setCategoryControl(false);

}
<div className="h-[400px]">
{categoryList &&
categoryList.map(categoryList => {
return (
<button
key={categoryList.list_id}
className="m-2 p-1 border-[1px] rounded-lg border-black font-NanumSquareRound"
onClick={() => categorySearch(categoryList.selectList)}>
{categoryList.selectList}
</button>
)
})}
</div>


return (
<div className=" absolute z-50 bg-white w-[100vw] h-[620px] ">

<div className="text-center font-neurimboGothic my-2">
<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(
<button key={categoryTitle.id}
onClick={()=>selectCategory(categoryTitle.value)}
className={categoryTitleStyle}>
{categoryTitle.title}
</button>
)
})}
</div>

<div className="h-[400px]">
{categoryList &&
categoryList.map((categoryList)=>{
return(
<button key={categoryList.list_id}
className="m-2 p-1 border-[1px] rounded-lg border-black font-NanumSquareRound"
onClick={()=>categorySearch(categoryList.selectList)}>
{categoryList.selectList}
</button>
)
})
}
</div>

<div className="flex m-2">
<p className=" font-neurimboGothic whitespace-nowrap">온도 설정 : </p>
<InputStore inputStyle={InputStyle.INPUT_WHITE}
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={(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]">
{selectData.map((data, index)=>{
return(
<p key={index} className=" whitespace-nowrap m-2 p-1 border-[1px] rounded-lg border-black font-NanumSquareRound">
{data}
<button onClick={()=>selectCancle(data)} className="ml-2"> x</button>
</p>
)
})}
</div>
<div className=" font-gmarketsans flex">
<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>
)
}
<div className="flex m-2">
<p className=" font-neurimboGothic whitespace-nowrap">온도 설정 : </p>
<InputStore
inputStyle={InputStyle.INPUT_WHITE}
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={(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]">
{selectData.map((data, index) => {
return (
<p
key={index}
className=" whitespace-nowrap m-2 p-1 border-[1px] rounded-lg border-black font-NanumSquareRound">
{data}
<button onClick={() => selectCancle(data)} className="ml-2">
{' '}
x
</button>
</p>
)
})}
</div>
<div className=" font-gmarketsans flex">
<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>
)
}
Loading

0 comments on commit 8c10949

Please sign in to comment.