Merge pull request #116 from KUIT-MAPU/feat/114-UserPage-styling

Feat/114 user page styling
KUIT-MAPU · Aug 13, 2024 · e81e083 · e81e083
2 parents df96dcb + 334ccd2
commit e81e083
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 14 deletions.
diff --git a/src/components/global/GlobalNavigationBar.module.scss b/src/components/global/GlobalNavigationBar.module.scss
@@ -60,6 +60,7 @@
 
 .bottomIconContainer {
   margin-top: auto;
+  cursor: pointer;
 }
 
 .authContainer {

diff --git a/src/components/global/GlobalNavigationBar.tsx b/src/components/global/GlobalNavigationBar.tsx
@@ -89,7 +89,6 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
           <Login className={styles.icon} onClick={handleLoginClick} />
         </div>
       </div>
-      <main className={styles.main}>{props.children}</main>
       {isOverlayVisible && (
         <>
           <div onClick={handleClose} />

diff --git a/src/components/userProfile/EmptyUser.module.scss b/src/components/userProfile/EmptyUser.module.scss
@@ -72,6 +72,7 @@
   justify-content: space-evenly;
   margin-left: 16px;
   border: 1px solid var(--gray_50);
+  border-radius: 8px;
 }
 
 .newMap {

diff --git a/src/components/userProfile/GetUser.module.scss b/src/components/userProfile/GetUser.module.scss
@@ -26,8 +26,8 @@
 }
 
 .square {
-  width: 48px; /* 정사각형의 너비 */
-  height: 48px; /* 정사각형의 높이 */
+  width: 48px; 
+  height: 48px; 
   display: flex;
   align-items: center;
   justify-content: center;
@@ -38,8 +38,32 @@
   margin-left: 28px;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: row;
+  padding: 10px;
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 33px;
+  color: var(--black);
+  gap: 12px;
+  cursor: pointer;
+}
+
+.dropdown {
+  top: 100%;
+  width: 100%;
+  max-height: 150px; 
+  background-color: white;
+  border: 1px solid var(--gray_400);
+  border-radius: 4px;
+  z-index: 1000; 
+}
+
+.dropdownItem {
   padding: 10px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--gray_100); /* 마우스 오버 시 배경색 변경 */
+  }
 }
 
 .middleBar {
@@ -55,23 +79,66 @@
   width: 1250px;
   align-items: center;
   justify-content: flex-start;
-  color: var(--gray_400);
   background-color: var(--gray_50);
 }
 
 .search {
   display: flex;
+  width: 100%;
+  height: 100%;
   align-items: center;
   margin-left: 20px;
 }
 
+.searchInput {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 27px;
+  margin-left: 8px;
+  color: black;
+
+  &::placeholder {
+    color: var(--gray_400); 
+  }
+}
+
 .contentView {
   display: flex;
   width: 94px;
   align-items: center;
   justify-content: space-evenly;
   margin-left: 16px;
   border: 1px solid var(--gray_50);
+  border-radius: 8px;
+}
+
+.iconButton {
+  background-color: var(--white); // 기본 배경색
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 8px; // 버튼을 정사각형으로 만들기 위해 적용
+
+  svg {
+    width: 24px;
+    height: 24px;
+    fill: var(--gray_500); // 기본 SVG 색상
+  }
+}
+
+.activeView {
+  background-color: var(--gray_50);
 }
 
 .newMap {

diff --git a/src/components/userProfile/GetUser.tsx b/src/components/userProfile/GetUser.tsx
@@ -15,10 +15,12 @@ import { ReactComponent as CreatMap } from '../../assets/btn_map_create.svg';
 import NewMap from './getNewMap/NewMap';
 
 const GetUser = (props: { children?: React.ReactNode }) => {
-  const [searchQuery, setSearchQuery] = useState('');
   const [view, setView] = useState('gallery'); //gallery를 기본으로 설정
   const [isNewMapOpen, setIsNewMapOpen] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
+  const [mapTitle, setMapTitle] = useState<string>('');
+  const [mapCategory,setMapCategory] = useState<string>('edited');
+  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
 
   const placeholderImage = 'https://via.placeholder.com/150';
 
@@ -30,6 +32,15 @@ const GetUser = (props: { children?: React.ReactNode }) => {
     setIsNewMapOpen(false);
   };
 
+  const toggleDropdown = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  }
+
+  const selectCategory = (category : string) => {
+    setMapCategory(category);
+    setIsDropdownOpen(false);
+  }
+
   const listMapData = [
     {
       id: 1,
@@ -146,33 +157,43 @@ const GetUser = (props: { children?: React.ReactNode }) => {
           </div>
         </div>
       </div>
-      <div className={styles.btnTitle}>
-        편집 가능한 지도
+      <button className={styles.btnTitle} onClick={toggleDropdown}>
+        {mapCategory === 'edited' ? '편집 가능한 지도' : '북마크한 지도'}
         <DownArrow />
-      </div>
+      </button>
+      {isDropdownOpen && (
+          <div className={styles.dropdown}>
+            <div onClick={() => selectCategory('edited')} className={styles.dropdownItem}>
+              편집 가능한 지도
+            </div>
+            <div onClick={() => selectCategory('bookmarked')} className={styles.dropdownItem}>
+              북마크한 지도
+            </div>
+          </div>
+        )}
       <div className={styles.middleBar}>
         <div className={styles.searchBar}>
           <div className={styles.search}>
             <Search />
             <input
               type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
+              className={styles.searchInput}
+              value={mapTitle}
+              onChange={(e) => setMapTitle(e.target.value)}
               placeholder="검색"
-              className={styles.search}
             />
           </div>
         </div>
         <div className={styles.contentView}>
           <button
             onClick={() => setView('gallery')}
-            className={view === 'gallery' ? styles.active : ''}
+            className={`${styles.iconButton} ${view === 'gallery' ? styles.activeView : ''}`}
           >
             <Gallery />
           </button>
           <button
             onClick={() => setView('list')}
-            className={view === 'list' ? styles.active : ''}
+            className={`${styles.iconButton} ${view === 'list' ? styles.activeView : ''}`}
           >
             <List />
           </button>

diff --git a/src/components/userProfile/UserInfoBar.module.scss b/src/components/userProfile/UserInfoBar.module.scss
@@ -73,6 +73,7 @@
   justify-content: space-around;
   gap: 10px;
   align-items: center;
+  cursor: pointer;
 }
 
 .UserProfilBox {
@@ -99,6 +100,7 @@
   align-items: center;
   justify-content: center;
   text-align: center;
+  cursor: pointer;
 }
 
 .authContainer {