- yarn start
- ํ์ ์คํ ์ด ์ ๋ณด๋ฅผ ๊ณต์ ํ๋ฉฐ ์ ์ ๋ค ๊ฐ์ ์ํต์ ๋๋ชจํ๋ interactive communication service
- 2023.08.16 ~ 2023.09.18
View detailed structure
โฃ ๐api
โ โฃ ๐alarm 2.ts
โ โฃ ๐alarm.ts
โ โฃ ๐bookmark.ts
โ โฃ ๐comment.ts
โ โฃ ๐message.ts
โ โฃ ๐post 2.ts
โ โฃ ๐post.ts
โ โฃ ๐store.ts
โ โฃ ๐subscribe.ts
โ โฃ ๐supabase.ts
โ โ ๐user.ts
โฃ ๐components
โ โฃ ๐about
โ โ โฃ ๐AboutBannser.tsx
โ โ โ ๐AboutInfo.tsx
โ โฃ ๐auth
โ โ โฃ ๐style
โ โ โ โ ๐St.Login.tsx
โ โ โ ๐Login.tsx
โ โฃ ๐common
โ โ โฃ ๐style
โ โ โ โฃ ๐St.AlarmBox.tsx
โ โ โ โฃ ๐St.Footer.tsx
โ โ โ โฃ ๐St.Header.tsx
โ โ โ โฃ ๐St.NotFound.tsx
โ โ โ โ ๐St.TopButton.tsx
โ โ โฃ ๐Alarm.tsx
โ โ โฃ ๐AlarmBox.tsx
โ โ โฃ ๐Footer.tsx
โ โ โฃ ๐Header.tsx
โ โ โฃ ๐NotFound.tsx
โ โ โ ๐TopButton.tsx
โ โฃ ๐community
โ โ โฃ ๐detail
โ โ โ โฃ ๐style
โ โ โ โ โฃ ๐St.Comments.tsx
โ โ โ โ โฃ ๐St.Subscribe.tsx
โ โ โ โ โ ๐St.Writer.tsx
โ โ โ โฃ ๐Comments.tsx
โ โ โ โฃ ๐Subscribe.tsx
โ โ โ โ ๐Writer.tsx
โ โ โฃ ๐main
โ โ โ โฃ ๐mate
โ โ โ โ โฃ ๐style
โ โ โ โ โ โ ๐St.MPosts.tsx
โ โ โ โ โฃ ๐MNewPosts.tsx
โ โ โ โ โฃ ๐MPosts.tsx
โ โ โ โ โ ๐MStorePosts.tsx
โ โ โ โ ๐review
โ โ โ โ โฃ ๐style
โ โ โ โ โ โ ๐St.RPosts.tsx
โ โ โ โ โฃ ๐CommentCount.tsx
โ โ โ โ โฃ ๐RNewPosts.tsx
โ โ โ โ โฃ ๐RPopularPosts.tsx
โ โ โ โ โฃ ๐RPosts.tsx
โ โ โ โ โ ๐RStorePosts.tsx
โ โ โ ๐write
โ โ โ โฃ ๐style
โ โ โ โ โฃ ๐St.Edit.tsx
โ โ โ โ โฃ ๐St.SearchDefault.tsx
โ โ โ โ โฃ ๐St.SearchModal.tsx
โ โ โ โ โ ๐St.Write.tsx
โ โ โ โฃ ๐Edit.tsx
โ โ โ โฃ ๐Editor.tsx
โ โ โ โฃ ๐SearchDefault.tsx
โ โ โ โฃ ๐SearchModal.tsx
โ โ โ โ ๐Write.tsx
โ โฃ ๐detail
โ โ โฃ ๐style
โ โ โ โฃ ๐St.BookMark.tsx
โ โ โ โฃ ๐St.Calendar.tsx
โ โ โ โฃ ๐St.HotPlace.tsx
โ โ โ โฃ ๐St.NearbyStore.tsx
โ โ โ โฃ ๐St.Share.tsx
โ โ โ โฃ ๐St.StoreDetail.tsx
โ โ โ โ ๐St.StoreMap.tsx
โ โ โฃ ๐BookMark.tsx
โ โ โฃ ๐Calendar.tsx
โ โ โฃ ๐HotPlace.tsx
โ โ โฃ ๐NearbyStore.tsx
โ โ โฃ ๐Share.tsx
โ โ โฃ ๐StoreDetail.tsx
โ โ โ ๐StoreMap.tsx
โ โฃ ๐main
โ โ โฃ ๐style
โ โ โ โ ๐St.Card.tsx
โ โ โ ๐Card.tsx
โ โฃ ๐message
โ โ โฃ ๐style
โ โ โ โฃ ๐St.Message.tsx
โ โ โ โฃ ๐St.MessageDetail.tsx
โ โ โ โฃ ๐St.MessageReply.tsx
โ โ โ โฃ ๐St.ReceiveBox.tsx
โ โ โ โ ๐St.SendBox.tsx
โ โ โฃ ๐Message.tsx
โ โ โฃ ๐MessageDetail.tsx
โ โ โฃ ๐MessageReply.tsx
โ โ โฃ ๐ReceiveBox.tsx
โ โ โ ๐SendBox.tsx
โ โฃ ๐mypage
โ โ โฃ ๐MyBookmark.tsx
โ โ โฃ ๐MyReview.tsx
โ โ โฃ ๐MySubModal.tsx
โ โ โ ๐UserInfo.tsx
โ โ ๐search
โ โ โฃ ๐style
โ โ โ โฃ ๐St.SearchCalender.tsx
โ โ โ โ ๐St.SearchList.tsx
โ โ โฃ ๐SearchCalendar.tsx
โ โ โ ๐SearchList.tsx
โฃ ๐hooks
โ โฃ ๐useHandleImageName.ts
โ โ ๐useRealTimeData.ts
โฃ ๐pages
โ โฃ ๐style
โ โ โฃ ๐St.About.tsx
โ โ โฃ ๐St.Main.tsx
โ โ โฃ ๐St.Mate.tsx
โ โ โฃ ๐St.MDetail.tsx
โ โ โฃ ๐St.MyPage.tsx
โ โ โฃ ๐St.RDetail.tsx
โ โ โฃ ๐St.Review.tsx
โ โ โ ๐St.YourPage.tsx
โ โฃ ๐About.tsx
โ โฃ ๐Detail.tsx
โ โฃ ๐Main.tsx
โ โฃ ๐Mate.tsx
โ โฃ ๐MDetail.tsx
โ โฃ ๐MyPage.tsx
โ โฃ ๐RDetail.tsx
โ โฃ ๐Review.tsx
โ โฃ ๐Search.tsx
โ โ ๐YourPage.tsx
โฃ ๐shared
โ โฃ ๐Layout.tsx
โ โ ๐Router.tsx
โฃ ๐store
โ โฃ ๐index.ts
โ โ ๐userStore.ts
โฃ ๐types
โ โฃ ๐props.ts
โ โ ๐types.ts
โฃ ๐App.css
โฃ ๐App.test.tsx
โฃ ๐App.tsx
โฃ ๐GlobalStyle.tsx
โฃ ๐index.css
โฃ ๐index.tsx
โฃ ๐react-app-env.d.ts
โฃ ๐reportWebVitals.ts
โฃ ๐setupTests.ts
โ ๐supabase.d.ts
- Team Name : ๊ทธ ์ฌ๋ฆ, ์ฐ๋ฆฌ๋
- Team members
Role | Name | In charge | GitHub |
---|---|---|---|
๋ฆฌ๋ | ์กฐ์ฑ๋ก | ๊ฒ์ ํ์ด์ง / ํ๋กํ ํ์ด์ง / ์ชฝ์ง / ๋ถ๋งํฌ / ๊ณต์ ํ๊ธฐ / ๋ฌ๋ ฅ | https://github.com/pigrok |
๋ถ๋ฆฌ | ์ฅํ์ง | ์์ธ ํ์ด์ง / ํ์ ์คํ ์ด ์ง๋ / ํซํ๋ ์ด์ค ์ถ์ฒ / ๋์ผ ์ง์ญ ํ์ ์คํ ์ด | https://github.com/huizhenz |
ํ์ | ๊น์ฐ๋ฆฌ | ์์ ๋ก๊ทธ์ธ / ๋ง์ด ํ์ด์ง | https://github.com/wooriki |
ํ์ | ๋์ค๋น | ๋ฆฌ๋ทฐ & ๋ฆฌ๋ทฐ ๋ํ ์ผ ํ์ด์ง / ๋ฉ์ดํธ & ๋ฉ์ดํธ ๋ํ ์ผ ํ์ด์ง / ๊ธ ์์ฑ ๋ชจ๋ฌ / ๊ตฌ๋ / ์ค์๊ฐ ์๋ฆผ | https://github.com/skdbsqls |
ํ์ | ์กฐ์ง๋ช | ๋ฉ์ธํ์ด์ง ํผ๋ ํ ์ด๋ธ ์์ | https://github.com/nbcnvc |
- supabase๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์์ ์ ์ค์๊ฐ์ผ๋ก ์ถ์ ํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ดํธ๋ฅผ ์๋์ผ๋ก ํธ์ํ ์ ์๋ realtime์ ์ ๊ณตํ๋ค.
- realtime์ Broadcast, Presence, Postgres Changes์ ์ฃผ์ ๊ธฐ๋ฅ์ ํฌํจํ๋ค.
- Postgres Changes ๋ฐ์ดํฐ๋ฒ ์ด์ค ํ ์ด๋ธ์์ ๋ฐ์ํ๋ ๋ณ๊ฒฝ ์ฌํญ์ ์ค์๊ฐ์ผ๋ก ๊ฐ์งํ๊ณ ํด๋ผ์ด์ธํธ์๊ฒ ํธ์ํ๋ค.
- ์ด๋ฅผ ์ด์ฉํ์ฌ ์ฌ์ฉ์๊ฐ ๊ตฌ๋ ํ ์ฌ๋์ด ์ ๊ธ์ ์์ฑํ์ ๋, ๋๊ตฐ๊ฐ๊ฐ ์ฌ์ฉ์๋ฅผ ๊ตฌ๋ ํ์ ๋, ๋ค๋ฅธ ์ฌ์ฉ์๋ก๋ถํฐ ์ชฝ์ง๋ฅผ ๋ฐ์์ ๋ ์ค์๊ฐ ์๋ฆผ์ ์ ๊ณตํ๋ค.
Kakao Map API
- Kakao Map API๋ Kakao์์ ์ ๊ณตํ๋ ์ง๋ API๋ก ์ง๋๋ฅผ ์ด์ฉํ ์๋น์ค๋ฅผ ์ ์ํ ์ ์๋๋ก ๋ค์ํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค.
- MAP API๋ addressSearch, keywordSearch ๋ฑ์ ๋ฉ์๋๋ฅผ ํฌํจํ๋ค.
- addressSearch ๋ฉ์๋๋ ์ฃผ์๋ฅผ ์ขํ๋ก ๋ณํํ๊ณ , keywordSearch ๋ฉ์๋๋ ํค์๋๋ฅผ ํตํ ๊ฒ์ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ค.
- ์ด๋ฅผ ์ด์ฉํ์ฌ ํ์ ์คํ ์ด์ ์์น, ์ฃผ๋ณ ํซํ๋ ์ด์ค ์ถ์ฒ, ๋์ผ ์ง์ญ ํ์ ์คํ ์ด์ ์์น๋ฅผ ์ ๊ณตํ๋ค.
- Typescript / React
- router-dom
- zustand
- @tanstack/react-query
- styled-components
- styled-reset
- @supabase/supabase-js
- @types/navermaps
- @mui/types
- @mui/styles
- @mui/icons-material
- @supabase/auth-ui-react
- @supabase/auth-ui-shared
- axios
- @types/axios
- react-kakao-maps-sdk
- react-slick
- @types/react-slick
- slick-carousel
- @tanstack/react-query-devtools
- react-toastify
- Git/Github
- Visual Studio
- Slack
- Figma
์์ ๋ก๊ทธ์ธ ๋ฐ ์ ์ ์ ์ญ ์ํ ๊ด๋ฆฌ
-
์๊ตฌ์ฌํญ
- ์์ ๋ก๊ทธ์ธ (๊ตฌ๊ธ / ์นด์นด์คํก / ํ์ด์ค๋ถ) ํ๊ธฐ.
- ์ต์ด ์์ ๋ก๊ทธ์ธ ์, ์์ Provider์์ ์ ๊ณตํ๋ ์ ์ ํ๋กํ ์ ๋ณด ๊ฐ์ ธ์ค๊ธฐ ๋ฐ ๊ฐ์ ธ์จ ์ ์ ํ๋กํ ์ ๋ณด supabase user ํ ์ด๋ธ์ ์ ์ฅ.
- ์์ ๋ก๊ทธ์ธ ์ ์ ์ ์ ํ๋กํ ์ ๋ณด user ํ ์ด๋ธ์์ ๊ฐ์ ธ์ค๊ธฐ.
- ๋ก๊ทธ์ธ ํ ์ ์ ๋ ์ ์ญ ์ํ๋ก ๊ด๋ฆฌํ๊ธฐ.
-
๋ฌธ์ ์ํฉ
- ์์ ๋ก๊ทธ์ธ์ ๊ฐ๋ฅํ๋ ์๋ก๊ณ ์นจ ์ ๋ก๊ทธ์ธ ํ ์ ์ ์ ๋ณด๋ฅผ ํ๋ฉด์์ ์ ์งํ์ง ๋ชปํจ.
- ์ ์ ํ๋กํ ๋ณ๊ฒฝ ์ ๋ณ๊ฒฝ๋ ํ๋กํ์ด ๋ฐ๋ก ์ ๋ฐ์ดํธ๋์ง ์๊ณ ์๋ก๊ณ ์นจ ์ดํ ์ ๋ฐ์ดํธ๋จ.
- ํฌ๋กฌ ์๋จ ํญ์ ์ด๋ํ๊ณ ๋๋ฉด ๋ก๊ทธ์ธ ํ ์ ์ ์ ๋ณด๊ฐ ํ์ํ ์ชฝ์ง, ๋๊ธ ๋ฑ์ ๊ธฐ๋ฅ์ด ์คํ๋์ง ์์.
- ๋ฐ๋ก ๋ก๊ทธ์์์ด ๋์ง ์๊ณ ์๋ก๊ณ ์นจ ์ดํ์๋ง ๋ก๊ทธ์์์ด ๋จ.
- ์์ ์ต์ด ๋ก๊ทธ์ธ ์, Provider์์ ์ ๊ณตํ๋ ํ๋กํ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๊ธด ํ๋, ํ๋ฉด์ ์ถ๋ ฅํ์ง ๋ชปํจ.
- ์์ ๋ฌธ์ ์ํฉ ํด๊ฒฐ ๊ณผ์ ์์ ์นด์นด์คํก ๋ก๊ทธ์ธ์ด ์คํ๋์ง ์์.
-
ํด๊ฒฐ ๊ณผ์
- ์์
๋ก๊ทธ์ธ ํ supabase์์ ์ ๊ณตํ๋ onAuthStateChange ๋ฉ์๋๋ฅผ ํตํด session์์ ์ ์ ์ ๋ณด๋ฅผ ๋ฐ์ ์ user ํ
์ด๋ธ์ ์ ์ฅํ๊ณ , ๊ฐ์ ๋ฐฉ์์ผ๋ก localStorage๋ฅผ ์์ฑํ์ฌ ์์ฑ๋ ํ ํฐ์ zustand๋ก store์ ๋ด์ ์ ์ญ ์ํ ๊ด๋ฆฌํจ.
- ์์ ๋ฐฉ๋ฒ์ผ๋ก ๋ก๊ทธ์ธํ ์ ์ ์ ์ ๋ณด๋ฅผ ํ๋ฉด์์ ์ ์งํ๋ ๊ฒ์๋ ์ฑ๊ณตํ์ผ๋, ๋ง์ดํ์ด์ง์์ ์ ์ ์ ํ๋กํ( ์ด๋ฏธ์ง, ๋๋ค์)์ ์์ ํ๋ฉด ๋ฐ๋ก ๋ฐ์๋์ง ์๊ณ , ์๋ก๊ณ ์นจ ์์๋ง ์์ ๋ ํ๋กํ์ด ๋ฐ์๋๋ ๋ฌธ์ ์ํฉ์ด ๋ฐ์.
- ์ง์ localStorage์ ํ ํฐ์ ์์ฑํ์ง ์๊ณ , zustand์ persist๋ฅผ ์ฌ์ฉํ์ฌ store์ ๋ด๊ธด ์ ์ ์ ๋ณด๋ฅผ localStorage์ ํ ํฐ์ผ๋ก ์๋ ์์ฑํด ์ฃผ๊ณ ์ ์งํจ์ผ๋ก์จ ์ ์ญ ์ํ ๊ด๋ฆฌ ํจ.
- ์์ ๋ฐฉ๋ฒ์ผ๋ก ํ๋กํ ์์ ์ด ์ค์๊ฐ์ผ๋ก ๋ฐ์๋์ง๋ง, ํฌ๋กฌ ์๋จ ํญ์ ์ด๋ ํ , ๋ฆฌ๋ทฐ ํ์ด์ง๋, ๋ฉ์ดํธ ํ์ด์ง ๋ฑ์์ ๊ธ ์์ฑ, ๋๊ธ, ์ชฝ์ง ๋ณด๋ด๊ธฐ ๊ธฐ๋ฅ์ ์ด์ฉํ ๋ ๊ธฐ๋ฅ์ด ๋์ํ์ง ์๋ ๋ฌธ์ ์ํฉ ๋ฐ์.
- ๋ก๊ทธ์ธ ์ ์คํ๋๋ ๋ก์ง์ด Header ์ปดํฌ๋ํธ์ ์์นํ์ฌ ํญ ์ด๋์ด๋ ์๋ก๊ณ ์นจ ์ Header์ ํ์ ์ปดํฌ๋ํธ ๋ชจ๋ ๋ ๋๋ง์ด ๋๋ฉด์ userData๊ฐ ์ถฉ๋ํ๋ ํ์์ด ๋ฐ์ํจ.
์ต์๋จ์ธ App ์ปดํฌ๋ํธ๋ก ํด๋น ๋ก์ง์ ์ฎ๊ฒจ์ค์ผ๋ก์จ ํด๊ฒฐํจ.
- ์์ ๋ฐฉ๋ฒ์ผ๋ก ์ชฝ์ง ๋ฑ ๊ธฐ๋ฅ์ด ์ ์์ ์ผ๋ก ์คํ๋์์ง๋ง, ๋ฐ๋ก ๋ก๊ทธ์์์ด ์๋๋ ํ์์ด ๋ฐ์ํจ.
- ํ๋์ useEffect์์ ๋ก๊ทธ์ธ ์ ์ ์ญ ์ํ๋ก ์ ์ ์ ๋ณด๋ฅผ set ํด์ฃผ๋ ๋ก์ง๊ณผ ๋ก๊ทธ์์ ์ ์ ์ญ ์ํ์์ ์ ์ ์ ๋ณด๋ฅผ null๋ก ๋ง๋ค์ด์ฃผ๋ ๋ก์ง์ด ๊ณต์กดํ์ผ๋, ๋ก๊ทธ์์ ์ ํ์ํ ๋ก์ง์ ๋ค๋ฅธ useEffect๋ก ๋ถ๋ฆฌํด์ค์ผ๋ก์จ ๋ก๊ทธ์์ ๋ฌธ์ ์ํฉ์ ํด๊ฒฐ ํจ.
- ์์
์ต์ด ๋ก๊ทธ์ธ ์, Provider์์ ์ ๊ณตํ๋ ์ ์ ์ ํ๋กํ ์ด๋ฏธ์ง ๊ฐ์ ๋ถ๋ฌ์ค์ง ๋ชปํ๋ ํ์์ด ๋ฐ์ํ์ฌ, ์ ๊ณตํ๋ ์ด๋ฏธ์ง url๋ฅผ blob์ ํตํด ์ด๋ฏธ์ง๋ฅผ ๋ค์ด๋ก๋ํ๊ณ ํด๋น ํ์ผ์ ๊ฐ์ฒด๋ก ๋ณํํ์ฌ storage์ ์
๋ก๋ํ๋ ๋ฐฉ์์ ์ ํํจ.
์ด ๋ฐฉ๋ฒ์ผ๋ก storage์ ์
๋ก๋ ํ data์ ๊ฒฝ๋ก๋ฅผ ๊ฐ์ ธ์ user ํ
์ด๋ธ์ ๋ด์์ฃผ๊ณ ๋ด์์ค ์ ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ ํ๋กํ ์ด๋ฏธ์ง๋ฅผ ์ ์์ ์ผ๋ก ์
๋ก๋ ํ๋ ๋ฐ ์ฑ๊ณตํจ.
- ์์ ๋ฐฉ๋ฒ์ผ๋ก ์ ์ ์ ์ด๋ฏธ์ง ์ ๋ณด ๋ฑ์ ์ํ ํ๊ฒ ๊ฐ์ ธ์ค๋, ์นด์นด์คํก ๋ก๊ทธ์ธ์ด ์๋๋ ํ์์ด ๋ฐ์ ํจ.
- Provider์์ ์ ๊ณตํ๋ ๊ตฌ๊ธ, ํ์ด์ค๋ถ์ https ํ์์ ์ด๋ฏธ์ง url์ด๋ผ๋ฉด ์นด์นด์คํก์ ๊ฒฝ์ฐ httpํ์์ ์ด๋ฏธ์ง url์ด์ด์ supabase storage์ ์ ๋ก๋ํ ๋ cors ์ค๋ฅ๊ฐ ๋ฐ์ ํจ ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์นด์นด์คํก Rest API๋ฅผ ์ด์ฉํ์ฌ ์ฌ์ฉ์์ ํ๋กํ์ GET์์ฒญํ๋ ๋ฐฉ์์ผ๋ก https ํ์์ ์ด๋ฏธ์ง url์ JSON ๊ฐ์ฒด๋ก ๋ฐ์ ์ ์ ์ ํ๋กํ์ ์ ๋ก๋ ํ๋ ๋ฐ ์ฑ๊ณต ํจ.
- ์์
๋ก๊ทธ์ธ ํ supabase์์ ์ ๊ณตํ๋ onAuthStateChange ๋ฉ์๋๋ฅผ ํตํด session์์ ์ ์ ์ ๋ณด๋ฅผ ๋ฐ์ ์ user ํ
์ด๋ธ์ ์ ์ฅํ๊ณ , ๊ฐ์ ๋ฐฉ์์ผ๋ก localStorage๋ฅผ ์์ฑํ์ฌ ์์ฑ๋ ํ ํฐ์ zustand๋ก store์ ๋ด์ ์ ์ญ ์ํ ๊ด๋ฆฌํจ.
-
ํด๊ฒฐ ๋ฐฉ์
- ์ฌ์ฉ์ ์ธ์ฆ ๋ฐ ๋ก๊ทธ์ธ:
- ์ฌ์ฉ์์ ์์
๋ก๊ทธ์ธ ํ Supabase์
onAuthStateChange
๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ธ์ ์์ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๊ณ Supabase์user
ํ ์ด๋ธ์ ์ ์ฅํ๋ค. - ๋ก๊ทธ์ธํ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ localStorage์ ํ ํฐ์ผ๋ก ์์ฑํ์ฌ Zustand๋ก ์ ์ญ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ค.
- ์ฌ์ฉ์์ ์์
๋ก๊ทธ์ธ ํ Supabase์
- ํ๋กํ ์ ๋ณด ์ค์๊ฐ ๋ฐ์:
- ํ๋กํ ์ ๋ณด ์์ ์ด ๋ฐ๋ก ๋ฐ์๋์ง ์๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด Zustand์
persist
๋ฅผ ์ฌ์ฉํ์ฌ ์ํ ์ ๋ณด๋ฅผ localStorage์ ํ ํฐ ํํ๋ก ์ ์ฅํ๋ค.
- ํ๋กํ ์ ๋ณด ์์ ์ด ๋ฐ๋ก ๋ฐ์๋์ง ์๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด Zustand์
- ๊ธฐ๋ฅ ๋์ ๋ฌธ์ :
- ์ผ๋ถ ๊ธฐ๋ฅ์ด ํฌ๋กฌ ํญ ์ด๋ ํ ์๋ํ์ง ์๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋ก๊ทธ์ธ ์ ์คํ๋๋ ๋ก์ง์ App ์ปดํฌ๋ํธ๋ก ์ด๋ํ์ฌ ํด๊ฒฐํ๋ค.
- ์นด์นด์คํก ๋ก๊ทธ์ธ ๋ฐ HTTPS ์ด๋ฏธ์ง URL:
- ์นด์นด์คํก์ HTTP ํ์์ ์ด๋ฏธ์ง URL์ ์ ๊ณตํ๋ฏ๋ก Supabase Storage์ ์ ๋ก๋ ์ CORS ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์นด์นด์คํก Rest API๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์ ํ๋กํ ์ด๋ฏธ์ง๋ฅผ HTTPS ํ์์ URL๋ก ๊ฐ์ ธ์์ ์ ์ฅํ๋ค. โ ์ด๋ฌํ ์กฐ์น๋ฅผ ํตํด ์ฌ์ฉ์ ์ธ์ฆ, ํ๋กํ ๊ด๋ฆฌ, ๊ธฐ๋ฅ ๋์, ์ด๋ฏธ์ง URL ๋ฌธ์ ๋ฑ ๋ค์ํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ฒ ๋์๋ค.
- ์ฌ์ฉ์ ์ธ์ฆ ๋ฐ ๋ก๊ทธ์ธ:
Supabase ๊ฒ์ API
-
์๊ตฌ ์ฌํญ
- ๊ฒ์ ๊ฒฐ๊ณผ๋ useInfinityQuery๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌดํ์คํฌ๋กค๋ก UI๋ก ๊ตฌํ
- supabase DB์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ๋ ๊ฒ์ ์กฐ๊ฑด์ ์๋ง๋ ๋ฐ์ดํฐ๋ก ํํฐ๋งํด์ ๊ฐ์ ธ์ค๊ธฐ
-
๋ฌธ์ ์ฌํญ
- useInfinityQuery๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์ supabase์ ๋ฐ์ดํฐ ์์ฒญ์ ํ ๋, ๋ฐ์ดํฐ๋ฅผ ์ค๋ณต์ผ๋ก ๋ถ๋ฌ์ค๋ ํ์์ด ๋ฐ์
- useInfinityQuery๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ supabase DB๋ก๋ถํฐ ํํฐ๋ง ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์์ด์ผ ํจ. post ํ ์ด๋ธ์ title๊ณผ foreignTable์ธ store ํ ์ด๋ธ์ title์ ๊ฒ์ ํํฐ๋ง ์กฐ๊ฑด์ผ๋ก ๋์์ผ๋ ์๋ง๊ฒ ํํฐ๋ง ๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค์ง ๋ชป ํ๋ ํ์ ๋ฐ์
-
ํด๊ฒฐ ๊ณผ์
- order์ range ์กฐ๊ฑด์ ๋์์ ์ฌ์ฉํ๊ฒ ๋๋ฉด ์ค๋ณต์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ด
- supabase docs์์๋ order์กฐ๊ฑด๊ณผ range ์กฐ๊ฑด์ ๋์์ ์ฌ์ฉํ ์์ ๊ฐ ์์, ํ์ง๋ง ์ด๋ supabase์ ํํฐ๋ง ์ค๋ฅ๋ก ํ๋จํจ.
- supabase SQL Editor์ ํตํด order์กฐ๊ฑด(๋ด๋ฆผ์ฐจ์)์ผ๋ก view๋ฅผ ์์ฑํ๊ณ , view table์ range์กฐ๊ฑด์ผ๋ก ๋ฐ์ดํฐ ์์ฒญํ์ง๋ง ๋์ผํ๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ค๋ณต์ผ๋ก ๊ฐ์ ธ์ค๋ ํ์์ด ๋ฐ์
- supabase or ๋ฉ์๋์์๋ post ํ ์ด๋ธ๊ณผ foreignTable ํ ์ด๋ธ์ ๋์์ ์กฐ๊ฑด์ผ๋ก ์ฌ์ฉํ์ง ๋ชป ํ๋ ๊ฒ์ผ๋ก ํ๋จ, ๊ณต์ ๋ฌธ์์๋ ์ฌ์ฉ ์์ ๊ฐ ์์
- order์ range ์กฐ๊ฑด์ ๋์์ ์ฌ์ฉํ๊ฒ ๋๋ฉด ์ค๋ณต์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ด
-
ํด๊ฒฐ ๋ฐฉ์
- supabase ์ธก ์ค๋ฅ๋ก ํ๋จํ์ฌ, order ์กฐ๊ฑด์ ์ ๊ฑฐ ํ range์กฐ๊ฑด๋ง์ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ ์ค๋ณต๋ฐ์ดํฐ๋ฅผ ์ ๊ฑฐํจ.
- ์นดํ ๊ณ ๋ฆฌ๋ฅผ ๋์ด ํ๋์ ํ ์ด๋ธ์์ ํ๋์ ๊ฒ์ ์กฐ๊ฑด๋ง์ ํํฐ๋งํ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ ์ฌ์ฉ ํจ
์ง๋ API & ๊ฒ์ API
-
์๊ตฌ ์ฌํญ
- ํ์ ์คํ ์ด ์์ธ ์์น๋ฅผ ์ง๋ API๋ฅผ ์ฌ์ฉํด ๋ง์ปค๋ก ํ์ํ๊ธฐ.
- ๊ฒ์ API๋ฅผ ํตํด ํ์ ์คํ ์ด ์ฃผ๋ณ ํซํ๋ ์ด์ค์ ๋ํ ์์ธ ์ ๋ณด๋ ์นด๋ ์ฌ๋ผ์ด๋๋ก ๋ณด์ฌ์ฃผ๊ณ ์ด์ ์ง๋ API๋ฅผ ์ฐ๊ฒฐํ์ฌ ์์น๋ ์ง๋์ ๋ง์ปค๋ก ํ์ํ๊ธฐ.
- ์ฃผ๋ณ ์ง์ญ ํ์ ์คํ ์ด ์์น๋ฅผ ์ง๋ API๋ฅผ ์ฌ์ฉํด ๋ง์ปค๋ก ํ์ํ๊ธฐ.
-
๋ฌธ์ ์ฌํญ
- ๋ค์ด๋ฒ ๊ฒ์ API๋ฅผ ์์ฒญํ๋ ค๋ฉด node.js๋ฅผ ์ด์ฉํด ์๋ฒ๋ฅผ ํตํด ํธ์ถํด์ผ ํ๊ฑฐ๋ ํ๋ก์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ผํจ.
- ๊ณต๊ณต OPEN API์์ ์ ๊ณตํ๋ ์์์ ์ ๋ณด์ ์์์ ์ด๋ฏธ์ง์ ๋ฐ์ดํฐ๊ฐ ์๋ก ๋ค๋ฆ.
- ์นด์นด์ค ๊ฒ์ API์์ ๊ฐ์ ธ์ค๋ ์ด๋ฏธ์ง๊ฐ ๋๋ค์ด๋ผ ํซํ๋ ์ด์ค์ ๊ด๋ จ์๋ ์ด๋ฏธ์ง๋ ๊ฐ์ ธ์ด.
-
ํด๊ฒฐ ๊ณผ์
- ์ฒ์์ UI ์ ์ธ ์ด์ ๋ก Naver ์ง๋ API๋ฅผ ์ฌ์ฉํ์๊ธฐ ๋๋ฌธ์ ๋์ผํ๊ฒ Naver ๊ฒ์ API๋ฅผ ์ฌ์ฉํ์ฌ ์ฃผ๋ณ ํซํ๋ ์ด์ค์ ๋ํ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๋ ค ํ์ผ๋, Naver ๊ฒ์ API๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด node.js ๊ฐ์ ์๋ฒ๋ฅผ ํตํด์ผ ํ๊ฑฐ๋ ํ๋ก์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ด์ผํจ.
- ๊ฒ์ API๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ํซํ๋ ์ด์ค ๊ด๋ จ ์ ๋ณด๋ฅผ ๊ด๊ด ์์์ OPEN API๋ฅผ ํตํด ๊ฐ์ ธ์ค๋ ค๊ณ ํ์ผ๋ ์์์ ์์ธ ์ ๋ณด ๋ฐ์ดํฐ์ ์์์ ์ด๋ฏธ์ง ๋ฐ์ดํฐ์ ์ ๋ณด๊ฐ ์ผ์นํ์ง ์์ ์ฐ๊ฒฐํ ์ ์์์.
- ์๋ฒ๋ฅผ ํตํ ์์ฒญ์ด ํ์์๋ Kakao ์ง๋ API ๋ด์
keywordSearch
ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์ฃผ๋ณ ์ง์ญ ํซํ๋ ์ด์ค ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ด. - ์ ํด๊ฒฐ ๊ณผ์ ์์ ๊ฐ์ ธ์ค๋ ํซํ๋ ์ด์ค ๋ฐ์ดํฐ์ ์ผ์นํ๋ ์ฅ์์ ์ด๋ฏธ์ง๋ฅผ Kakao์ ๊ฒ์ api๋ฅผ ์ฌ์ฉํ์ฌ ํธ์ถํ๋ ค ํ์ผ๋ ๊ฐ์ ธ์ค๋ ์ด๋ฏธ์ง๊ฐ ๋๋ค์ด๋ผ ์ฅ์์ ๊ด๋ จ์๋ ์ด๋ฏธ์ง๋ ๊ฐ์ ธ์ค๋ ๋ฌธ์ ๊ฐ ์๊น.
-
ํด๊ฒฐ ๋ฐฉ์
- ํซํ๋ ์ด์ค์ ๋ํ ๋ฐ์ดํฐ๋ฅผ ์นด๋ ์ฌ๋ผ์ด๋๋ฅผ ํตํด ๋ณด์ฌ์ฃผ๋ ๋์ ์ง๋ ์์ ๋ง์ปค๋ค๋ก ํํํ๊ณ ํด๋น ๋ง์ปคํ์ ํด๋ฆญํ๋ฉด iframe์ ์ฌ์ฉํด ์นด์นด์ค๋งต์ ์์ธ์ ๋ณด๋ฅผ ๋์์ฃผ๋ ์์ผ๋ก ๋ณ๊ฒฝํจ.