From 1bce929cafdbc106d09006a2e888046752896f9c Mon Sep 17 00:00:00 2001
From: Minji <121149171+chosim-dvlpr@users.noreply.github.com>
Date: Thu, 24 Oct 2024 16:22:32 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A4=84=EB=B0=94=EA=BF=88=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(issue=20#738)=20(#742)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* design: Card 컴포넌트 줄바꿈 수정

* design: 풀이 상세 타이틀 줄바꿈 조정

* fix: import 타입에러 해결

* fix: import 타입에러 해결

* design: 풀이 상세 헤더 디자인 반응형 수정

---------

Co-authored-by: JEON TAEHEON <brgndyy@gmail.com>
---
 .../SolutionDetail/SolutionDetail.styled.ts   | 38 +++++++--------
 .../SolutionDetail/SolutionDetailHeader.tsx   | 46 +++++++++----------
 .../common/InfoCard/InfoCard.styled.ts        |  2 +
 .../DashBoardPageLayout/index.tsx             |  2 +-
 4 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/SolutionDetail/SolutionDetail.styled.ts b/frontend/src/components/SolutionDetail/SolutionDetail.styled.ts
index 9b372e38..b2565d42 100644
--- 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
index 0f461995..c07ae0f0 100644
--- 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
index 7cce343c..441edd13 100644
--- 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
index d635d54a..40c0a635 100644
--- 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';