initial 폴더 구조

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
+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를 작성합니다.

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"
   },

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 (
+      <>
+        <Header />
+        <Outlet />
+        <BottomNavBar />
+      </>
+  );
+}
 
 function App() {
-	const [count, setCount] = useState(0);
+	const routes = [
+		{
+			element: (
+					<Layout />
+			),
+			children: [
+				{ path: "/", element: <HomePage /> },
+				{ path: "/login", element: <LoginPage /> },
+			],
+		},
+	];
+	const router = createBrowserRouter(routes);
 
-	return (
-		<>
-			<div>
-				<a href="https://vitejs.dev" target="_blank">
-					<img src={viteLogo} className="logo" alt="Vite logo" />
-				</a>
-				<a href="https://react.dev" target="_blank">
-					<img src={reactLogo} className="logo react" alt="React logo" />
-				</a>
-			</div>
-			<h1>Vite + React</h1>
-			<div className="card">
-				<Button onClick={() => setCount((count) => count + 1)}>count is {count}</Button>
-				<p>
-					Edit <code>src/App.tsx</code> and save to test HMR
-				</p>
-			</div>
-			<p className="read-the-docs">Click on the Vite and R eact logos to learn more</p>
-		</>
-	);
+	return <RouterProvider router={router} />;
 }
 
 export default App;

src/apis/apis.ts

@@ -0,0 +1,3 @@
+export const apis = () => {
+	console.log("this is apis, add contents");
+};

src/components/BottomNavBar.tsx

@@ -0,0 +1,7 @@
+const BottomNavBar = () => {
+  return (
+    <div>BottomNavBar</div>
+  )
+}
+
+export default BottomNavBar

src/components/Header.tsx

@@ -0,0 +1,7 @@
+const Header = () => {
+  return (
+    <div>Header</div>
+  )
+}
+
+export default Header

src/hooks/hooks.ts

@@ -0,0 +1,3 @@
+export const hooks = () => {
+	console.log("this is hooks, add contents");
+};

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;

src/pages/HomePage.tsx

@@ -0,0 +1,7 @@
+const HomePage = () => {
+  return (
+    <div>HomePage</div>
+  )
+}
+
+export default HomePage

src/pages/LoginPage/LoginPage.tsx

@@ -0,0 +1,7 @@
+const LoginPage = () => {
+  return (
+    <div>LoginPage</div>
+  )
+}
+
+export default LoginPage

src/utils/utils.ts

@@ -0,0 +1,3 @@
+export const util = () => {
+	console.log("this is util, add contents");
+};