feat: sideBar 반응형 디자인

src/components/Molcules/SideBar/ChannelContainer.tsx

@@ -3,15 +3,14 @@ import ChannelItem from './ChannelItem';
 import useGetMyChannel from '../../../../apis/hooks/useGetMyChannel';
 import { useUserStore } from '../../../store/useUserStore';
 import { useParams } from 'react-router-dom';
-import { UserId } from '../../../types/user';
 
 interface ChannelContainerProps {
   isOpen: boolean;
 }
 
 export default function ChannelContainer({ isOpen }: ChannelContainerProps) {
   const { user } = useUserStore();
-  const userId = user?.id as UserId;
+  const userId = user?.id;
   const { data: channelList, error, isLoading } = useGetMyChannel(userId);
 
   // channelId
@@ -43,4 +42,8 @@ const Container = styled.div`
   &::-webkit-scrollbar {
     display: none;
   }
+
+  @media (max-width: 1024px) {
+    margin-top: 8px;
+  }
 `;

src/components/Molcules/SideBar/ChannelItem.tsx

@@ -14,12 +14,12 @@ export default function ChannelItem({ channel, isOpen, isCurrentChannel }: SideB
 
   return (
     <Wrapper to={`/main/channel/${channel.id}`} $isCurrentChannel={isCurrentChannel}>
-      <ChannelImageBox>
+      <ImageWrapper>
         <img src={channel.image === '' ? playListToggle() : channel.image} alt='채널 이미지' />
-      </ChannelImageBox>
-      <ChannelName $isOpen={isOpen} $isCurrentChannel={isCurrentChannel}>
+      </ImageWrapper>
+      <Name $isOpen={isOpen} $isCurrentChannel={isCurrentChannel}>
         {channel.name ? channel.name : ''}
-      </ChannelName>
+      </Name>
     </Wrapper>
   );
 }
@@ -38,6 +38,7 @@ const Wrapper = styled(Link)<{ $isCurrentChannel: boolean }>`
   background-color: ${(props) => (props.$isCurrentChannel ? 'var(--mint7)' : 'transparent')};
   box-shadow: ${(props) => (props.$isCurrentChannel ? '0 0 5px var(--mint5)' : 'none')};
   padding: 8px;
+  padding-left: 6px;
 
   cursor: pointer;
 
@@ -46,7 +47,7 @@ const Wrapper = styled(Link)<{ $isCurrentChannel: boolean }>`
   }
 `;
 
-const ChannelImageBox = styled.div`
+const ImageWrapper = styled.div`
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -62,7 +63,7 @@ const ChannelImageBox = styled.div`
   }
 `;
 
-const ChannelName = styled.div<{ $isOpen: boolean; $isCurrentChannel: boolean }>`
+const Name = styled.div<{ $isOpen: boolean; $isCurrentChannel: boolean }>`
   width: 100%;
 
   display: ${(props) => (props.$isOpen ? 'block' : 'none')};
@@ -73,4 +74,8 @@ const ChannelName = styled.div<{ $isOpen: boolean; $isCurrentChannel: boolean }>
   text-overflow: ellipsis;
 
   cursor: pointer;
+
+  @media (max-width: 1024px) {
+    display: none;
+  }
 `;

src/components/Molcules/SideBar/NavigatorItem.tsx

@@ -71,4 +71,8 @@ const Name = styled.div<{ $isOpen: boolean; $isFocused: boolean }>`
   text-overflow: ellipsis;
 
   cursor: pointer;
+
+  @media (max-width: 1024px) {
+    display: none;
+  }
 `;

src/components/Molcules/SideBar/SideBarToggleButton.tsx

@@ -35,4 +35,8 @@ const Button = styled.button`
     object-fit: cover;
     cursor: pointer;
   }
+
+  @media (max-width: 1024px) {
+    display: none;
+  }
 `;

src/components/Organisms/Content/ChannelContainer.tsx

@@ -42,16 +42,21 @@ const Wrapper = styled.div`
 
 const Container = styled.ul`
   display: grid;
-  grid-template-columns: repeat(5, 25%);
-  gap: 24px 24px;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 16px;
 
   padding: 24px;
 
+  @media (max-width: 1440px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
   @media (max-width: 1024px) {
-    grid-template-columns: repeat(2, 50%);
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
   }
 
   @media (max-width: 768px) {
-    grid-template-columns: repeat(1, 100%);
+    grid-template-columns: repeat(1, 1fr);
   }
 `;

src/components/Organisms/SiderBar/SideBar.tsx

@@ -58,6 +58,10 @@ const Wrapper = styled.div<{
   }
 
   transition: width 0.3s;
+
+  @media (max-width: 1024px) {
+    width: 72px;
+  }
 `;
 
 const Header = styled.div`
@@ -82,4 +86,8 @@ const CartegoryName = styled.div<{
   color: var(--grey-grey600);
 
   cursor: default;
+
+  @media (max-width: 1024px) {
+    display: none;
+  }
 `;

src/pages/Landing/LandingPage.tsx

@@ -15,7 +15,6 @@ export default function LandingPage() {
         <Logo>
           <img src={logo} alt='로고 이미지' />
         </Logo>
-        <Description>같이 노래 듣자!</Description>
         <StartButton onClick={handleStartButtonClick}>Start!</StartButton>
       </Box>
     </Wrapper>
@@ -61,13 +60,6 @@ const Logo = styled.div`
   }
 `;
 
-const Description = styled.p`
-  font-size: 16px;
-  color: var(--grey-grey600);
-
-  margin-top: 24px;
-`;
-
 const StartButton = styled.button`
   border: 2px solid var(--mint7);
   border-radius: 16px;

src/router/index.tsx

@@ -1,6 +1,5 @@
 import { Route, Routes } from 'react-router-dom';
 import SignInPage from '../pages/Signin/SignInPage';
-import SignUpPage from '../pages/SignUp/SignUpPage';
 import LandingPage from '../pages/Landing/LandingPage';
 import NotFoundPage from '../pages/NotFound/NotFoundPage';
 import MainPage from '../pages/Main/MainPage';
@@ -14,7 +13,6 @@ export default function Router() {
     <Routes>
       <Route path='/' element={<LandingPage />} />
       <Route path='/signIn' element={<SignInPage />} />
-      <Route path='/signUp' element={<SignUpPage />} />
       <Route path='/main' element={<MainPage />}>
         <Route path='/main' element={<ChannelContainer />} />
         <Route path='/main/channel/:channelId' element={<Channel />} />