fix: fix UI

sopt-makers · Sep 3, 2023 · f291360 · f291360
1 parent 1dcf057
commit f291360
Show file tree

Hide file tree

Showing 15 changed files with 212 additions and 159 deletions.
diff --git a/src/assets/icons/ic_arrow_right_white.svg b/src/assets/icons/ic_arrow_right_white.svg
diff --git a/src/views/FAQPage/components/faq/QuestionBox.tsx b/src/views/FAQPage/components/faq/QuestionBox.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { ReactComponent as IToggle } from '@src/assets/images/toggle.svg';
+import { ReactComponent as IcArrow } from '@src/assets/icons/ic_arrow_right_white.svg';
 import { FAQType } from '../../types';
 
 interface QuestionBoxProps {
@@ -13,85 +13,64 @@ function QuestionBox(props: QuestionBoxProps) {
     status,
   } = props;
 
-  const makeBoldText = (text: string) => {
-    const regex = 'Shout Our Passion Together!';
-    if (text.includes(regex)) {
-      const index = text.indexOf(regex);
-      const rest = text.slice(0, index);
-      return (
-        <>
-          {rest} <span style={{ fontWeight: '700' }}>{regex}</span>
-        </>
-      );
-    }
-    return text;
-  };
-
   return (
-    <Styled.Root>
+    <Styled.Root isOpened={status}>
       <Styled.QuestionWrapper isOpened={status}>
-        <Styled.Title>
-          {question.split('\n').map((text) => (
-            <div key={text}>{text}</div>
-          ))}
-        </Styled.Title>
+        <Styled.Title>{question}</Styled.Title>
         <Styled.IconWrapper isOpened={status}>
-          <IToggle />
+          <IcArrow />
         </Styled.IconWrapper>
       </Styled.QuestionWrapper>
-
-      {status && (
-        <Styled.Content>
-          {answer.split('\n').map((text) => (
-            <div key={text}>{makeBoldText(text)}</div>
-          ))}
-        </Styled.Content>
-      )}
+      {status && <Styled.Content>{answer}</Styled.Content>}
     </Styled.Root>
   );
 }
 
 export default QuestionBox;
 
 const Styled = {
-  Root: styled.div`
+  Root: styled.div<{ isOpened: boolean }>`
+    transition: 0.2s;
     display: flex;
     flex-direction: column;
-    background: #262626;
-    border-radius: 10px;
-    padding: 56px;
-    padding-right: 54px;
+    background: ${({ isOpened }) => (isOpened ? '#21212C' : '#1a1a20')};
+    border-radius: 30px;
+    padding: 40px 50px;
     cursor: pointer;
     /* 태블릿 뷰 */
     @media (max-width: 1919.9px) and (min-width: 766px) {
       font-size: 25px;
-      padding: 48px;
+      padding: 32px 40px;
+      border-radius: 20px;
     }
     /* 모바일 뷰 */
     @media (max-width: 765.9px) {
-      padding: 28px;
+      padding: 18px 30px;
+      border-radius: 20px;
     }
   `,
   QuestionWrapper: styled.div<{ isOpened: boolean }>`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    /* align-items: center; */
-    margin-bottom: ${({ isOpened }) => (isOpened ? '37px' : '0')};
     /* 태블릿 뷰 */
     @media (max-width: 1919.9px) and (min-width: 766px) {
       margin-bottom: ${({ isOpened }) => (isOpened ? '16px' : '0')};
     }
   `,
   Title: styled.h1`
-    font-weight: 700;
+    font-weight: 600;
     font-size: 30px;
     line-height: 100%;
     color: #ffffff;
+    &::before {
+      content: 'Q. ';
+      color: #1deda2;
+    }
 
     /* 태블릿 뷰 */
     @media (max-width: 1919.9px) and (min-width: 766px) {
-      font-size: 25px;
+      font-size: 24px;
     }
     /* 모바일 뷰 */
     @media (max-width: 765.9px) {
@@ -107,36 +86,27 @@ const Styled = {
     height: 40px;
     /* 태블릿 뷰 */
     @media (max-width: 1919.9px) and (min-width: 766px) {
-      width: 32px;
-      height: 32px;
+      transform: ${({ isOpened }) => (isOpened ? 'rotate(180deg)' : 'rotate(0deg)')} scale(0.9);
+      transform-origin: center;
     }
     /* 모바일 뷰 */
     @media (max-width: 765.9px) {
-      width: 24px;
-      height: 24px;
+      transform: ${({ isOpened }) => (isOpened ? 'rotate(180deg)' : 'rotate(0deg)')} scale(0.7);
+      transform-origin: center;
     }
-    & > svg {
-      width: 25px;
-      height: 18.33px;
-      /* 태블릿 뷰 */
-      @media (max-width: 1919.9px) and (min-width: 766px) {
-        width: 20px;
-        height: 14.67px;
-      }
-      /* 모바일 뷰 */
-      @media (max-width: 765.9px) {
-        width: 15px;
-        height: 11px;
-      }
-    }
-    transform: ${({ isOpened }) => (isOpened ? 'rotate(90deg)' : 'rotate(0deg')};
   `,
   Content: styled.div`
     font-weight: 400;
     font-size: 25px;
     line-height: 40px;
-
+    word-break: keep-all;
     color: rgba(253, 253, 253, 0.8);
+    margin-top: 12px;
+
+    &::before {
+      content: 'A. ';
+      color: #1deda2;
+    }
     /* 태블릿 뷰 */
     @media (max-width: 1919.9px) and (min-width: 766px) {
       font-size: 22px;

diff --git a/src/views/FAQPage/lib/constants.ts b/src/views/FAQPage/lib/constants.ts
@@ -9,53 +9,53 @@ export const contactInfo: ContactInfoType[] = [
 
 export const questionList: FAQType[] = [
   {
-    question: 'Q. 직장인/휴학생/졸업유예생도 활동할 수 있나요?',
+    question: '직장인/휴학생/졸업유예생도 활동할 수 있나요?',
     answer:
       '재직, 휴학, 졸업유예 여부에 관계없이 대학생이면 지원 가능해요.\n다만, 대부분의 SOPT 회원들이 활동에 많은 시간을 투자하고 있으므로 직장 재직자는 활동에 충분히 참여할\n 여유가 있을 경우에 지원하시는 것을 권장해요.',
   },
   {
-    question: 'Q. 파트별 커리큘럼이 어떻게 되나요?',
+    question: '파트별 커리큘럼이 어떻게 되나요?',
     answer:
       '상단의 ‘리크루팅’ 메뉴 또는 ‘SOPT 인스타그램’에 파트별로 자세하게 안내되어 있으니 참고해 주세요.',
   },
   {
-    question: 'Q. 경험과 실력이 부족한데 지원해도 괜찮을까요?',
+    question: '경험과 실력이 부족한데 지원해도 괜찮을까요?',
     answer:
       'SOPT는 기획, 디자인, 개발 각 분야에 열정이 있는 사람들이 모여 화합을 통해 변화하고 성장하는 가치를\n추구해요. 따라서 경험과 실력보다는 각 파트에 대한 열정과 SOPT 활동을 통해 이루고자 하는 명확한 목표를 더\n중요시해요. 열정을 갖춘 분들의 용기 있는 도전을 기다릴게요! Shout Our Passion Together!',
   },
 ];
 
 export const questionListTablet: FAQType[] = [
   {
-    question: 'Q. 직장인/휴학생/졸업유예생도 활동할 수 있나요?',
+    question: '직장인/휴학생/졸업유예생도 활동할 수 있나요?',
     answer:
       '재직, 휴학, 졸업유예 여부에 관계없이 대학생이면 지원\n가능해요.다만, 대부분의 SOPT 회원들이 활동에 많은\n시간을 투자하고 있으므로 직장 재직자는 활동에 충분히\n참여할 여유가 있을 경우에 지원하시는 것을 권장해요.',
   },
   {
-    question: 'Q. 파트별 커리큘럼이 어떻게 되나요?',
+    question: '파트별 커리큘럼이 어떻게 되나요?',
     answer:
       '상단의 ‘리크루팅’ 메뉴 또는 ‘SOPT 인스타그램’에 파트별로\n자세하게 안내되어 있으니 참고해 주세요.',
   },
   {
-    question: 'Q. 경험과 실력이 부족한데 지원해도 괜찮을까요?',
+    question: '경험과 실력이 부족한데 지원해도 괜찮을까요?',
     answer:
       'SOPT는 기획, 디자인, 개발 각 분야에 열정이 있는\n사람들이 모여 화합을 통해 변화하고 성장하는 가치를\n추구해요. 따라서 경험과 실력보다는 각 파트에 대한 열정과\nSOPT 활동을 통해 이루고자 하는 명확한 목표를 더 중요시\n해요. 열정을 갖춘 분들의 용기 있는 도전을 기다릴게요!\nShout Our Passion Together!',
   },
 ];
 
 export const questionListMobile: FAQType[] = [
   {
-    question: 'Q. 직장인/휴학생/졸업유예생도\n활동할 수 있나요?',
+    question: '직장인/휴학생/졸업유예생도\n활동할 수 있나요?',
     answer:
       '재직, 휴학, 졸업유예 여부에 관계없이\n대학생이면 지원 가능해요.다만, 대부분의\nSOPT 회원들이 활동에 많은 시간을\n투자하고 있으므로 직장 재직자는 활동에\n충분히 참여할 여유가 있을 경우에\n지원하시는 것을 권장해요.',
   },
   {
-    question: 'Q. 파트별 커리큘럼이 어떻게 되나요?',
+    question: '파트별 커리큘럼이 어떻게 되나요?',
     answer:
       '상단의 ‘리크루팅’ 메뉴 또는 ‘SOPT\n인스타그램’에 파트별로 자세하게 안내되어\n있으니 참고해 주세요.',
   },
   {
-    question: 'Q. 경험과 실력이 부족한데\n지원해도 괜찮을까요?',
+    question: '경험과 실력이 부족한데\n지원해도 괜찮을까요?',
     answer:
       'SOPT는 기획, 디자인, 개발 각 분야에\n열정이 있는 사람들이 모여 화합을 통해\n변화하고 성장하는 가치를 추구해요.\n따라서 경험과 실력보다는 각 파트에 대한\n열정과 SOPT 활동을 통해 이루고자 하는\n명확한 목표를 더 중요시해요. 열정을 갖춘\n분들의 용기 있는 도전을 기다릴게요!\nShout Our Passion Together!',
   },

diff --git a/src/views/MainPage/assets/arrow_right_white.svg b/src/views/MainPage/assets/arrow_right_white.svg
diff --git a/src/views/RecruitPage/RecruitPage.tsx b/src/views/RecruitPage/RecruitPage.tsx
@@ -35,15 +35,6 @@ const Root = styled.div`
   align-items: center;
   min-height: 100vh;
   margin: 0 auto;
-
-  /* 태블릿 뷰 */
-  @media (max-width: 1299px) and (min-width: 766px) {
-    margin-top: 90px;
-  }
-  /* 모바일 뷰 */
-  @media (max-width: 765.9px) {
-    margin-top: 90px;
-  }
 `;
 
 const ContentWrapper = styled.div`

diff --git a/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx b/src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { ReactComponent as ArrowLeft } from '@src/views/MainPage/assets/arrow-left-28x28.svg';
 import { ReactComponent as ArrowRight } from '@src/views/MainPage/assets/arrow-right-28x28.svg';
-import ArrowRightWhite from '@src/views/MainPage/assets/arrow_right_white.svg';
+import arrowRightWhite from '@src/views/MainPage/assets/arrow_right_white.svg';
 import { useHorizontalScroll } from '@src/views/MainPage/lib';
 import { SectionTitle, SectionTitleTranslate, SectionTitleWrapper } from '../common/styles';
 import useFetch from './hooks/useFetch';
@@ -17,7 +17,6 @@ import {
   DescName,
   DescWrapper,
   MoreLinkWrapper,
-  TitleWrapper,
 } from './styles';
 import { parsePartToKorean } from './utils/parsePartToKorean';
 
@@ -35,15 +34,10 @@ export function ActivityReview() {
 
   return (
     <ContainerWrapper>
-      <TitleWrapper>
-        <SectionTitleWrapper>
-          <SectionTitleTranslate>Activity Review</SectionTitleTranslate>
-          <SectionTitle>{'회원들의 후기로 SOPT\n 활동을 미리 만나보세요.'}</SectionTitle>
-        </SectionTitleWrapper>
-        <Link href="/review">
-          <MoreLinkWrapper>활동후기 더보기</MoreLinkWrapper>
-        </Link>
-      </TitleWrapper>
+      <SectionTitleWrapper>
+        <SectionTitleTranslate>Activity Review</SectionTitleTranslate>
+        <SectionTitle>{'회원들의 후기로 SOPT\n 활동을 미리 만나보세요.'}</SectionTitle>
+      </SectionTitleWrapper>
       <ContentWrapper>
         <ArrowWrapper onClick={() => onClickLeftButton(scrollableRef.current)}>
           <ArrowLeft stroke={isLeftScrollable ? 'white' : 'grey'} />
@@ -58,7 +52,7 @@ export function ActivityReview() {
                     {parsePartToKorean(review.part)}파트 {review.semester}기{'\n'}
                     <DescName>{review.reviewer}</DescName>
                   </Desc>
-                  <Arrow src={ArrowRightWhite} alt="" />
+                  <Arrow src={arrowRightWhite} alt="" />
                 </DescWrapper>
               </CardWrapper>
             </Link>
@@ -68,6 +62,9 @@ export function ActivityReview() {
           <ArrowRight stroke={isRightScrollable ? 'white' : 'grey'} />
         </ArrowWrapper>
       </ContentWrapper>
+      <Link href="/review">
+        <MoreLinkWrapper>활동후기 더보기</MoreLinkWrapper>
+      </Link>
     </ContainerWrapper>
   );
 }
diff --git a/src/views/RecruitPage/components/ActivityReview/styles.ts b/src/views/RecruitPage/components/ActivityReview/styles.ts
@@ -49,17 +49,17 @@ export const MoreLinkWrapper = styled.a`
   line-height: 40px; /* 160% */
   letter-spacing: -0.25px;
   opacity: 0.6;
+  border-bottom: 1px solid #959595;
 
   @media (max-width: 1299px) and (min-width: 766px) {
-    font-family: SUIT;
     font-size: 20px;
     font-weight: 400;
     line-height: 100%; /* 20px */
     letter-spacing: -0.2px;
   }
 
   @media (max-width: 765.9px) {
-    display: none;
+    font-size: 16px;
   }
 `;
 
@@ -98,7 +98,7 @@ export const Content = styled.div`
 
 export const CardWrapper = styled.div`
   cursor: pointer;
-  background-color: #ffffff;
+  background-color: #1a1a20;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
@@ -125,7 +125,7 @@ export const CardTitle = styled.div`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   word-break: break-all;
-  color: #262626;
+  color: #c8c8c8;
   font-weight: 500;
   font-size: 25px;
   line-height: 40px;
@@ -146,7 +146,7 @@ export const DescWrapper = styled.div`
 `;
 
 export const Desc = styled.div`
-  color: rgba(38, 38, 38, 0.6);
+  color: #c8c8c8;
   font-weight: 500;
   font-size: 25px;
   line-height: 40px;
@@ -163,6 +163,7 @@ export const Desc = styled.div`
 
 export const DescName = styled.div`
   font-weight: 700;
+  line-height: 100%;
   @media (max-width: 765.9px) {
     font-weight: 500;
   }