해야할 일
+-
+ {todos.map((todo) => (
+
- + {todo.text} + + + ))} +
+
+
+
+ );
+}
diff --git a/week3and4/Moviepage/src/components/LoadingSpinner.tsx b/week3and4/Moviepage/src/components/LoadingSpinner.tsx
new file mode 100644
index 0000000..f19d69c
--- /dev/null
+++ b/week3and4/Moviepage/src/components/LoadingSpinner.tsx
@@ -0,0 +1,7 @@
+export default function LoadingSpinner() {
+ return (
+
+
+
+ );
+}
diff --git a/week3and4/Moviepage/src/components/MovieCard.tsx b/week3and4/Moviepage/src/components/MovieCard.tsx
new file mode 100644
index 0000000..fcff7fa
--- /dev/null
+++ b/week3and4/Moviepage/src/components/MovieCard.tsx
@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+import type { Movie } from '../movie-type';
+
+interface MovieCardProps {
+ movie: Movie;
+}
+
+export default function MovieCard({ movie }: MovieCardProps) {
+ return (
+
+
+ 
+
+
+ );
+}
\ No newline at end of file
diff --git a/week3and4/Moviepage/src/components/Navbar.tsx b/week3and4/Moviepage/src/components/Navbar.tsx
new file mode 100644
index 0000000..19abdec
--- /dev/null
+++ b/week3and4/Moviepage/src/components/Navbar.tsx
@@ -0,0 +1,56 @@
+import { NavLink } from 'react-router-dom';
+
+export default function Navbar() {
+ // NavLink에 적용할 공통 스타일과 상태별 스타일을 미리 정의하면 더 깔끔합니다.
+
+ function Navigation() {
+ // 활성화됐을 때와 비활성화됐을 때의 스타일을 함수로 처리
+ const getNavLinkClass = ({ isActive }: { isActive: boolean }) => {
+ // 공통 스타일: 패딩, 둥근 모서리, 글자 크기 등
+ const commonClasses = 'px-3 py-2 rounded-md text-sm font-medium';
+
+ // 활성화 상태일 때 추가할 스타일
+ const activeClasses = 'bg-gray-900 text-white';
+
+ // 비활성화 상태일 때 추가할 스타일 (+마우스 호버 효과)
+ const inactiveClasses = 'text-gray-300 hover:bg-gray-700 hover:text-white';
+
+ // isActive 값에 따라 클래스를 조합하여 반환
+ return `${commonClasses} ${isActive ? activeClasses : inactiveClasses}`;
+ };
+
+ return (
+
+ );
+ }
+ return
+
+
+ {movie.title}
+
+
+ {movie.overview}
+
+
+ );
+}
\ No newline at end of file
diff --git a/week3and4/Moviepage/src/pages/MovieDetailPage.tsx b/week3and4/Moviepage/src/pages/MovieDetailPage.tsx
new file mode 100644
index 0000000..91c0371
--- /dev/null
+++ b/week3and4/Moviepage/src/pages/MovieDetailPage.tsx
@@ -0,0 +1,94 @@
+import { useParams } from 'react-router-dom';
+import type { MovieDetail, Credits } from '../movie-type';
+import LoadingSpinner from '../components/LoadingSpinner';
+import { useCustomFetch } from '../hooks/useCustomFetch';
+
+export default function MovieDetailPage() {
+ const { movieId } = useParams<{ movieId: string }>();
+
+ const { data: movie, isLoading: isMovieLoading, error: movieError } = useCustomFetch환영합니다!
+네비게이션 바를 통해 다양한 영화 정보를 확인해보세요.
+
+
+ );
+ }
+
+ if (error) {
+ return (
+ 데이터를 불러오는 중입니다...
+
+
+ );
+ }
+
+ if (!movie || !credits) {
+ return null;
+ }
+
+ const releaseYear = movie.release_date ? new Date(movie.release_date).getFullYear() : 'N/A';
+
+ return (
+ 정보를 불러오는데 실패했습니다.
+
+
+ );
+}
diff --git a/week3and4/Moviepage/src/pages/NowPlayingPage.tsx b/week3and4/Moviepage/src/pages/NowPlayingPage.tsx
new file mode 100644
index 0000000..763fcf5
--- /dev/null
+++ b/week3and4/Moviepage/src/pages/NowPlayingPage.tsx
@@ -0,0 +1,57 @@
+import { useMovies } from '../hooks/useMovies';
+import MovieCard from '../components/MovieCard';
+import LoadingSpinner from '../components/LoadingSpinner';
+
+export default function NowPlayingPage() {
+ const { movies, isLoading, error, page, totalPages, setPage } = useMovies('/movie/now_playing');
+
+ const handlePrevPage = () => {
+ if (page > 1) {
+ setPage(page - 1);
+ }
+ };
+
+ const handleNextPage = () => {
+ if (page < totalPages) {
+ setPage(page + 1);
+ }
+ };
+
+ if (isLoading) {
+ return
+
+
+ {/* Left Column: Movie Details */}
+
+
+ {/* Cast Section */}
+
+
+
+ {/* Right Column: Backdrop Image */}
+ {movie.title}
+
+ 평균 평점⭐ {movie.vote_average.toFixed(1)}
+ {releaseYear}
+ {movie.runtime}분 +
+ {movie.tagline && + {releaseYear}
+ {movie.runtime}분 +
{movie.tagline}
} +{movie.overview}
+
+ 
+
+
+
+ 감독/출연
+
+ {credits.cast.slice(0, 14).map((member) => (
+
+
+ 
+
+ ))}
+ {member.name}
+{member.character} (voice)
+에러: {error}
;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/week3and4/Moviepage/src/pages/PopularPage.tsx b/week3and4/Moviepage/src/pages/PopularPage.tsx
new file mode 100644
index 0000000..c707c8c
--- /dev/null
+++ b/week3and4/Moviepage/src/pages/PopularPage.tsx
@@ -0,0 +1,57 @@
+import { useMovies } from '../hooks/useMovies';
+import MovieCard from '../components/MovieCard';
+import LoadingSpinner from '../components/LoadingSpinner';
+
+export default function PopularPage() {
+ const { movies, isLoading, error, page, totalPages, setPage } = useMovies('/movie/popular');
+
+ const handlePrevPage = () => {
+ if (page > 1) {
+ setPage(page - 1);
+ }
+ };
+
+ const handleNextPage = () => {
+ if (page < totalPages) {
+ setPage(page + 1);
+ }
+ };
+
+ if (isLoading) {
+ return 상영 중인 영화
+
+ {movies.map((movie) => (
+
+
+
+
+ {page} / {totalPages}
+
+
+
+ 에러: {error}
;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/week3and4/Moviepage/src/pages/TopRatedPage.tsx b/week3and4/Moviepage/src/pages/TopRatedPage.tsx
new file mode 100644
index 0000000..b8d022f
--- /dev/null
+++ b/week3and4/Moviepage/src/pages/TopRatedPage.tsx
@@ -0,0 +1,57 @@
+import { useMovies } from '../hooks/useMovies';
+import MovieCard from '../components/MovieCard';
+import LoadingSpinner from '../components/LoadingSpinner';
+
+export default function TopRatedPage() {
+ const { movies, isLoading, error, page, totalPages, setPage } = useMovies('/movie/top_rated');
+
+ const handlePrevPage = () => {
+ if (page > 1) {
+ setPage(page - 1);
+ }
+ };
+
+ const handleNextPage = () => {
+ if (page < totalPages) {
+ setPage(page + 1);
+ }
+ };
+
+ if (isLoading) {
+ return 인기 영화
+
+ {movies.map((movie) => (
+
+
+
+
+ {page} / {totalPages}
+
+
+
+ 에러: {error}
;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/week3and4/Moviepage/src/pages/UpcomingPage.tsx b/week3and4/Moviepage/src/pages/UpcomingPage.tsx
new file mode 100644
index 0000000..f7cfa5c
--- /dev/null
+++ b/week3and4/Moviepage/src/pages/UpcomingPage.tsx
@@ -0,0 +1,57 @@
+import { useMovies } from '../hooks/useMovies';
+import MovieCard from '../components/MovieCard';
+import LoadingSpinner from '../components/LoadingSpinner';
+
+export default function UpcomingPage() {
+ const { movies, isLoading, error, page, totalPages, setPage } = useMovies('/movie/upcoming');
+
+ const handlePrevPage = () => {
+ if (page > 1) {
+ setPage(page - 1);
+ }
+ };
+
+ const handleNextPage = () => {
+ if (page < totalPages) {
+ setPage(page + 1);
+ }
+ };
+
+ if (isLoading) {
+ return 평점 높은 영화
+
+ {movies.map((movie) => (
+
+
+
+
+ {page} / {totalPages}
+
+
+
+ 에러: {error}
;
+ }
+
+ return (
+
+
+ );
+}
diff --git a/week3and4/Moviepage/src/vite-env.d.ts b/week3and4/Moviepage/src/vite-env.d.ts
new file mode 100644
index 0000000..f97083a
--- /dev/null
+++ b/week3and4/Moviepage/src/vite-env.d.ts
@@ -0,0 +1,10 @@
+/// 개봉 예정 영화
+
+ {movies.map((movie) => (
+
+
+
+
+ {page} / {totalPages}
+
+
+
+
+
+ );
+}
+
+function App() {
+ const [path, setPath] = useState(window.location.pathname);
+
+ const navigate = (newPath: string) => {
+ window.history.pushState({}, '', newPath); // 히스토리에 새 경로 추가
+ setPath(newPath);
+ };
+
+ useEffect(() => {
+ const onPopState = () => setPath(window.location.pathname);
+ window.addEventListener('popstate', onPopState); // 뒤로가기, 앞으로가기 처리
+ return () => window.removeEventListener('popstate', onPopState); // cleanup
+ }, []);
+
+ const handleLinkClick = (e: React.MouseEvent인기 영화
+-
+ {movies.map((movie: any) => (
+
-
+
+
{movie.title}
+{movie.overview}
+
+ ))}
+
+
+ );
+ } else if (path === '/movies') {
+ content = 홈페이지
+안녕하세요. React Router 없이 만든 웹입니다.
+
+
+ );
+ }
+
+ return (
+ 404 - 페이지를 찾을 수 없습니다
+요청하신 페이지가 존재하지 않습니다.
+
+
+
+
+ {content}
+
+ );
+}
+
+export default App;
diff --git a/week3and4/NoReactRouter/src/assets/react.svg b/week3and4/NoReactRouter/src/assets/react.svg
new file mode 100644
index 0000000..6c87de9
--- /dev/null
+++ b/week3and4/NoReactRouter/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/week3and4/NoReactRouter/src/index.css b/week3and4/NoReactRouter/src/index.css
new file mode 100644
index 0000000..08a3ac9
--- /dev/null
+++ b/week3and4/NoReactRouter/src/index.css
@@ -0,0 +1,68 @@
+:root {
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/week3and4/NoReactRouter/src/main.tsx b/week3and4/NoReactRouter/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/week3and4/NoReactRouter/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+ {children}
+ {error &&
+ );
+};
+
+export default FormField;
diff --git a/week4/LPsite/src/components/NavigationBar.tsx b/week4/LPsite/src/components/NavigationBar.tsx
new file mode 100644
index 0000000..443e9b8
--- /dev/null
+++ b/week4/LPsite/src/components/NavigationBar.tsx
@@ -0,0 +1,19 @@
+import { Link } from 'react-router-dom';
+
+const NavigationBar = () => {
+ return (
+
+ );
+};
+
+export default NavigationBar;
\ No newline at end of file
diff --git a/week4/LPsite/src/hooks/useForm.ts b/week4/LPsite/src/hooks/useForm.ts
new file mode 100644
index 0000000..f613082
--- /dev/null
+++ b/week4/LPsite/src/hooks/useForm.ts
@@ -0,0 +1,41 @@
+/*
+import { useState, ChangeEvent } from 'react';
+
+interface FormValues {
+ [key: string]: string;
+}
+
+interface FormErrors {
+ [key: string]: string;
+}
+
+interface UseFormProps {
+ initialValues: FormValues;
+ validate: (values: FormValues) => FormErrors;
+}
+
+const useForm = ({ initialValues, validate }: UseFormProps) => {
+ const [values, setValues] = useState{error.message}
} +안녕하세요~ LP 사이트입니다!
+
+
+
+
+
+
+ 로그인
+
+
+
+
+
+
+
+
+ 또는
+
+
+
+
+ {children}
+ {error &&
+ );
+};
+
+export default FormField;
diff --git a/week5/LPsite/src/components/NavigationBar.tsx b/week5/LPsite/src/components/NavigationBar.tsx
new file mode 100644
index 0000000..909bbfb
--- /dev/null
+++ b/week5/LPsite/src/components/NavigationBar.tsx
@@ -0,0 +1,42 @@
+import { useContext } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { AuthContext } from '../context/AuthContext';
+
+const NavigationBar = () => {
+ const auth = useContext(AuthContext);
+ const navigate = useNavigate();
+
+ const handleMyPageClick = () => {
+ if (auth?.isLoggedIn) {
+ navigate("/mypage");
+ } else {
+ alert("로그인 후 접근 가능합니다.");
+ navigate("/signin");
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default NavigationBar;
\ No newline at end of file
diff --git a/week5/LPsite/src/components/ProtectedRoute.tsx b/week5/LPsite/src/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..1c8b80b
--- /dev/null
+++ b/week5/LPsite/src/components/ProtectedRoute.tsx
@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { Navigate, Outlet } from "react-router-dom";
+import { AuthContext } from '../context/AuthContext';
+
+const ProtectedRoute = () => {
+ const auth = useContext(AuthContext);
+
+ if (!auth?.isLoggedIn) {
+ alert("로그인 후 접근 가능합니다.");
+ return {error.message}
} +로그인 처리 중입니다...
+안녕하세요~ LP 사이트입니다!
+My Page
;
+};
+
+export default MyPage;
diff --git a/week5/LPsite/src/pages/SignUp.tsx b/week5/LPsite/src/pages/SignUp.tsx
new file mode 100644
index 0000000..f8907a4
--- /dev/null
+++ b/week5/LPsite/src/pages/SignUp.tsx
@@ -0,0 +1,144 @@
+
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm, type SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { SignUpSchema, type TSignUpSchema } from '../lib/types';
+import { signUp } from '../api/auth';
+import { type SignUpPayload } from '../lib/types';
+import FormField from '../components/FormField';
+
+const EyeOpenIcon = () => (
+
+);
+
+const EyeClosedIcon = () => (
+
+);
+
+const SignUp = () => {
+ const [step, setStep] = useState(1);
+ const [showPassword, setShowPassword] = useState(false);
+ const navigate = useNavigate();
+
+ const {
+ register,
+ handleSubmit,
+ trigger,
+ getValues,
+ formState: { errors, isValid },
+ } = useForm
+
+
+
+
+ Google 계정으로 로그인
+
+
+ 로그인
+
+
+
+
+
+
+
+
+ 또는
+
+
+
+
+ {children}
+ {error &&
+ );
+};
+
+export default FormField;
diff --git a/week6/LPsite/src/components/NavigationBar.tsx b/week6/LPsite/src/components/NavigationBar.tsx
new file mode 100644
index 0000000..909bbfb
--- /dev/null
+++ b/week6/LPsite/src/components/NavigationBar.tsx
@@ -0,0 +1,42 @@
+import { useContext } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { AuthContext } from '../context/AuthContext';
+
+const NavigationBar = () => {
+ const auth = useContext(AuthContext);
+ const navigate = useNavigate();
+
+ const handleMyPageClick = () => {
+ if (auth?.isLoggedIn) {
+ navigate("/mypage");
+ } else {
+ alert("로그인 후 접근 가능합니다.");
+ navigate("/signin");
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default NavigationBar;
\ No newline at end of file
diff --git a/week6/LPsite/src/components/ProtectedRoute.tsx b/week6/LPsite/src/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..1c8b80b
--- /dev/null
+++ b/week6/LPsite/src/components/ProtectedRoute.tsx
@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { Navigate, Outlet } from "react-router-dom";
+import { AuthContext } from '../context/AuthContext';
+
+const ProtectedRoute = () => {
+ const auth = useContext(AuthContext);
+
+ if (!auth?.isLoggedIn) {
+ alert("로그인 후 접근 가능합니다.");
+ return {error.message}
} +로그인 처리 중입니다...
+로딩 중...
; + } + + if (error) { + return{error}
; + } + + return ( + // 2. 전체 레이아웃을 스크린샷과 유사하게 수정 + // (참고: 헤더, 사이드바는 별도 컴포넌트이므로 여기서는 메인 콘텐츠 영역만 구현) +
+
+
+ {/* 상세 뷰에도 썸네일 이미지를 크게 표시할 수 있습니다. */}
+ 
+
+ ) : (
+
+ // --- 목록 뷰 (스크린샷처럼 변경된 부분) ---
+
+ // 3. 'LP 목록' h1 태그 제거 (스크린샷에 없음)
+
+ // 4. ul을 그리드로 변경 (스크린샷은 5열이므로 lg:grid-cols-5 적용)
+ {lpDetail.title}
+{lpDetail.author?.name}
+{lpDetail.content}
+-
+ {lps.map((lp) => (
+
- setSelectedLpId(lp.id)}
+ // 5. li 스타일 변경: 카드 스타일 제거, 호버 그룹 설정
+ className="overflow-hidden rounded-md cursor-pointer group"
+ >
+ {/* 6. 텍스트(title, content) 제거,
만 남김 */} +
+
+ ))}
+
My Page
;
+};
+
+export default MyPage;
diff --git a/week6/LPsite/src/pages/SignUp.tsx b/week6/LPsite/src/pages/SignUp.tsx
new file mode 100644
index 0000000..f8907a4
--- /dev/null
+++ b/week6/LPsite/src/pages/SignUp.tsx
@@ -0,0 +1,144 @@
+
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm, type SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { SignUpSchema, type TSignUpSchema } from '../lib/types';
+import { signUp } from '../api/auth';
+import { type SignUpPayload } from '../lib/types';
+import FormField from '../components/FormField';
+
+const EyeOpenIcon = () => (
+
+);
+
+const EyeClosedIcon = () => (
+
+);
+
+const SignUp = () => {
+ const [step, setStep] = useState(1);
+ const [showPassword, setShowPassword] = useState(false);
+ const navigate = useNavigate();
+
+ const {
+ register,
+ handleSubmit,
+ trigger,
+ getValues,
+ formState: { errors, isValid },
+ } = useForm
+
+
+
+
+ Google 계정으로 로그인
+
+
+ 로그인
+
+
+
+
+
+
+
+
+ 또는
+
+ useQuery 핵심 기능 실습
+
+
+ {/* React Query Devtools: 캐시 상태, 데이터, 쿼리 상태를 시각적으로 보여주는 개발 도구입니다. */}
+
+ {/* [로딩 상태 UI] */}
+ {/* isLoading: 캐시된 데이터 없이 첫 로딩 중일 때만 true가 됩니다. */}
+ {isLoading &&
+
+ 데이터를 불러오는 중입니다... (초기 로딩)
} + + {/* [백그라운드 패칭 UI] */} + {/* isFetching: isLoading과 달리, 백그라운드에서 데이터를 가져올 때도 true가 됩니다. */} + {/* staleTime이 지난 후 포커싱, 재연결 등으로 데이터를 다시 가져올 때 이 상태를 볼 수 있습니다. */} + {isFetching && !isLoading &&새로운 데이터를 가져오는 중... (백그라운드 업데이트)
} + + {/* [에러 상태 UI] */} + {/* isError: 쿼리가 최종적으로 실패 상태가 되었을 때 true가 됩니다. */} + {isError &&오류 발생: {error.message}
} + + {/* [성공 상태 UI] */} + {/* data: 쿼리가 성공하면 여기에 데이터가 담깁니다. */} + {data && ( +
+
+ )}
+ ✅ 성공적으로 가져온 데이터:
+{data.message}
+
+ {/* [수동 리패치] */}
+ {/* refetch 함수를 호출하여 사용자가 원할 때 데이터를 다시 가져올 수 있습니다. */}
+
+
+ {/* [캐시 무효화] */}
+ {/* invalidateQueries: 특정 쿼리 키의 캐시를 'stale' 상태로 만듭니다. */}
+ {/* 이렇게 하면 해당 쿼리가 다시 필요해질 때 (예: 화면에 다시 보일 때) 무조건 데이터를 새로 가져옵니다. */}
+
+
+
+
+
+ {children}
+ {error &&
+ );
+};
+
+export default FormField;
diff --git a/week7/LPsite/src/components/LPPostModal.tsx b/week7/LPsite/src/components/LPPostModal.tsx
new file mode 100644
index 0000000..94c7220
--- /dev/null
+++ b/week7/LPsite/src/components/LPPostModal.tsx
@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { createLp, type LpCreationData } from '../api/lps';
+
+interface LPPostModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+const LPPostModal: React.FC{error.message}
} +
+
e.stopPropagation()}
+ >
+
+
새 LP 게시글 작성
+ +
+
+ setTitle(e.target.value)}
+ className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+ placeholder="LP 제목"
+ />
+
+
+
+
+