Merge pull request #18 from turkey-kim/feat/UI_gallery

Feat/UI_gallery : 갤러리 레이아웃 구현

src/App.tsx

@@ -4,6 +4,7 @@ import Home from "./pages/Home";
 import Header from "./components/Header/Header";
 import Footer from "./components/Footer/Footer";
 import Wiki from "./pages/Wiki";
+import Gallery from "./pages/Gallery";
 import "./styles/Reset.css";
 
 function App() {
@@ -15,7 +16,9 @@ function App() {
         <Route path="/wiki" element={<Wiki />}>
           <Route path=":id" element={<Wiki />} />
         </Route>
-        <Route path="/gallery" />
+        <Route path="/gallery" element={<Gallery />}>
+          <Route path=":id" element={<Gallery />} />
+        </Route>
       </Routes>
       <Footer />
     </div>

src/components/Gallery/Album.tsx

@@ -0,0 +1,30 @@
+import React, {useEffect, useState} from "react";
+import "../../styles/Gallery.css";
+import {useParams} from "react-router-dom";
+
+function Album() {
+  const {id} = useParams() as {id: string};
+  const [albumKey, setAlbumKey] = useState("");
+
+  //   앨범 선택 함수 : URL파라미터 값에 따라 앨범 선택, URL파라미터 없을 경우 1번 앨범 선택
+  const SelectAlbum = () => {
+    if (id !== undefined) {
+      setAlbumKey(id);
+    } else {
+      setAlbumKey("직원사진");
+    }
+  };
+
+  useEffect(() => {
+    SelectAlbum();
+  }, [id]);
+
+  return (
+    <div id="AlbumWrapper">
+      <h1 id="AlbumTitle">Album: {albumKey}</h1>
+      <div id="AlbumContainer">{albumKey} 앨범 정렬</div>
+    </div>
+  );
+}
+
+export default Album;

src/pages/Gallery.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import {Link} from "react-router-dom";
+import "../styles/Gallery.css";
+import Album from "../components/Gallery/Album";
+
+function Gallery() {
+  return (
+    <div className="GalleryWrapper">
+      <div className="GallerySidebar">
+        <span className="GalleryCategory">갤러리</span>
+        <div className="GalleryListWrapper">
+          <Link to="/gallery/직원사진">직원사진</Link>
+          <Link to="/gallery/협력사">협력사</Link>
+        </div>
+      </div>
+      <div className="GalleryContentSection">
+        <Album />
+      </div>
+    </div>
+  );
+}
+
+export default Gallery;

src/styles/Gallery.css

@@ -0,0 +1,86 @@
+/* src/pages/Gallery.tsx */
+
+.GalleryWrapper {
+  display: flex;
+
+  width: 100%;
+  min-height: 850px;
+}
+
+.GallerySidebar {
+  display: flex;
+  flex-direction: column;
+
+  width: 250px;
+
+  padding: 2rem 0;
+
+  background-color: #34576d;
+
+  color: white;
+}
+
+.GalleryCategory {
+  padding: 1rem;
+  margin: 0rem 0.5rem;
+
+  border-bottom: 1px solid white;
+
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.GalleryListWrapper {
+  display: flex;
+  flex-direction: column;
+
+  align-items: flex-start;
+
+  padding: 1.2rem 0rem;
+}
+
+.GalleryListWrapper > a {
+  padding: 0.6rem 1rem;
+
+  color: white;
+
+  text-align: left;
+  text-decoration: none;
+
+  cursor: pointer;
+}
+
+.GalleryListWrapper > a:hover {
+  font-weight: 600;
+
+  transition: all 0.3s;
+  transform: scale(1.07);
+}
+
+.GalleryContentSection {
+  display: flex;
+  flex-direction: column;
+
+  width: 80%;
+  height: inherit;
+
+  padding: 0.5rem;
+}
+
+/* src/components/Gallery/Album.tsx */
+
+#AlbumWrapper {
+  height: 100%;
+}
+
+#AlbumTitle {
+  padding: 1.4rem;
+
+  border-bottom: 2px solid #34576d;
+
+  text-align: left;
+}
+
+#AlbumContainer {
+  padding: 1.5rem;
+}