feat(fe): custom scroll bar (#191)

Author: cjeongmin

apps/client/src/components/qna/ChattingList.tsx

@@ -83,7 +83,7 @@ function ChattingList() {
         </div>
 
         <div
-          className='inline-flex h-full w-full flex-col items-start justify-start overflow-y-auto break-words p-2.5 scrollbar-hide'
+          className='inline-flex h-full w-full flex-col items-start justify-start overflow-y-auto overflow-x-hidden break-words p-2.5'
           ref={messagesEndRef}
         >
           {chatting.map((chat) => (

apps/client/src/components/qna/QuestionDetail.tsx

@@ -48,7 +48,7 @@ function QuestionDetail() {
           )}
         </div>
 
-        <div className='inline-flex h-full w-full flex-col items-start justify-start gap-4 overflow-y-auto pb-4 scrollbar-hide'>
+        <div className='inline-flex h-full w-full flex-col items-start justify-start gap-4 overflow-y-auto pb-4'>
           <div className='flex h-fit flex-col items-start justify-center gap-2.5 self-stretch border-b border-gray-200/50 px-12 py-4'>
             <Markdown className='prose prose-stone flex w-full flex-col gap-3 self-stretch text-base font-medium leading-normal text-black prose-img:rounded-md'>
               {question.body}

apps/client/src/components/qna/QuestionList.tsx

@@ -51,7 +51,7 @@ function QuestionList() {
             </Button>
           )}
         </div>
-        <motion.div className='inline-flex h-full w-full flex-col items-start justify-start gap-4 overflow-y-auto px-8 py-4 scrollbar-hide'>
+        <motion.div className='inline-flex h-full w-full flex-col items-start justify-start gap-4 overflow-y-auto px-8 py-4'>
           {sections.map((section) => (
             <QuestionSection
               key={section.title}

apps/client/src/index.css

@@ -8,6 +8,20 @@
   margin: 0;
 }
 
-* {
-  user-select: none;
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #e5e7eb;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #a5b4fc;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #6366f1;
 }

apps/client/src/pages/MyPage.tsx

@@ -11,7 +11,7 @@ function MyPage() {
 
   return (
     <div className='inline-flex h-full w-full items-center justify-center gap-4 overflow-hidden px-4 py-4 md:max-w-[1194px]'>
-      <div className='inline-flex shrink grow basis-0 flex-col items-center justify-start gap-4 self-stretch rounded-lg bg-white shadow'>
+      <div className='inline-flex shrink grow basis-0 flex-col items-center justify-start self-stretch rounded-lg bg-white shadow'>
         <div className='inline-flex h-[54px] items-center justify-between self-stretch border-b border-gray-200 px-8 py-2'>
           <div className='text-lg font-medium text-black'>참여한 세션 기록</div>
           <div className='rounded-md px-3 py-2' />