Merge pull request #178 from KNU-HAEDAL/Fix/issue-#177-1

shorts UI 수정

package.json

@@ -4,9 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc && vite build",
-    "port": "vite --host 0.0.0.0 --port 5173",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

src/pages/shorts/components/contents/index.tsx

@@ -22,5 +22,5 @@ export default ShortsContents;
 const ShortsContentsBox = styled.div`
   display: flex;
   flex-direction: column;
-  margin: 1rem 1rem;
+  margin: 0.5rem 1rem;
 `;

src/pages/shorts/components/image/index.tsx

@@ -1,20 +1,8 @@
-import ChallengeImg from '@/assets/challenge/Challenge-Img.png';
+import ChallengeImg from '@/assets/shorts/shorts-img.png';
 import { Image } from '@chakra-ui/react';
-import styled from '@emotion/styled';
 
 const ShortsImage = () => {
-  return (
-    <>
-      <ShortsImageBox>
-        <Image width='100%' src={ChallengeImg} />
-      </ShortsImageBox>
-    </>
-  );
+  return <Image objectFit='cover' src={ChallengeImg} />;
 };
 
 export default ShortsImage;
-
-export const ShortsImageBox = styled.div`
-  display: flex;
-  margin: 1rem 0;
-`;

src/pages/shorts/components/info/category-icons.tsx

@@ -31,7 +31,8 @@ export default CategoryIcon;
 
 const ShortsInfoIconBox = styled.div<{ borderColor: string }>`
   display: flex;
-  padding: 0.75rem;
+  width: 4rem;
+  height: 3.25rem;
   align-items: center;
   justify-content: center;
   border-radius: 100%;

src/pages/shorts/components/info/index.tsx

@@ -54,6 +54,7 @@ export const ShortsInfoLayout = styled.div`
   flex-direction: row;
   margin-left: 1rem;
   align-items: center;
+  padding: 2rem 0;
 `;
 
 export const ShortsInfoTextBox = styled.div`
@@ -71,7 +72,8 @@ export const ShortsStartBox = styled.div`
   align-items: center;
   text-align: center;
   border-radius: 100%;
-
+  width: 3rem;
+  height: 3rem;
   background-color: #5cc6ba;
-  padding: 1rem;
+  /* padding: 1rem; */
 `;

src/pages/shorts/index.tsx

@@ -69,7 +69,6 @@ const Shorts = () => {
     }))
   );
 
-  console.log(data?.data.data);
   return (
     <>
       <TopBar type='Page' title='' backgroundColor='var(--color--green-06)' />
@@ -109,9 +108,10 @@ const Shorts = () => {
 export default Shorts;
 
 const ShortsLayout = styled.div`
-  height: 100vh;
+  height: 80vh;
   display: flex;
   flex-direction: column;
+  gap: auto;
 `;
 
 const SwiperBox = styled(Swiper)`

src/routes/index.tsx

@@ -61,6 +61,14 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: RouterPath.shorts,
+        element: (
+          <ProtectedRoute>
+            <ShortsPage />
+          </ProtectedRoute>
+        ),
+      },
       {
         path: RouterPath.rank,
         element: (
@@ -120,10 +128,7 @@ const router = createBrowserRouter([
       },
     ],
   },
-  {
-    path: RouterPath.shorts,
-    element: <ShortsPage />,
-  },
+
   {
     path: RouterPath.login,
     element: <LoginPage />,