+
+ )
+}
+
+export default DetailDialog
diff --git a/src/components/common/footer/CommonFooter.module.scss b/src/components/common/footer/CommonFooter.module.scss
index e283d2a..3ae5899 100644
--- a/src/components/common/footer/CommonFooter.module.scss
+++ b/src/components/common/footer/CommonFooter.module.scss
@@ -62,4 +62,4 @@
color: $color-black-900;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/components/common/footer/CommonFooter.tsx b/src/components/common/footer/CommonFooter.tsx
index 40a3699..70810ff 100644
--- a/src/components/common/footer/CommonFooter.tsx
+++ b/src/components/common/footer/CommonFooter.tsx
@@ -1,64 +1,62 @@
-// import { useEffect, useState } from 'react'
-// import { useRecoilState, useRecoilValue, useRecoilValueLoadable } from 'recoil'
-// import { imageData } from '@/recoil/selectors/imageSelector'
-// import { pageState } from '@/recoil/atoms/pageState'
+import { useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue, useRecoilValueLoadable } from 'recoil'
+import { imageData } from '@/recoil/selectors/imageSelector'
+import { pageState } from '@/recoil/atoms/pageState'
import styles from './CommonFooter.module.scss'
-// import { searchState } from '@/recoil/atoms/searchState'
-import IconImageLeft from '@/assets/icons/icon-arrowLeft.svg'
-import IconImageRight from '@/assets/icons/icon-arrowRight.svg'
+import { searchState } from '@/recoil/atoms/searchState'
function CommonFooter() {
- // const imgSelector = useRecoilValueLoadable(imageData)
- // const search = useRecoilValue(searchState)
- // const [page, setPage] = useRecoilState(pageState)
- // const [step, setStep] = useState(0)
+ const imgSelector = useRecoilValueLoadable(imageData)
+ const search = useRecoilValue(searchState)
+ const [page, setPage] = useRecoilState(pageState)
+ const [step, setStep] = useState(0)
- // useEffect(() => {
- // setStep(0)
- // }, [search])
+ useEffect(() => {
+ setStep(0)
+ }, [search])
- // // 페이지 리스트 UI 생성
- // const newArr: number[] = new Array()
- // for (let i = 1; i <= imgSelector.contents.total_pages; i++) {
- // newArr.push(i)
- // }
- // const length = newArr.length
- // const divide = Math.floor(length / 10) + (Math.floor(length % 10) > 0 ? 1 : 0)
- // const res = []
+ // 페이지 리스트 UI 생성
+ const newArr: number[] = new Array()
+ for (let i = 1; i <= imgSelector.contents.total_pages; i++) {
+ newArr.push(i)
+ }
+ const length = newArr.length
+ const divide = Math.floor(length / 10) + (Math.floor(length % 10) > 0 ? 1 : 0)
+ const res = []
- // for (let i = 0; i <= divide; i++) {
- // // 배열 0부터 n개씩 잘라 새 배열에 넣기
- // res.push(newArr.splice(0, 10))
- // }
+ for (let i = 0; i <= divide; i++) {
+ // 배열 0부터 n개씩 잘라 새 배열에 넣기
+ res.push(newArr.splice(0, 10))
+ }
- // // ----------------------------------------------------------------------------------------------------
+ // ----------------------------------------------------------------------------------------------------
- // const moveToPage = (selected: number) => {
- // setPage(selected)
- // }
- // const moveToPrev = () => {
- // if (step === 0) return
- // else {
- // setStep(step - 1)
- // setPage(res[step - 1][0])
- // }
- // }
- // const moveToNext = () => {
- // if (step < res[step].length - 2) {
- // setStep(step + 1)
- // setPage(res[step + 1][0])
- // } else return
- // }
+ const moveToPage = (selected: number) => {
+ setPage(selected)
+ }
+ const moveToPrev = () => {
+ if (step === 0) return
+ else {
+ setStep(step - 1)
+ setPage(res[step - 1][0])
+ }
+ }
+ const moveToNext = () => {
+ if (step < res[step].length - 2) {
+ setStep(step + 1)
+ setPage(res[step + 1][0])
+ } else return
+ }
return (
)
}
-export default CommonFooter
\ No newline at end of file
+export default CommonFooter
diff --git a/src/components/common/header/CommonHeader.module.scss b/src/components/common/header/CommonHeader.module.scss
index ffdf01b..908a817 100644
--- a/src/components/common/header/CommonHeader.module.scss
+++ b/src/components/common/header/CommonHeader.module.scss
@@ -56,4 +56,4 @@
font-size: 15px;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/components/common/header/CommonHeader.tsx b/src/components/common/header/CommonHeader.tsx
index 30a46e3..9426de0 100644
--- a/src/components/common/header/CommonHeader.tsx
+++ b/src/components/common/header/CommonHeader.tsx
@@ -1,6 +1,7 @@
import { useNavigate } from 'react-router-dom'
import styles from './CommonHeader.module.scss'
-import logoImage from '@/assets/images/image-logo.png'
+import logo from '@/assets/images/image-logo.png';
+
function CommonHeader() {
const navigate = useNavigate()
@@ -15,11 +16,7 @@ function CommonHeader() {
return (
+
+
+
+
+
+ 
+ {data.user.name}
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 이미지 크기
+
+ {data.width} X {data.height}
+
+
+
+ 업로드
+ {data.created_at.split('T')[0]}
+
+
+ 마지막 업데이트
+ {data.updated_at.split('T')[0]}
+
+
+ 다운로드
+ {data.likes}
+
+
+ {Array.isArray(data.tags) && data.tags.map((tag: Tag) => (
+
+
+ {tag.title}
+
+ ))}
+ moveToPage('main')}>
- 
+ 
PhotoSplash
@@ -27,10 +24,10 @@ function CommonHeader() {
- sokuree | choibk@sokuree.com
+ 9Diin | 9Diin@Youtube.com
-
- )
-}
-
-export default CommonSearchBar
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 6343bf8..28e0a1f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,12 @@
-// import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { RecoilRoot } from 'recoil'
import App from './App.tsx'
-createRoot(document.getElementById('root')!).render(
-
- 
-
-
+
+ )
+}
+
+export default Card
diff --git a/src/pages/bookmark/index.tsx b/src/pages/bookmark/index.tsx
new file mode 100644
index 0000000..e616e90
--- /dev/null
+++ b/src/pages/bookmark/index.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react'
+import CommonHeader from '@/components/common/header/CommonHeader'
+import Card from './components/Card'
+// CSS
+import styles from './styles/index.module.scss'
+import { CardDTO } from '../index/types/card'
+
+function index() {
+ const [data, setData] = useState([])
+ const getData = () => {
+ const getLocalStorage = JSON.parse(localStorage.getItem('bookmark'))
+
+ if (getLocalStorage || getLocalStorage !== null) setData(getLocalStorage)
+ else setData([])
+ }
+
+ useEffect(() => {
+ getData()
+ }, [])
+
+ return (
+
+ 
+
+
+
+
+ 작성자
+ {prop.user.name}
+
+
+ 이미지 크기
+
+ {prop.width} X {prop.height}
+
+
+
+ 업로드 날짜
+ {prop.created_at.split('T')[0]}
+
+
+ 마지막 업데이트
+ {prop.updated_at.split('T')[0]}
+
+
+ 다운로드 수
+ {prop.likes}
+
+
+ {/* 공통 헤터 UI 부분 */}
+
+ {data.map((item: CardDTO) => {
+ return
+
+ )
+}
+
+export default index
diff --git a/src/pages/bookmark/styles/index.module.scss b/src/pages/bookmark/styles/index.module.scss
new file mode 100644
index 0000000..2306aee
--- /dev/null
+++ b/src/pages/bookmark/styles/index.module.scss
@@ -0,0 +1,26 @@
+$HEADER-HEIGHT: 56px;
+
+.page {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+
+ width: 100%;
+ height: 100vh;
+
+ &__contents {
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ justify-content: center;
+
+ width: 100%;
+ height: calc(100% - $HEADER-HEIGHT);
+
+ padding: 48px;
+ gap: 24px;
+
+ overflow-y: scroll;
+ }
+}
diff --git a/src/pages/index/components/Card.tsx b/src/pages/index/components/Card.tsx
index ba6aaf5..3f810e6 100644
--- a/src/pages/index/components/Card.tsx
+++ b/src/pages/index/components/Card.tsx
@@ -1,6 +1,5 @@
-import type { CardDTO } from '../types/card'
import styles from './Card.module.scss'
-
+import { CardDTO } from '../types/card'
interface Props {
data: CardDTO
@@ -8,16 +7,16 @@ interface Props {
handleSetData: (eventValue: CardDTO) => void
}
-function Card({ data/*, handleDialog, handleSetData */}: Props) {
+function Card({ data, handleDialog, handleSetData }: Props) {
const openDialog = () => {
console.log('함수호출')
- // handleDialog(true)
- // handleSetData(data)
+ handleDialog(true)
+ handleSetData(data)
}
return (
-
+
)
}
diff --git a/src/pages/index/components/Loading.module.scss b/src/pages/index/components/Loading.module.scss
new file mode 100644
index 0000000..61d625a
--- /dev/null
+++ b/src/pages/index/components/Loading.module.scss
@@ -0,0 +1,19 @@
+.loader {
+ width: 48px;
+ height: 48px;
+ border: 5px solid #fff;
+ border-bottom-color: #ff3d00;
+ border-radius: 50%;
+ display: inline-block;
+ box-sizing: border-box;
+ animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/pages/index/components/Loading.tsx b/src/pages/index/components/Loading.tsx
new file mode 100644
index 0000000..d04620c
--- /dev/null
+++ b/src/pages/index/components/Loading.tsx
@@ -0,0 +1,7 @@
+import styles from './Loading.module.scss'
+
+function Loading() {
+ return
+}
+
+export default Loading
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index e305f6b..5269f5f 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,71 +1,60 @@
-import CommonHeader from "@/components/common/header/CommonHeader"
-import CommonSearchBar from "@/components/common/searchBar/CommonSearchBar"
-import CommonNav from "@/components/common/navigation/CommanNav"
-import CommonFooter from "@/components/common/footer/CommonFooter"
-import Card from "./components/Card"
-import styles from "./styles/index.module.scss"
-import axios from "axios"
-import { useEffect, useState } from "react"
-import type { CardDTO } from "./types/card"
+import { useMemo, useState } from 'react'
+import { useRecoilValueLoadable } from 'recoil'
+import { imageData } from '@/recoil/selectors/imageSelector'
+import CommonHeader from '@components/common/header/CommonHeader'
+import CommonSearchBar from '@components/common/searchBar/CommonSearchBar'
+import CommonNav from '@components/common/navigation/CommonNav'
+import CommonFooter from '@components/common/footer/CommonFooter'
+import Card from './components/Card'
+import DetailDialog from '@components/common/dialog/DetailDialog'
+import Loading from './components/Loading'
+// CSS
+import styles from './styles/index.module.scss'
+import { CardDTO } from './types/card'
function index() {
- const [imgUrls, setImgUrls] = useState([])
+ const imgSelector = useRecoilValueLoadable(imageData)
+ const [imgData, setImgData] = useState
- {/*공통 헤더 UI 부분*/}
- ({
+ key: 'pageState',
+ default: 1,
+})
diff --git a/src/recoil/atoms/searchState.ts b/src/recoil/atoms/searchState.ts
new file mode 100644
index 0000000..6467ac5
--- /dev/null
+++ b/src/recoil/atoms/searchState.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const searchState = atom({
+ key: 'searchState',
+ default: 'Korea',
+})
diff --git a/src/recoil/selectors/imageSelector.ts b/src/recoil/selectors/imageSelector.ts
new file mode 100644
index 0000000..97ccf8f
--- /dev/null
+++ b/src/recoil/selectors/imageSelector.ts
@@ -0,0 +1,25 @@
+import { selector } from 'recoil'
+import { searchState } from '../atoms/searchState'
+import { pageState } from '../atoms/pageState'
+
+import axios from 'axios'
+const API_URL = 'https://api.unsplash.com/search/photos'
+const API_KEY = 'nloztIOd94-5EH6vAJUU3L66l79z9Dv2KwwbKHShAnY'
+const PER_PAGE = 30
+
+export const imageData = selector({
+ key: 'imageData',
+ get: async ({ get }) => {
+ const searchValue = get(searchState)
+ const pageValue = get(pageState)
+
+ // API 호출
+ try {
+ const res = await axios.get(`${API_URL}?query=${searchValue}&client_id=${API_KEY}&page=${pageValue}&per_page=${PER_PAGE}`)
+ console.log(res)
+ return res.data
+ } catch (error) {
+ console.log(error)
+ }
+ },
+})
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
-
- )
+ )
}
-export default index
\ No newline at end of file
+export default index
diff --git a/src/pages/index/styles/index.module.scss b/src/pages/index/styles/index.module.scss
index c8ace3f..0407622 100644
--- a/src/pages/index/styles/index.module.scss
+++ b/src/pages/index/styles/index.module.scss
@@ -1,4 +1,4 @@
-$HEADER-HEIGHT: 50px;
+$HEADER-HEIGHT: 56px;
$FOOTER-HEIGHT: 50px;
$NAVIGATION-HEIGHT: 50px;
@@ -10,7 +10,6 @@ $NAVIGATION-HEIGHT: 50px;
width: 100%;
height: 100vh;
- border-radius: 8px;
&__contents {
display: flex;
@@ -19,7 +18,7 @@ $NAVIGATION-HEIGHT: 50px;
justify-content: flex-start;
width: 100%;
- height: calc(100vh - $HEADER-HEIGHT - $NAVIGATION-HEIGHT - $FOOTER-HEIGHT);
+ height: calc(100% - $HEADER-HEIGHT - $NAVIGATION-HEIGHT - $FOOTER-HEIGHT);
&__introBox {
display: flex;
@@ -29,7 +28,7 @@ $NAVIGATION-HEIGHT: 50px;
width: 100%;
height: 40%;
- background-image: url("/src/assets/images/image-intro.jpg");
+ background-image: url('/src/assets/images/image-intro.jpg');
background-size: cover;
background-position: 100% 15%;
@@ -40,19 +39,16 @@ $NAVIGATION-HEIGHT: 50px;
&__title {
margin-bottom: 4px;
- color: $color-white-000;
+ color: $color-white-000; // CSS COLOR CODE 변수화 작업 설명 예정
font-size: 3rem;
font-weight: 700;
}
-
&__desc {
color: $color-white-000;
margin-bottom: 32px;
}
-
}
}
-
&__imageBox {
display: flex;
align-items: center;
@@ -69,4 +65,4 @@ $NAVIGATION-HEIGHT: 50px;
overflow-y: scroll;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/recoil/atoms/pageState.ts b/src/recoil/atoms/pageState.ts
new file mode 100644
index 0000000..d1cc406
--- /dev/null
+++ b/src/recoil/atoms/pageState.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const pageState = atom
-
- {/* 공통 푸터 UI 부분 */}
-
- PhotoSplash
-
- 인터넷의 시각 자료 출처입니다.
- 모든 지역에 있는 크리에이터들의 지원을 받습니다. - - {/*검색창 UI 부분*/} -
+ return (
+ - 모든 지역에 있는 크리에이터들의 지원을 받습니다. - - {/*검색창 UI 부분*/} -
+ {/* 공통 헤더 UI 부분 */}
+
-
+
+ {/* 공통 푸터 UI 부분 */}
+
+
+
+ PhotoSplash
+
+ 인터넷의 시각 자료 출처입니다.
+ 모든 지역에 있는 크리에이터들의 지원을 받습니다. + + {/* 검색창 UI 부분 */} +
+ + 모든 지역에 있는 크리에이터들의 지원을 받습니다. + + {/* 검색창 UI 부분 */} +
{CARD_LIST}
+
- {cardList}
-
-