Merge pull request #302 from SOPT-all/feat/#299/location-none

[Feat] classCard 장소 수정
SOPT-all · Jan 24, 2025 · 6d2168a · 6d2168a
2 parents f2a4b41 + df2ba28
commit 6d2168a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/src/components/ClassCard/index.css.ts b/src/components/ClassCard/index.css.ts
@@ -14,8 +14,26 @@ export const cardContainerStyle = style({
 export const cardImageStyle = style({
   width: '8.4rem',
   height: '8.4rem',
+  flexShrink: 0,
 
   borderRadius: 3.4,
 
   backgroundColor: vars.colors.gray04,
 });
+
+export const cardContentStyle = style({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.8rem',
+  overflow: 'hidden',
+
+  width: '100%',
+});
+
+export const lessonNameStyle = style({
+  width: '100%',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
diff --git a/src/components/ClassCard/index.tsx b/src/components/ClassCard/index.tsx
@@ -44,6 +44,8 @@ const ClassCard = ({
           return '모집중';
         case 'completed':
           return '모집완료';
+        case 'ongoing':
+          return '모집완료';
         default:
           return '';
       }
@@ -96,7 +98,7 @@ const ClassCard = ({
 
       <Flex gap="1.2rem" marginBottom="1.6rem">
         <img src={lessonImageUrl} className={styles.cardImageStyle} alt={`${lessonName} 이미지`} />
-        <Flex direction="column" gap="0.8rem">
+        <Flex direction="column" gap="0.8rem" className={styles.cardContentStyle}>
           <Flex gap="0.3rem">
             <Tag type="genre" size="small">
               {lessonGenre && genreMapping[lessonGenre]}
@@ -105,7 +107,7 @@ const ClassCard = ({
               {lessonLevel && levelMapping[lessonLevel]}
             </Tag>
           </Flex>
-          <Head level="h2" tag="h6">
+          <Head level="h2" tag="h6" className={styles.lessonNameStyle}>
             {lessonName}
           </Head>
           <Flex direction="column" gap="0.4rem">
@@ -126,8 +128,14 @@ const ClassCard = ({
                 장소
               </Text>
               <Text tag="c1" color="gray9">
-                {lessonLocation}&nbsp;
-                {lessonDetailedAddress}
+                {lessonLocation || lessonDetailedAddress ? (
+                  <>
+                    {lessonLocation}&nbsp;
+                    {lessonDetailedAddress}
+                  </>
+                ) : (
+                  '미정'
+                )}
               </Text>
             </Flex>
           </Flex>

diff --git a/src/pages/home/components/LessonItem/index.css.ts b/src/pages/home/components/LessonItem/index.css.ts
@@ -14,6 +14,7 @@ export const titleStyle = style({
   maxHeight: '4rem',
 
   whiteSpace: 'normal',
+  wordBreak: 'break-all',
 });
 
 export const teacherImageStyle = style({