FAQ 구현 (#issue 274)

src/api/customerService.api.ts

@@ -0,0 +1,13 @@
+import type { ApiFAQ, SearchKeyword } from '../models/customerService';
+import { httpClient } from './http.api';
+
+export const getFAQ = async (params: SearchKeyword) => {
+  try {
+    const response = await httpClient.get<ApiFAQ>(`/faq`, { params });
+
+    return response.data.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/components/common/header/Header.tsx

@@ -46,10 +46,10 @@ function Header() {
       </Link>
       <S.Wrapper>
         <S.HeaderLinkContainer>
-          <Link to={ROUTES.FAQ}>
+          <Link to={`${ROUTES.customerService}/${ROUTES.FAQ}`}>
             <S.HeaderLink>FAQ</S.HeaderLink>
           </Link>
-          <Link to={ROUTES.notice}>
+          <Link to={`${ROUTES.customerService}/${ROUTES.notice}`}>
             <S.HeaderLink>공지사항</S.HeaderLink>
           </Link>
         </S.HeaderLinkContainer>

src/pages/customerService/CustomerServiceHeader.styled.ts → src/components/customerService/CustomerServiceHeader.styled.ts

@@ -35,6 +35,21 @@ export const SearchBarInput = styled.input`
   font-size: 1rem;
 `;
 
+export const ButtonWrapper = styled.div`
+  display: flex;
+  gap: 0.5rem;
+`;
+
+export const UturnButton = styled.button`
+  &:hover {
+    color: ${({ theme }) => theme.color.lightnavy};
+  }
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+
 export const SearchButton = styled.button`
   svg {
     width: 20px;

src/components/customerService/CustomerServiceHeader.tsx

@@ -0,0 +1,71 @@
+import {
+  ArrowUturnLeftIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
+import * as S from './CustomerServiceHeader.styled';
+import MovedInquiredLink from './MoveInquiredLink';
+import { Outlet } from 'react-router-dom';
+import { useState } from 'react';
+
+interface CustomerServiceHeaderProps {
+  title: string;
+  keyword: string;
+  onGetKeyword: (value: string) => void;
+}
+
+export default function CustomerServiceHeader({
+  title,
+  keyword,
+  onGetKeyword,
+}: CustomerServiceHeaderProps) {
+  const [inputValue, setInputValue] = useState<string>('');
+
+  const handleSubmitKeyword = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onGetKeyword(inputValue);
+  };
+
+  const handleChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+  };
+
+  const handleReset = () => {
+    onGetKeyword('');
+    setInputValue('');
+  };
+
+  return (
+    <S.Container>
+      <S.WrapperTitle>
+        <S.Title>DevPals {title}</S.Title>
+      </S.WrapperTitle>
+      <S.WrapperNav>
+        <S.SearchBarForm onSubmit={handleSubmitKeyword}>
+          <S.SearchBarInput
+            type='text'
+            placeholder='궁금한 내용을 검색해보세요.'
+            value={inputValue || keyword}
+            onChange={handleChangeValue}
+          />
+          <S.ButtonWrapper>
+            {keyword !== '' && (
+              <S.UturnButton
+                type='button'
+                aria-label='show all result'
+                onClick={handleReset}
+              >
+                <ArrowUturnLeftIcon />
+              </S.UturnButton>
+            )}
+            <S.SearchButton type='submit' aria-label='search'>
+              <MagnifyingGlassIcon />
+            </S.SearchButton>
+          </S.ButtonWrapper>
+        </S.SearchBarForm>
+        <MovedInquiredLink />
+      </S.WrapperNav>
+      <Outlet />
+    </S.Container>
+  );
+}

src/components/customerService/faq/FAQContent.styled.ts

@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components';
+
+export const ListContainer = styled.div`
+  width: 100%;
+`;
+
+export const ListWrapper = styled.button`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 0;
+`;
+
+export const ListTitle = styled.div`
+  font-size: 1.3rem;
+  padding-left: 1.5rem;
+  font-weight: bold;
+`;
+
+export const ListPlusIcon = styled.div<{ $isOpen: boolean }>`
+  margin-right: 1.5rem;
+  transition: transform 500ms ease-in-out;
+  ${({ $isOpen }) =>
+    $isOpen &&
+    css`
+      transform: rotate(45deg);
+    `}
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+`;
+
+export const ListContentWrapper = styled.div`
+  cursor: auto;
+  background: ${({ theme }) => theme.color.lightgrey};
+  padding: 1.5rem 1rem;
+  display: flex;
+  gap: 0.5rem;
+`;
+
+export const ListButtonWrapper = styled.div`
+  svg {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+`;
+
+export const ListContent = styled.div`
+  font-size: 1.1rem;
+  padding-right: 1.5rem;
+`;

src/components/customerService/faq/FAQContent.tsx

@@ -0,0 +1,34 @@
+import { ChevronRightIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { FAQ } from '../../../models/customerService';
+import * as S from './FAQContent.styled';
+import { useState } from 'react';
+
+interface FAQContentProps {
+  list: FAQ;
+}
+
+export default function FAQContent({ list }: FAQContentProps) {
+  const [isFAQContentOpen, setIsFAQContentOpen] = useState<boolean>(false);
+
+  return (
+    <S.ListContainer>
+      <S.ListWrapper
+        type='button'
+        onClick={() => setIsFAQContentOpen((prev) => !prev)}
+      >
+        <S.ListTitle>{list.title}</S.ListTitle>
+        <S.ListPlusIcon $isOpen={isFAQContentOpen}>
+          <PlusIcon />
+        </S.ListPlusIcon>
+      </S.ListWrapper>
+      {isFAQContentOpen && (
+        <S.ListContentWrapper>
+          <S.ListButtonWrapper>
+            <ChevronRightIcon />
+          </S.ListButtonWrapper>
+          <S.ListContent>{list.content}</S.ListContent>
+        </S.ListContentWrapper>
+      )}
+    </S.ListContainer>
+  );
+}

src/components/mypage/ScrollWrapper.styled.ts

@@ -4,6 +4,7 @@ export const ScrollWrapper = styled.div<{ $height: string }>`
   width: 100%;
   height: calc(100% - ${({ $height }) => $height});
   overflow-y: auto;
+  overflow-x: hidden;
   background: ${({ theme }) => theme.color.lightgrey};
   border-radius: ${({ theme }) => theme.borderRadius.large};
 

src/components/mypage/activityLog/inquiries/Inquiries.styled.ts

@@ -2,20 +2,34 @@ import styled from 'styled-components';
 
 export const container = styled.div`
   height: 100%;
+  padding: 0 0.5rem 0 0.8rem;
 `;
 
 export const InquiriesContainer = styled.div`
-  padding: 1rem;
   width: 100%;
 `;
 
+export const InquiriesTableHeadContainer = styled.div`
+  width: 100%;
+  position: sticky;
+  padding-top: 1rem;
+  top: 0;
+  background: ${({ theme }) => theme.color.lightgrey};
+`;
+
 export const InquiriesTableHeadWrapper = styled.div`
   width: 100%;
   display: grid;
-  grid-template-columns: 8% 18% 62% 12%;
+  grid-template-columns: 8% 15% 65% 17%;
   font-size: 1.3rem;
   font-weight: 600;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
+`;
+
+export const ContentBorder = styled.div`
+  width: 100%;
+  height: 0.5px;
+  background: ${({ theme }) => theme.color.placeholder};
 `;
 
 export const InquiriesTableHeaderNo = styled.div`
@@ -36,6 +50,7 @@ export const InquiriesTableHeaderState = styled.div`
 `;
 
 export const InquiriesWrapper = styled.div`
+  margin-top: 1rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;

src/components/mypage/activityLog/inquiries/Inquiries.tsx

@@ -21,12 +21,17 @@ export default function Inquiries() {
   return (
     <S.container>
       <S.InquiriesContainer>
-        <S.InquiriesTableHeadWrapper>
-          <S.InquiriesTableHeaderNo>No</S.InquiriesTableHeaderNo>
-          <S.InquiriesTableHeaderCategory>구별</S.InquiriesTableHeaderCategory>
-          <S.InquiriesTableHeaderTitle>제목</S.InquiriesTableHeaderTitle>
-          <S.InquiriesTableHeaderState>상태</S.InquiriesTableHeaderState>
-        </S.InquiriesTableHeadWrapper>
+        <S.InquiriesTableHeadContainer>
+          <S.InquiriesTableHeadWrapper>
+            <S.InquiriesTableHeaderNo>No</S.InquiriesTableHeaderNo>
+            <S.InquiriesTableHeaderCategory>
+              구별
+            </S.InquiriesTableHeaderCategory>
+            <S.InquiriesTableHeaderTitle>제목</S.InquiriesTableHeaderTitle>
+            <S.InquiriesTableHeaderState>상태</S.InquiriesTableHeaderState>
+          </S.InquiriesTableHeadWrapper>
+          <S.ContentBorder></S.ContentBorder>
+        </S.InquiriesTableHeadContainer>
         <S.InquiriesWrapper>
           {myInquiriesData.map((list, index) => (
             <Inquiry

src/components/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts

@@ -2,12 +2,14 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   width: 100%;
-  font-size: 1.1rem;
 `;
 
-export const InquiryTitleWrapper = styled.div`
+export const InquiryTitleWrapper = styled.button`
+  width: 100%;
+  text-align: start;
+  font-size: 1.1rem;
   display: grid;
-  grid-template-columns: 8% 18% 62% 12%;
+  grid-template-columns: 8% 15% 65% 17%;
   cursor: pointer;
 `;
 

src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx

@@ -22,7 +22,10 @@ export default function Inquiry({ list, no }: InquiryProps) {
 
   return (
     <S.Container>
-      <S.InquiryTitleWrapper onClick={() => setIsOpen((prev) => !prev)}>
+      <S.InquiryTitleWrapper
+        type='button'
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
         <S.InquiryNumber>{no}</S.InquiryNumber>
         <S.InquiryCategory>{`[${list.category}]`}</S.InquiryCategory>
         <S.InquiryTitle>{list.title}</S.InquiryTitle>

src/components/mypage/myProfile/MyProfile.styled.ts

@@ -31,8 +31,5 @@ export const Container = styled.div`
 `;
 
 export const SectionContainer = styled.section`
-  background-color: ${({ theme }) => theme.color.lightgrey};
-  border-radius: ${({ theme }) => theme.borderRadius.large} 0 0
-    ${({ theme }) => theme.borderRadius.large};
   padding: 2rem;
 `;

src/components/mypage/myProfile/profile/Profile.tsx

@@ -8,6 +8,7 @@ import { Radar } from 'react-chartjs-2';
 import { UserInfo } from '../../../../models/userInfo';
 import { useEffect } from 'react';
 import MyProfileWrapper from '../MyProfileWrapper';
+import { PROFILE_DEFAULT_MESSAGE } from '../../../../constants/myPageProfile';
 
 export default function Profile() {
   const {
@@ -52,7 +53,7 @@ export default function Profile() {
                 </li>
               ))
             ) : (
-              <li>스킬을 선택해주세요.</li>
+              <li>{PROFILE_DEFAULT_MESSAGE.skills}</li>
             )}
           </ul>
         </S.BackgroundBox>
@@ -68,15 +69,15 @@ export default function Profile() {
                   <span key={position.name}>{position.name}</span>
                 ))
             ) : (
-              <span>포지션을 선택해주세요.</span>
+              <span>{PROFILE_DEFAULT_MESSAGE.positions}</span>
             )}
           </div>
         </S.BackgroundWrapper>
       </MyProfileWrapper>
       <MyProfileWrapper>
         <label>깃허브</label>
         <S.BackgroundWrapper>
-          <span>{myData.github || '깃허브 링크를 올려보세요.'}</span>
+          <span>{myData.github || PROFILE_DEFAULT_MESSAGE.github}</span>
         </S.BackgroundWrapper>
       </MyProfileWrapper>
       <S.List>
@@ -92,15 +93,15 @@ export default function Profile() {
                 </li>
               ))
             ) : (
-              <li>경력을 기록하세요.</li>
+              <li>{PROFILE_DEFAULT_MESSAGE.career}</li>
             )}
           </ul>
         </S.BackgroundBox>
       </S.List>
       <S.List>
         <label>소&nbsp;&nbsp;&nbsp;개</label>
         <S.BackgroundBox>
-          <S.Bio>{myData.bio || '내 소개를 적어주세요.'}</S.Bio>
+          <S.Bio>{myData.bio || PROFILE_DEFAULT_MESSAGE.bio}</S.Bio>
         </S.BackgroundBox>
       </S.List>
 

src/components/mypage/notifications/all/All.tsx

@@ -32,7 +32,16 @@ export default function All() {
     return <Spinner size='50px' color='#3e5879' />;
   }
 
-  if (!alarmListData || alarmListData.length === 0) {
+  const filterLength = alarmListData?.filter((list) => {
+    if (filterId === 0) {
+      return true;
+    } else if (list.alarmFilterId === filterId) {
+      return true;
+    }
+    return false;
+  }).length;
+
+  if (!alarmListData || alarmListData.length === 0 || filterLength === 0) {
     return (
       <S.WrapperNoContent>
         <NoContent type='notification' />