상세 조회 페이지 수정 (#544)

* feat: 버튼 컴포넌트 width props 수정 * feat: 상세페이지 mock데이터 변경 * design: 버튼 너비 수정 * feat: 상세 페이지 contents 세분화 --------- Co-authored-by: 상규 <[email protected]>
woowacourse-teams · Sep 19, 2023 · cb1c36a · cb1c36a
1 parent f160d05
commit cb1c36a
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 13 deletions.
diff --git a/frontend/src/components/GuideContents/GuideContents.tsx b/frontend/src/components/GuideContents/GuideContents.tsx
@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import { css, keyframes, styled } from 'styled-components';
+import useViewport from '@/hooks/useViewport';
+
+interface Props extends React.HTMLProps<HTMLDivElement> {
+  contents: string;
+  title: string;
+}
+
+const GuideContents = ({ contents, title, ...rest }: Props) => {
+  const { isMobile } = useViewport();
+
+  return (
+    <S.Container>
+      <S.HeaderContainer>
+        <S.TitleContainer aria-label={title}>
+          <S.Title>{title}</S.Title>
+        </S.TitleContainer>
+      </S.HeaderContainer>
+      <S.Contents {...rest}>{contents}</S.Contents>
+    </S.Container>
+  );
+};
+
+export default GuideContents;
+
+const S = {
+  Container: styled.div`
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 10px;
+  `,
+
+  HeaderContainer: styled.div`
+    display: flex;
+    justify-content: space-between;
+
+    padding: 5px 10px;
+  `,
+
+  GuideButton: styled.button`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 50px;
+    height: 26px;
+    padding: 0 10px;
+    border: 1px solid var(--baton-red);
+    border-radius: 12px;
+
+    background-color: transparent;
+
+    color: var(--baton-red);
+    font-size: 14px;
+
+    cursor: pointer;
+
+    @media (max-width: 768px) {
+      width: 45px;
+      height: 23px;
+
+      font-size: 12px;
+    }
+  `,
+
+  TitleContainer: styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    @media (max-width: 768px) {
+      gap: 4px;
+    }
+  `,
+
+  Title: styled.div`
+    position: relative;
+
+    margin-left: 10px;
+
+    font-size: 20px;
+    font-weight: 700;
+
+    &::before {
+      position: absolute;
+      content: '';
+
+      bottom: 2.5px;
+      left: -18px;
+      height: 100%;
+      width: 4.5px;
+      border-radius: 2px;
+
+      background-color: var(--baton-red);
+    }
+
+    @media (max-width: 768px) {
+      font-size: 18px;
+
+      height: 20px;
+    }
+
+    @media (max-width: 400px) {
+      font-size: 16px;
+    }
+  `,
+
+  RequiredIcon: styled.div`
+    display: flex;
+    justify-content: center;
+
+    color: var(--baton-red);
+    font-size: 20px;
+
+    @media (max-width: 768px) {
+      font-size: 16px;
+    }
+  `,
+
+  TextContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 15px;
+
+    width: 100%;
+    border: var(--gray-500) 1px solid;
+    border-radius: 10px;
+
+    overflow: hidden;
+  `,
+
+  Contents: styled.div`
+    flex: 1;
+
+    border: transparent 1px solid;
+
+    line-height: 2;
+    font-size: 18px;
+
+    white-space: pre-line;
+
+    overflow: hidden;
+
+    &::placeholder {
+      font-size: 18px;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+    @media (max-width: 768px) {
+      font-size: 16px;
+
+      &::placeholder {
+        font-size: 16px;
+      }
+    }
+  `,
+
+  InputConfig: styled.div`
+    display: flex;
+    justify-content: space-between;
+
+    padding: 8px 10px;
+  `,
+
+  ErrorMessage: styled.div`
+    color: red;
+    font-size: 14px;
+  `,
+
+  InputTextLength: styled.div<{ $isError: boolean }>`
+    display: flex;
+    flex-direction: column;
+
+    font-size: 14px;
+    color: ${({ $isError }) => ($isError ? 'red' : 'var(--gray-400)')};
+  `,
+
+  Empty: styled.div`
+    width: 1px;
+  `,
+};
diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx
@@ -60,8 +60,7 @@ const S = {
   }>`
     ${({ $colorTheme }) => themeStyles[$colorTheme]}
 
-    max-width: ${({ $width }) => $width || '180px'};
-    width: 100%;
+    width: ${({ $width }) => $width || '180px'};
     height: ${({ $height }) => $height || '40px'};
 
     padding: 10px 10px;
@@ -70,8 +69,7 @@ const S = {
     font-weight: ${({ $fontWeight }) => $fontWeight || '400'};
 
     @media (max-width: 768px) {
-      max-width: ${({ $width }) => $width};
-      width: 100%;
+      width: ${({ $width }) => $width || '180px'};
       height: 100%;
     }
   `,

diff --git a/frontend/src/mocks/data/runnerPostDetails.json b/frontend/src/mocks/data/runnerPostDetails.json
@@ -2,8 +2,10 @@
   "runnerPostId": 1,
   "title": "리액트 리뷰 부탁드립니다.",
   "deadline": "2023-07-15T13:56",
-  "tags": ["개인프로젝트", "리액트", "React", "React", "React"],
-  "contents": "자바를 배운지 3년 정도 되었는데요 제가 짠 코드가 어떤지 궁금해서 리뷰 요청 올려봅니다.\n현업에 계신 분들.. 좀 도와주세요 ㅠㅠ\nPR 메시지는 PR 링크에 작성해놨습니다 !",
+  "tags": ["개인프로젝트", "리액트", "React", "React", "테스트테스트테스트테스트테스트"],
+  "implementedContents": "테스트테스트테스트테스트테스트테스트\n테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트\n테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트v",
+  "curiousContents": "테스트테스트테스트테스트테스트테스트\n테스트테스트테스트테스트테스트",
+  "postscriptContents": "n테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트\n테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트테스트\n테스트테스트테스트테스트테스트",
   "isOwner": false,
   "isApplied": false,
   "applicantCount": 1,

diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
@@ -112,6 +112,7 @@ const MainPage = () => {
           </S.LeftSideContainer>
           <S.RightSideContainer>
             <Button
+              width="100%"
               onClick={handleClickPostButton}
               colorTheme="WHITE"
               fontSize={isMobile ? '14px' : '18px'}

diff --git a/frontend/src/pages/NoticePage.tsx b/frontend/src/pages/NoticePage.tsx
@@ -122,13 +122,13 @@ const NoticePage = () => {
 
               <S.EventMessageTitle>🔎 미션 보러가기</S.EventMessageTitle>
               <S.ButtonContainer>
-                <Button colorTheme="BLACK">
+                <Button colorTheme="BLACK" width="100%">
                   <S.Anchor href="https://github.com/baton-mission/java-boss-monster" target="_blank">
                     <img src={githubIcon} />
                     <S.GoToGitHub>java</S.GoToGitHub>
                   </S.Anchor>
                 </Button>
-                <Button colorTheme="BLACK">
+                <Button colorTheme="BLACK" width="100%">
                   <S.Anchor href="https://github.com/baton-mission/javascript-boss-monster" target="_blank">
                     <img src={githubIcon} />
                     <S.GoToGitHub>javascript</S.GoToGitHub>
@@ -143,13 +143,13 @@ const NoticePage = () => {
                 </S.EventGuide>
               </S.EventMessageTitleContainer>
               <S.ButtonContainer>
-                <Button dataType="java" colorTheme="RED" onClick={openConfirmModal}>
+                <Button dataType="java" colorTheme="RED" onClick={openConfirmModal} width="100%">
                   <S.Anchor>
                     <JavaIconWhite color="#000000" />
                     <S.Language>java</S.Language>
                   </S.Anchor>
                 </Button>
-                <Button dataType="javascript" colorTheme="RED" onClick={openConfirmModal}>
+                <Button dataType="javascript" colorTheme="RED" onClick={openConfirmModal} width="100%">
                   <S.Anchor>
                     <JavascriptIcon />
                     <S.Language>javascript</S.Language>

diff --git a/frontend/src/pages/RunnerPostDetailPage.tsx b/frontend/src/pages/RunnerPostDetailPage.tsx
@@ -20,6 +20,7 @@ import { validateMessage } from '@/utils/validate';
 import useViewport from '@/hooks/useViewport';
 import { useFetch } from '@/hooks/useFetch';
 import { useLogin } from '@/hooks/useLogin';
+import GuideContents from '@/components/GuideContents/GuideContents';
 
 const RunnerPostPage = () => {
   const { goToMainPage, goBack, goToRunnerProfilePage, goToMyPage, goToLoginPage } = usePageRouter();
@@ -170,7 +171,13 @@ const RunnerPostPage = () => {
               </S.PostTitleContainer>
             </S.PostHeaderContainer>
             <S.PostBodyContainer>
-              <S.Contents>{runnerPost.contents}</S.Contents>
+              <S.GuideContentsContainer>
+                <GuideContents title="무엇을 구현하였나요?" contents={runnerPost.implementedContents} />
+                <GuideContents title="아쉬운 점이나 궁금한 점이 있나요?" contents={runnerPost.curiousContents} />
+                {runnerPost.postscriptContents && (
+                  <GuideContents title="서포터에게 하고싶은 말이 있나요?" contents={runnerPost.postscriptContents} />
+                )}
+              </S.GuideContentsContainer>
               <S.BottomContentContainer>
                 <S.LeftSideContainer>
                   <S.ProfileContainer onClick={viewProfile}>
@@ -187,7 +194,12 @@ const RunnerPostPage = () => {
                   <PostTagList tags={runnerPost.tags} />
                 </S.LeftSideContainer>
                 <S.RightSideContainer>
-                  <Button colorTheme="BLACK" fontSize={isMobile ? '14px' : ''} fontWeight={700}>
+                  <Button
+                    colorTheme="BLACK"
+                    width={isMobile ? '125px' : '150px'}
+                    fontSize={isMobile ? '14px' : ''}
+                    fontWeight={700}
+                  >
                     <S.Anchor href={runnerPost.pullRequestUrl} target="_blank">
                       <img src={githubIcon} />
                       <S.GoToGitHub>코드 보러가기</S.GoToGitHub>
@@ -196,6 +208,7 @@ const RunnerPostPage = () => {
                   {runnerPost.isOwner || runnerPost.isApplied || runnerPost.reviewStatus !== 'NOT_STARTED' ? null : (
                     <Button
                       colorTheme="WHITE"
+                      width={isMobile ? '125px' : '150px'}
                       fontSize={isMobile ? '14px' : ''}
                       fontWeight={700}
                       onClick={openMessageModal}
@@ -328,6 +341,14 @@ const S = {
     border-bottom: 1px solid #9d9d9d;
   `,
 
+  GuideContentsContainer: styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 70px;
+
+    margin-bottom: 50px;
+  `,
+
   InformationContainer: styled.div`
     display: flex;
     justify-content: space-between;
@@ -408,7 +429,13 @@ const S = {
     justify-content: space-between;
     align-items: end;
 
+    margin-bottom: 10px;
+
     @media (max-width: 768px) {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+
       gap: 8px;
     }
   `,
@@ -422,7 +449,17 @@ const S = {
   RightSideContainer: styled.div`
     display: flex;
     flex-direction: column;
+
     gap: 24px;
+
+    @media (max-width: 768px) {
+      display: flex;
+      flex-direction: row;
+      flex: 1;
+      gap: 12px;
+
+      margin-top: 20px;
+    }
   `,
 
   GoToGitHub: styled.p``,

diff --git a/frontend/src/types/runnerPost.ts b/frontend/src/types/runnerPost.ts
@@ -22,7 +22,9 @@ export interface RunnerProfile {
 }
 
 export interface GetDetailedRunnerPostResponse extends RunnerPost {
-  contents: string;
+  implementedContents: string;
+  curiousContents: string;
+  postscriptContents: string;
   isOwner: boolean;
   isApplied: boolean;
   pullRequestUrl: string;