[feat] 외부 추천사 페이지 제작 완료 (#69)

* chore(#44): react-query 초기 설정

* feat(#44): 공모전 카테고리 및 전체 조회

* refactor(#44): getCompeitionList와 useCompetitionList 분리

* feat(#44): userId 라우터 설정, HeaderSelected 설정

* feat(#44): 개인 프로필 작성 API 연동

* refactor(#44): 개인 프로필 작성 페이지 서버 연동

* refactor(#44): examples 하나로 통일

* feat(#44): 개인 프로필 작성 완료 모달

* feat(#44): 프로필 작성 api 연동

* feat(#44): Axios headers Authorization 추가

* feat(#44): 유저 추가 프로필 작성 request body 수정

* docs(#65): 외부 추천사 페이지

* docs(#65): recommendation -> review 변수명 변경

* feat(#65): 외부 추천사 페이지 헤더

* refactor(#65): 외부 추천사 페이지 헤더 로직 수정

* refactor(#65): review 컴포넌트 username props 추가

* feat(#65): 외부 추천사 페이지 한 줄 추천

* feat(#65): 외부 추천사 페이지 완료

src/components/review/ExternalButtonBox.tsx

@@ -0,0 +1,22 @@
+import { styled } from 'styled-components';
+import Button from '../common/Button';
+
+const ExternalButtonBox = () => {
+  const handleButtonClick = () => {
+    alert('제출하기 버튼이 눌렸습니다.');
+  };
+
+  return (
+    <ButtonContainer>
+      <Button onClick={handleButtonClick}>제출하기</Button>;
+    </ButtonContainer>
+  );
+};
+
+export default ExternalButtonBox;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 10rem 0 6rem 0;
+`;

src/components/review/ExternalReviewOneLine.tsx

@@ -1,13 +1,61 @@
+import { useState } from 'react';
 import { styled } from 'styled-components';
 
-const ExternalReviewOneLine = () => {
+interface ExternalReviewOneLineProps {
+  userName?: string;
+}
+
+const ExternalReviewOneLine = ({ userName }: ExternalReviewOneLineProps) => {
+  const [review, setReview] = useState('');
+
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setReview(e.target.value);
+  };
+
   return (
     <ExternalReviewContainer>
-      <h1>{}님을 한 줄로 추천한다면?</h1>
+      <h1>{userName}님을 한 줄로 추천한다면?</h1>
+      <div>
+        <textarea
+          placeholder={'140자 이하로 추천사를 작성해주세요.'}
+          onChange={handleTextareaChange}
+        >
+          {review}
+        </textarea>
+        <p>{review.length}/140자</p>
+      </div>
     </ExternalReviewContainer>
   );
 };
 
 export default ExternalReviewOneLine;
 
-const ExternalReviewContainer = styled.div``;
+const ExternalReviewContainer = styled.div`
+  h1 {
+    ${({ theme }) => theme.fonts.heading3};
+    color: ${({ theme }) => theme.colors.gray90};
+    margin-bottom: 1.4rem;
+  }
+  div {
+    position: relative;
+  }
+  textarea {
+    background: ${({ theme }) => theme.colors.gray5};
+    border: 1px solid ${({ theme }) => theme.colors.gray20};
+    ${({ theme }) => theme.fonts.bodyXL};
+    color: ${({ theme }) => theme.colors.gray70};
+    border-radius: 1rem;
+    resize: none;
+    width: 100%;
+    height: 20rem;
+    padding: 2.5rem 3.5rem;
+  }
+  p {
+    ${({ theme }) => theme.fonts.bodyM};
+    color: ${({ theme }) => theme.colors.gray70};
+
+    position: absolute;
+    right: 3.5rem;
+    bottom: 2.5rem;
+  }
+`;

src/components/review/ReviewKeywords.tsx

@@ -5,7 +5,11 @@ import { useRecoilValue } from 'recoil';
 import { selectedNameAtom } from '../../recoil/review';
 import { keywordList } from '../../constants/review';
 
-const ReviewKeywords = () => {
+interface ReviewKeywordsProps {
+  userName?: string;
+}
+
+const ReviewKeywords = ({ userName }: ReviewKeywordsProps) => {
   const [selectedKeywords, setSelectedKeywords] = useState<string[]>([]);
   const selectedName = useRecoilValue(selectedNameAtom);
 
@@ -21,9 +25,12 @@ const ReviewKeywords = () => {
 
   return (
     <KeywordLayout>
-      <KeywordTitle>{selectedName} 님에 대한 키워드 추천사</KeywordTitle>
+      <KeywordTitle>
+        {userName ? userName : selectedName} 님에 대한 키워드 추천사
+      </KeywordTitle>
       <KeywordSubTitle>
-        {selectedName} 님의 최고 장점을 2개 골라 추천해주세요!
+        {userName ? userName : selectedName} 님의 최고 장점을 2개 골라
+        추천해주세요!
       </KeywordSubTitle>
       <KeywordBox>
         {keywordList.map((keyword: string) => (

src/components/review/ReviewTendency.tsx

@@ -4,12 +4,18 @@ import { styled } from 'styled-components';
 import TendencyBox from './TendencyBox';
 import { question1, question2 } from '../../constants/review';
 
-const ReviewTendency = () => {
+interface ReviewTendencyProps {
+  userName?: string;
+}
+
+const ReviewTendency = ({ userName }: ReviewTendencyProps) => {
   const selectedName = useRecoilValue(selectedNameAtom);
 
   return (
     <>
-      <TendencyTitle>{selectedName} 님은 어떤 성향일까요?</TendencyTitle>
+      <TendencyTitle>
+        {userName ? userName : selectedName} 님은 어떤 성향일까요?
+      </TendencyTitle>
       <TendencyBoxLayout>
         <TendencyBox boxName="팀 문화" question={question1} />
         <TendencyBox boxName="작업 방식" question={question2} />
@@ -29,4 +35,5 @@ const TendencyTitle = styled.div`
 const TendencyBoxLayout = styled.div`
   display: flex;
   gap: 2rem;
+  margin-bottom: 4rem;
 `;

src/pages/review/ExternalReview.tsx

@@ -2,9 +2,10 @@ import { styled } from 'styled-components';
 import ExternalReviewHeader from '../../components/review/ExternalReviewHeader';
 import ReviewKeywords from '../../components/review/ReviewKeywords';
 import ReviewTendency from '../../components/review/ReviewTendency';
-import BeforeNextButton from '../../components/common/BeforeNextButton';
 import { useParams } from 'react-router-dom';
 import useProfile from '../../hooks/profile/useProfile';
+import ExternalReviewOneLine from '../../components/review/ExternalReviewOneLine';
+import ExternalButtonBox from '../../components/review/ExternalButtonBox';
 
 const ExternalReview = () => {
   const { userId } = useParams();
@@ -14,13 +15,10 @@ const ExternalReview = () => {
     <>
       <ExternalReviewHeader profileData={profileData?.data.data} />
       <ExternalReviewContainer>
-        <ReviewKeywords />
-        <ReviewTendency />
-        <BeforeNextButton
-          next="제출하기"
-          route="/review/multipleChoice"
-          isNextDisabled={false}
-        />
+        <ReviewKeywords userName={profileData?.data.data.username} />
+        <ReviewTendency userName={profileData?.data.data.username} />
+        <ExternalReviewOneLine userName={profileData?.data.data.username} />
+        <ExternalButtonBox />
       </ExternalReviewContainer>
     </>
   );