From 33149c12ab77889fa39c24ac7f3a78ba2d5c0ec7 Mon Sep 17 00:00:00 2001 From: jjub0217 Date: Tue, 21 Oct 2025 10:39:23 +0900 Subject: [PATCH 1/2] =?UTF-8?q?style:=20UI=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=ED=81=AC=EA=B8=B0=20=EB=B0=8F=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - movie-top 배너 높이 축소 (32%) - swiper-pagination 위치 및 크기 조정 - favorite-btn 및 북마크 아이콘 크기 축소 - movie-tabs-content swiper-slide 크기 조정 - Tabs 컴포넌트 border 위치 개선 - 기타 UI/UX 개선사항 --- src/App.jsx | 2 +- src/App.scss | 63 +++++++++++++++++------------ src/components/CommentContent.jsx | 14 +++++-- src/components/Login.jsx | 2 +- src/components/MovieCard.jsx | 1 - src/components/MovieDetail.jsx | 10 +---- src/components/MyPage.jsx | 4 +- src/components/MyPageHome.jsx | 4 +- src/components/MyProfile.jsx | 2 +- src/components/NavBar.jsx | 6 +-- src/components/RecommendContent.jsx | 20 ++++----- src/components/Tabs.jsx | 40 +++++++++--------- src/components/TrendingPeople.jsx | 6 +-- src/hooks/useAuth.jsx | 1 - src/hooks/useFetch.jsx | 21 +++++++++- src/hooks/useSupabaseReview.jsx | 19 --------- src/index.css | 1 + src/utils/getGenreDescription.js | 1 - 18 files changed, 114 insertions(+), 103 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 63db3c4c..3c9b7256 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -37,7 +37,7 @@ function App() { `${API_URL}/movie/popular?language=ko&page=1` ); const { data: topData } = useFetch( - `${API_URL}/movie/top_rated?language=en-US&page=1` + `${API_URL}/trending/movie/day?language=en-US&page=1` ); const { data: playingList } = useFetch( `${API_URL}/movie/now_playing?language=ko&page=1` diff --git a/src/App.scss b/src/App.scss index a07b8967..358f61c8 100644 --- a/src/App.scss +++ b/src/App.scss @@ -16,7 +16,7 @@ body.dark { background-color: #1b1b1b; - color: #a5a5a5; + color: #fff; .divider { background-color: rgba(255, 255, 255, 0.2); } @@ -56,9 +56,16 @@ body.light { } } } + .movie-tab__info { + .inner { + .movie-tabs-content { + background: #dfdfdf; + } + } + } .movie-tabs-content { & > div { - background-color: #cfcfcf; + // background-color: #dfdfdf; } } .dashboard, @@ -204,18 +211,24 @@ input[type="file"] { .movie-detail, .movie-tab__info { .inner { - padding: 0 5vw; - // width: 50vw; height: auto; - // padding-left: 0; @media screen and (max-width: 768px) { width: 100%; } } } +.movie-detail { + .inner { + padding: 0 5vw; + } +} .movie-tab__info { .inner { - padding-right: 0; + padding: 0 3vw; + .movie-tabs-content { + padding: 1.25rem 2vw; + border-radius: 1.25rem; + } } } @@ -494,13 +507,13 @@ input[type="file"] { .movie-poster { position: relative; min-width: 1240px; - padding-bottom: calc((655 / 1600) * 100%) !important; + padding-bottom: 32% !important; @media screen and (max-width: 1700px) { - padding-bottom: 53% !important; + padding-bottom: 42% !important; } @media screen and (max-width: 768px) { min-width: auto; - padding-bottom: 130% !important; + padding-bottom: 100% !important; } .movie-poster { position: absolute !important; @@ -545,10 +558,10 @@ input[type="file"] { position: absolute; bottom: 20px; left: auto; - right: calc(50% - 620px); + right: calc(50% - 730px); transform: translate(-50%); background-color: rgba(0, 0, 0, 0.6); - padding: 4px 10px; + padding: 3px 10px; color: #fff; border-radius: 20px; width: auto; @@ -560,19 +573,20 @@ input[type="file"] { justify-content: center; } .swiper-pagination-current { - font-size: 0.9rem; + font-size: 0.8rem; } .swiper-pagination-total { display: flex; align-items: center; justify-content: center; color: hsla(0, 0%, 100%, 0.7); + font-size: 0.8rem; &::before { display: block; - margin: 0 10px; + margin: 0 8px; width: 1px; - height: 10px; + height: 12px; background-color: hsla(0, 0%, 100%, 0.2); content: ""; } @@ -583,22 +597,22 @@ input[type="file"] { } } .favorite-btn { - width: 3rem; - height: 3rem; + width: 2.5rem; + height: 2.5rem; top: 10px; right: 10px; @media screen and (max-width: 768px) { - width: 2.3rem; - height: 2.3rem; + width: 2rem; + height: 2rem; top: 5px; right: 5px; } .bookmark { - width: 2rem; - height: 2rem; + width: 1.3rem; + height: 1.3rem; @media screen and (max-width: 768px) { - width: 1.3rem; - height: 1.3rem; + width: 0.9rem; + height: 0.9rem; } } } @@ -820,7 +834,7 @@ input[type="file"] { bottom: 3px; width: 25px; height: 25px; - background: url("../public/images/Ico_search.png") no-repeat center / cover; + background: url("../images/Ico_search.png") no-repeat center / cover; } } @@ -972,9 +986,8 @@ input[type="file"] { } } .average-rating-count { - width: 100%; @media screen and (max-width: 768px) { - // flex-direction: column; + width: 100%; padding-top: 30px; } } diff --git a/src/components/CommentContent.jsx b/src/components/CommentContent.jsx index 77ac3011..e01d21af 100644 --- a/src/components/CommentContent.jsx +++ b/src/components/CommentContent.jsx @@ -18,7 +18,7 @@ export const CommentContent = ({ detailInfo, commentCount }) => { }; return ( -
+

리뷰 {commentCount}개

@@ -31,14 +31,20 @@ export const CommentContent = ({ detailInfo, commentCount }) => { /> {detailInfo.length ? ( - detailInfo.map((el) => { + detailInfo.map((el, i) => { const isExpanded = Array.isArray(selectIds) && selectIds.includes(el.id); + const isLast = i === detailInfo.length - 1; return (
{ const isValid = Object.values(errorType).every((val) => val === ""); if (!isValid) return; const { email, password } = loginUserInfo; - const { data, error } = await login({ email, password }); + const { error } = await login({ email, password }); // console.log("✅ 로그인 응답:", data, error); if (!error) { navigate("/"); diff --git a/src/components/MovieCard.jsx b/src/components/MovieCard.jsx index 2768f8b5..4fee4f0f 100644 --- a/src/components/MovieCard.jsx +++ b/src/components/MovieCard.jsx @@ -41,7 +41,6 @@ export const MovieCard = memo((props) => { return (
- {/* {!isLoaded &&

🖼️ 이미지 로딩 중...

} */} { const { id } = useParams(); const { data: movieDetail } = useFetch(`${API_URL}/movie/${id}?language=ko`); - // const [isLoaded, setIsLoaded] = useState(false); const [activeTab, setActiveTab] = useState("comments"); const [loadedCount, setLoadedCount] = useState(0); const { data: detailInfo } = useFetch( `${API_URL}/movie/${id}/reviews?language=en-US&page=1` ); - // console.log(movieDetail); const commentList = detailInfo?.results ?? []; const commentCount = detailInfo?.results?.length ?? 0; @@ -37,7 +35,7 @@ export const MovieDetail = () => { const isAllLoaded = loadedCount >= totalImageCount; return ( -
+
{!isAllLoaded && (
@@ -90,15 +88,12 @@ export const MovieDetail = () => {
- {/* {!isLoaded &&

🖼️ 이미지 로딩 중...

} */} {movieDetail.title} @@ -107,12 +102,11 @@ export const MovieDetail = () => {
-
+
{ const tabs = getMyTabs(); - const { getReviews, updateReview, deleteReview } = useSupabaseReview(); + const { getReviews } = useSupabaseReview(); const { user, setFavoriteList: setGlobalFavoriteList } = useSupabase(); const { fetchFavorites } = useSupabaseFavorite(); const [favoriteList, setFavoriteList] = useState([]); const [reviewData, setReviewData] = useState(null); - const [loading, setLoading] = useState(true); + const [setLoading] = useState(true); useEffect(() => { const fetch = async () => { diff --git a/src/components/MyPageHome.jsx b/src/components/MyPageHome.jsx index 6199a1cb..5811e0f2 100644 --- a/src/components/MyPageHome.jsx +++ b/src/components/MyPageHome.jsx @@ -138,8 +138,8 @@ export const MyPageHome = () => {

) : ( -
- {favoriteList.slice(0, 5).map((movie) => ( +
+ {favoriteList.slice(0, 8).map((movie) => (
{ 프로필 이미지 - ))} +
+
+ {tabs.map((tab) => ( + + ))} +
); }; diff --git a/src/components/TrendingPeople.jsx b/src/components/TrendingPeople.jsx index 190c90fd..c829c31b 100644 --- a/src/components/TrendingPeople.jsx +++ b/src/components/TrendingPeople.jsx @@ -88,13 +88,13 @@ export const TrendingPeople = ({ trendingPeopleList, onImageLoad }) => { {verticalTexts.map((text, idx) => (
- + {text.split("").map((char, cIdx) => ( {char === " " ? "\u00A0" : char} diff --git a/src/hooks/useAuth.jsx b/src/hooks/useAuth.jsx index 616ff926..7edc720e 100644 --- a/src/hooks/useAuth.jsx +++ b/src/hooks/useAuth.jsx @@ -212,7 +212,6 @@ export const useAuth = () => { } const { data, error } = await supabase.auth.getUser(); - console.log(data); if (!error && data?.user) { setUser(data.user); diff --git a/src/hooks/useFetch.jsx b/src/hooks/useFetch.jsx index b4c71193..f4e34e13 100644 --- a/src/hooks/useFetch.jsx +++ b/src/hooks/useFetch.jsx @@ -16,17 +16,33 @@ const useFetch = (initialUrl = null) => { const getData = useCallback(async (customUrl) => { setIsLoading(true); try { + await new Promise((resolve) => setTimeout(resolve, 1000)); const res = await fetch(customUrl, options); if (!res.ok) throw new Error("데이터를 가져오는 데 실패했습니다."); const json = await res.json(); - return json; // 외부에서 가공 가능해야 하기 때문에 + return json; } catch (err) { setError(err); return null; } finally { setIsLoading(false); } - }, []); + }, []); // 🔒 빈 배열로 고정 + // const getData = useCallback(async (customUrl) => { + // setIsLoading(true); + // try { + // await new Promise((resolve) => setTimeout(resolve, 1000)); + // const res = await fetch(customUrl, options); + // if (!res.ok) throw new Error("데이터를 가져오는 데 실패했습니다."); + // const json = await res.json(); + // return json; // 외부에서 가공 가능해야 하기 때문에 + // } catch (err) { + // setError(err); + // return null; + // } finally { + // setIsLoading(false); + // } + // }, []); useEffect(() => { if (!initialUrl) return; @@ -37,4 +53,5 @@ const useFetch = (initialUrl = null) => { return { isLoading, data, error, getData }; }; + export default useFetch; diff --git a/src/hooks/useSupabaseReview.jsx b/src/hooks/useSupabaseReview.jsx index 13fb859e..9e1ac801 100644 --- a/src/hooks/useSupabaseReview.jsx +++ b/src/hooks/useSupabaseReview.jsx @@ -6,25 +6,6 @@ import myReviewData from "../data/myReviewData.json"; export const useSupabaseReview = () => { const { supabase, user } = useSupabase(); - // console.log(user); - /** - * app_metadata: {provider: 'email', providers: Array(1)}, - aud: "authenticated", - confirmed_at: "2025-06-25T06:49:13.990792Z", - created_at: "2025-06-25T06:49:13.981383Z", - email: "noonssub1004@naver.com", - email_confirmed_at: "2025-06-25T06:49:13.990792Z", - id: "39bb531a-3e96-4808-bcc2-4f28fdbe4084", - identities: [{created_at: "2025-06-25T06:49:13.985115Z", email: "noonssub1004@naver.com", id: "39bb531a-3e96-4808-bcc2-4f28fdbe4084", identity_data: {email: 'noonssub1004@naver.com', email_verified: false, name: '강주현', phone_verified: false, sub: '39bb531a-3e96-4808-bcc2-4f28fdbe4084'}, identity_id: "437b41e2-f911-462c-a793-5953ff25587e", last_sign_in_at: "2025-06-25T06:49:13.985066Z, "provider: "email", updated_at: "2025-06-25T06:49:13.985115Z", user_id: "39bb531a-3e96-4808-bcc2-4f28fdbe4084"}], - is_anonymous: false, - last_sign_in_at: "2025-06-29T06:25:44.064017314Z", - phone: "", - role: "authenticated", - updated_at: "2025-06-29T06:25:44.069102Z", - user_metadata: {email: 'noonssub1004@naver.com', email_verified: true, name: '강주현', phone_verified: false, sub: '39bb531a-3e96-4808-bcc2-4f28fdbe4084'} - */ - - // ✅ 더미 리뷰 삽입 const insertDummyReviews = useCallback(async () => { const dummyData = [...myReviewData.reviews]; diff --git a/src/index.css b/src/index.css index df8a6d16..4a47ab14 100644 --- a/src/index.css +++ b/src/index.css @@ -15,4 +15,5 @@ src: url("/fonts/PixgamerRegular.woff") format("woff"); font-weight: normal; font-style: normal; + font-display: swap; } diff --git a/src/utils/getGenreDescription.js b/src/utils/getGenreDescription.js index 6ccd6d75..105b1f82 100644 --- a/src/utils/getGenreDescription.js +++ b/src/utils/getGenreDescription.js @@ -1,7 +1,6 @@ export const getGenreDescription = (genreId, genreMetaList) => { const genre = genreMetaList.find((g) => g.id === genreId); if (!genre) return "인기 영화"; - console.log(genre.id); const genreData = { 28: "짜릿한 전투의 세계, 액션 영화", 12: "끝없는 여정을 따라가는 모험 영화", From 4171aa2a27bbb0f3399ae571c0b2ba2d4ab7b677 Mon Sep 17 00:00:00 2001 From: jjub0217 Date: Tue, 21 Oct 2025 10:49:55 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20MyPageHome=20import=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EB=8C=80=EC=86=8C=EB=AC=B8=EC=9E=90=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(Vercel=20=EB=B0=B0=ED=8F=AC=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=20=ED=95=B4=EA=B2=B0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index 3c9b7256..11c7622b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,7 +8,7 @@ import { MovieDetail } from "./components/MovieDetail"; import { MovieSearch } from "./components/MovieSearch"; import MyFavorite from "./components/MyFavorite"; import { MyPage } from "./components/MyPage"; -import { MyPageHome } from "./components/myPageHome"; +import { MyPageHome } from "./components/MyPageHome"; import { MyProfile } from "./components/MyProfile"; import { MyReview } from "./components/MyReview"; import OAuthCallback from "./components/OAuthCallback";