Merge branch 'dev' of https://github.com/woowacourse-teams/2024-devel-up

into dev
woowacourse-teams · Oct 24, 2024 · e34c503 · e34c503
2 parents a56070f + 1bce929
commit e34c503
Show file tree

Hide file tree

Showing 14 changed files with 107 additions and 102 deletions.
diff --git a/frontend/src/components/DashBoard/DashBoardMissionList/index.tsx b/frontend/src/components/DashBoard/DashBoardMissionList/index.tsx
@@ -26,8 +26,6 @@ export default function DashBoardMissionList() {
     },
   });
 
-  console.log('missionList : ', missionList);
-
   return (
     <>
       {!missionList?.length ? (

diff --git a/frontend/src/components/Mission/Mission.styled.ts b/frontend/src/components/Mission/Mission.styled.ts
@@ -7,7 +7,7 @@ export const MissionListContainer = styled.ul`
   column-gap: 5rem;
   row-gap: 3.6rem;
   margin: 0 auto;
-  margin-bottom: 10rem;
+  margin-bottom: 5rem;
   padding-top: 3rem;
   width: 100%;
 
@@ -20,6 +20,7 @@ export const MissionListContainer = styled.ul`
 export const MissionItemContainer = styled.article`
   width: 100%;
   max-width: 30rem;
+  min-width: 30rem;
   border-radius: 1rem;
   border: 1px solid ${(props) => props.theme.colors.grey200};
   cursor: pointer;
@@ -36,6 +37,8 @@ export const MissionThumbnailImg = styled.img`
 
 export const MissionInfoWrapper = styled.div`
   padding: 2.5rem;
+  display: flex;
+  flex-direction: column;
 `;
 
 export const MissionDescription = styled.div`
@@ -49,13 +52,17 @@ export const MissionTitle = styled.p`
   ${(props) => props.theme.font.bodyBold}
   color: black;
   margin-bottom: 1.7rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export const MissionSummary = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  display: inline-block;
   height: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   ${(props) => props.theme.font.body}
   color: ${(props) => props.theme.colors.grey500};
 `;

diff --git a/frontend/src/components/Mission/index.tsx b/frontend/src/components/Mission/index.tsx
@@ -1,6 +1,5 @@
 import type { PropsWithChildren } from 'react';
 import * as S from './Mission.styled';
-import { Link } from 'react-router-dom';
 import type { HashTag } from '@/types';
 
 interface MissionProps extends PropsWithChildren {
@@ -10,9 +9,12 @@ interface MissionProps extends PropsWithChildren {
 
 export default function Mission({ id, type, children }: MissionProps) {
   // TODO 솔루션 상세 URL이 아직 정해져 있지 않아서 임시로 해놓습니다.
+
   const targeRoute = type === 'mission' ? '/missions/' : '/solutions/';
-  const URL = 'https://dev.devel-up.co.kr';
-  const LOCAL_HOST = 'http://localhost:3000';
+  const URL =
+    process.env.NODE_ENV === 'development'
+      ? 'https://dev.devel-up.co.kr'
+      : 'https://devel-up.co.kr';
   return (
     <S.MissionItemContainer>
       <a href={`${URL}${targeRoute}${id}`}>{children}</a>

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/index.tsx b/frontend/src/index.tsx
@@ -284,40 +284,40 @@ export const router = createBrowserRouter(routes, {
   basename: ROUTES.main,
 });
 
-async function enableMocking() {
-  if (process.env.NODE_ENV !== 'development') {
-    return;
-  }
+// async function enableMocking() {
+//   if (process.env.NODE_ENV !== 'development') {
+//     return;
+//   }
 
-  const { worker } = await import('./mocks/browser');
+//   const { worker } = await import('./mocks/browser');
 
-  // `worker.start()` returns a Promise that resolves
-  // once the Service Worker is up and ready to intercept requests.
-  return worker.start();
-}
+//   // `worker.start()` returns a Promise that resolves
+//   // once the Service Worker is up and ready to intercept requests.
+//   return worker.start();
+// }
 
-// enableMocking().then(() => {
-//   root.render(
-//     <React.StrictMode>
-//       <QueryClientProvider client={queryClient}>
-//         <ThemeProvider theme={theme}>
-//           <ReactQueryDevtools initialIsOpen={false} />
-//           <GlobalStyle />
-//           <RouterProvider router={router} />
-//         </ThemeProvider>
-//       </QueryClientProvider>
-//     </React.StrictMode>,
-//   );
-// });
+enableMocking().then(() => {
+  root.render(
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider theme={theme}>
+          <ReactQueryDevtools initialIsOpen={false} />
+          <GlobalStyle />
+          <RouterProvider router={router} />
+        </ThemeProvider>
+      </QueryClientProvider>
+    </React.StrictMode>,
+  );
+});
 
-root.render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools />
-      <ThemeProvider theme={theme}>
-        <GlobalStyle />
-        <RouterProvider router={router} />
-      </ThemeProvider>
-    </QueryClientProvider>
-  </React.StrictMode>,
-);
+// root.render(
+//   <React.StrictMode>
+//     <QueryClientProvider client={queryClient}>
+//       <ReactQueryDevtools />
+//       <ThemeProvider theme={theme}>
+//         <GlobalStyle />
+//         <RouterProvider router={router} />
+//       </ThemeProvider>
+//     </QueryClientProvider>
+//   </React.StrictMode>,
+// );
diff --git a/frontend/src/mocks/SubmittedSolutions.json b/frontend/src/mocks/SubmittedSolutions.json
@@ -1,9 +1,9 @@
 [
   {
     "id": 6,
-    "title": "아톰 미션 제출합니다.",
+    "title": "아톰미션제출합니다아톰미션제출합니다아톰미션제출합니다아톰미션제출합니다아톰미션제출합니다아톰미션제출합니다아톰미션제출합니다아톰미션제출합니다아톰미션제출합니다아톰미션제출합니다.",
     "thumbnail": "https://www.arimetrics.com/wp-content/uploads/2020/01/mockup-1.png",
-    "description": "안녕하세요. 잘 부탁 드립니다.",
+    "description": "안녕하세요.잘부탁드립니다.잘부탁드립니다잘부탁드립니다잘부탁드립니다잘부탁드립니다잘부탁드립니다잘부탁드립니다잘부탁드립니다잘부탁드립니다잘부탁드립니다",
     "hashTags": [
       {
         "id": 1,

diff --git a/frontend/src/mocks/missionInProgress.json b/frontend/src/mocks/missionInProgress.json
@@ -1,7 +1,7 @@
 [
   {
     "id": 1,
-    "title": "루터회관 흡연 단속",
+    "title": "루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속",
     "language": "JAVA",
     "summary": "루터회관 흡연 벌칙 프로그램을 구현한다.",
     "thumbnail": "https://www.arimetrics.com/wp-content/uploads/2020/01/mockup-1.png",

diff --git a/frontend/src/mocks/missionWithStarted.json b/frontend/src/mocks/missionWithStarted.json
@@ -1,7 +1,7 @@
 [
   {
     "id": 1,
-    "title": "루터회관 흡연 단속",
+    "title": "루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속루터회관흡연단속",
     "language": "JAVA",
     "description": "루터회관 흡연 벌칙 프로그램을 구현한다.",
     "thumbnail": "https://file.notion.so/f/f/d5a9d2d0-0fab-48ee-9e8a-13a13de1ac48/38a7f41b-80d7-48ca-97c9-99ceda5c4dbd/smoking.png?id=60756a7a-c50f-4946-ab6e-4177598b926b&table=block&spaceId=d5a9d2d0-0fab-48ee-9e8a-13a13de1ac48&expirationTimestamp=1721174400000&signature=todzUdb5cUyzW4ZQNaHvL-uiCngfMJJAl94RpE1TGEA&downloadName=smoking.png",

diff --git a/frontend/src/pages/DashboardPage/DashBoardPageLayout/DashBoardPageLayout.styled.ts b/frontend/src/pages/DashboardPage/DashBoardPageLayout/DashBoardPageLayout.styled.ts
@@ -105,4 +105,7 @@ export const Circle = styled.div<{ $isSelected: boolean }>`
 
 export const CurrentPathText = styled.div`
   ${(props) => props.theme.font.bodyBold}
+  ${media.medium`
+  margin-left : 2.6rem
+    `}
 `;
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';

diff --git a/frontend/src/pages/DashboardPage/index.tsx b/frontend/src/pages/DashboardPage/index.tsx
@@ -13,13 +13,13 @@ export default function DashboardPage() {
 
   return (
     <DashboardLayoutContextProvider>
-      <PrivateRoute redirectTo={ROUTES.login}>
-        <DashboardPageLayout>
-          <SpinnerSuspense>
-            <Outlet />
-          </SpinnerSuspense>
-        </DashboardPageLayout>
-      </PrivateRoute>
+      {/* <PrivateRoute redirectTo={ROUTES.login}> */}
+      <DashboardPageLayout>
+        <SpinnerSuspense>
+          <Outlet />
+        </SpinnerSuspense>
+      </DashboardPageLayout>
+      {/* </PrivateRoute> */}
     </DashboardLayoutContextProvider>
   );
 }
diff --git a/frontend/src/pages/MissionDetailPage.tsx b/frontend/src/pages/MissionDetailPage.tsx
@@ -7,13 +7,8 @@ import useMission from '@/hooks/useMission';
 
 export default function MissionDetailPage() {
   const { id } = useParams();
-  console.log('id: ', id);
   const { data: missionData } = useMission(Number(id));
 
-  console.log('missionData : ', missionData);
-
-  // console.log('missionData.hashTags : ', missionData.hashTags);
-
   return (
     <S.MissionDetailPageContainer>
       <S.MissionDetailInnerWrapper>