hsu-makeus-challenge · immhyemi · Jun 2, 2025 · hyesngy · Jun 4, 2025 · hyesngy
@@ -1,6 +1,6 @@
 # React + TypeScript + Vite
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This template provides a minimal setup to get React working in Vite with  HMR and some ESLint rules.
 
 Currently, two official plugins are available: 
 

@@ -1,4 +1,4 @@
-import js from '@eslint/js'
+ import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'

@@ -1,4 +1,4 @@
-<!doctype html>
+ <!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

@@ -1,4 +1,4 @@
-{
+ {
   "name": "tailwind-react-starter",
   "version": "0.0.0",
   "scripts": {

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
+    autoprefixer: {}, 
   },
 }
 
@@ -1,4 +1,4 @@
-import {
+ import {
   RouterProvider,
   createBrowserRouter,
   redirect,

@@ -1,19 +1,16 @@
 
-// src/api/auth.ts
 import axios, { AxiosError, AxiosInstance, InternalAxiosRequestConfig } from "axios";
 
 const api = axios.create({
 baseURL: "http://localhost:8000",
 withCredentials: true,
 });
 
-// 토큰 관리 함수
 const getAccessToken = () => localStorage.getItem("accessToken");
 const getRefreshToken = () => localStorage.getItem("refreshToken");
 const setAccessToken = (token: string) => localStorage.setItem("accessToken", token);
 const setRefreshToken = (token: string) => localStorage.setItem("refreshToken", token);
 
-// (무한 재시도 방지)
 let isRefreshing = false;
 // 토큰 갱신 중 대기중인 요청들을 저장
 let failedQueue: any[] = [];

@@ -1,4 +1,4 @@
-import { Controller, Get, Req, Res, UseGuards } from '@nestjs/common';
+ import { Controller, Get, Req, Res, UseGuards } from '@nestjs/common';
 import { AuthGuard } from '@nestjs/passport';
 import { UserService } from './user.service'; // 같은 폴더에 있는 user.service.ts
 import { JwtService } from '@nestjs/jwt';

@@ -3,7 +3,7 @@ import { PassportStrategy } from '@nestjs/passport';
 import { Strategy, VerifyCallback } from 'passport-google-oauth20';
 import { Injectable } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
-
+ 
 @Injectable()
 export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
   constructor(configService: ConfigService) {

@@ -1,5 +1,5 @@
 import { Injectable } from '@nestjs/common';
-
+ 
 export interface User {
     id: string;
     email: string;

@@ -1,4 +1,4 @@
-import { useState } from "react";
+ import { useState } from "react";
 
 interface MovieCardProps {
   movie: any;

@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+ import { Link } from "react-router-dom";
 
 const Navbar = () => {
   return (

@@ -1,5 +1,5 @@
 import React from "react";
-
+ 
 interface SearchFormProps {
   query: string;
   setQuery: (v: string) => void;

@@ -1,4 +1,4 @@
-
+ 
 export const LOCAL_STORAGE_KEY = {
     accessToken: 'accessToken',
     refreshToken: 'refreshToken',

@@ -3,7 +3,7 @@ import { useLocalStorage } from "../hooks/useLocalStorage";
 import { loginApi, logoutApi } from "../api/auth";
 import { LOCAL_STORAGE_KEY } from "../constants/storage";
 import { LoginRequest } from "../api/auth";
-
+ 
 interface AuthContextType {
   accessToken: string | null;
   refreshToken: string | null;

@@ -2,7 +2,6 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
 
-// ✅ 카테고리 이름을 실제 API endpoint에 맞게 변환하는 맵
 const categoryMap: Record<string, string> = {
   popular: "popular",
   "top-rated": "top_rated",

@@ -6,7 +6,7 @@ import {
 } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ZodType, ZodTypeDef } from "zod";
-
+ 
 export function useForm<T extends FieldValues>(
   schema: ZodType<T, ZodTypeDef, T>,
   options?: UseFormProps<T>

@@ -6,7 +6,7 @@ export const useLocalStorage = (key: string) => {
         console.log(error);
       }
     };
-
+   
     const getItem = () => {
       try {
         const item: string | null = window.localStorage.getItem(key);

@@ -1,4 +1,4 @@
-
+ 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

@@ -1,4 +1,4 @@
-import React from "react";
+ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";

@@ -2,7 +2,8 @@ import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from '../store/store';
 import { closeModal, ModalState } from './modalslice';
 
-const MovieModal = () => {
+
+ const MovieModal = () => {
   const modalState = useSelector((state: RootState): ModalState => state.modal as ModalState);
   const { isOpen, movie } = modalState;
   const dispatch = useDispatch();

@@ -1,5 +1,5 @@
-import { createSlice } from '@reduxjs/toolkit';
-
+import { createSlice } from "@reduxjs/toolkit";
+ 
 // modalSlice.ts 또는 modalslice.ts
 export interface Movie {
   backdrop_path: string;
@@ -26,7 +26,7 @@ const initialState: ModalState = {
 };
 
 const modalSlice = createSlice({
-  name: 'modal',
+  name: "modal",
   initialState,
   reducers: {
     openModal: (state, action) => {
@@ -41,4 +41,4 @@ const modalSlice = createSlice({
 });
 
 export const { openModal, closeModal } = modalSlice.actions;
-export default modalSlice.reducer;
+export default modalSlice.reducer;
@@ -1,4 +1,4 @@
-
+ 
 import Navbar from "../components/Navbar";
 import { Outlet } from "react-router-dom";
 

@@ -4,7 +4,6 @@ import  Navbar  from "../components/Navbar"
 const HomePage = (): JSX.Element => {
   return <div>
     <>
-
     <Outlet /> 
     </>
   </div>;

@@ -7,7 +7,7 @@ const LoadingSpinner = (): JSX.Element => {
           role="status"
         ></div>
         <p className="mt-4 text-xl text-blue-300 font-bold">🔵🔵🔵</p>
-      </div>
+      </div> 
     </div> 
   );
 };

@@ -7,7 +7,7 @@ import { loginApi } from "../api/auth";
 import { useAuth } from "../context/AuthContext";
 import { useEffect, useCallback } from "react";
 import { useLocation } from "react-router-dom";
-
+ 
 // 로그인 스키마 정의
 const loginSchema = z.object({
   email: z.string().email("올바른 이메일 형식이 아닙니다."),

@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import axios from "axios";
 import LoadingSpinner from "./LoadingSpinner";
 import NotFoundPage from "./NotFoundPage";
-
+ 
 const MovieDetailPage = (): JSX.Element => {
   const { movieId } = useParams();
   const [movieDetails, setMovieDetails] = useState<any>(null);

@@ -9,7 +9,7 @@ import SearchForm from "../components/searchForm";
 import { useDispatch } from "react-redux";
 import { openModal } from "../modal/modalslice";
 import MovieModal from "../modal/MovieModal";
-
+ 
 export default function MoviePage(): JSX.Element {
   const [page, setPage] = useState(1);
   const { category } = useParams<{ category: string }>();

@@ -6,7 +6,7 @@ const MyPage = () => {
   const [nickname, setNickname] = useState("");
   const navigate = useNavigate();
 
-  // localStorage에서 유저 정보 로드
+  /
   useEffect(() => {
     const storedEmail = localStorage.getItem("signup_email") || "";
     const storedNickname = localStorage.getItem("signup_nickname") || "";

@@ -1,5 +1,5 @@
 export default function NotFoundPage(): JSX.Element {
-    return (
+    return ( 
       <div className="flex items-center justify-center h-screen">
         <div className="text-red-500 font-bold text-2xl">
         💥에러 발생💥

@@ -1,7 +1,8 @@
 // NowPlayingPage.tsx
 import { Navigate } from "react-router-dom";
 
-const NowPlayingPage = (): JSX.Element => {
+
+ const NowPlayingPage = (): JSX.Element => {
   return <Navigate to="/movies/now-playing" />;
 };
 

@@ -5,4 +5,4 @@ const PopularPage = (): JSX.Element => {
 };
 
 export default PopularPage;
-
+  
@@ -7,7 +7,7 @@ const ProtectedLayout = () => {
     if (!accessToken) {
       return <Navigate to="/login" replace />;
     }
-
+   
     return <Outlet />;
   };
 

@@ -3,7 +3,7 @@ import { useState } from "react";
 import Navbar from "../components/Navbar";
 import { useForm } from "../hooks/useForm";
 import {
-  emailSchema,
+  emailSchema, 
   passwordSchema,
   nicknameSchema,
   EmailForm,

@@ -2,7 +2,7 @@ import { Navigate } from "react-router-dom";
 
 const TopRatedPage = (): JSX.Element => {
   return <Navigate to="/movies/top-rated" />;
-};
+}; 
 
 export default TopRatedPage;
 
@@ -2,7 +2,7 @@ import { Navigate } from "react-router-dom";
 
 const UpcomingPage = (): JSX.Element => {
   return <Navigate to="/movies/upcoming" />;
-};
+}; 
 
 export default UpcomingPage;
 
@@ -3,7 +3,7 @@ import { Navigate } from "react-router-dom";
 interface ProtectedRouteProps {
   children: React.ReactNode;
 }
-
+ 
 const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   const token =
     typeof window !== "undefined" ? localStorage.getItem("accessToken") : null;

@@ -6,7 +6,7 @@ const store = configureStore({
     modal: modalReducer,
   },
 });
-
+ 
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 export default store;
@@ -1,4 +1,4 @@
-import { z } from "zod";
+ import { z } from "zod";
 
 export const loginSchema = z.object({
   email: z.string().email("올바른 이메일 형식을 입력해 주세요!"),

@@ -1,4 +1,4 @@
-import { z } from "zod";
+ import { z } from "zod";
 
 export const emailSchema = z.object({
   email: z.string().email("올바른 이메일 형식이 아닙니다!"),

@@ -1,4 +1,4 @@
-/// <reference types="vite/client" />
+ /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
     readonly VITE_TMDB_KEY: string;

@@ -9,3 +9,4 @@ export default {
   }, 
   plugins: [],
 }
+
@@ -1,4 +1,4 @@
-{
+ {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",

@@ -1,4 +1,4 @@
-{
+ {
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },

@@ -1,4 +1,4 @@
-{
+ {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+  import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 
 // https://vite.dev/config/
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ export const useLocalStorage = (key: string) => { @@
             console.log(error);
           }
         };
         const getItem = () => {
           try {
             const item: string | null = window.localStorage.getItem(key);
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@


		import Navbar from "../components/Navbar";
		import { Outlet } from "react-router-dom";

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,4 +5,4 @@ const PopularPage = (): JSX.Element => {
		};

		export default PopularPage;