Design: 스타일링 피드백 반영

HELLO-FIT · Dec 3, 2024 · 80326a1 · 80326a1
1 parent 52754b8
commit 80326a1
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 17 deletions.
diff --git a/src/components/Button/Chips/Chips.module.scss b/src/components/Button/Chips/Chips.module.scss
@@ -66,6 +66,17 @@
   color: $gray70;
 }
 
+.countHigh {
+  display: flex;
+  padding: 3px 6px;
+  align-items: center;
+  border-radius: 4px;
+  background-color: $gray10;
+  @include C10M;
+  color: $gray70;
+  animation: blink 1.5s infinite;
+}
+
 .top {
   display: flex;
   padding: 3px 6px;
@@ -101,3 +112,15 @@
   @include C10M;
   color: $gray70;
 }
+
+@keyframes blink {
+  0% {
+    box-shadow: 0 0 0 rgb(255, 234, 0);
+  }
+  50% {
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
+  }
+  100% {
+    box-shadow: 0 0 0 rgb(255, 234, 0);
+  }
+}
diff --git a/src/components/Button/Chips/Chips.types.ts b/src/components/Button/Chips/Chips.types.ts
@@ -4,6 +4,7 @@ export type ChipState =
   | 'label'
   | 'sports'
   | 'count'
+  | 'countHigh'
   | 'top'
   | 'like'
   | 'average';

diff --git a/src/components/Button/Chips/index.tsx b/src/components/Button/Chips/index.tsx
@@ -14,6 +14,8 @@ export default function Chips({ chipState, text, serialNumber }: ChipsProps) {
         return serialNumber ? styles.sports : styles.sportsSP; // 운동 종목
       case 'count':
         return styles.count; // 누적 수강 수
+      case 'countHigh':
+        return styles.countHigh; // 누적 수강 수 (100 이상)
       case 'top':
         return serialNumber ? styles.top : styles.topSP; // top5 누적 수강 수
       case 'like':
@@ -34,7 +36,9 @@ export default function Chips({ chipState, text, serialNumber }: ChipsProps) {
       {chipState === 'average' && (
         <IconComponent name="average" width={12} height={12} />
       )}
-      {chipState === 'count' ? `누적 수강 ${formatCurrency(text)}` : text}
+      {chipState === 'count' || chipState === 'countHigh'
+        ? `누적 수강생 ${formatCurrency(text)}`
+        : text}
     </div>
   );
 }
diff --git a/src/components/CourseDetails/ReviewCard/index.tsx b/src/components/CourseDetails/ReviewCard/index.tsx
@@ -9,18 +9,21 @@ import { getProfile, ProfileResponse } from '@/apis/get/getProfile';
 import { deleteReview } from '@/apis/delete/deleteReview';
 import { useModal } from '@/utils/modalUtils';
 import useOutsideClick from '@/hooks/useOutsideClick';
+import { useRecoilValue } from 'recoil';
+import { authState } from '@/states/authState';
 
 export default function ReviewCard({
   businessId,
   serialNumber,
   averageScore,
   reviews,
-  isNormal, 
+  isNormal,
 }: ReviewCardProps & { isNormal: boolean }) {
   const [profile, setProfile] = useState<ProfileResponse>();
   const [dropdownOpen, setDropdownOpen] = useState<string | null>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const { openModal } = useModal();
+  const { isLoggedIn } = useRecoilValue(authState);
 
   useEffect(() => {
     const fetchProfile = async () => {
@@ -32,7 +35,9 @@ export default function ReviewCard({
       }
     };
 
-    fetchProfile();
+    if (isLoggedIn) {
+      fetchProfile();
+    }
   }, []);
 
   const handleOpenReviewWrite = () => {
@@ -80,15 +85,15 @@ export default function ReviewCard({
           <span className={styles.reviewTitle}>시설 후기</span>
           <div className={styles.ratingSummary}>
             <IconComponent
-              name={isNormal ? 'starFull' : 'starFullSP'} 
+              name={isNormal ? 'starFull' : 'starFullSP'}
               width={14}
               height={14}
             />
             <span className={styles.averageRating}>{averageScore}</span>
             <span className={styles.reviewCount}>({reviews.length})</span>
           </div>
         </div>
-        {!hasReviewed && (
+        {isLoggedIn && !hasReviewed && (
           <button
             className={
               isNormal ? styles.writeReviewButton : styles.writeReviewButtonSP

diff --git a/src/components/CourseDetails/ReviewEdit/index.tsx b/src/components/CourseDetails/ReviewEdit/index.tsx
@@ -62,9 +62,9 @@ export default function ReviewEdit({
   };
 
   const handleSubmit = async () => {
-    if (text.length < 15) {
+    if (text.length < 10) {
       openPopup({
-        content: '내용은 15자 이상 작성해 주세요.',
+        content: '내용은 10자 이상 작성해 주세요.',
       });
       return;
     }
@@ -121,7 +121,7 @@ export default function ReviewEdit({
         )}
       </div>
       <div className={styles.messageContainer}>
-        <p className={styles.message}>최소 15자 이상 작성</p>
+        <p className={styles.message}>최소 10자 이상 작성</p>
         <span className={isNormal ? styles.counter : styles.counterSP}>
           {text.length}
           <p className={styles.total}>/ 100</p>

diff --git a/src/components/CourseDetails/ReviewWrite/index.tsx b/src/components/CourseDetails/ReviewWrite/index.tsx
@@ -43,9 +43,9 @@ export default function ReviewWrite({
   };
 
   const handleSubmit = async () => {
-    if (text.length < 15) {
+    if (text.length < 10) {
       openPopup({
-        content: '내용은 15자 이상 작성해 주세요.',
+        content: '내용은 10자 이상 작성해 주세요.',
       });
       return;
     }
@@ -110,7 +110,7 @@ export default function ReviewWrite({
         )}
       </div>
       <div className={styles.messageContainer}>
-        <p className={styles.message}>최소 15자 이상 작성</p>
+        <p className={styles.message}>최소 10자 이상 작성</p>
         <span className={serialNumber ? styles.counter : styles.counterSP}>
           {text.length}
           <p className={styles.total}>/ 100</p>

diff --git a/src/components/Layout/TabNav/TabNav.module.scss b/src/components/Layout/TabNav/TabNav.module.scss
@@ -29,12 +29,12 @@
 .tabs {
   display: flex;
   position: relative;
-  gap: 20px;
+  gap: 5px;
   border-bottom: 1px solid $gray10;
   padding: 4px 20px 0;
 
   .button {
-    width: 50px;
+    width: 55px;
     padding-bottom: 6px;
     background-color: $white;
     color: $gray50;
@@ -61,7 +61,7 @@
     position: absolute;
     bottom: 0;
     height: 2px;
-    width: 50px;
+    width: 55px;
     background-color: $blue60;
     transform: translateX(0);
     transition:
@@ -73,7 +73,7 @@
     position: absolute;
     bottom: 0;
     height: 2px;
-    width: 50px;
+    width: 55px;
     background-color: $green80;
     transform: translateX(0);
     transition:

diff --git a/src/components/Layout/TabNav/index.tsx b/src/components/Layout/TabNav/index.tsx
@@ -37,7 +37,7 @@ export default function TabNav({ showmenu = true }: TabNavProps) {
   useEffect(() => {
     const tabIndex = tab === 'lesson' ? 0 : 1;
     setUnderlineStyle({
-      transform: `translateX(${tabIndex * 70}px)`,
+      transform: `translateX(${tabIndex * 60}px)`,
       backgroundColor: toggle === 'special' ? '$green80' : '$blue60',
     });
   }, [tab, toggle]);

diff --git a/src/components/Schedule/PopularSchedule/index.tsx b/src/components/Schedule/PopularSchedule/index.tsx
@@ -40,7 +40,9 @@ export default function PopularSchedule({ facility }: PopularScheduleProps) {
           ))}
           <Chips
             text={facility.totalParticipantCount}
-            chipState="count"
+            chipState={
+              facility.totalParticipantCount > 100 ? 'countHigh' : 'count'
+            }
             serialNumber
           />
         </div>