Merge branch 'MK11' into MK12

frontend/src/App.tsx

@@ -5,11 +5,16 @@ import { Login, Signup } from "./auth";
 import { Board } from "./board";
 import { Header, Body } from "./home";
 import Posting from "./post/posting";
+<<<<<<< HEAD
+=======
+import Layout from "./commons/layout";
+>>>>>>> MK11
 
 export const App = () => {
   return (
     <BrowserRouter>
       <Routes>
+        <Route element={<Layout />}>
           <Route path="login" element={<Login />} />
           <Route path="signup" element={<Signup />} />
           <Route path="/" element={<Header />}>
@@ -17,6 +22,7 @@ export const App = () => {
             <Route path="board" element={<Board />} />
             <Route path="posting" element={<Posting />} />
           </Route>
+        </Route>
       </Routes>
     </BrowserRouter>
   );

frontend/src/commons/layout.tsx

+import React, { ReactNode } from "react";
+import { Outlet } from "react-router-dom";
+import { AuthProvider } from "../auth/auth.context";
+
+export default function Layout() {
+  return (
+    <AuthProvider>
+      <Outlet />
+    </AuthProvider>
+  );
+}

frontend/src/home/body.tsx

@@ -3,7 +3,7 @@ import { Outlet, useSearchParams } from "react-router-dom";
 import Theme from "./theme";
 import Citylist from "../Pages/citylist";
 import { getPicure } from "../Pages/pic";
-import { PaginationLeft ,PaginationRight} from "../Pages/picpagination";
+import { PaginationLeft, PaginationRight } from "../Pages/picpagination";
 
 const initSearchParams = { theme: "", city: "" };
 
@@ -48,32 +48,50 @@ export default function Body() {
     );
   });
 
-  const pre = () =>{
-    setSelected(selected -1)
+  const pre = () => {
+    setSelected(selected - 1);
   };
 
-  const next = () =>{
-    setSelected(selected + 1)
+  const next = () => {
+    setSelected(selected + 1);
   };
 
   return (
-    <div className="flex flex-col px-1 py-1">
+    <div className="flex flex-col">
       <Theme handleClick={themeHandleClick} />
-      <div className="flex flex-col md:flex-row py-10 ">
+      <div className="flex flex-col md:flex-row py-5 ">
         <div className="w-50">
           <Citylist handleClick={cityHandleClick} />
         </div>
         <div className="flex flex-col">
           <div>
-            <button onClick={pre} disabled={selected === 1}>&lt;{selected}</button>
-            <button onClick={next} disabled={selected === 3}>&gt;</button>
+            <button onClick={pre} disabled={selected === 1}>
+              &lt;{selected}
+            </button>
+            <button onClick={next} disabled={selected === 3}>
+              &gt;
+            </button>
           </div>
-          <div >
+          <div>
             <div className=" md:mr-10 md:basis-4/5 overflow-hidden">
-              <div className=" flex flex-row transition duration-500 relative" style={{"transform": 'translate(-' + (selected-1)*100 + '%)'}}>
-                <img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
-                <img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
-                <img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
+              <div
+                className=" flex flex-row transition duration-500 relative"
+                style={{
+                  transform: "translate(-" + (selected - 1) * 100 + "%)",
+                }}
+              >
+                <img
+                  className="border-2"
+                  src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"
+                />
+                <img
+                  className="border-2"
+                  src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"
+                />
+                <img
+                  className="border-2"
+                  src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"
+                />
               </div>
             </div>
           </div>
@@ -85,8 +103,11 @@ export default function Body() {
     // Body Page
   );
 }
-{/* <div className=" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5"></div> */}
- {/* {Idpics.slice(offset, offset + limit).map((pic, index: number) => (
+{
+  /* <div className=" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5"></div> */
+}
+{
+  /* {Idpics.slice(offset, offset + limit).map((pic, index: number) => (
             <div
             className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md"
             key={index} 
@@ -97,6 +118,11 @@ export default function Body() {
                 />
                 <p className="text-center text-xs">{pic.name}</p>
                 </div>
-              ))}  */}
-              {/* <PaginationLeft total={Idpics.length} page={page} setPage={setPage} /> */}
-            {/* <PaginationRight total={Idpics.length} page={page} setPage={setPage} /> */}
\ No newline at end of file
+              ))}  */
+}
+{
+  /* <PaginationLeft total={Idpics.length} page={page} setPage={setPage} /> */
+}
+{
+  /* <PaginationRight total={Idpics.length} page={page} setPage={setPage} /> */
+}

frontend/src/home/header.tsx

-import React, { useState } from "react";
+import React, { useReducer, useState } from "react";
 import { Link, Outlet } from "react-router-dom";
 import { useAuth } from "../auth/auth.context";
 
@@ -8,56 +8,51 @@ export default function Header() {
   const { logout } = useAuth();
   return (
     <div className="flex flex-col ">
-      <div className="flex flex-row px-5 py-20 md:place-content-between">
-        <button className="px-5 py-2">
+      <div className="flex py-10 ">
+        <button className="shrink-0  mx-5">
           <Link to="/" className="hover:bg-gray-200 focus:text-purple-500">
             Travel Report
           </Link>
         </button>
-        <div className="flex flex-row-reverse">
-          <div className="px-5 py-2 bg-teal-400 rounded">
-            {localStorage.getItem("survey-user-info") ? (
+
+        <input
+          className="md:ml-20 placeholder:text-white focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 md:placeholder:text-slate-400 w-20 md:w-1/2 border-y-4 border-l-4 border-sky-500 pl-9 rounded-l-full focus:border-0"
+          placeholder="어디로 여행가고 싶나요?"
+        />
+        <button className="shrink-0 border-y-4  border-r-4 border-sky-500 rounded-r-full pr-4">
+          검색
+        </button>
+
+        <div className="shrink-0 p-3 md:ml-52 border-r-2 h-12">
+          {useAuth().user.isLoggedIn ? (
             <button
               onClick={() => {
                 logout();
               }}
             >
-                Logout
+              로그아웃
             </button>
           ) : (
-              <button>
-                <Link to="/login">Login</Link>
+            <button className="shrink-0 bg-white ">
+              <Link
+                className="hover:bg-purple-300 focus:text-purple-500"
+                to="/login"
+              >
+                로그인
+              </Link>
             </button>
           )}
         </div>
-
-          <button className="px-5 py-2 bg-purple-400 rounded">
+        <button className="shrink-0 p-3 bg-white ">
           <Link
             to="/board"
-              className="hover:bg-purple-300 focus:text-purple-500 "
+            className="hover:bg-purple-300 focus:text-purple-500"
           >
-              Board
+            게시판
           </Link>
         </button>
-          <div>
-            <label>
-              {/* <span className="sr-only">Search</span> */}
-              <span className="absolute inset-y-0 left-0 flex items-center pl-2">
-                <svg
-                  className="h-5 w-5 fill-slate-300"
-                  viewBox="0 0 20 20"
-                ></svg>
-              </span>
-              <input
-                className="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
-                placeholder="Search for anything..."
-                type="text"
-                name="search"
-              />
-            </label>
-          </div>
-        </div>
       </div>
+
       <Outlet />
     </div>
   );

frontend/src/home/theme.tsx

-import React, { useEffect, MouseEvent, MouseEventHandler } from "react";
-import { Outlet, useSearchParams } from "react-router-dom";
+import React, { MouseEventHandler } from "react";
 
 type ThemeProps = {
   handleClick: MouseEventHandler;
-}
+};
 
-export default function Theme({handleClick}: ThemeProps) {
+export default function Theme({ handleClick }: ThemeProps) {
   return (
-    <div className="overflow-x-scroll flex bg-emerald-400 rounded ">
-      <button id={"surfing"} onClick={handleClick} className="shrink-0 px-5">서핑</button>
-      <button id={"activity"} onClick={handleClick} className="shrink-0 px-5">액티비티</button>
-      <button id={"camping"} onClick={handleClick} className="shrink-0 px-5 ">캠핑</button>
-      <button id={"sking"} onClick={handleClick} className="shrink-0 px-5">스키</button>
-      <button id={"boat"} onClick={handleClick} className="shrink-0 px-5">보트</button>
-      <button id={"desert"} onClick={handleClick} className="shrink-0 px-5">사막</button>
-      <button id={"golf"} onClick={handleClick} className="shrink-0 px-5">골프</button>
-      <button id={"cave"} onClick={handleClick} className="shrink-0 px-5">동굴</button>
-      <button id={"history"} onClick={handleClick} className="shrink-0 px-5">문화재</button>
-      <button id={"zoo"} onClick={handleClick} className="shrink-0 px-5">동물원</button>
-      <button id={"cycling"} onClick={handleClick} className="shrink-0 px-5">사이클링</button>
+    <div className="flex overflow-x-auto bg-emerald-400 md:px-52 ">
+      <button
+        id={"surfing"}
+        onClick={handleClick}
+        className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
+      >
+        서핑
+      </button>
+      <button
+        id={"activity"}
+        onClick={handleClick}
+        className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
+      >
+        액티비티
+      </button>
+      <button
+        id={"camping"}
+        onClick={handleClick}
+        className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
+      >
+        캠핑
+      </button>
+      <button
+        id={"sking"}
+        onClick={handleClick}
+        className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
+      >
+        스키
+      </button>
+      <button
+        id={"boat"}
+        onClick={handleClick}
+        className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
+      >
+        보트
+      </button>
+      <button
+        id={"desert"}
+        onClick={handleClick}
+        className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
+      >
+        사막
+      </button>
+      <button
+        id={"golf"}
+        onClick={handleClick}
+        className="hover:underline underline-offset-4 decoration-white  px-5 shrink-0"
+      >
+        골프
+      </button>
+      <button
+        id={"cave"}
+        onClick={handleClick}
+        className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
+      >
+        동굴
+      </button>
+      <button
+        id={"history"}
+        onClick={handleClick}
+        className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
+      >
+        문화재
+      </button>
+      <button
+        id={"zoo"}
+        onClick={handleClick}
+        className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
+      >
+        동물원
+      </button>
+      <button
+        id={"cycling"}
+        onClick={handleClick}
+        className="hover:underline underline-offset-4 decoration-white px-5 shrink-0"
+      >
+        사이클링
+      </button>
     </div>
   );
-};
\ No newline at end of file
+}

frontend/src/index.tsx

@@ -8,8 +8,8 @@ const root = createRoot(container!);
 
 root.render(
   <React.StrictMode>
-    <AuthProvider>
+    {/* <AuthProvider> */}
     <App />
-    </AuthProvider>
+    {/* </AuthProvider> */}
   </React.StrictMode>
 );

frontend/src/pages/citylist.tsx

 import React, { MouseEventHandler } from "react";
 
-
 type CityProps = {
   handleClick: MouseEventHandler;
-}
+};
 
-export default function Citylist({handleClick}: CityProps) {
+export default function Citylist({ handleClick }: CityProps) {
   return (
-    <div className="overflow-auto flex flex-row mb-10 md:flex-col md:basis-1/5 md:mr-10 bg-gray-400 rounded ">
-      <button id={"Seoul"} onClick={handleClick} className="shrink-0 px-5 hover:underline">seoul</button>
-      <button id={"Busan"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Busan</button>
-      <button id={"Incheon"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Incheon</button>
-      <button id={"Daegoo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Daegoo</button>
-      <button id={"Kwangjoo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Kwangjoo</button>
-      <button id={"Daejeon"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Daejeon</button>
-      <button id={"Woolsan"} onClick={handleClick} className="shrink-0 px-5 hover:underline">woolsan</button>
-      <button id={"Sejong"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Sejong</button>
-      <button id={"Dokdo"} onClick={handleClick} className="shrink-0 px-5 hover:underline">Dokdo</button>
-      <button id={"Jeju"} onClick={handleClick} className="shrink-0 px-5 hover:underline">jeju</button>
+    <div className="overflow-auto w-full flex flex-row md:flex-col md:mr-24 bg-gray-400">
+      <div className="text-center px-5 py-2 bg-red-400 shrink-0">도시</div>
+      <button
+        id={"Seoul"}
+        onClick={handleClick}
+        className="px-5 py-2 hover:underline shrink-0"
+      >
+        서울
+      </button>
+      <button
+        id={"Busan"}
+        onClick={handleClick}
+        className="px-5 py-2 hover:underline shrink-0"
+      >
+        부산
+      </button>
+      <button
+        id={"Incheon"}
+        onClick={handleClick}
+        className="px-5 py-2 hover:underline shrink-0"
+      >
+        인천
+      </button>
+      <button
+        id={"Daegoo"}
+        onClick={handleClick}
+        className="px-5 py-2 hover:underline shrink-0"
+      >
+        대구
+      </button>
+      <button
+        id={"Kwangjoo"}
+        onClick={handleClick}
+        className="px-5 py-2 hover:underline shrink-0"
+      >
+        광주
+      </button>
+      <button
+        id={"Daejeon"}
+        onClick={handleClick}
+        className="px-5 py-2 hover:underline shrink-0"
+      >
+        대전
+      </button>
+      <button
+        id={"Woolsan"}
+        onClick={handleClick}
+        className="px-5 py-2 hover:underline shrink-0"
+      >
+        울산
+      </button>
+      <button
+        id={"Sejong"}
+        onClick={handleClick}
+        className="px-5 py-2 hover:underline shrink-0"
+      >
+        세종
+      </button>
+      <button
+        id={"Dokdo"}
+        onClick={handleClick}
+        className="px-5 py-2 hover:underline shrink-0"
+      >
+        독도
+      </button>
+      <button
+        id={"Jeju"}
+        onClick={handleClick}
+        className="px-5 py-2 hover:underline shrink-0"
+      >
+        제주
+      </button>
       {/* citylist */}
-    </div> // Citylist Page
+    </div>
+    // Citylist Page
   );
-};
\ No newline at end of file
+}