Learning material error correction version

2025-12-17 23:39:24 +09:00 · 2025-12-17 23:39:24 +09:00 · cd2b505c4c
commit cd2b505c4c
parent dd689b97b6
37 changed files with 1831 additions and 1865 deletions
--- a/README.md
+++ b/README.md
@ -1,181 +1,17 @@
-# React + TypeScript + Vite
-## 개발 환경
+## React Basic 강의 콘텐츠: Unsplash Image API를 활용한 이미지 검색 사이트 만들기

-### 0. Synology NAS (DS925+) 사전 준비사항
+### 개발환경

- Node.js v22
+1.  프로젝트 환경설정(vite를 활용한 React 설치): `npm install vite@latest` <br />

- 작업 경로: `/volume1/demo/react`
+2.  React 중앙집중식 상태관리 라이브러리 Recoil 설치: `npm install recoil` <br />

+3.  외부 오픈 API 통신을 위한 라이브러리 Axios 설치: `npm install axios` <br />

-```bash
-node -v  # v22.19.0
-npm -v   # 10.9.3
-```
+4.  CSS 스타일링을 위한 SASS/SCSS 설치: `npm install -D sass` <br />

---
+5.  React Router 설치: `npm install react-router-dom localforage match-sorter sort-by` <br />

-## 1. 프로젝트 생성
-
-```bash
-npm create vite@latest [project-name]
-```
-
-### 선택 항목
-
- Select a framework: **React**
-    
- Select a variant: **TypeScript**
-    
- Use rolldown-vite (Experimental)?: **No**
-    
- Install with npm and start now: **Yes**
-    
-
-### 권한 주의 사항
-
- **root 권한으로 생성 시**
-    
-    - 일반 사용자 접근 불가
-        
-    - 소유자 및 권한 수정 필요
-        
-
-```bash
-sudo chown -R sokuree:users project-name
-chmod -R 755 project-name
-ls -ld project-name
-```
-
-출력 예:
-
-```text
-drwxr-xr-x 1 sokuree users 4096 Dec 16 project-name
-```
-
---
-
-## 2. 개발 환경 설정
-
-### 2.1 Synology NAS Reverse Proxy 설정
-
-#### 소스 (클라이언트 → NAS)
-
-|항목|값|
-|---|---|
-|프로토콜|HTTPS|
-|호스트 이름|react.sokuree.com|
-|포트|443|
-|HSTS|활성화|
-
-#### 대상 (NAS → Vite)
-
-|항목|값|
-|---|---|
-|프로토콜|HTTP|
-|호스트 이름|localhost|
-|포트|5173|
-
---
-
-### 2.2 `vite.config.ts` 설정
-
-```ts
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vite.dev/config/
-export default defineConfig({
-  server: {
-    host: true, // 0.0.0.0 바인딩 (프록시/외부 접근 허용)
-    port: 5173,
-    allowedHosts: [
-      'user.domain.com', // 역방향 프록시로 들어오는 Host 명시 허용
-    ],
-  },
-  plugins: [react()],
-})
-```
-
---
-
-## 3. Vite + TypeScript alias 경로 통합 설정
-
-### 3.1 vite.config.ts
-
-```ts
-export default defineConfig({
-  // Vite Path Aliases: import 경로를 상대경로 대신 별칭으로 사용하기 위한 설정
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@assets': fileURLToPath(new URL('./src/assets', import.meta.url)),
-      '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
-      '@pages': fileURLToPath(new URL('./src/pages', import.meta.url)),
-      '@recoil': fileURLToPath(new URL('./src/recoil', import.meta.url)),
-      '@types': fileURLToPath(new URL('./src/types', import.meta.url)),
-      '@apis': fileURLToPath(new URL('./src/apis', import.meta.url)),
-    },
-  },
-
-  // SCSS 전역 설정
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: '@import "./src/assets/styles/main.scss";'
-      },
-    },
-  },
-})
-```
-
-### 3.2 tsconfig.app.json
-```json
-{
-  "compilerOptions": {
-
-    /* TypeScript 컴파일용 경로 별칭(alias) 설정 */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"],
-      "@components/*": ["src/components/*"],
-      "@assets/*": ["src/assets/*"],
-      "@/components*": ["src/components*"],
-      "@/pages/*": ["src/pages/*"],
-      "@/types*": ["src/types*"],
-      "@/recoil/*": ["src/recoil/*"],
-      "@/apis/*": ["src/apis/*"],
-    }
-  },
-  "include": ["src"],
-  "references": [{"path": "./tsconfig.node.json"}]
-}
-```
-
-## 4. 라이브러리 (npm Package) 설치
-
-1. **HTTP 클라이언트 라이브러리** 
-   ```bash
-   npm install axios
-   ```
-2. **React SPA의 라우팅, 로컬 저장, 검색·정렬을 담당하는 핵심 라이브러리 묶음**
-   ```bash
-   npm install react-router-dom localforage match-sorter sort-by
-   ```   
-3. **Node.js 타입 정의 패키지 (TypeScript 전용)** 
-   ```bash
-   npm install @types/node
-    ```        
-4. **React UI 컴포넌트 라이브러리 (Toast 알림)**
-   ```bash
-   npm install react-simple-toasts
-   ```
-5. **React 중앙집중식 상태 관리 라이브러리 (Recoil)**
-   ```bash
-   npm install recoil
-   ```
-6. **CSS 스타일링을 위한 SASS/SCSS 전처리기**
-   ```bash
-   npm install -D sass
-   ```
+6.  TypeScript에서 Node.js 모듈을 쓸 수 있는 환경 구축 : `npm i @types/node` <br />

+7.  React Toast Popup 모듈 설치 : `npm install react-simple-toasts` <br />
--- a/index.html
+++ b/index.html
@ -1,10 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>react_basic</title>
+        <!-- GOOGLE ICON CDN LINK -->
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0" />
+        <title>Vite + React + TS</title>
    </head>
    <body>
        <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,38 +1,37 @@
 {
-  "name": "react_basic",
+  "name": "react-basic",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
-    "axios": "^1.13.2",
+    "@types/node": "^20.11.27",
+    "axios": "^1.6.8",
    "localforage": "^1.10.0",
-    "match-sorter": "^8.2.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router-dom": "^7.10.1",
-    "react-simple-toasts": "^6.1.0",
+    "match-sorter": "^6.3.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "react-simple-toasts": "^5.10.0",
    "recoil": "^0.7.7",
    "sort-by": "^1.2.0"
  },
  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.4",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "sass-embedded": "^1.97.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4"
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "sass": "^1.71.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.6"
  }
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,17 +1,21 @@
-// import React from 'react'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
-// Page Compenents
+import { RecoilRoot } from 'recoil'
+// 페이지 컴포넌트
+// const MainPage = React.lazy(() => import('@pages/index/index'))
 import MainPage from '@pages/index/index'
-
+import BookmarkPage from '@pages/bookmark/index'

 function App() {
    return (
+        <RecoilRoot>
            <BrowserRouter>
                <Routes>
-        <Route index path='/' element={<MainPage />}></Route>
-
+                    <Route index path="/" element={<MainPage />}></Route>
+                    <Route path="search/:id" element={<MainPage />}></Route>
+                    <Route path="/bookmark" element={<BookmarkPage />}></Route>
                </Routes>
            </BrowserRouter>
+        </RecoilRoot>
    )
 }

--- a/src/assets/images/icon-search.svg
+++ b/src/assets/images/icon-search.svg
@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z" stroke="#101828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M22 22L20 20" stroke="#101828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/src/components/common/dialog/DetailDialog.module.scss
+++ b/src/components/common/dialog/DetailDialog.module.scss
@ -0,0 +1,165 @@
+.container {
+    position: fixed;
+    z-index: 1;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100vh;
+
+    background-color: rgba($color-black-900, 0.5);
+
+    &__dialog {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+
+        width: 50%;
+        height: 700px;
+
+        background-color: $color-white-000;
+        border-radius: 12px;
+
+        &__header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            width: 100%;
+            height: 70px;
+
+            padding: 0 16px;
+
+            border-bottom: 1px solid $color-gray-100;
+
+            .close {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+
+                gap: 8px;
+
+                &__button {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    border: none;
+                    outline: none;
+                    background: transparent;
+
+                    cursor: pointer;
+                }
+                &__authorImage {
+                    border-radius: 50%;
+                }
+                &__authorName {
+                    font-weight: 600;
+                }
+            }
+            .bookmark {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                gap: 8px;
+
+                &__button {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    padding: 4px 6px;
+
+                    outline: none;
+                    border: none;
+                    border-radius: 6px;
+                    text-align: center;
+
+                    cursor: pointer;
+
+                    background-color: $color-white-000;
+                    border: 1px solid $color-gray-600;
+
+                    color: $color-gray-600;
+                }
+            }
+        }
+        &__body {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            width: 100%;
+            height: calc(100% - 220px);
+
+            .image {
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+        &__footer {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            width: 100%;
+            height: 150px;
+
+            padding: 0 24px;
+            gap: 24px;
+
+            .infoBox {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+
+                width: 100%;
+
+                gap: 48px;
+
+                &__item {
+                    display: flex;
+                    flex-direction: column;
+
+                    gap: 4px;
+
+                    &__label {
+                        color: $color-gray-500;
+                        font-weight: 500;
+                    }
+                    &__value {
+                        color: $color-black-900;
+                        font-weight: 600;
+                    }
+                }
+            }
+            .tagBox {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+
+                width: 100%;
+
+                gap: 8px;
+
+                &__tag {
+                    padding: 4px 8px 6px 8px;
+
+                    border-radius: 4px;
+                    background-color: $color-gray-100;
+                    color: $color-gray-500;
+                }
+            }
+        }
+    }
+}
--- a/src/components/common/dialog/DetailDialog.tsx
+++ b/src/components/common/dialog/DetailDialog.tsx
@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react'
+import { CardDTO, Tag } from '@/pages/index/types/card'
+import styles from './DetailDialog.module.scss'
+import toast, { toastConfig } from 'react-simple-toasts'
+import 'react-simple-toasts/dist/theme/dark.css'
+
+toastConfig({ theme: 'dark' })
+
+interface Props {
+    data?: CardDTO
+    handleDialog: (eventValue: boolean) => void
+}
+
+function DetailDialog({ data, handleDialog }: Props) {
+    if (!data) return null;   // 이 한 줄이 앱을 살립니다
+    const [bookmark, setBookmark] = useState(false)
+    // 다이얼로그 끄기
+    const closeDialog = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        handleDialog(false)
+        event.stopPropagation()
+    }
+    // 북마크 추가 이벤트
+    const addBookmark = (selected: CardDTO) => {
+        setBookmark(true)
+
+        const getLocalStorage = JSON.parse(localStorage.getItem('bookmark'))
+        // 1. 로컬스토리지에 bookmark이라는 데이터가 없을 경우
+        if (!getLocalStorage || getLocalStorage === null) {
+            localStorage.setItem('bookmark', JSON.stringify([selected]))
+            toast('해당 이미지를 북마크에 저장하였습니다. 😄')
+        } else {
+            // 2. 해당 이미지가 이미 로컬스토리지 bookmark라는 데이터에 저장되어 있을 경우
+            if (getLocalStorage.findIndex((item: CardDTO) => item.id === selected.id) > -1) {
+                toast('해당 이미지는 이미 북마크에 추가된 상태입니다. ❌')
+            } else {
+                // 3. 해당 이미지가 로컬스토리지 bookmark라는 데이터에 저장되어 있지 않을 경우 + bookmark라는 데이터에 이미 어떤 값이 담겨 있는 경우
+                const res = [...getLocalStorage]
+                res.push(selected)
+                localStorage.setItem('bookmark', JSON.stringify(res))
+
+                toast('해당 이미지를 북마크에 저장하였습니다. 😄')
+            }
+        }
+    }
+
+    useEffect(() => {
+        const getLocalStorage = JSON.parse(localStorage.getItem('bookmark'))
+
+        if (getLocalStorage && getLocalStorage.findIndex((item: CardDTO) => item.id === data.id) > -1) {
+            setBookmark(true)
+        } else if (!getLocalStorage) return
+
+        // ESC Key 입력시, 다이얼로그 닫기
+        const escKeyDownCloseDialog = (event: any) => {
+            console.log('함수호출')
+            if (event.key === 'Escape') {
+                closeDialog(event)
+            }
+        }
+        // ESC Key를 눌렀을 때, 다이얼로그창 닫기
+        window.addEventListener('keydown', escKeyDownCloseDialog) // 위에 만들어 놓은 escKeyDownCloseDialog를 keydown했을 때, 이벤트로 등록한다.
+        return () => window.removeEventListener('keydown', escKeyDownCloseDialog)
+    }, [])
+
+    return (
+        <div className={styles.container} onClick={closeDialog}>
+            <div className={styles.container__dialog}>
+                <div className={styles.container__dialog__header}>
+                    <div className={styles.close}>
+                        <button className={styles.close__button} onClick={closeDialog}>
+                            {/* 구글 아이콘을 사용 */}
+                            <span className="material-symbols-outlined" style={{ fontSize: 28 + 'px' }}>
+                                close
+                            </span>
+                        </button>
+                        <img src={data.user.profile_image.small} alt="사진작가 프로필 사진" className={styles.close__authorImage} />
+                        <span className={styles.close__authorName}>{data.user.name}</span>
+                    </div>
+                    <div className={styles.bookmark}>
+                        <button className={styles.bookmark__button} onClick={() => addBookmark(data)}>
+                            {/* 구글 아이콘을 사용 */}
+                            {bookmark === false ? (
+                                <span className="material-symbols-outlined" style={{ fontSize: 16 + 'px' }}>
+                                    favorite
+                                </span>
+                            ) : (
+                                <span className="material-symbols-outlined" style={{ fontSize: 16 + 'px', color: 'red' }}>
+                                    favorite
+                                </span>
+                            )}
+                            북마크
+                        </button>
+                        <button className={styles.bookmark__button}>다운로드</button>
+                    </div>
+                </div>
+                <div className={styles.container__dialog__body}>
+                    <img src={data.urls.small} alt="상세이미지" className={styles.image} />
+                </div>
+                <div className={styles.container__dialog__footer}>
+                    <div className={styles.infoBox}>
+                        <div className={styles.infoBox__item}>
+                            <span className={styles.infoBox__item__label}>이미지 크기</span>
+                            <span className={styles.infoBox__item__value}>
+                                {data.width} X {data.height}
+                            </span>
+                        </div>
+                        <div className={styles.infoBox__item}>
+                            <span className={styles.infoBox__item__label}>업로드</span>
+                            <span className={styles.infoBox__item__value}>{data.created_at.split('T')[0]}</span>
+                        </div>
+                        <div className={styles.infoBox__item}>
+                            <span className={styles.infoBox__item__label}>마지막 업데이트</span>
+                            <span className={styles.infoBox__item__value}>{data.updated_at.split('T')[0]}</span>
+                        </div>
+                        <div className={styles.infoBox__item}>
+                            <span className={styles.infoBox__item__label}>다운로드</span>
+                            <span className={styles.infoBox__item__value}>{data.likes}</span>
+                        </div>
+                    </div>
+                    <div className={styles.tagBox}>
+                        {Array.isArray(data.tags) && data.tags.map((tag: Tag) => (
+                            <div className={styles.tagBox__tag} key={tag.title}>
+                                {tag.title}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DetailDialog
--- 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 (
        <footer className={styles.footer}>
            <div className={styles.pagination}>
-                <button className={styles.pagination__button} /*onClick={moveToPrev}*/>
-                    <img src={IconImageLeft} alt="IconImageLeft" />
+                <button className={styles.pagination__button} onClick={moveToPrev}>
+                    <img src="/assets/icons/icon-arrowLeft.svg" alt="" />
                </button>
                {/* 변경될 UI 부분 */}
-                <span>1</span>
-                {/* {res[step] &&
+                {/* <span>1</span> */}
+                {res[step] &&
                    res[step].map((item: number, index: number) => {
                        if (item < 11) {
                            return (
@ -73,9 +71,9 @@ function CommonFooter() {
                                </button>
                            )
                        }
-                    })} */}
-                <button className={styles.pagination__button} /*onClick={moveToNext}*/>
-                    <img src={IconImageRight} alt="IconImageRight" />
+                    })}
+                <button className={styles.pagination__button} onClick={moveToNext}>
+                    <img src="/assets/icons/icon-arrowRight.svg" alt="" />
                </button>
            </div>
        </footer>
--- 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 (
        <header className={styles.header}>
            <div className={styles.header__logoBox} onClick={() => moveToPage('main')}>
-                <img
-                    src={logoImage}
-                    alt="PhotoSplash logo"
-                    className={styles.header__logoBox__logo}
-                />
+                <img src={logo} alt="" className={styles.header__logoBox__logo} />
                <span className={styles.header__logoBox__title}>PhotoSplash</span>
            </div>
            <div className={styles.header__profileBox}>
@ -27,7 +24,7 @@ function CommonHeader() {
                <button className={styles.header__profileBox__button} onClick={() => moveToPage('bookmark')}>
                    북마크
                </button>
-                <span className={styles.header__profileBox__userName}>sokuree | choibk@sokuree.com</span>
+                <span className={styles.header__profileBox__userName}>9Diin | 9Diin@Youtube.com</span>
            </div>
        </header>
    )
--- a/src/components/common/navigation/CommonNav.tsx
+++ b/src/components/common/navigation/CommonNav.tsx
@ -2,9 +2,9 @@ import { useEffect, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import styles from './CommonNav.module.scss'
 import navJson from './nav.json'
-// import { useRecoilState } from 'recoil'
-// import { pageState } from '@/recoil/atoms/pageState'
-// import { searchState } from '@/recoil/atoms/searchState'
+import { useRecoilState } from 'recoil'
+import { pageState } from '@/recoil/atoms/pageState'
+import { searchState } from '@/recoil/atoms/searchState'

 interface Navigation {
    index: number
@ -17,21 +17,21 @@ interface Navigation {
 function CommonNav() {
    const location = useLocation()
    const [navigation, setNavigation] = useState<Navigation[]>(navJson)
-    // const [, setPage] = useRecoilState(pageState)
-    // const [, setSearch] = useRecoilState(searchState)
+    const [, setPage] = useRecoilState(pageState)
+    const [, setSearch] = useRecoilState(searchState)

-    // useEffect(() => {
-    //     navigation.forEach((nav: Navigation) => {
-    //         nav.isActive = false
+    useEffect(() => {
+        navigation.forEach((nav: Navigation) => {
+            nav.isActive = false

-    //         if (nav.path === location.pathname || location.pathname.includes(nav.path)) {
-    //             nav.isActive = true
-    //             setSearch(nav.searchValue)
-    //             setPage(1)
-    //         }
-    //     })
-    //     setNavigation([...navigation])
-    // }, [location.pathname])
+            if (nav.path === location.pathname || location.pathname.includes(nav.path)) {
+                nav.isActive = true
+                setSearch(nav.searchValue)
+                setPage(1)
+            }
+        })
+        setNavigation([...navigation])
+    }, [location.pathname])

    // useState로 선언한 반응성을 가진 데이터를 기반으로 UI를 반복호출해보도록 한다.
    const navLinks = navigation.map((item: Navigation) => {
--- a/src/components/common/searchBar/CommonSearchBar.module.scss
+++ b/src/components/common/searchBar/CommonSearchBar.module.scss
@ -1,48 +0,0 @@
-.searchBar {
-    display: flex;
-    align-items: center;
-
-    gap: 28px;
-
-    &__search {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-
-        width: 50vw;
-
-        padding: 14px;
-        gap: 16px;
-
-        border-radius: 8px;
-        border: 1px solid $color-gray-300;
-        background-color: $color-white-000;
-        box-shadow: 0px 2px 8px 0px rgba(228, 231, 236, 0.7);
-
-        &:focus-within {
-            border-radius: 8px;
-            border: 1px solid #2e90fa;
-            background-color: $color-white-000;
-            box-shadow: 0px 0px 8px 0px rgba(21, 112, 239, 0.3);
-
-            .input {
-                color: $color-gray-800;
-            }
-        }
-        &__input {
-            outline: none;
-            border: none;
-
-            width: 100%;
-
-            font-size: 17px;
-            font-weight: 500;
-            line-height: 17px;
-
-            color: $color-gray-500;
-        }
-        img {
-            cursor: pointer;
-        }
-    }
-}
--- a/src/components/common/searchBar/CommonSearchBar.tsx
+++ b/src/components/common/searchBar/CommonSearchBar.tsx
@ -1,49 +0,0 @@
-// import { useState } from 'react'
-// import { useRecoilState } from 'recoil'
-
-import iconImage from '@/assets/images/icon-search.svg'
-
-// import { searchState } from '@/recoil/atoms/searchState'
-// import { pageState } from '@/recoil/atoms/pageState'
-import styles from './CommonSearchBar.module.scss'
-
-function CommonSearchBar() {
-    // const [, setSearch] = useRecoilState(searchState)
-    // const [, setPage] = useRecoilState(pageState)
-    // const [text, setText] = useState('')
-    // const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    //     setText(event.target.value)
-    // }
-    // const onSearch = () => {
-    //     if (text === '') {
-    //         // input 태그 안에 빈 값으로 검색하였을 때 => searching default value
-    //         setSearch('Korea')
-    //         setPage(1)
-    //     } else {
-    //         setSearch(text) // 작성한 Input Value 값 할당
-    //         setPage(1)
-    //     }
-    // }
-    // const handleKeyDown = (event: React.KeyboardEvent) => {
-    //     if (event.key === 'Enter') {
-    //         if (text === '') {
-    //             // input 태그 안에 빈 값으로 검색하였을 때 => searching default value
-    //             setSearch('Korea')
-    //             setPage(1)
-    //         } else {
-    //             setSearch(text) // 작성한 Input Value 값 할당
-    //             setPage(1)
-    //         }
-    //     }
-    // }
-    return (
-        <div className={styles.searchBar}>
-            <div className={styles.searchBar__search}>
-                <input type="text" placeholder="찾으실 이미지를 검색하세요." className={styles.searchBar__search__input} /*value={text} onChange={onChange} onKeyDown={handleKeyDown} */ />
-                <img src={iconImage} alt="" /* onClick={onSearch} */ />
-            </div>
-        </div>
-    )
-}
-
-export default CommonSearchBar
--- 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(<App />)
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <RecoilRoot>
+            <App />
+        </RecoilRoot>
+    </React.StrictMode>
+)
--- a/src/pages/bookmark/components/Card.module.scss
+++ b/src/pages/bookmark/components/Card.module.scss
@ -0,0 +1,68 @@
+.card {
+    display: flex;
+    flex-direction: column;
+
+    min-width: 282px;
+    width: 282px;
+    height: 360px;
+
+    border-radius: 12px;
+    background-color: $color-white-000;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+
+    &__imageBox {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        height: 192px;
+
+        border-radius: 12px 12px 0 0;
+        background-color: #f6f6f6;
+
+        &__image {
+            width: 100%;
+            height: 100%;
+            border-radius: 12px 12px 0 0;
+        }
+    }
+    &__infoBox {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        height: 168px;
+
+        padding: 20px;
+        gap: 4px;
+
+        &__row {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+
+            width: 100%;
+
+            gap: 12px;
+
+            .label {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+
+                width: 120px;
+            }
+            .value {
+                width: 112px;
+
+                color: $color-gray-500;
+
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                word-break: break-all;
+            }
+        }
+    }
+}
--- a/src/pages/bookmark/components/Card.tsx
+++ b/src/pages/bookmark/components/Card.tsx
@ -0,0 +1,42 @@
+import { CardDTO } from '@/pages/index/types/card'
+import styles from './Card.module.scss'
+
+interface Props {
+    prop: CardDTO
+}
+
+function Card({ prop }: Props) {
+    return (
+        <div className={styles.card}>
+            <div className={styles.card__imageBox}>
+                <img src={prop.urls.small} alt="" className={styles.card__imageBox__image} />
+            </div>
+            <div className={styles.card__infoBox}>
+                <div className={styles.card__infoBox__row}>
+                    <span className={styles.label}>작성자</span>
+                    <span className={styles.value}>{prop.user.name}</span>
+                </div>
+                <div className={styles.card__infoBox__row}>
+                    <span className={styles.label}>이미지 크기</span>
+                    <span className={styles.value}>
+                        {prop.width} X {prop.height}
+                    </span>
+                </div>
+                <div className={styles.card__infoBox__row}>
+                    <span className={styles.label}>업로드 날짜</span>
+                    <span className={styles.value}>{prop.created_at.split('T')[0]}</span>
+                </div>
+                <div className={styles.card__infoBox__row}>
+                    <span className={styles.label}>마지막 업데이트</span>
+                    <span className={styles.value}>{prop.updated_at.split('T')[0]}</span>
+                </div>
+                <div className={styles.card__infoBox__row}>
+                    <span className={styles.label}>다운로드 수</span>
+                    <span className={styles.value}>{prop.likes}</span>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Card
--- a/src/pages/bookmark/index.tsx
+++ 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 (
+        <div className={styles.page}>
+            {/* 공통 헤터 UI 부분 */}
+            <CommonHeader />
+            <main className={styles.page__contents}>
+                {data.map((item: CardDTO) => {
+                    return <Card prop={item} key={item.id} />
+                })}
+            </main>
+        </div>
+    )
+}
+
+export default index
--- a/src/pages/bookmark/styles/index.module.scss
+++ 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;
+    }
+}
--- 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,11 +7,11 @@ 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 (
--- a/src/pages/index/components/Loading.module.scss
+++ 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);
+    }
+}
--- a/src/pages/index/components/Loading.tsx
+++ b/src/pages/index/components/Loading.tsx
@ -0,0 +1,7 @@
+import styles from './Loading.module.scss'
+
+function Loading() {
+    return <span className={styles.loader}></span>
+}
+
+export default Loading
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@ -1,44 +1,34 @@
-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<CardDTO>()
+    const [open, setOpen] = useState<boolean>(false) // 이미지 상세 다이얼로그 발생(관리) State

-  const getData = async() => {
-    // Open API 호출
-    const API_URL = 'https://api.unsplash.com/search/photos'
-    const API_KEY = 'nloztIOd94-5EH6vAJUU3L66l79z9Dv2KwwbKHShAnY'
-    const PER_PAGE = 30
-
-    const searchValue = 'Korea'
-    const pageValue = 100
-
-    try {
-      const res = await axios.get(`${API_URL}?query=${searchValue}&client_id=${API_KEY}&page=${pageValue}&per_page=${PER_PAGE}`)
-      console.log(res)
-      if(res.status === 200) {
-        setImgUrls(res.data.results)
-      }
-    } catch (error) {
-      console.log(error)
-    }
-
-  }
-
-  const cardList = imgUrls.map((card: CardDTO) => {
-    return <Card data={card} key={card.id} />
+    const CARD_LIST = useMemo(() => {
+        // imgSelector.state = hasValue or loading
+        console.log(imgSelector)
+        if (imgSelector !== null && imgSelector.state === 'hasValue') {
+            const result = imgSelector.contents.results.map((card: CardDTO) => {
+                return <Card data={card} key={card.id} handleDialog={setOpen} handleSetData={setImgData} />
            })
-
-  useEffect(()=> {
-    getData()
-  }, [])
+            return result
+        } else {
+            return <Loading />
+        }
+    }, [imgSelector])

    return (
        <div className={styles.page}>
@ -58,12 +48,11 @@ function index() {
                        <CommonSearchBar />
                    </div>
                </div>
-        <div className={styles.page__contents__imageBox}>
-          {cardList}
-        </div>
+                <div className={styles.page__contents__imageBox}>{CARD_LIST}</div>
            </div>
            {/* 공통 푸터 UI 부분 */}
            <CommonFooter />
+            {open && <DetailDialog data={imgData} handleDialog={setOpen} />}
        </div>
    )
 }
--- 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;
--- a/src/recoil/atoms/pageState.ts
+++ b/src/recoil/atoms/pageState.ts
@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const pageState = atom<number>({
+    key: 'pageState',
+    default: 1,
+})
--- a/src/recoil/atoms/searchState.ts
+++ b/src/recoil/atoms/searchState.ts
@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const searchState = atom<string>({
+    key: 'searchState',
+    default: 'Korea',
+})
--- a/src/recoil/selectors/imageSelector.ts
+++ 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)
+        }
+    },
+})
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,3 +1,38 @@
 {
-  "extends": "./tsconfig.app.json"
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"],
+            "@assets/*": ["src/assets/*"],
+            "@components/*": ["src/components/*"],
+            "@pages/*": ["src/pages/*"],
+            "@types/*": ["src/types/*"],
+            "@recoil/*": ["src/recoil/*"],
+            "@apis/*": ["src/apis/*"]
+        },
+        "noImplicitAny": false,
+        "strictNullChecks": false
+    },
+    "include": ["src"],
+    "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -1,26 +1,11 @@
 {
  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
+    "composite": true,
    "skipLibCheck": true,
-
-    /* Bundler mode */
+    "module": "ESNext",
    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "allowSyntheticDefaultImports": true,
+    "strict": true
  },
  "include": ["vite.config.ts"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -2,18 +2,16 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { fileURLToPath, URL } from 'url'

-// https://vite.dev/config/
+// https://vitejs.dev/config/
 export default defineConfig({
    server: {
-    host: true,
+    host: true, // 0.0.0.0 바인딩 (프록시/외부 접근 허용)
    port: 5173,
    allowedHosts: [
-      'react.sokuree.com',
-    ]
+      'react.sokuree.com', // 역방향 프록시로 들어오는 Host 명시 허용
+    ],
  },
    plugins: [react()],
-
-  // Vite Path Aliases: import 경로를 src 기준의 절대경로(alias)로 설정
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
@ -25,8 +23,7 @@ export default defineConfig({
            '@apis': fileURLToPath(new URL('./src/apis', import.meta.url)),
        },
    },
-
-  // SCSS 전역 설정
+    // SCSS 전역 사용
    css: {
    preprocessorOptions: {
      scss: {