prgrms-fe-devcourse · tree0000 · Sep 27, 2024 · Sep 27, 2024 · Sep 27, 2024 · Sep 27, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
diff --git a/shareliving-front/index.html b/shareliving-front/index.html
@@ -9,11 +9,16 @@
 
         <link rel="preload" as="font" type="font/woff2" crossorigin="" href="./assets/fonts/SUIT-Variable.woff2">
         <link rel="stylesheet" href="./assets/css/style.css">
+        <script
+        type="text/javascript"
+        src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js"
+        charset="utf-8"
+      ></script>
     </head>
 
     <body>
         <div id="root"></div>
 
         <script type="module" src="/src/main.jsx"></script>
     </body>
-</html>
+</html>
diff --git a/shareliving-front/package-lock.json b/shareliving-front/package-lock.json
diff --git a/shareliving-front/package.json b/shareliving-front/package.json
@@ -13,13 +13,15 @@
     "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.2"
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.26.2",
+    "swiper": "^11.1.14"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.2",
     "css-loader": "^7.1.2",
     "eslint": "^9.9.0",
     "eslint-plugin-react": "^7.35.0",

diff --git a/shareliving-front/public/images/temp.md b/shareliving-front/public/images/temp.md
diff --git a/shareliving-front/public/miscs/temp.md b/shareliving-front/public/miscs/temp.md
diff --git a/shareliving-front/src/App.jsx b/shareliving-front/src/App.jsx
@@ -1,24 +1,150 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import React from 'react';
-import { Routes, Route } from 'react-router-dom';
-import Header from './components/Header'; 
-import Home from './components/Home'; 
+import './assets/css/style.css';
+
+import Layout from './components/layouts/Layout';
+import LandingPage from './components/LandingPage';
+import ProductWrite from './pages/ProductWrite';
+import KnowledgeWrite from './pages/KnowledgeWrite';
+import MyPage from './pages/MyPage';
+import EditProfile from './pages/EditProfile';
+import MessagesPage from './pages/MessagesPage';
+import MessageDetail from './components/MessageDetail';
+import ReplyMessage from './pages/ReplyMessage';
+import NoticeList from './components/NoticeList';
+import NoticeDetail from './components/NoticeDetail';
+import ShareHistory from './pages/ShareHistory';
+import ProductDetail from './pages/ProductDetail';
+import KnowledgeDetail from './pages/KnowledgeDetail';
+import { AppProvider } from './context/AppContext'; // Context import
 import Login from './components/authentication/component/Login'; 
 import Signup from './components/authentication/component/Signup'; 
 import FindAccountInfo from './components/authentication/component/FindAccountInfoPopup';
-function App() {
-    return (
-        <>
-            <Header />
-            <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="/login" element={<Login />} />
-                <Route path="/auth/kakao/callback" element={<Login />} />
-                <Route path="/signup" element={<Signup />} />
-                <Route path="/find-account-info" element={<FindAccountInfo />} />
-                {/* 다른 라우트들을 여기에 추가하세요 */}
-            </Routes>
-        </>
-    );
-}
+import KakaoCallback from './components/authentication/utils/service/kakaoCallback';
+/*  
+  주석 규칙
+
+  - 404 오류 처리: 
+    모든 페이지에서 발생할 수 있는 404 오류는 
+    errorElement로 처리하여 사용자에게 안내합니다.
+
+  - CRUD 관련 오류 메시지 (상황에 따라 커스텀):
+    - R (조회 실패): 
+      데이터를 불러오는 데 실패했습니다.
+
+    - U (업데이트 실패): 
+      업데이트에 실패했습니다.
+
+    - C (생성 실패): 
+      추가에 실패했습니다.
+
+    - D (삭제 실패): 
+      삭제에 실패했습니다.
+*/
+
+const baseRouter = createBrowserRouter([
+  {
+    path: '/',
+    element: <Layout />,
+    errorElement: <div>404 페이지를 찾을 수 없습니다.</div>,
+    children: [
+      {
+        path: '/',
+        element: <LandingPage />,
+        errorElement: <div>데이터를 불러오는 데 실패했습니다.</div>,
+      },
+      {
+        path: '/mypage',
+        element: <MyPage />,
+        errorElement: <div>데이터를 불러오는 데 실패했습니다.</div>,
+      },
+      {
+        path: '/edit-profile',
+        element: <EditProfile />,
+        errorElement: <div>업데이트에 실패했습니다.</div>,
+      },
+      {
+        path: '/messages',
+        element: <MessagesPage />,
+        errorElement: <div>데이터를 불러오는 데 실패했습니다.</div>,
+      },
+      {
+        path: '/messages/:messageId',
+        element: <MessageDetail />,
+        errorElement: <div>데이터를 불러오는 데 실패했습니다.</div>,
+      },
+      {
+        path: '/messages/:messageId/reply',
+        element: <ReplyMessage />,
+        errorElement: <div>메시지 전송에 실패했습니다.</div>,
+      },
+      {
+        path: '/notices',
+        element: <NoticeList />,
+        errorElement: <div>데이터를 불러오는 데 실패했습니다.</div>,
+      },
+      {
+        path: '/notices/:noticeId',
+        element: <NoticeDetail />,
+        errorElement: <div>데이터를 불러오는 데 실패했습니다.</div>,
+      },
+      {
+        path: '/share-history',
+        element: <ShareHistory />,
+        errorElement: <div>데이터를 불러오는 데 실패했습니다.</div>,
+      },
+      {
+        path: '/product/:id',
+        element: <ProductDetail />,
+        errorElement: <div>데이터를 불러오는 데 실패했습니다.</div>,
+      },
+      {
+        path: '/knowledge/:id',
+        element: <KnowledgeDetail />,
+        errorElement: <div>데이터를 불러오는 데 실패했습니다.</div>,
+      },
+      {
+        path: '/add-product',
+        element: <ProductWrite />,
+        errorElement: <div>제품 등록에 실패했습니다.</div>,
+      },
+      {
+        path: '/add-knowledge',
+        element: <KnowledgeWrite />,
+        errorElement: <div>지식 등록에 실패했습니다.</div>,
+      },
+      {
+        path: '/login',
+        element: <Login />,
+        errorElement: <div>로그인에 실패했습니다.</div>,
+      },
+      {
+        path: '/auth/kakao/callback',
+        element: <KakaoCallback />,
+        errorElement: <div>로그인에 실패했습니다.</div>,
+      },
+      {
+        path: '/signup',
+        element: <Signup />,
+        errorElement: <div>회원가입에 실패했습니다.</div>,
+      },
+      {
+        path: '/find-account-info',
+        element: <FindAccountInfo />,
+        errorElement: <div>회원가입에 실패했습니다.</div>,
+      },
+
+      // 필요한 경로를 추가
+    ],
+  },
+]);
+
+const App = () => {
+  return (
+    <AppProvider>
+      <RouterProvider router={baseRouter} />
+    </AppProvider>
+  );
+};
 
 export default App;
diff --git a/shareliving-front/src/api.js b/shareliving-front/src/api.js
diff --git a/shareliving-front/src/assets/css/base/_default.scss b/shareliving-front/src/assets/css/base/_default.scss
@@ -22,8 +22,8 @@
     --opaq: 1; // 투명도 글로벌 픽스, 텍스트 투명도 조정이 필요할 때 사용
 
     --fnt-title-xl: 2.4rem;
-    --fnt-title-lg: 1.8rem;
-    --fnt-title-md: 1.5rem;
+    --fnt-title-lg: 1.5rem;
+    --fnt-title-md: 1.2rem;
     --fnt-title-sm: 1rem;
 
     --fnt-xl: .9rem;

diff --git a/shareliving-front/src/assets/css/components/_MainSideBar.scss b/shareliving-front/src/assets/css/components/_MainSideBar.scss
@@ -0,0 +1,74 @@
+/* _MainSideBar.scss */
+
+#sideBarMain { // 메인 사이드바
+    display: flex;
+    flex-flow: column nowrap;
+    gap: .6rem;
+    width: 16rem;
+}
+
+#sideBanner { // 사이드바 이용 안내 배너
+    height: 6rem;
+}
+
+#sideNews { // 사이드바 최신 공지사항
+
+}
+
+.sidebar-news-title {
+    display: flex;
+    align-items: center;
+    padding: .8rem;
+    font-weight: 900;
+
+    > .icons {
+        width: .8rem;
+    }
+}
+
+.sidebar-news-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: .6rem;
+    padding-inline: .8rem;
+    padding-block-end: .8rem;
+}
+
+.sidebar-news-item {
+    padding: .8rem;
+    aspect-ratio: 1 / 1;
+    border: 1px solid rgb(var(--clr-text) / .15);
+    border-radius: .4rem;
+
+    &:nth-child(3n + 1) {
+        background-color: rgb(var(--clr-tint-50));
+        color: rgb(var(--clr-text-on-tint));
+    }
+
+    > a {
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-between;
+        height: 100%;
+    }
+
+    .icons {
+        margin-inline-start: auto;
+    }
+}
+
+@media screen and (max-width: 70rem) { // 1400px부터 사이드바 숨김 처리, 버튼 클릭시 사이드에서 나오도록 표시
+    #sideBarMain {
+        display: none;
+        position: fixed;
+        inset-block: 0;
+        inset-inline-end: 0;
+        margin-inline-start: auto;
+
+        &.open {
+            display: initial;
+        }
+    }
+}
+
+/* _MainSideBar.scss */
diff --git a/shareliving-front/src/assets/css/components/_buttons.scss b/shareliving-front/src/assets/css/components/_buttons.scss
@@ -1,3 +1,41 @@
 /* _buttons.scss */
 
+button {
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    outline: 0;
+    cursor: pointer;
+}
+
+#btnSideLogin { // 공통 요소 적용 안된 임시 로그인 버튼
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: .4rem;
+    width: 100%;
+    height: 3.6rem;
+    border-radius: .8rem;
+    background-color: rgb(var(--clr-theme)); // 임시
+    color: rgb(var(--clr-min));
+    font-size: 1.2rem;
+    font-weight: 900;
+}
+
+#btnTotalSearch {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 1.6rem;
+    aspect-ratio: 1 / 1;
+    border: 1px solid rgb(var(--clr-theme) / .5);
+    border-radius: .2rem;
+    background-color: rgb(var(--clr-theme));
+    color: rgb(var(--clr-text-on-tint));
+
+    > .icons {
+        width: .8rem;
+    }
+}
+
 /* _buttons.scss */