-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
3주차 미션 - 밍붕 #9
base: main
Are you sure you want to change the base?
The head ref may contain hidden characters: "\uBC0D\uBD95"
3주차 미션 - 밍붕 #9
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,4 +11,4 @@ img{ | |
|
||
img:hover{ | ||
filter : brightness(0.5) | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
# React + Vite | ||
|
||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. | ||
|
||
Currently, two official plugins are available: | ||
|
||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh | ||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import js from '@eslint/js' | ||
import globals from 'globals' | ||
import react from 'eslint-plugin-react' | ||
import reactHooks from 'eslint-plugin-react-hooks' | ||
import reactRefresh from 'eslint-plugin-react-refresh' | ||
|
||
export default [ | ||
{ ignores: ['dist'] }, | ||
{ | ||
files: ['**/*.{js,jsx}'], | ||
languageOptions: { | ||
ecmaVersion: 2020, | ||
globals: globals.browser, | ||
parserOptions: { | ||
ecmaVersion: 'latest', | ||
ecmaFeatures: { jsx: true }, | ||
sourceType: 'module', | ||
}, | ||
}, | ||
settings: { react: { version: '18.3' } }, | ||
plugins: { | ||
react, | ||
'react-hooks': reactHooks, | ||
'react-refresh': reactRefresh, | ||
}, | ||
rules: { | ||
...js.configs.recommended.rules, | ||
...react.configs.recommended.rules, | ||
...react.configs['jsx-runtime'].rules, | ||
...reactHooks.configs.recommended.rules, | ||
'react/jsx-no-target-blank': 'off', | ||
'react-refresh/only-export-components': [ | ||
'warn', | ||
{ allowConstantExport: true }, | ||
], | ||
}, | ||
}, | ||
] |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite + React</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="/src/main.jsx"></script> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
{ | ||
"name": "3-----", | ||
"private": true, | ||
"version": "0.0.0", | ||
"type": "module", | ||
"scripts": { | ||
"dev": "vite", | ||
"build": "vite build", | ||
"lint": "eslint .", | ||
"preview": "vite preview" | ||
}, | ||
"dependencies": { | ||
"axios": "^1.7.7", | ||
"bootstrap": "^5.3.3", | ||
"react": "^18.3.1", | ||
"react-bootstrap": "^2.10.5", | ||
"react-dom": "^18.3.1", | ||
"react-icons": "^5.3.0", | ||
"react-router-dom": "^6.26.2", | ||
"styled-component": "^2.8.0", | ||
"styled-components": "^6.1.13" | ||
}, | ||
"devDependencies": { | ||
"@eslint/js": "^9.11.1", | ||
"@types/react": "^18.3.10", | ||
"@types/react-dom": "^18.3.0", | ||
"@vitejs/plugin-react-swc": "^3.5.0", | ||
"eslint": "^9.11.1", | ||
"eslint-plugin-react": "^7.37.0", | ||
"eslint-plugin-react-hooks": "^5.1.0-rc.0", | ||
"eslint-plugin-react-refresh": "^0.4.12", | ||
"globals": "^15.9.0", | ||
"vite": "^5.4.8" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import { createBrowserRouter, RouterProvider } from 'react-router-dom'; | ||
import HomePage from './pages/home.jsx'; | ||
import NotFound from './pages/not-found.jsx'; | ||
import Movies from './pages/movies.jsx'; | ||
import RootLayout from './layout/root-layout.jsx'; | ||
import Login from './pages/login.jsx'; | ||
import SignUp from './pages/signup.jsx'; | ||
import Search from './pages/search.jsx'; | ||
import Category from './pages/category'; | ||
import { createGlobalStyle } from 'styled-components'; | ||
|
||
const GlobalStyle = createGlobalStyle` | ||
* { | ||
margin: 0; | ||
padding: 0; | ||
box-sizing: border-box; /* 박스 모델 설정 */ | ||
} | ||
`; | ||
|
||
const router = createBrowserRouter([ | ||
{ | ||
path: '/', | ||
element: <RootLayout />, | ||
errorElement: <NotFound />, | ||
children: [ | ||
{ | ||
// 2. index: true는 위의 path: '/' 즉, 홈 경로를 의미한다. | ||
index: true, | ||
element: <Movies />, | ||
}, | ||
{ | ||
path: 'login', | ||
element: <Login />, | ||
}, | ||
{ | ||
path: 'signup', | ||
element: <SignUp />, | ||
}, | ||
|
||
{ | ||
path: 'search', | ||
element: <Search />, | ||
}, | ||
{ | ||
path: 'category', | ||
element: <Category />, | ||
}, | ||
{ | ||
path: 'category/:id', | ||
element: <Movies></Movies>, | ||
}, | ||
], | ||
}, | ||
]); | ||
|
||
function App() { | ||
return ( | ||
<> | ||
<GlobalStyle /> {/* 전역 스타일 적용 */} | ||
<RouterProvider router={router} /> | ||
</> | ||
); | ||
} | ||
|
||
export default App; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import styled from 'styled-components'; | ||
|
||
const Button = (props) => { | ||
return <ButtonStyle color={props.color}>{props.children}</ButtonStyle>; | ||
}; | ||
|
||
export default Button; | ||
|
||
const ButtonStyle = styled.button` | ||
width: 85px; | ||
height: 50px; | ||
color: white; | ||
background-color: ${(props) => props.color || 'black'}; | ||
border-radius: 20px; | ||
border: solid black 1px; | ||
&:hover { | ||
filter: brightness(1.2); | ||
} | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
// navbar.jsx | ||
import { Link } from 'react-router-dom'; | ||
import styled from 'styled-components'; | ||
import logo from '../assets/watcha.png'; | ||
import Button from './button'; | ||
const Navbar = () => { | ||
return ( | ||
<NavStyle> | ||
<Link to={'/'}> | ||
<MainLogo src={logo} alt="로고" /> | ||
</Link> | ||
<ButtonContainer> | ||
<Link to={'/login'}> | ||
<Button>로그인</Button> | ||
</Link> | ||
<Link to={`/signup`}> | ||
<Button color="#EF007E">회원가입</Button> | ||
</Link> | ||
</ButtonContainer> | ||
</NavStyle> | ||
); | ||
}; | ||
|
||
export default Navbar; | ||
|
||
const NavStyle = styled.nav` | ||
display: grid; | ||
padding-left: 20px; | ||
padding-right: 20px; | ||
grid-template-areas: 'logo ㆍ ㆍ ㆍ ㆍ ㆍ ㆍ ㆍ ㆍ button'; | ||
grid-template-columns: repeat(10, 1fr); | ||
justify-content: space-between; | ||
grid-area: nav; | ||
width: 100%; | ||
height: 100%; | ||
background-color: #1b1b1b; | ||
`; | ||
|
||
const MainLogo = styled.img` | ||
grid-area: logo; | ||
width: 100%; | ||
height: 100%; | ||
`; | ||
|
||
const ButtonContainer = styled.div` | ||
grid-area: button; | ||
display: flex; | ||
justify-content: space-evenly; | ||
height: 100%; | ||
align-items: center; | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import styled from 'styled-components'; | ||
import { FaSearch } from 'react-icons/fa'; | ||
import { MdMovie } from 'react-icons/md'; | ||
import { Link } from 'react-router-dom'; | ||
|
||
const Sidebar = () => { | ||
return ( | ||
<SidebarStyle> | ||
<Link to={`/search`}> | ||
<SideMenu> | ||
<FaSearch /> | ||
찾기 | ||
</SideMenu> | ||
</Link> | ||
<Link to={'/category'}> | ||
<SideMenu> | ||
<MdMovie /> | ||
영화 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. SideMenu 스타일에서 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 감사합니다 |
||
</SideMenu> | ||
</Link> | ||
</SidebarStyle> | ||
); | ||
}; | ||
|
||
export default Sidebar; | ||
|
||
const SidebarStyle = styled.aside` | ||
box-sizing: border-box; | ||
display: flex; | ||
flex-direction: column; | ||
grid-area: aside; | ||
width: 100%; | ||
height: 100vh; | ||
min-height: 100%; | ||
background-color: #1b1b1b; | ||
padding: 20px; | ||
`; | ||
|
||
const SideMenu = styled.div` | ||
display: flex; | ||
align-items: center; | ||
width: 100%; | ||
height: 50px; | ||
color: white; | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { Outlet } from 'react-router-dom'; | ||
import Navbar from '../components/navbar.jsx'; | ||
import styled from 'styled-components'; | ||
import Sidebar from '../components/sidebar.jsx'; | ||
|
||
const RootLayout = () => { | ||
return ( | ||
<Root> | ||
<Navbar /> | ||
<Sidebar /> | ||
<Main> | ||
<Outlet /> | ||
</Main> | ||
</Root> | ||
); | ||
}; | ||
|
||
export default RootLayout; | ||
|
||
const Root = styled.div` | ||
display: grid; | ||
grid-template-areas: | ||
'nav nav nav nav nav nav nav nav nav nav ' | ||
'aside main main main main main main main main main' | ||
'aside main main main main main main main main main'; | ||
height: 100%; | ||
grid-template-columns: repeat(10,1fr); | ||
grid-template-rows: 100px repeat(3, auto); | ||
min-height: 100vh; | ||
width: 100%; | ||
background-color: black; | ||
|
||
`; | ||
|
||
const Main = styled.main` | ||
grid-area: main; | ||
padding: 20px; | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { StrictMode } from 'react' | ||
import { createRoot } from 'react-dom/client' | ||
import App from './App.jsx' | ||
|
||
createRoot(document.getElementById('root')).render( | ||
<StrictMode> | ||
<App /> | ||
</StrictMode>, | ||
) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😊