카드 컴포넌트 줄바꿈 수정 (issue #738) (#742)

* design: Card 컴포넌트 줄바꿈 수정 * design: 풀이 상세 타이틀 줄바꿈 조정 * fix: import 타입에러 해결 * fix: import 타입에러 해결 * design: 풀이 상세 헤더 디자인 반응형 수정 --------- Co-authored-by: JEON TAEHEON <[email protected]>
woowacourse-teams · Oct 24, 2024 · 1bce929 · 1bce929
1 parent 038f2ee
commit 1bce929
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 44 deletions.
diff --git a/frontend/src/components/SolutionDetail/SolutionDetail.styled.ts b/frontend/src/components/SolutionDetail/SolutionDetail.styled.ts
@@ -30,7 +30,16 @@ export const HeaderUserInfo = styled.div`
   gap: 1.2rem;
 `;
 
-export const SolutionDetailHeaderContainer = styled.div`
+interface SolutionDetailHeaderContainerProps {
+  $url: string;
+}
+
+export const SolutionDetailHeaderContainer = styled.div<SolutionDetailHeaderContainerProps>`
+  background-image: url(${(props) => props.$url});
+  background-position: center;
+  border-radius: 1rem;
+  overflow: hidden;
+
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -45,19 +54,6 @@ export const GithubIcon = styled(GithubLogo)`
   margin-right: 0.3rem;
 `;
 
-export const ThumbnailWrapper = styled.div`
-  position: relative;
-  height: 20rem;
-  border-radius: 1rem;
-  overflow: hidden;
-`;
-
-export const ThumbnailImg = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-`;
-
 export const GradientOverlay = styled.div`
   position: absolute;
   inset: 0;
@@ -67,12 +63,14 @@ export const GradientOverlay = styled.div`
 `;
 
 export const HeaderLeftArea = styled.div`
-  position: absolute;
-  left: 2.1rem;
-  bottom: 2.4rem;
+  // position: absolute;
+  position: relative;
+  left: 0;
+  bottom: 0;
   display: flex;
   flex-direction: column;
-  width: 95%;
+  width: 100%;
+  padding: 2.4rem 2.1rem;
 `;
 
 export const HeaderProfileImg = styled.img`
@@ -82,6 +80,7 @@ export const HeaderProfileImg = styled.img`
 
 export const Title = styled.h1`
   margin: 1rem 0;
+  word-break: break-all;
   ${(props) => props.theme.font.heading1}
   color: ${(props) => props.theme.colors.white};
 `;
@@ -102,8 +101,9 @@ export const JavaIcon = styled(javaIcon)``;
 export const HashTagWrapper = styled.ul`
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
   gap: 1.1rem;
+  flex-wrap: wrap;
 `;
 
 export const CodeViewButtonWrapper = styled.div`

diff --git a/frontend/src/components/SolutionDetail/SolutionDetailHeader.tsx b/frontend/src/components/SolutionDetail/SolutionDetailHeader.tsx
@@ -18,32 +18,30 @@ export default function SolutionDetailHeader({ solution }: SolutionDetailHeaderP
 
   return (
     <S.SolutionDetailHeaderContainer
+      $url={mission.thumbnail}
       aria-label={`풀이 게시글 제목 ${title}, 작성자 ${member.name}`}
     >
-      <S.ThumbnailWrapper>
-        <S.ThumbnailImg src={mission.thumbnail} alt="" />
-        <S.GradientOverlay />
-        <S.HeaderLeftArea>
-          <TagButton variant="danger" onClick={navigateToMission}>
-            # {mission.title}
-          </TagButton>
-          <S.Title>{title}</S.Title>
-          <S.HeaderLeftAreaInnerWrapper>
-            <S.HeaderUserInfo>
-              <S.HeaderProfileImg src={member.imageUrl} alt="" />
-              <S.HeaderUserName>{member.name}</S.HeaderUserName>
-            </S.HeaderUserInfo>
-            <S.HashTagWrapper>
-              {mission.hashTags &&
-                mission.hashTags.map((tag) => (
-                  <li key={tag.id}>
-                    <TagButton isClickable={false}># {tag.name}</TagButton>
-                  </li>
-                ))}
-            </S.HashTagWrapper>
-          </S.HeaderLeftAreaInnerWrapper>
-        </S.HeaderLeftArea>
-      </S.ThumbnailWrapper>
+      <S.GradientOverlay />
+      <S.HeaderLeftArea>
+        <TagButton variant="danger" onClick={navigateToMission}>
+          # {mission.title}
+        </TagButton>
+        <S.Title>{title}</S.Title>
+        <S.HeaderLeftAreaInnerWrapper>
+          <S.HeaderUserInfo>
+            <S.HeaderProfileImg src={member.imageUrl} alt="" />
+            <S.HeaderUserName>{member.name}</S.HeaderUserName>
+          </S.HeaderUserInfo>
+          <S.HashTagWrapper>
+            {mission.hashTags &&
+              mission.hashTags.map((tag) => (
+                <li key={tag.id}>
+                  <TagButton isClickable={false}># {tag.name}</TagButton>
+                </li>
+              ))}
+          </S.HashTagWrapper>
+        </S.HeaderLeftAreaInnerWrapper>
+      </S.HeaderLeftArea>
     </S.SolutionDetailHeaderContainer>
   );
 }
diff --git a/frontend/src/components/common/InfoCard/InfoCard.styled.ts b/frontend/src/components/common/InfoCard/InfoCard.styled.ts
@@ -6,6 +6,8 @@ export const InfoCardContainer = styled.div`
   flex-direction: column;
   justify-content: space-between;
   gap: 1rem;
+  word-break: break-all;
+  width: 100%;
 `;
 
 export const TitleWrapper = styled.div`

diff --git a/frontend/src/pages/DashboardPage/DashBoardPageLayout/index.tsx b/frontend/src/pages/DashboardPage/DashBoardPageLayout/index.tsx
@@ -1,4 +1,4 @@
-import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
+import { createContext, type PropsWithChildren, useContext, useEffect, useState } from 'react';
 import useUserInfo from '@/hooks/useUserInfo';
 import * as S from './DashBoardPageLayout.styled';
 import { Link, useLocation } from 'react-router-dom';