Skip to content

[3주차] Tailwind CSS, React Router, API 통신#3

Open
E-hyeon wants to merge 2 commits intomainfrom
3week
Open

[3주차] Tailwind CSS, React Router, API 통신#3
E-hyeon wants to merge 2 commits intomainfrom
3week

Conversation

@E-hyeon
Copy link
Copy Markdown
Owner

@E-hyeon E-hyeon commented May 7, 2025

🏁 요약


✨ 주요 내용

  1. RouterProvider
  2. createBrowserRouter
  3. React Router 지정하지 않은 경로 접근처리

    이후에 처리해볼것
    - 유저가 이상한 경로에 접근 시 홈으로 이동시킬 수 있는 버튼제작
    - 각 페이지 별 다른 에러 처리
    - ErrorBoundary처리
  4. React Router 지정하지 않은 경로 접근처리
  5. React Router의 Outlet사용법 Link 태그를 활용한 페이지 이동
    • Outlet 적용전 세팅
    • Outlet 적용방법
  6. Dynamic Routing(동적 라우팅)
  7. useParams
  8. useEffect

@E-hyeon E-hyeon requested a review from Copilot May 7, 2025 19:43
@E-hyeon E-hyeon self-assigned this May 7, 2025
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces Tailwind CSS integration, React Router configuration, and API communication on the movies page. Key changes include:

  • Migration of Vite configuration to use Tailwind CSS.
  • Addition of type definitions for movie data.
  • Creation of new pages (Home, Movies, NotFound), layout, and navbar components with dynamic routing.

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
webstudy/vite.config.ts Updated configuration to import Tailwind CSS plugin instead of React plugin.
webstudy/src/types/movie.ts New type definitions for movie and movie response data.
webstudy/src/pages/not-found.tsx New NotFound page for handling unspecified routes.
webstudy/src/pages/movies.tsx New Movies page that fetches popular movie data and renders a list.
webstudy/src/pages/home.tsx New Home page component.
webstudy/src/layout/root-layout.tsx New layout component that integrates navbar and routing outlet.
webstudy/src/index.css Updated CSS to import Tailwind CSS.
webstudy/src/component/navbar.tsx New navbar component with links to Home and Movies pages.
webstudy/src/App.tsx Configured React Router with nested routes including an error element.
webstudy/package.json Updated dependencies to include Tailwind CSS, axios, and react-router-dom.

useEffect(() => {
const fetchMovies = async () => {
const {data} = await axios.get<MovieResponse>(
`https://api.themoviedb.org/3/movie/popular?language=ko-KR&&page=1`,
Copy link

Copilot AI May 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The URL query string contains '&&' instead of a single '&', which may lead to incorrect API request behavior. Please replace '&&' with '&' to conform with standard URL parameter syntax.

Suggested change
`https://api.themoviedb.org/3/movie/popular?language=ko-KR&&page=1`,
`https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1`,

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants