Repository: SOPT-all/36-COLLABORATION-WEB-TEMU
Pull request #21: [init/#22] 폴더 구조 세팅 & 라우팅 설정
Author: login: hamxxn
Labels: name: 🎉Init
name: 😽동희
Created: 2025-05-09T06:15:29Z | Merged: 2025-05-12T01:18:32Z

## 📌 Related Issues


- close #22 

## ✅ 체크 리스트

- [x] PR 제목의 형식을 잘 작성했나요? e.g. [Feat] PR 템플릿 작성
- [x] 빌드가 성공했나요? (pnpm build)
- [x] 컨벤션을 지켰나요?
- [x] 이슈는 등록했나요?
- [x] 리뷰어와 라벨을 지정했나요?

## 📄 Tasks

초기 폴더 구조 생성

## ⭐ PR Point (To Reviewer)

RouterProvider와 createBrowserRouter를 이용해 라우팅 설정
Gitkeep 기반 초기 폴더 구조 구성

## 📷 Screenshot

<img width="185" alt="스크린샷 2025-05-09 오후 3 47 21" src="https://github.com/user-attachments/assets/e099905b-6ec6-41fc-816f-b481f3d1ce25" />

## 🔔 ETC




Linked issue #22: [init]  폴더 구조 세팅 & 라우팅 설정
## 🛠 Task Description

<!-- 여기에 작업에 대한 설명을 작성 -->

## 📝 TO-DO

- [ ] 폴더 생성

## 🔔ETC


Diff:
diff --git a/index.html b/index.html
index fe07351..87903e0 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
diff --git a/package.json b/package.json
index 084dde4..e43bb2d 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 46822f7..830f677 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,9 @@ importers:
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
+      react-router-dom:
+        specifier: ^7.6.0
+        version: 7.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
     devDependencies:
       '@eslint/js':
         specifier: ^9.25.0
@@ -1420,6 +1423,10 @@ packages:
       }
     engines: { node: '>= 0.6' }
 
+  cookie@1.0.2:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
+
   cors@2.8.5:
     resolution:
       {
@@ -2933,6 +2940,23 @@ packages:
     peerDependencies:
       react: ^19.1.0
 
+  react-router-dom@7.6.0:
+    resolution: {integrity: sha512-DYgm6RDEuKdopSyGOWZGtDfSm7Aofb8CCzgkliTjtu/eDuB0gcsv6qdFhhi8HdtmA+KHkt5MfZ5K2PdzjugYsA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+
+  react-router@7.6.0:
+    resolution: {integrity: sha512-GGufuHIVCJDbnIAXP3P9Sxzq3UUsddG3rrI3ut1q6m0FI6vxVBF3JoPQ38+W/blslLH4a5Yutp8drkEpXoddGQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react@19.1.0:
     resolution:
       {
@@ -3092,6 +3116,9 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
+  set-cookie-parser@2.7.1:
+    resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
+
   setprototypeof@1.2.0:
     resolution:
       {
@@ -4368,6 +4395,8 @@ snapshots:
 
   cookie@0.7.2: {}
 
+  cookie@1.0.2: {}
+
   cors@2.8.5:
     dependencies:
       object-assign: 4.1.1
@@ -5324,6 +5353,20 @@ snapshots:
       react: 19.1.0
       scheduler: 0.26.0
 
+  react-router-dom@7.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-router: 7.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+
+  react-router@7.6.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      cookie: 1.0.2
+      react: 19.1.0
+      set-cookie-parser: 2.7.1
+    optionalDependencies:
+      react-dom: 19.1.0(react@19.1.0)
+
   react@19.1.0: {}
 
   reflect.getprototypeof@1.0.10:
@@ -5452,6 +5495,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -5474,6 +5518,7 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
 
+
   setprototypeof@1.2.0: {}
 
   shebang-command@2.0.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 00064ce..84c4111 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,10 @@
 
+import { RouterProvider } from "react-router-dom";
+import router from "./router/Router";
+
 function App() {
-  return <></>;
+  return <RouterProvider router={router} />;
+
 }
 
 export default App;
diff --git a/src/api/.gitkeep b/src/api/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/img/.gitkeep b/src/assets/img/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/svg/.gitkeep b/src/assets/svg/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/hooks/.gitkeep b/src/hooks/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 08a3ac9..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,68 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/src/main.tsx b/src/main.tsx
index bef5202..7018137 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 
-createRoot(document.getElementById('root')!).render(
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);
diff --git a/src/pages/.gitkeep b/src/pages/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
new file mode 100644
index 0000000..cc8f1e1
--- /dev/null
+++ b/src/router/Router.tsx
@@ -0,0 +1,5 @@
+import { createBrowserRouter } from "react-router-dom";
+
+const router = createBrowserRouter([{}]);
+
+export default router;
diff --git a/src/shared/components/.gitkeep b/src/shared/components/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/shared/constant/.gitkeep b/src/shared/constant/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/shared/hooks/.gitkeep b/src/shared/hooks/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/shared/types/.gitkeep b/src/shared/types/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/shared/utils/.gitkeep b/src/shared/utils/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/.gitkeep b/src/styles/.gitkeep
new file mode 100644
index 0000000..e69de29


Reviews:
user: login: heesunee
body: 제가 설명을 조금 헷갈리게 드렸던 것 같아 죄송합니다 😭
현재 src 하위 폴더는 assets, api, pages, styles, shared, router 정도로 구성되어 있고,
shared 안에는 utils, types, components, hooks 폴더가 생길 예정이에요.
아직 페이지가 모두 정해지지 않아서 일단은 이 정도 구조로 잡아두고,
내일 세미나 시간에 페이지명이 확정되면 그 이후 작업은 다시 설명드리겠습니다! 코멘트부분 수정해주세요 !

Pr 제목도 폴더 구조 세팅 & 라우팅 설정으로 해주기 ~~
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-05-09T06:35:43Z
user: login: hamxxn
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-09T06:52:02Z
user: login: hamxxn
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-09T06:52:15Z
user: login: hamxxn
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-09T06:52:22Z
user: login: hamxxn
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-09T06:52:54Z
user: login: hamxxn
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-09T06:53:03Z

Review comments:
path: src/Router.tsx
user: login: heesunee
body: Router.tsx는 src/router 하위에 두는 게 구조상 더 적절할 것 같습니다.
추후 디자인 페이지가 공유되면, 각 페이지별로 경로를 설정해 ROUTES_CONFIG와 같은 변수로 분리하고, 해당 변수를 Router.tsx에 적용해 구성하면 될 것 같아요 !
created_at: 2025-05-09T06:23:25Z
author_association: COLLABORATOR
path: src/pages/home/Home.css.ts
user: login: heesunee
body: ㅋㅋㅋㅋ 이것들은 예시파일이었는데 .. 😭😭 😭 아직 다른 페이지가 나오지 않은 상황에서는 안에 들어 있는 폴더들은 정리해주시는 게 좋을 것 같아요. 각 페이지에서 사용되는 constants, components, hooks, utils 같은 폴더들은 해당 페이지를 실제로 작업하는 사람이 필요에 따라 추가하는 게 더 효율적일 것 같습니다. 지금은 shared 안에 들어갈 constants, types, utils, hooks 만 생성해 두면 될 것 같아요 
created_at: 2025-05-09T06:26:19Z
author_association: COLLABORATOR
path: src/utils/.gitkeep
user: login: heesunee
body: 공통으로 사용되는 utils들은 shared 안에 위치하고 있으니까 삭제 ~~
created_at: 2025-05-09T06:26:43Z
author_association: COLLABORATOR
path: src/pages/shared/components/.gitkeep
user: login: heesunee
body: shared 폴더들은 src 하위에 와야해요 !!!! pages와 같은 라인으로 와줘야 합니당
src/shared로 진입 가능하게
created_at: 2025-05-09T06:27:31Z
author_association: COLLABORATOR
path: src/libs/.gitkeep
user: login: heesunee
body: lib 폴더는 쓰일일 없을 것 같아서 지워주세요 !
created_at: 2025-05-09T06:30:35Z
author_association: COLLABORATOR
path: src/Router.tsx
user: login: hamxxn
body: 넵넵!
created_at: 2025-05-09T06:52:02Z
author_association: COLLABORATOR
path: src/libs/.gitkeep
user: login: hamxxn
body: 넵!
created_at: 2025-05-09T06:52:15Z
author_association: COLLABORATOR
path: src/pages/shared/components/.gitkeep
user: login: hamxxn
body: 넵!
created_at: 2025-05-09T06:52:22Z
author_association: COLLABORATOR
path: src/utils/.gitkeep
user: login: hamxxn
body: 넵넵
created_at: 2025-05-09T06:52:54Z
author_association: COLLABORATOR
path: src/pages/home/Home.css.ts
user: login: hamxxn
body: 넵 수정할게용
created_at: 2025-05-09T06:53:02Z
author_association: COLLABORATOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-09T06:15:50Z
body: ### 빌드 결과
빌드에 성공했습니다 🎉
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-09T06:52:05Z
body: ### 빌드 결과
빌드에 성공했습니다 🎉
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-09T06:53:58Z
body: ### 빌드 결과
빌드에 성공했습니다 🎉
author_association: NONE
user: login: heesunee
created_at: 2025-05-11T09:29:04Z
body: 젤 상위라인에 있는 util, hooks 폴더는 지우고, styles 는 shared로 옮겨주세요!! style이 공유되는 것들이니 shared 폴더에 위치하는게 더 맞는것 같네요 ㅠㅠ 그리고 페이지명 정한대로 pages에 추가해주시고, 라우터 추가 설정까지 부탁드릴게요 ! (home, productList, productDetail)
author_association: COLLABORATOR