Skip to content
/ BEFPEF Public

๐ŸŽฏ์œ ๊ธฐ๊ฒฌ ์กฐํšŒ ๋ฐ ์ž…์–‘ ํ”Œ๋žซํผ

Notifications You must be signed in to change notification settings

smosco/BEFPEF

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

50 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

PETFRIEND

thumbnail

๐Ÿ‘‰ Live Demo

๐Ÿ“œ์š”์•ฝ

๊ฒฝ๊ธฐ๋„ ๋ฐ์ดํ„ฐ ๋“œ๋ฆผ์˜ ์œ ๊ธฐ๋™๋ฌผ ๋ณดํ˜ธ ํ˜„ํ™ฉ open api๋ฅผ ์‚ฌ์šฉํ•ด ๊ฒฝ๊ธฐ๋„ ์ง€์—ญ์˜ ์œ ๊ธฐ ๋™๋ฌผ์„ ์‹œ๊ตฐ๊ตฌ, ๊ณต๊ณ ์ผ, ํ’ˆ์ข…์— ๋”ฐ๋ผ ์กฐํšŒํ•˜๊ณ  ์ง€๋„ ์ƒ์—์„œ ๊ฐ€๊นŒ์šด ๋ณดํ˜ธ์†Œ๋ฅผ ์ฐพ์•„ ์œ ๊ธฐ ๋™๋ฌผ ์ž…์–‘์„ ๋•๋Š” ์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค.

  1. Skills: React,ย Reactย Router,ย SCSS
  2. Use: Postman,ย ๊ฒฝ๊ธฐ๋„ ๋ฐ์ดํ„ฐ ๋“œ๋ฆผ ์œ ๊ธฐ๋™๋ฌผ ๋ณดํ˜ธ ํ˜„ํ™ฉ open api, ์นด์นด์˜ค๋งต api, axios
  3. Deploy: Netlify

๐Ÿ“œํŽ˜์ด์ง€๋ณ„ ๊ตฌํ˜„ ๊ธฐ๋Šฅ

1. ํ™ˆํŽ˜์ด์ง€

๐Ÿ“Œ ๊ณต๊ณ ๊ธฐํ•œ์ด ์–ผ๋งˆ ๋‚จ์ง€ ์•Š์€ ์œ ๊ธฐ๋™๋ฌผ์„ ๋ฐ˜์‘ํ˜• ๋ฉ€ํ‹ฐ ์Šฌ๋ผ์ด๋”๋กœ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

multiSlider

๐Ÿ“Œ ๊ณต๊ณ ์ผ, ์‹œ๊ตฐ๊ตฌ, ํ’ˆ์ข… ์นดํ…Œ๊ณ ๋ฆฌ์— ๋งž๋Š” ์œ ๊ธฐ ๋™๋ฌผ์„ ์กฐํšŒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

category

2. ์ง€๋„ ํŽ˜์ด์ง€

๐Ÿ“Œ ์นด์นด์˜ค๋งต ์ƒ์˜ ์œ ๊ธฐ ๋™๋ฌผ ๋ณดํ˜ธ์†Œ ์œ„์น˜๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋ณดํ˜ธ์ค‘์ธ ์œ ๊ธฐ ๋™๋ฌผ์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

map

3. ์œ ๊ธฐ ๋™๋ฌผ ๋””ํ…Œ์ผ ํŽ˜์ด์ง€

๐Ÿ“Œ ์œ ๊ธฐ ๋™๋ฌผ์˜ ์ด๋ฏธ์ง€, ๊ตฌ์ฒด์ ์ธ ์ •๋ณด๋ฅผ ์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๊ธฐ ์‰ฝ๊ฒŒ ํ…Œ์ด๋ธ”๋กœ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

detail

4. ๋‹ค์‹œ๋ณด๊ณ  ์‹ถ์€ ์œ ๊ธฐ๋™๋ฌผ ๊ธฐ๋ก ํŽ˜์ด์ง€

๐Ÿ“Œ Context API๋ฅผ ํ™œ์šฉํ•ด ๋‹ค์‹œ ๋ณด๊ณ  ์‹ถ์€ ๋™๋ฌผ ๋ฐ์ดํ„ฐ๋ฅผ ๊ธ€๋กœ๋ฒŒํ•˜๊ฒŒ ๊ด€๋ฆฌํ•ด ์–ด๋””์„œ๋‚˜ ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

like

๐Ÿ” Aboutย theย project

โœ… ํฉ์–ด์ ธ ์žˆ๋˜ ๋„คํŠธ์›Œํฌ ํ†ต์‹  ์ฝ”๋“œ๋ฅผ ํ•œ ๊ณณ์— ๋ชจ์•„ ๊ด€๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.

โœ… axios ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด fetch๋ณด๋‹ค ๊ฐ€๋…์„ฑ ์ข‹๊ฒŒ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™”์Šต๋‹ˆ๋‹ค.

โœ… ์นดํ…Œ๊ณ ๋ฆฌ๊ฐ€ ๋ณ€๊ฒฝ ๋ ๋•Œ๋งˆ๋‹ค ๊ฒ€์ƒ‰ ์กฐ๊ฑด์„ query state์œผ๋กœ ๊ด€๋ฆฌํ•ด ์ปดํฌ๋„ŒํŠธ์˜ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ๊น”๋”ํ•˜๊ฒŒ ๊ด€๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.

// src/api/axios.js

// ์นดํ…Œ๊ณ ๋ฆฌ ๊ฒ€์ƒ‰์กฐ๊ฑด์— ๋งž๋Š” ์œ ๊ธฐ๋™๋ฌผ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ต๋‹ˆ๋‹ค.
export const getPets = async (query) => {
  try {
    const data = await axios
      .get(
        `${BASE_URL}&SIGUN_NM=${query.SIGUN_NM}&PBLANC_BEGIN_DE=${query.PBLANC_BEGIN_DE}&PBLANC_END_DE=${query.PBLANC_END_DE}&SPECIES_NM=${query.SPECIES_NM}`,
        options
      )
      .then((res) =>
        res.data.AbdmAnimalProtect ? res.data.AbdmAnimalProtect : []
      );
    return data; //๊ผญ ๋ฆฌํ„ด ํ•ด์ฃผ๊ธฐ
  } catch (err) {
    console.log(err.message);
  }

// ์ง€๋„์ƒ์—์„œ ์„ ํƒํ•œ ๋ณดํ˜ธ์†Œ์— ์ƒํƒœ๊ฐ€ ๋ณดํ˜ธ์ค‘์ธ ์œ ๊ธฐ๋™๋ฌผ์„ ๋ฐ›์•„์˜ต๋‹ˆ๋‹ค.    
export const getShelterPets = async (marker) => {
  try {
    const data = await axios
      .get(`${BASE_URL}&SHTER_NM=${marker.Gb}&STATE_NM=๋ณดํ˜ธ์ค‘`)
      .then((res) =>
        res.data.AbdmAnimalProtect ? res.data.AbdmAnimalProtect : []
      );
    return data; //๊ผญ ๋ฆฌํ„ด ํ•ด์ฃผ๊ธฐ
  } catch (err) {
    console.log(err.message);
  }
};
// src/page/Home.js
//...
  useEffect(() => {
    getPets(query).then((data) => {
      setPets(data[1].row);
      setCount(data[0].head[0].list_total_count);
    });
  }, [query]);

โœ… ์–ด๋””์„œ๋‚˜ ๋‹ค์‹œ๋ณด๊ณ  ์‹ถ์€ ๋™๋ฌผ์„ ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ๋„๋ก context api๋ฅผ ์‚ฌ์šฉํ•ด ๊ธ€๋กœ๋ฒŒํ•˜๊ฒŒ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.

//src/ context/LikeContext.js

import { createContext, useContext, useEffect, useState } from "react";

const LikesContext = createContext();

// likes์—๋Š” id๋งŒ ์ €์žฅํ•ด์„œ include๋กœ ํŒ๋‹จํ•˜๊ณ , api์—์„œ id๋กœ ๋”ฐ๋กœ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์—†์–ด์„œ pet๊นŒ์ง€ ๋กœ์ปฌ์— ์ €์žฅํ•จ
export function LikesProvider({ children }) {
  const [likes, setLikes] = useState(readLikesFromLocal("likes"));
  const [likeItems, setLikeItems] = useState(readLikesFromLocal("likeItems"));

  const handleAdd = (id, pet) => {
    setLikes({ ...likes, id });
    setLikeItems([...likeItems, pet]);
  };

  const handleDelete = (id) => {
    setLikes(likes.filter((item) => item !== id));
    setLikeItems(likeItems.filter((item) => item.ABDM_IDNTFY_NO !== id));
  };

  // ์ฒ˜์Œ ๋“ค์–ด์™”์„๋•Œ ๋กœ์ปฌ๋กœ ๋ถ€ํ„ฐ ์ฝ๊ณ  ๋‚˜์„œ ์ด๊ฑธ ๋ฐ”๋กœ ๋กœ์ปฌ์— ๋„ฃ์–ด์ค˜์•ผ ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  set๋„ ํ•ด์ค˜์•ผ ํ•œ๋‹ค.
  useEffect(() => {
    localStorage.setItem("likes", JSON.stringify(likes));
    localStorage.setItem("likeItems", JSON.stringify(likeItems));
    setLikes(JSON.parse(localStorage.getItem("likes")));
    setLikeItems(JSON.parse(localStorage.getItem("likeItems")));
  }, []);

  return (
    <LikesContext.Provider
      value={{ likes, likeItems, handleAdd, handleDelete }}
    >
      {children}
    </LikesContext.Provider>
  );
}

function readLikesFromLocal(key) {
  const likes = localStorage.getItem(key);
  return likes ? JSON.parse(likes) : [];
}

export const useLikes = () => useContext(LikesContext);

โœ…ํŽซ์นด๋“œ์—์„œ includes ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด ์ฐœํ•œ ์ƒํƒœ์ธ์ง€ ํŒ๋‹จํ–ˆ์Šต๋‹ˆ๋‹ค.

//src/ components/Like.

const { likes, handleAdd, handleDelete } = useLikes();
  const [like, setLike] = useState(() => {
    if (likes.includes(pet)) {
      console.log("ํฌํ•จ");
      return true;
    } else {
      console.log("์•ˆํฌํ•จ");
      return false;
    }
  });

  const toggleLike = () => {
    setLike((prev) => !prev);
    if (like) {
      handleDelete(pet);
    } else {
      handleAdd(pet);
    }
  };

  useEffect(() => {
    localStorage.setItem("likes", JSON.stringify(likes));
  }, [likes]); 

โœ…์นด์นด์˜ค๋งต์— ์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•ด ๋ณดํ˜ธ์†Œ๋ฅผ ํด๋ฆญํ–ˆ์„ ๋•Œ ๋ณดํ˜ธ์†Œ์— ๋ณดํ˜ธ์ค‘์ธ ๋™๋ฌผ์„ ๋ฐ›์•„์™”์Šต๋‹ˆ๋‹ค.

//src/page/Location.jsx
//...
kakao.maps.event.addListener(marker, "click", function () {
       setShelter(marker.Gb);
       getShelterPets(shelter).then((data) => {
         setPets(data.length === 0 ? [] : data[1].row);
         setCount(data.length === 0 ? "0" : data[0].head[0].list_total_count);
       });
     });
   }
 }, []); 

โณ Futureย scope

  • ๋ชจ๋ฐ”์ผ์—์„œ ๋ณผ๋•Œ ํŽซ์นด๋“œ๊ฐ€ ์™œ๊ณก๋˜๋Š” ๊ฒƒ ํ•ด๊ฒฐํ•˜๊ธฐ
  • ์นด์นด์˜ค๋งต ๊ธฐ๋Šฅ์„ ๋” ์ž˜ ํ™œ์šฉํ•ด ๋ณด๊ธฐ

About

๐ŸŽฏ์œ ๊ธฐ๊ฒฌ ์กฐํšŒ ๋ฐ ์ž…์–‘ ํ”Œ๋žซํผ

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published