diff --git a/README.md b/README.md index a63ba3f..d955ac7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # React + TypeScript + Vite with swc -- `npm run dev` 이후 localhost 주소 접속 +- `npm run dev` 이후 localhost:~ 주소 접속 +- 뭔가 이상하면 `npm install` 했는지 확인하기 ## eslint, prettier, github issue/PR template 적용 완료 @@ -11,4 +12,23 @@ 2. 해당하는 issue 번호에 맞는 branch 생성하기 ex) feat#12-signup 3. 해당 브랜치에서 작업 후, 결과물 main branch에 pr 날리기 -4. 1인 이상 approve 후 merge \ No newline at end of file +4. 1인 이상 approve review 후 merge +5. review 완료되었고 문제 없으면 issue close + + +## 기본 폴더 구조 (src/) +- assets : 이미지 파일들이 들어가는 곳입니다. 특정 페이지/컴포넌트에서만 쓰이는 것은 폴더로 묶어주세요. +- components : 여러 페이지에 공통으로 쓰이는 컴포넌트가 들어가는 곳입니다. + - figma > assets 에 정리된 컴포넌트, figma > 2차 와프_작업중 페이지에 정리된 컴포넌트를 기반으로 합니다. +- pages : 각각의 페이지를 구분하는 곳입니다. 큰 기능으로 먼저 구분하고, 상세 페이지는 하위 폴더로 구분해 주세요. +- utils : 중복되는 로직(일반 JavaScript 함수)을 공통으로 정의해서 사용합니다. +- apis : fetch 등 서버와 정보를 주고받는 중복 로직을 정리합니다. +- hooks : 중복되는 로직(React JSX에서 쓰이는 로직 - 상태 관리, 라이프사이클 관련)을 커스텀 user hook으로 만듭니다. + +<추후 필요하면 추가> +- styles : css, button 등 공통 디자인을 정의합니다. +- context/store : 전역 상태 관리가 필요할 때 사용합니다. + +## Routing +- App.tsx에 router도 함께 정의되어 있습니다. +- children : [] 안에 원하는 경로와 보여줄 component를 작성합니다. \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index b71f179..4e5ec10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,17 @@ { "name": "kuit-space-front", - "version": "0.0.0", + "version": "0.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "kuit-space-front", - "version": "0.0.0", + "version": "0.0.1", "dependencies": { "@types/styled-components": "^5.1.34", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.24.1", "styled-components": "^6.1.11", "vite-plugin-svgr": "^4.2.0" }, @@ -1008,6 +1009,15 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz", + "integrity": "sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/pluginutils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", @@ -4677,6 +4687,38 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-router": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz", + "integrity": "sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.17.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.1.tgz", + "integrity": "sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.17.1", + "react-router": "6.24.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", diff --git a/package.json b/package.json index 53c5de0..24bd4f9 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@types/styled-components": "^5.1.34", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.24.1", "styled-components": "^6.1.11", "vite-plugin-svgr": "^4.2.0" }, diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.tsx b/src/App.tsx index ac3d71d..179e892 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,36 +1,34 @@ -import { useState } from "react"; -import reactLogo from "./assets/react.svg"; -import viteLogo from "/vite.svg"; -import "./App.css"; -import { styled } from "styled-components"; +import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom"; +import Header from "./components/Header"; +import BottomNavBar from "./components/BottomNavBar"; +import LoginPage from "./pages/LoginPage/LoginPage"; +import HomePage from "./pages/HomePage"; -const Button = styled.button` - background-color: green; -`; +function Layout() { + return ( + <> +
+ + + + ); +} function App() { - const [count, setCount] = useState(0); + const routes = [ + { + element: ( + + ), + children: [ + { path: "/", element: }, + { path: "/login", element: }, + ], + }, + ]; + const router = createBrowserRouter(routes); - return ( - <> - -

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

Click on the Vite and R eact logos to learn more

- - ); + return ; } export default App; diff --git a/src/apis/apis.ts b/src/apis/apis.ts new file mode 100644 index 0000000..919dd2c --- /dev/null +++ b/src/apis/apis.ts @@ -0,0 +1,3 @@ +export const apis = () => { + console.log("this is apis, add contents"); +}; diff --git a/src/components/BottomNavBar.tsx b/src/components/BottomNavBar.tsx new file mode 100644 index 0000000..8dc048b --- /dev/null +++ b/src/components/BottomNavBar.tsx @@ -0,0 +1,7 @@ +const BottomNavBar = () => { + return ( +
BottomNavBar
+ ) +} + +export default BottomNavBar \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..cfcc525 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,7 @@ +const Header = () => { + return ( +
Header
+ ) +} + +export default Header \ No newline at end of file diff --git a/src/hooks/hooks.ts b/src/hooks/hooks.ts new file mode 100644 index 0000000..e5e67d5 --- /dev/null +++ b/src/hooks/hooks.ts @@ -0,0 +1,3 @@ +export const hooks = () => { + console.log("this is hooks, add contents"); +}; diff --git a/src/index.css b/src/index.css index c798e28..7d50a7b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + /* :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx new file mode 100644 index 0000000..ee03d68 --- /dev/null +++ b/src/pages/HomePage.tsx @@ -0,0 +1,7 @@ +const HomePage = () => { + return ( +
HomePage
+ ) +} + +export default HomePage \ No newline at end of file diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx new file mode 100644 index 0000000..0ffe9ef --- /dev/null +++ b/src/pages/LoginPage/LoginPage.tsx @@ -0,0 +1,7 @@ +const LoginPage = () => { + return ( +
LoginPage
+ ) +} + +export default LoginPage \ No newline at end of file diff --git a/src/utils/utils.ts b/src/utils/utils.ts new file mode 100644 index 0000000..fbb32a3 --- /dev/null +++ b/src/utils/utils.ts @@ -0,0 +1,3 @@ +export const util = () => { + console.log("this is util, add contents"); +};