From cb1c36a4c15ee5f06737960f58ea9f07593dc3be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=82=A8=EC=83=81=EA=B7=9C?= <103256030+tkdrb12@users.noreply.github.com> Date: Tue, 19 Sep 2023 21:03:16 +0900 Subject: [PATCH] =?UTF-8?q?=EC=83=81=EC=84=B8=20=EC=A1=B0=ED=9A=8C=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95=20(#544)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 버튼 컴포넌트 width props 수정 * feat: 상세페이지 mock데이터 변경 * design: 버튼 너비 수정 * feat: 상세 페이지 contents 세분화 --------- Co-authored-by: 상규 --- .../GuideContents/GuideContents.tsx | 187 ++++++++++++++++++ .../src/components/common/Button/Button.tsx | 6 +- .../src/mocks/data/runnerPostDetails.json | 6 +- frontend/src/pages/MainPage.tsx | 1 + frontend/src/pages/NoticePage.tsx | 8 +- frontend/src/pages/RunnerPostDetailPage.tsx | 41 +++- frontend/src/types/runnerPost.ts | 4 +- 7 files changed, 240 insertions(+), 13 deletions(-) create mode 100644 frontend/src/components/GuideContents/GuideContents.tsx diff --git a/frontend/src/components/GuideContents/GuideContents.tsx b/frontend/src/components/GuideContents/GuideContents.tsx new file mode 100644 index 000000000..47aa14fc0 --- /dev/null +++ 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 { + contents: string; + title: string; +} + +const GuideContents = ({ contents, title, ...rest }: Props) => { + const { isMobile } = useViewport(); + + return ( + + + + {title} + + + {contents} + + ); +}; + +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 index 8baf5afdb..ce9dbc656 100644 --- 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 index 0f655fd58..2e75640f1 100644 --- 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 index e25d6edf8..f116d2220 100644 --- a/frontend/src/pages/MainPage.tsx +++ b/frontend/src/pages/MainPage.tsx @@ -112,6 +112,7 @@ const MainPage = () => { - -