+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/week10/simba/mission0_2/src/assets/hero.png b/week10/simba/mission0_2/src/assets/hero.png
new file mode 100644
index 0000000..02251f4
Binary files /dev/null and b/week10/simba/mission0_2/src/assets/hero.png differ
diff --git a/week10/simba/mission0_2/src/assets/typescript.svg b/week10/simba/mission0_2/src/assets/typescript.svg
new file mode 100644
index 0000000..6c9d69c
--- /dev/null
+++ b/week10/simba/mission0_2/src/assets/typescript.svg
@@ -0,0 +1 @@
+
diff --git a/week10/simba/mission0_2/src/assets/vite.svg b/week10/simba/mission0_2/src/assets/vite.svg
new file mode 100644
index 0000000..5101b67
--- /dev/null
+++ b/week10/simba/mission0_2/src/assets/vite.svg
@@ -0,0 +1 @@
+
diff --git a/week10/simba/mission0_2/src/components/CountButton.tsx b/week10/simba/mission0_2/src/components/CountButton.tsx
new file mode 100644
index 0000000..84939dd
--- /dev/null
+++ b/week10/simba/mission0_2/src/components/CountButton.tsx
@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+interface Props {
+ onClick: () => void;
+}
+
+const CountButton = memo(({ onClick }: Props) => {
+ console.log('CountButton 렌더링됨');
+ return ;
+});
+
+export default CountButton;
\ No newline at end of file
diff --git a/week10/simba/mission0_2/src/components/TextInput.tsx b/week10/simba/mission0_2/src/components/TextInput.tsx
new file mode 100644
index 0000000..1e6f1c0
--- /dev/null
+++ b/week10/simba/mission0_2/src/components/TextInput.tsx
@@ -0,0 +1,18 @@
+import { memo } from 'react';
+
+interface Props {
+ value: string;
+ onChange: (value: string) => void;
+}
+
+const TextInput = memo(({ value, onChange }: Props) => {
+ console.log('TextInput 렌더링됨');
+ return (
+ onChange(e.target.value)}
+ />
+ );
+});
+
+export default TextInput;
\ No newline at end of file
diff --git a/week10/simba/mission0_2/src/counter.ts b/week10/simba/mission0_2/src/counter.ts
new file mode 100644
index 0000000..9f629e8
--- /dev/null
+++ b/week10/simba/mission0_2/src/counter.ts
@@ -0,0 +1,9 @@
+export function setupCounter(element: HTMLButtonElement) {
+ let counter = 0
+ const setCounter = (count: number) => {
+ counter = count
+ element.innerHTML = `Count is ${counter}`
+ }
+ element.addEventListener('click', () => setCounter(counter + 1))
+ setCounter(0)
+}
diff --git a/week10/simba/mission0_2/src/main.tsx b/week10/simba/mission0_2/src/main.tsx
new file mode 100644
index 0000000..771c0e9
--- /dev/null
+++ b/week10/simba/mission0_2/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+ 같이 배우는 리액트: useMemo편
++ 숫자 입력 (소수 찾기): + setInput(e.target.value)} + /> +
+소수 리스트:
+{primes.join(' ')}
++ +## 🌱 Pull Requests Rule + +**Title**: :이모지: [WeekN_닉네임_미션번호] + (ex. ✨ Week01_nickname_01) + +**Reviewers(PR을 리뷰해 줄 팀원)**: 파트장으로 설정 + +**Assignees(PR 담당자)**: 본인 + +**Labels**: 해당하는 기능 label 설정 + +
+ +## 📚 git 컨벤션 +### 브랜치 명명 규칙 +- 브랜치 명: `weekN_닉네임` (ex. week01_nickname) + - 만약 한 주차에 미션이 여러 개면 닉네임 뒤에 `_미션 번호` 를 붙입니다. (ex. week01_nickname_01) + - 다음 주차로 이어지는 미션이라면 **저번주 브랜치에서 새 브랜치 생성** + +### 커밋 메세지 규칙 +**Gitmoji 사용** + +| **타입** | **설명** | **이모지** | +| --- | --- | --- | +| feat | 새로운 기능 추가 | ✨ | +| fix | 버그 수정 | 🐛 | +| docs | 문서 수정 (README, 주석 등) | 📝 | +| style | 코드 스타일 변경 (포맷, 세미콜론 등) | 🎨 | +| refactor | 리팩토링 (기능 변화 없음) | ♻️ | +| test | 테스트 코드 추가 / 수정 | ✅ | +| chore | 빌드 설정, 패키지 관리 등 기타 작업 | 🧽 | +| perf | 성능 개선 | ⚡ | +| ci | CI/CD 설정 변경 | 👷🏻 | +| build | 빌드 관련 파일 수정 (예: Gradle) | 🌱 | +| revert | 이전 커밋 되돌리기 | ⏪ | + +### 커밋 메세지 형식 +**type(scope): subject** + +- `type` : 커밋의 종류 +- `scope (optional)` : 영향 받는 모듈 or 기능 +- `subject` : 커밋의 간단한 설명 + +feat(user): 회원 프로필 조회 API 추가
+fix(jwt): 토큰 만료 시간 오류 수정
+docs: 사용자 API 명세 추가
+refactor(user): 로직 분리 및 유틸 메서드 추출
+style: 코드 정렬 및 불필요한 공백 제거
+test(user): 회원가입 테스트 케이스 추가
+ +
+ +## 1. 자신의 브랜치에 프로젝트 업로드하기 + +## 2. Main 브랜치로 PR(Pull Request) 날리기 + +## 3. 스터디원 코드 리뷰해주기 diff --git a/week10/simba/mission1/index.html b/week10/simba/mission1/index.html new file mode 100644 index 0000000..4aa4dcc --- /dev/null +++ b/week10/simba/mission1/index.html @@ -0,0 +1,13 @@ + + + + + + +
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/week10/simba/mission1/src/assets/hero.png b/week10/simba/mission1/src/assets/hero.png
new file mode 100644
index 0000000..02251f4
Binary files /dev/null and b/week10/simba/mission1/src/assets/hero.png differ
diff --git a/week10/simba/mission1/src/assets/typescript.svg b/week10/simba/mission1/src/assets/typescript.svg
new file mode 100644
index 0000000..6c9d69c
--- /dev/null
+++ b/week10/simba/mission1/src/assets/typescript.svg
@@ -0,0 +1 @@
+
diff --git a/week10/simba/mission1/src/assets/vite.svg b/week10/simba/mission1/src/assets/vite.svg
new file mode 100644
index 0000000..5101b67
--- /dev/null
+++ b/week10/simba/mission1/src/assets/vite.svg
@@ -0,0 +1 @@
+
diff --git a/week10/simba/mission1/src/components/MovieList.tsx b/week10/simba/mission1/src/components/MovieList.tsx
new file mode 100644
index 0000000..8851ff1
--- /dev/null
+++ b/week10/simba/mission1/src/components/MovieList.tsx
@@ -0,0 +1,76 @@
+import { memo } from 'react';
+import type { Movie } from '../types/movie';
+
+interface Props {
+ movies: Movie[];
+ onMovieClick: (movie: Movie) => void;
+}
+
+const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/w300';
+
+const MovieList = memo(({ movies, onMovieClick }: Props) => {
+ console.log('MovieList 렌더링됨');
+
+ if (movies.length === 0) return null;
+
+ return (
+ 영화 검색
+검색 중...
} +
+ {movies.map(movie => (
+
+ );
+});
+
+export default MovieList;
\ No newline at end of file
diff --git a/week10/simba/mission1/src/components/MovieModal.tsx b/week10/simba/mission1/src/components/MovieModal.tsx
new file mode 100644
index 0000000..ea0ba4d
--- /dev/null
+++ b/week10/simba/mission1/src/components/MovieModal.tsx
@@ -0,0 +1,63 @@
+import { memo } from 'react';
+import type { Movie } from '../types/movie';
+
+interface Props {
+ movie: Movie;
+ onClose: () => void;
+}
+
+const POSTER_URL = 'https://image.tmdb.org/t/p/w300';
+const BACKDROP_URL = 'https://image.tmdb.org/t/p/w780';
+
+const MovieModal = memo(({ movie, onClose }: Props) => {
+ const imdbUrl = `https://www.imdb.com/find?q=${encodeURIComponent(movie.title)}`;
+
+ return (
+ onMovieClick(movie)}
+ style={{
+ borderRadius: '8px',
+ overflow: 'hidden',
+ background: '#1a1a2e',
+ color: 'white',
+ cursor: 'pointer',
+ transition: 'transform 0.2s',
+ }}
+ onMouseEnter={e => (e.currentTarget.style.transform = 'scale(1.03)')}
+ onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
+ >
+ {movie.poster_path ? (
+ 
+ ) : (
+
+ ))}
+
+ No Image
+
+ )}
+
+
+ + {movie.title} +
++ {movie.release_date} +
++ {movie.overview} +
+
+
+ );
+});
+
+export default MovieModal;
\ No newline at end of file
diff --git a/week10/simba/mission1/src/components/SearchBar.tsx b/week10/simba/mission1/src/components/SearchBar.tsx
new file mode 100644
index 0000000..07e821c
--- /dev/null
+++ b/week10/simba/mission1/src/components/SearchBar.tsx
@@ -0,0 +1,98 @@
+import { memo, useState } from 'react';
+
+// 이제 부모(App)에게서는 초기값들과, 최종 '검색' 버튼을 눌렀을 때
+// 모든 상태를 한 번에 넘겨줄 온전한 onSubmit 핸들러만 받으면 됩니다.
+interface SearchBarProps {
+ initialValue: string;
+ initialIncludeAdult: boolean;
+ initialLanguage: string;
+ onSearch: (searchParams: { query: string; includeAdult: boolean; language: string }) => void;
+}
+
+const SearchBar = memo(({ initialValue, initialIncludeAdult, initialLanguage, onSearch }: SearchBarProps) => {
+ console.log('SearchBar 렌더링됨 (이제 검색 버튼을 누를 때만 부모가 반응합니다!)');
+
+ // 1. SearchBar 내부에서만 사용할 로컬 상태(Local State)들 생성
+ const [inputValue, setInputValue] = useState(initialValue);
+ const [localIncludeAdult, setLocalIncludeAdult] = useState(initialIncludeAdult);
+ const [localLanguage, setLocalLanguage] = useState(initialLanguage);
+
+ // 2. 폼이 제출될 때 로컬 상태들을 한 번에 부모에게 전달
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ onSearch({
+ query: inputValue,
+ includeAdult: localIncludeAdult,
+ language: localLanguage,
+ });
+ };
+
+ return (
+
+ );
+});
+
+export default SearchBar;
\ No newline at end of file
diff --git a/week10/simba/mission1/src/counter.ts b/week10/simba/mission1/src/counter.ts
new file mode 100644
index 0000000..9f629e8
--- /dev/null
+++ b/week10/simba/mission1/src/counter.ts
@@ -0,0 +1,9 @@
+export function setupCounter(element: HTMLButtonElement) {
+ let counter = 0
+ const setCounter = (count: number) => {
+ counter = count
+ element.innerHTML = `Count is ${counter}`
+ }
+ element.addEventListener('click', () => setCounter(counter + 1))
+ setCounter(0)
+}
diff --git a/week10/simba/mission1/src/main.tsx b/week10/simba/mission1/src/main.tsx
new file mode 100644
index 0000000..771c0e9
--- /dev/null
+++ b/week10/simba/mission1/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+ e.stopPropagation()} style={{ background: 'white', borderRadius: '16px', width: '100%', maxWidth: '640px', maxHeight: '90vh', overflowY: 'auto' }}>
+
+
+ {movie.backdrop_path
+ ? 
+ :
+ }
+
+
+
+
+ {movie.title}
+ {movie.original_title !== movie.title &&{movie.original_title}
} +
+
+
+ {movie.poster_path && 
}
+
+
+
+
+ {movie.vote_average.toFixed(1)}
+ ({movie.vote_count.toLocaleString()} 평가)
+
+
+
+ 개봉일
+{new Date(movie.release_date).toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' })}
+
+
+ 인기도
+
+
+
+
+
+ 줄거리
+{movie.overview || '줄거리 정보가 없습니다.'}
+
+ IMDb에서 검색
+
+
+