Merge pull request StudyBadge-TenTen#127 from StudyBadge-TenTen/hotfix

[StudyBadge_FE StudyBadge-TenTen#117 ]: 반응형 ui 보완
rabyeoljji · Aug 6, 2024 · b9f77b4 · b9f77b4
2 parents 2f80ec8 + f8acac9
commit b9f77b4
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 15 deletions.
diff --git a/src/components/main/Filter.tsx b/src/components/main/Filter.tsx
@@ -95,28 +95,28 @@ const Filter = (): JSX.Element => {
         <div className="flex flex-wrap sm:flex-nowrap justify-center items-center mt-2">
           <button
             id="computerCategory"
-            className={`btn-blue sm:rounded-r-none text-xs md:text-sm break-keep ml-2 ${filter.category === "IT" && "bg-Blue-1"}`}
+            className={`btn-blue sm:rounded-r-none text-xs md:text-sm break-keep mx-5 xs:mr-0 xs:ml-2 ${filter.category === "IT" && "bg-Blue-1"}`}
             onClick={(e) => handleFilterClick(e)}
           >
             컴퓨터/IT/개발
           </button>
           <button
             id="languageCategory"
-            className={`btn-blue sm:rounded-none text-xs md:text-sm break-keep ml-1 ${filter.category === "LANGUAGE" && "bg-Blue-1"}`}
+            className={`btn-blue sm:rounded-none text-xs md:text-sm break-keep mx-5 xs:mr-0 xs:ml-2 ${filter.category === "LANGUAGE" && "bg-Blue-1"}`}
             onClick={(e) => handleFilterClick(e)}
           >
             언어/어학
           </button>
           <button
             id="employmentCategory"
-            className={`btn-blue sm:rounded-none text-xs md:text-sm break-keep ml-1 ${filter.category === "EMPLOYMENT" && "bg-Blue-1"}`}
+            className={`btn-blue sm:rounded-none text-xs md:text-sm break-keep mx-5 xs:mr-0 xs:ml-2 ${filter.category === "EMPLOYMENT" && "bg-Blue-1"}`}
             onClick={(e) => handleFilterClick(e)}
           >
             취업/이직
           </button>
           <button
             id="selfDevelopCategory"
-            className={`btn-blue sm:rounded-l-none text-xs md:text-sm break-keep ml-1 mt-2 sm:mt-0 ${filter.category === "SELF_DEVELOPMENT" && "bg-Blue-1"}`}
+            className={`btn-blue sm:rounded-l-none text-xs md:text-sm break-keep mx-5 xs:mr-0 xs:ml-2 mt-2 xs:mt-0 ${filter.category === "SELF_DEVELOPMENT" && "bg-Blue-1"}`}
             onClick={(e) => handleFilterClick(e)}
           >
             자기계발

diff --git a/src/components/payment/Checkout.tsx b/src/components/payment/Checkout.tsx
@@ -97,7 +97,7 @@ const Checkout = ({
 
   return (
     <div className="outside-modal fixed top-0 left-0 w-screen h-screen bg-Gray-3 bg-opacity-25 z-40 flex justify-center items-center">
-      <div className="w-[550px] min-h-[600px] p-8 bg-white opacity-100 border border-solid border-Gray-2 rounded-[30px] fixed z-50 flex flex-col">
+      <div className="w-[320px] md:w-[550px] h-[450px] md:min-h-[600px] p-8 bg-white opacity-100 border border-solid border-Gray-2 rounded-[30px] fixed z-50 flex flex-col overflow-y-scroll">
         <h2 className="text-2xl font-bold self-center">스터디 뱃지 포인트 충전</h2>
         {/* 결제 UI, 이용약관 UI 영역 */}
         <div id="payment-widget" />

diff --git a/src/components/profile/ApplicationList.tsx b/src/components/profile/ApplicationList.tsx
@@ -37,7 +37,9 @@ const ApplicationList = () => {
                 <h3 className=" font-bold text-xl md:text-2xl text-Blue-2">{studyChannel.studyChannelName}</h3>
               </div>
               {/* todo : 신청 상태에 따라 렌더링 */}
-              <p className={`text-xl font-bold ${stateToColorClassName(studyChannel.participationStatus)}`}>
+              <p
+                className={`text-xl font-bold mt-2 sm:mt-0 ${stateToColorClassName(studyChannel.participationStatus)}`}
+              >
                 {ParticipateEnToKr(studyChannel.participationStatus)}
               </p>
             </Link>

diff --git a/src/components/profile/HistoryList.tsx b/src/components/profile/HistoryList.tsx
@@ -149,10 +149,10 @@ const HistoryList = ({ type }: { type: "POINT" | "PAYMENT" }): JSX.Element => {
       return (
         <>
           <div className="w-full h-fit min-h-96">
-            {pointQuery.data.map((data) => (
+            {pointQuery.data.map((data, index) => (
               <div
-                key={new Date(data.createdAt).toDateString()}
-                className="h-16 border-b border-solid border-Gray-2 p-4 flex flex-col sm:flex-row justify-between items-center justify-between items-center"
+                key={`${index}_${new Date(data.createdAt).toDateString()}`}
+                className="h-fit sm:h-16 border-b border-solid border-Gray-2 p-4 flex flex-col sm:flex-row justify-between items-center justify-between items-center"
               >
                 <span className="text-sm text-Gray-4 text-center">
                   날짜: {moment(data.createdAt).format("YYYY-MM-DD")} / 시간: {moment(data.createdAt).format("hh:mm")}

diff --git a/src/components/profile/Notification.tsx b/src/components/profile/Notification.tsx
@@ -44,12 +44,12 @@ const Notification = (): JSX.Element => {
               to={noti.url}
               key={noti.notificationId}
               onClick={() => handleClick(noti.notificationId)}
-              className="w-full h-fit bg-Gray-1 rounded-[10px] flex flex-col justify-center items-center text-Blue-2 px-8 py-4 pb-10 mb-2"
+              className="w-full h-fit bg-Gray-1 rounded-[10px] flex flex-col justify-center items-center text-Blue-2 px-8 py-10 sm:pt-4 sm:pb-10 mb-2"
             >
               <div className="w-full flex justify-between items-center text-Gray-4 text-sm mb-4">
-                <div className="flex justify-center items-center">
-                  <span className="inline-block mr-2">{noti.notificationType}</span>
-                  <span>{`${moment(new Date(noti.createdAt)).format("YYYY-MM-DD")} ${moment(new Date(noti.createdAt)).format("hh:mm:ss")}`}</span>
+                <div className="flex flex-col sm:flex-row justify-center items-center">
+                  <span className="inline-block mr-2 text-xs sm:text-sm">{noti.notificationType}</span>
+                  <span className="text-xs sm:text-sm">{`${moment(new Date(noti.createdAt)).format("YYYY-MM-DD")} ${moment(new Date(noti.createdAt)).format("hh:mm:ss")}`}</span>
                 </div>
                 {noti.isRead ? <span>읽음</span> : <span className="text-Red-2">new</span>}
               </div>

diff --git a/src/components/profile/Profile.tsx b/src/components/profile/Profile.tsx
@@ -143,9 +143,9 @@ const Profile = (): JSX.Element => {
                   key={studyChannel.studyId}
                   className="border border-solid border-Gray-3 w-full h-fit p-10 rounded-[30px] flex flex-col justify-center items-center mt-10 flex-wrap"
                 >
-                  <div className="flex items-center">
+                  <div className="flex flex-col-reverse sm:flex-row items-center mb-2 sm:mb-0">
                     <h3 className="font-bold text-xl md:text-2xl text-Blue-2">{studyChannel.studyName}</h3>
-                    {studyChannel.role === "LEADER" && <span className="ml-8 font-bold text-Red-2">리더</span>}
+                    {studyChannel.role === "LEADER" && <span className="sm:ml-8 font-bold text-Red-2">리더</span>}
                   </div>
                   <div className="w-full md:w-[70%] flex justify-center items-center flex-wrap">
                     <span className="inline-block w-fit text-Blue-2 text-sm md:text-base mr-4">출석률</span>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,6 +4,7 @@ export default {
   darkMode: "class",
   theme: {
     screens: {
+      xs: "440px",
       sm: "480px",
       md: "768px",
       lg: "1025px",