[feature] 관리자 페이지 UI 변경에 따른 사이드바 및 레이아웃 수정

frontend/src/components/common/InputField/InputField.styles.ts

@@ -13,7 +13,7 @@ export const InputContainer = styled.div<{ width: string; readOnly?: boolean }>`
 
 export const Label = styled.label`
   font-size: 1.125rem;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
   font-weight: 600;
 `;
 
@@ -23,13 +23,17 @@ export const InputWrapper = styled.div`
   align-items: center;
 `;
 
-export const Input = styled.input<{ hasError?: boolean; readOnly?: boolean; isSuccess?: boolean; }>`
+export const Input = styled.input<{
+  hasError?: boolean;
+  readOnly?: boolean;
+  isSuccess?: boolean;
+}>`
   flex: 1;
   height: 45px;
   padding: 12px 18px;
   border: 1px solid
     ${({ hasError, isSuccess }) =>
-    hasError ? 'red' : isSuccess ? '#28a745' : '#c5c5c5'};
+      hasError ? 'red' : isSuccess ? '#28a745' : '#c5c5c5'};
   background-color: transparent;
   border-radius: 6px;
   outline: none;
@@ -50,10 +54,10 @@ export const Input = styled.input<{ hasError?: boolean; readOnly?: boolean; isSu
       readOnly
         ? '#c5c5c5'
         : hasError
-        ? 'red'
-        : isSuccess
-        ? '#28a745'
-        : '#007bff'};
+          ? 'red'
+          : isSuccess
+            ? '#28a745'
+            : '#007bff'};
     ${({ readOnly }) => readOnly && 'cursor: pointer;'}
   }
 
@@ -65,7 +69,7 @@ export const Input = styled.input<{ hasError?: boolean; readOnly?: boolean; isSu
     color: rgba(0, 0, 0, 0.3);
     transition: color 0.25s ease;
   }
-  
+
   &:focus::placeholder {
     color: transparent;
   }
@@ -125,4 +129,3 @@ export const HelperText = styled.div`
   white-space: nowrap;
   z-index: 1;
 `;
-

frontend/src/pages/AdminPage/AdminPage.styles.ts

@@ -1,24 +1,23 @@
 import styled from 'styled-components';
-
-export const AdminPageContainer = styled.div`
-  display: flex;
-  margin-top: 98px;
-  align-items: flex-start;
+export const Background = styled.div`
+  background-color: #f2f2f2;
+  min-height: 100vh;
 `;
 
-export const Divider = styled.div`
-  position: sticky;
-  top: 98px;
-  width: 1px;
-  height: calc(100vh - 98px);
-  background-color: #dcdcdc;
-  margin: 0 34px;
-  flex-shrink: 0;
+export const Layout = styled.div`
+  display: flex;
+  gap: 30px;
+  max-width: 1180px;
+  margin: 0 auto;
+  width: 100%;
+  padding-top: 110px;
 `;
 
-
-export const Content = styled.main`
+export const MainContent = styled.main`
   width: 100%;
-  max-width: 977px;
-  padding: 62px 58px;
+  max-width: 960px;
+  background-color: #ffffff;
+  padding: 54px;
+  border-radius: 20px;
+  margin-bottom: 50px;
 `;

frontend/src/pages/AdminPage/AdminPage.tsx

@@ -1,11 +1,10 @@
 import Header from '@/components/common/Header/Header';
-import { PageContainer } from '@/styles/PageContainer.styles';
 import SideBar from '@/pages/AdminPage/components/SideBar/SideBar';
 import { Outlet } from 'react-router-dom';
-import * as Styled from './AdminPage.styles';
+
 import { useGetClubDetail } from '@/hooks/queries/club/useGetClubDetail';
 import { useAdminClubContext } from '@/context/AdminClubContext';
-import { Divider } from './components/SideBar/SideBar.styles';
+import * as Styled from './AdminPage.styles';
 
 const AdminPage = () => {
   const { clubId } = useAdminClubContext();
@@ -20,18 +19,14 @@ const AdminPage = () => {
   return (
     <>
       <Header />
-      <PageContainer>
-        <Styled.AdminPageContainer>
-          <SideBar
-            clubLogo={clubDetail?.logo}
-            clubName={clubDetail?.name || ''}
-          />
-          <Styled.Divider />
-          <Styled.Content>
+      <Styled.Background>
+        <Styled.Layout>
+          <SideBar />
+          <Styled.MainContent>
             <Outlet context={clubDetail} />
-          </Styled.Content>
-        </Styled.AdminPageContainer>
-      </PageContainer>
+          </Styled.MainContent>
+        </Styled.Layout>
+      </Styled.Background>
     </>
   );
 };

frontend/src/pages/AdminPage/components/ClubLogoEditor/ClubLogoEditor.styles.ts

@@ -1,81 +1,83 @@
 import styled from 'styled-components';
 
+export const Label = styled.label`
+  display: block;
+  padding: 0 4px;
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 4px;
+`;
+
+export const ContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+
 export const ClubLogoWrapper = styled.div`
   position: relative;
-  width: 168px;
-  height: 168px;
+  width: 100px;
+  height: 100px;
 `;
 
 export const ClubLogo = styled.img`
-  width: 168px;
-  height: 168px;
+  width: 100px;
+  height: 100px;
   background: #ededed;
-  border-radius: 10px;
+  border-radius: 20px;
   object-fit: cover;
 `;
 
-export const EditButton = styled.button`
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  outline: none;
-  border-radius: 50%;
+export const ButtonTextGroup = styled.div`
   display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  img {
-    width: 24px;
-    height: 24px;
-  }
+  flex-direction: column;
+  gap: 6px;
 `;
 
-export const EditMenu = styled.div`
-  position: absolute;
-  left: 100%;
-  transform: translateY(-50%);
-  margin-left: 8px;
-  background: #fff;
-  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.4);
-  border-radius: 18px;
-  overflow: hidden;
-  min-width: 160px;
-  z-index: 2;
+export const ButtonGroup = styled.div`
+  display: flex;
+  gap: 6px;
 `;
 
-export const EditMenuItem = styled.button`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
+export const UploadButton = styled.button`
+  padding: 10px 20px;
+  border: 1px solid #ff6b35;
+  border-radius: 80px;
   background: white;
-  border: none;
-  font-size: 16px;
-  color: #333;
+  color: #ff6b35;
+  font-size: 12px;
+  line-height: 140%;
+  font-weight: 600;
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: all 0.2s;
 
   &:hover {
-    background-color: #f1f1f1;
+    background: #ff6b35;
+    color: white;
   }
+`;
 
-  img {
-    width: 15px;
-    height: 15px;
+export const ResetButton = styled.button`
+  padding: 10px 20px;
+  border: 1px solid #999;
+  border-radius: 80px;
+  background: white;
+  color: #999;
+  font-size: 12px;
+  line-height: 140%;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: #999;
+    color: white;
   }
 `;
 
-export const Divider = styled.div`
-  width: 90%;
-  height: 1px;
-  background: rgba(0, 0, 0, 0.12);
-  margin: 0 auto;
+export const HelpText = styled.p`
+  font-size: 12px;
+  color: #c5c5c5;
 `;
 
 export const HiddenFileInput = styled.input`