From 3e7bce9364092870085574c7001af40be69f2402 Mon Sep 17 00:00:00 2001 From: RSuhyeon Date: Wed, 1 Nov 2023 15:07:16 +0900 Subject: [PATCH] =?UTF-8?q?=EC=BB=A8=ED=85=90=EC=B8=A0=20=EC=97=86?= =?UTF-8?q?=EC=9D=8C=20=ED=91=9C=EC=8B=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20UI=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front-end/components/MyPage/Layout.tsx | 59 ------- front-end/components/MyPage/MyQna.tsx | 2 +- front-end/styles/output.css | 223 +++++-------------------- 3 files changed, 45 insertions(+), 239 deletions(-) delete mode 100644 front-end/components/MyPage/Layout.tsx diff --git a/front-end/components/MyPage/Layout.tsx b/front-end/components/MyPage/Layout.tsx deleted file mode 100644 index 4d4002ea..00000000 --- a/front-end/components/MyPage/Layout.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; - -interface LayoutProps { - children?: React.ReactNode; -} -interface LinkProps { - isThisPage: boolean; -} - -const myPage = '/my-page'; - -const MENU = [ - { title: 'DASHBOARD', path: myPage }, - { title: '내 알림보기/알림 설정', path: myPage + '/notification' }, - { title: '최근 내 질문', path: myPage + '/question' }, - { title: '최근 학습중인 강좌/강의', path: myPage + '/learning' }, - { title: '완료한 강좌', path: myPage + '/complete' }, - { title: '학습 통계', path: myPage + '/statistics' }, - { title: 'My Skills', path: myPage + '/skills' }, - { title: 'My Certificates', path: myPage + '/certificates' }, -]; - -const Layout = ({ children }: LayoutProps) => { - const router = useRouter(); - - return ( -
-
-
    - {MENU.map((ele) => { - const isThisPage = ele.path === router.pathname; - - return ( -
  • - - - {ele.title} - - -
    • - ); - })} -
-
-
{children}
-
- ); -}; - -export default Layout; diff --git a/front-end/components/MyPage/MyQna.tsx b/front-end/components/MyPage/MyQna.tsx index f4c5f66e..75d28618 100644 --- a/front-end/components/MyPage/MyQna.tsx +++ b/front-end/components/MyPage/MyQna.tsx @@ -23,7 +23,7 @@ const MyQnA = () => { if (qna.length === 0) return (
-
+
첫 질문을 올려주세요 !
:not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); @@ -1689,21 +1625,16 @@ video { border-radius: 0.75rem; } -.rounded-t-lg { - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -.rounded-t-xl { - border-top-left-radius: 0.75rem; - border-top-right-radius: 0.75rem; -} - .rounded-b-lg { border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } +.rounded-t-lg { + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + .rounded-bl-lg { border-bottom-left-radius: 0.5rem; } @@ -1952,6 +1883,10 @@ video { background-color: var(--color-Surface); } +.bg-\[var\(--color-mrgreen-5\)\] { + background-color: var(--color-mrgreen-5); +} + .bg-\[var\(--color-mrgreen-7\)\] { background-color: var(--color-mrgreen-7); } @@ -2006,22 +1941,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-\[var\(--color-mrgreen-4\)\] { - background-color: var(--color-mrgreen-4); -} - -.bg-\[var\(--color-mrgreen-8\)\] { - background-color: var(--color-mrgreen-8); -} - -.bg-\[var\(--color-mrgreen-6\)\] { - background-color: var(--color-mrgreen-6); -} - -.bg-\[var\(--color-mrgreen-5\)\] { - background-color: var(--color-mrgreen-5); -} - .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } @@ -2236,11 +2155,6 @@ video { padding-bottom: 2rem; } -.py-\[10px\] { - padding-top: 10px; - padding-bottom: 10px; -} - .py-\[18px\] { padding-top: 18px; padding-bottom: 18px; @@ -2535,10 +2449,6 @@ video { line-height: 1.25rem; } -.leading-\[1\.6rem\] { - line-height: 1.6rem; -} - .leading-\[1\.7\] { line-height: 1.7; } @@ -2547,10 +2457,6 @@ video { line-height: 49px; } -.tracking-wide { - letter-spacing: 0.025em; -} - .text-\[\#086ac5\] { --tw-text-opacity: 1; color: rgb(8 106 197 / var(--tw-text-opacity)); @@ -2695,6 +2601,11 @@ video { color: var(--color-onSurface); } +.text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + .text-black\/\[0\.5\] { color: rgb(0 0 0 / 0.5); } @@ -2728,6 +2639,10 @@ video { opacity: 0; } +.opacity-25 { + opacity: 0.25; +} + .opacity-40 { opacity: 0.4; } @@ -2752,30 +2667,6 @@ video { opacity: 1.0; } -.opacity-50 { - opacity: 0.5; -} - -.opacity-90 { - opacity: 0.9; -} - -.opacity-10 { - opacity: 0.1; -} - -.opacity-30 { - opacity: 0.3; -} - -.opacity-25 { - opacity: 0.25; -} - -.opacity-20 { - opacity: 0.2; -} - .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -2794,12 +2685,6 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow-2xl { - --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); - --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .outline-none { outline: 2px solid transparent; outline-offset: 2px; @@ -2921,9 +2806,9 @@ input::-webkit-inner-spin-button { background-color: rgb(185 199 173 / var(--tw-bg-opacity)); } -.hover\:bg-\[\#e2e2e2\]:hover { +.hover\:bg-\[\#cacaca\]:hover { --tw-bg-opacity: 1; - background-color: rgb(226 226 226 / var(--tw-bg-opacity)); + background-color: rgb(202 202 202 / var(--tw-bg-opacity)); } .hover\:bg-\[\#eaeaea\]:hover { @@ -2961,26 +2846,6 @@ input::-webkit-inner-spin-button { background-color: rgb(226 232 240 / var(--tw-bg-opacity)); } -.hover\:bg-\[\#3a3a3a\]:hover { - --tw-bg-opacity: 1; - background-color: rgb(58 58 58 / var(--tw-bg-opacity)); -} - -.hover\:bg-\[\#6a6a6a\]:hover { - --tw-bg-opacity: 1; - background-color: rgb(106 106 106 / var(--tw-bg-opacity)); -} - -.hover\:bg-\[\#aaaaaa\]:hover { - --tw-bg-opacity: 1; - background-color: rgb(170 170 170 / var(--tw-bg-opacity)); -} - -.hover\:bg-\[\#cacaca\]:hover { - --tw-bg-opacity: 1; - background-color: rgb(202 202 202 / var(--tw-bg-opacity)); -} - .hover\:text-\[28px\]:hover { font-size: 28px; }