Skip to content

Commit

Permalink
[Fix] 피드페이지 회원가입 페이지 시맨틱 태그 적용 [Feat] 날씨 Provider 생성 Register #48 Feed
Browse files Browse the repository at this point in the history
  • Loading branch information
nebulaBdj committed Mar 28, 2024
1 parent 5aef57b commit 3ed031a
Show file tree
Hide file tree
Showing 10 changed files with 188 additions and 23 deletions.
101 changes: 101 additions & 0 deletions weatherfit_refactoring/contexts/WeatherContext.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import { ReactNode, createContext, useState } from "react";

interface WeatherProvider {
icon : string | undefined;
tempNow : number | undefined;
tempMax : number | undefined;
tempMin : number | undefined;
}

export const WeatherContext = createContext<WeatherProvider | undefined>(undefined);

export const WeatherProvider = ({children}: {children: ReactNode}) => {

const [ temperature, setTemp ] = useState<number>();
const [ temperatureMin, setTempMin ] = useState<number>();
const [ temperatureMax, setTempMax ] = useState<number>();
const [ weatherIcon, setIcon ] = useState<string>();
const [ latitude_state, setLatitude ] = useState<number>();
const [ longitude_state, setLongitude ] = useState<number>();
const [address, setAddress] = useState<string | undefined>()

// API Keys
// openweathermap
const API_KEY:string = "e88170b7fa2aeadd4ba37bb1561a53f2"
// KaKao
const KAKAO_API_KEY:string = "3a6c3035c801405eaa71ebb9dc7f474b"


const getLocation = async() => {
try {
// 위치 노출이 허용되어 있는지 확인하고 현재 위치 가져오기
const position = await new Promise<GeolocationPosition>(
(resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject)
},
);

// 위도와 경도 가져오기
setLatitude(position.coords.latitude)
setLongitude(position.coords.longitude)

} catch (error) {
console.error("Error getting location:", error);
}
}

const getWeather = async() => {
try {
// OpenWeatherMap에서 위치 기반 날씨 정보 불러오기
const weatherResponse = await fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=${latitude_state}&lon=${longitude_state}&appid=${API_KEY}&units=metric`
);
const weatherData = await weatherResponse.json();

// 날씨 정보 저장하기
setTemp(weatherData.main.temp.toFixed(1));
setTempMax(weatherData.main.temp_max.toFixed(1));
setTempMin(weatherData.main.temp_min.toFixed(1));
setIcon(weatherData.weather[0].icon);

} catch (error) {
console.error("Error getting location:", error);
}
}

const getAddress = async() => {
try {
const addressResponse = await fetch(
`https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${longitude_state}&y=${latitude_state}`,
{
method: "GET",
headers: { Authorization: `KakaoAK ${KAKAO_API_KEY}` }
},
);
const addressData = await addressResponse.json();
setAddress(
addressData.documents[0].address.region_1depth_name +
" " +
addressData.documents[0].address.region_2depth_name,
);

} catch (error) {
console.error("Error getting location:", error);
}
}

getLocation();
getAddress();
getAddress();

return (
<WeatherContext.Provider value={{
icon : weatherIcon,
tempMax : temperatureMax,
tempMin : temperatureMin,
tempNow : temperature
}}>
{children}
</WeatherContext.Provider>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ export default function FeedCategory() {


return (
<div>
<div onClick={tabBooleanControl} className=" font-NanumSquareRound flex flex-nowrap overflow-y-scroll my-1">
<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">
Expand All @@ -32,7 +32,7 @@ export default function FeedCategory() {
}
</div>
{categoryControl && <FeedCategorySelect/>}
</div>
</nav>


)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default function FeedContent({ DataforFeed }: Props) {
return (
<>
{DataforFeed.images && (
<div className=" bg-E4E4E6 rounded-xl mx-2 my-2 w-[179px] h-[350px]">
<article className=" bg-E4E4E6 rounded-xl mx-2 my-2 w-[179px] h-[350px]">
<div className="flex justify-between m-auto w-[90%] py-2">
<div className="flex">
<div className=" relative w-[40px] h-[40px]">
Expand Down Expand Up @@ -129,7 +129,7 @@ export default function FeedContent({ DataforFeed }: Props) {
</div>
</div>
</div>
</div>
</article>
)}
</>
)
Expand Down
4 changes: 2 additions & 2 deletions weatherfit_refactoring/src/Components/Molecules/FeedLogo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function FeedLogo({textSize}:Props){
}

return(
<div className="flex mt-3 text-center">
<header className="flex mt-3 text-center">
<IconStore
iconStyle={IconStyle.PREV2}
size={20}
Expand All @@ -30,6 +30,6 @@ export default function FeedLogo({textSize}:Props){
>
옷늘날씨
</ButtonStore>
</div>
</ header>
)
}
4 changes: 2 additions & 2 deletions weatherfit_refactoring/src/Components/Molecules/NavBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import NavBarBox from './NavBarBox'

export default function NavBar() {
return (
<div
<footer
className="fixed bottom-[35px] mx-[5px] flex justify-around items-center bg-white w-[370px] h-[52px] border border-black rounded-[30px] z-10 py-[5px]"
style={{ boxShadow: '7px 7px 1px' }}>
<NavBarBox iconStyle="HOME" title="홈" url="/" />
<NavBarBox iconStyle="SEARCH" title="구경" url="/feed" />
<NavBarBox iconStyle="UPLOAD" title="업로드" url="/upload" />
<NavBarBox iconStyle="MY_PROFILE" title="마이페이지" url="/mypage" />
</div>
</footer>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function RegisterLogo(){
}

return (
<div>
<header>
<BoxStore
boxStyle={BoxStyle.BOX_BLUE}
style={`absolute left-1/2 transform -translate-x-1/2 px-2 h-[25px] font-neurimboGothic text-[18px] pb-[7px] shadow-[7px_7px_1px] flex items-center cursor-pointer`}
Expand All @@ -21,6 +21,6 @@ export default function RegisterLogo(){
<p className=" font-neurimboGothic text-center mt-[45px] text-[28px]">
회 원 가 입
</p>
</div>
</header>
)
}
68 changes: 65 additions & 3 deletions weatherfit_refactoring/src/Components/Molecules/WeatherNavbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,69 @@ export default function WeatherNavbar() {
const { temperatureMin, setTempMin } = WeatherTempMin()
const { temperatureMax, setTempMax } = WeatherTempMax()
const { weatherIcon, setIcon } = WeatherIcon()

const [weat, setWeat] = useState<string | undefined>()
const [ latitude_state, setLatitude ] = useState<number>();
const [ longitude_state, setLongitude ] = useState<number>();
const [address, setAddress] = useState<string | undefined>()

// 렌더링 속도 비교해보기
// const getLocation = async() => {
// try {
// // 위치 노출이 허용되어 있는지 확인하고 현재 위치 가져오기
// const position = await new Promise<GeolocationPosition>(
// (resolve, reject) => {
// navigator.geolocation.getCurrentPosition(resolve, reject)
// },
// );

// // 위도와 경도 가져오기
// setLatitude(position.coords.latitude)
// setLongitude(position.coords.longitude)

// } catch (error) {
// console.error("Error getting location:", error);
// }
// }

// const getWeather = async() => {
// try {
// // OpenWeatherMap에서 위치 기반 날씨 정보 불러오기
// const weatherResponse = await fetch(
// `https://api.openweathermap.org/data/2.5/weather?lat=${latitude_state}&lon=${longitude_state}&appid=${API_KEY}&units=metric`
// );
// const weatherData = await weatherResponse.json();

// // 날씨 정보 저장하기
// setTemp(weatherData.main.temp.toFixed(1));
// setTempMax(weatherData.main.temp_max.toFixed(1));
// setTempMin(weatherData.main.temp_min.toFixed(1));
// setIcon(weatherData.weather[0].icon);

// } catch (error) {
// console.error("Error getting location:", error);
// }
// }

// const getAddress = async() => {
// try {
// const addressResponse = await fetch(
// `https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${longitude_state}&y=${latitude_state}`,
// {
// method: "GET",
// headers: { Authorization: `KakaoAK ${KAKAO_API_KEY}` }
// },
// );
// const addressData = await addressResponse.json();
// setAddress(
// addressData.documents[0].address.region_1depth_name +
// " " +
// addressData.documents[0].address.region_2depth_name,
// );

// } catch (error) {
// console.error("Error getting location:", error);
// }
// }

useEffect(()=>{
const getLocation = async () => {
try {
Expand All @@ -41,7 +100,7 @@ export default function WeatherNavbar() {
// max = weatherData.main.temp_max.toFixed(1);
setTempMax(weatherData.main.temp_max.toFixed(1));
setTempMin(weatherData.main.temp_min.toFixed(1));
setWeat(weatherData.weather[0].main);
// setWeat(weatherData.weather[0].main);
setIcon(weatherData.weather[0].icon);

// console.log("데이터", weatherData);
Expand Down Expand Up @@ -69,6 +128,9 @@ export default function WeatherNavbar() {
};

getLocation();
// getWeather();
// getAddress();

}, []);

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ export default function FeedContents({response}:Props) {
}, []);

return (
<div className={`mt-5 flex flex-wrap relative`}>
<main className={`mt-5 flex flex-wrap relative`}>
{feedData.map(feedDataArr => {
return (
<div key={feedDataArr.boardId}>
<FeedContent DataforFeed={feedDataArr} />
</div>
)
})}
</div>
</main>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,12 @@ export default function FeedSearchSort(){
return (
<div className="relative">
<FeedLogo textSize="15px" />
<FeedSearch />
<FeedTopCategory />
<WeatherNavbar/>
<FeedCategory/>
<FeedSortBase/>
<nav>
<FeedSearch />
<FeedTopCategory />
<WeatherNavbar/>
<FeedCategory/>
<FeedSortBase/>
</nav>
</div>)
}
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export default function RegisterForm(){
}

return(
<div
<main
className=" mt-[30px] h-[600px] w-[350px]"
>
<RegisterEmailVerify
Expand Down Expand Up @@ -122,6 +122,6 @@ export default function RegisterForm(){
</ButtonStore>


</div>
</main>
)
}

0 comments on commit 3ed031a

Please sign in to comment.