refactor/#289: 공지사항, FAQ 페이지에 UpperLayout 합성 컴포넌트 적용 & 팁 페이지 이미지 수정

src/@types/styles/icon.ts

@@ -5,8 +5,10 @@ export type IconKind =
   | 'menu'
   | 'notification'
   | 'school'
-  | 'arrowBack'
+  | 'schoolBuilding'
   | 'arrowRight'
+  | 'arrowDown'
+  | 'arrowBack'
   | 'plus'
   | 'edit'
   | 'suggest'

src/components/Card/InformCard/index.test.tsx

@@ -18,16 +18,16 @@ type INFORM_CARD_TYPE = 'ANNOUNCEMENT' | 'GRADUATION';
 type INFORM_CARD_DATA = {
   [key in INFORM_CARD_TYPE]: {
     title: string;
-    icon: IconKind & ('school' | 'notification');
+    icon: IconKind & ('school' | 'schoolBuilding');
     onClick: () => void;
   };
 };
 
 const graduationLink = 'https://ce.pknu.ac.kr/ce/2889';
 const INFORM_CARD: INFORM_CARD_DATA = {
   ANNOUNCEMENT: {
-    title: '공지사항',
-    icon: 'notification',
+    title: '학교 공지사항',
+    icon: 'schoolBuilding',
     onClick: () => mockRouterTo('/announcement'),
   },
   GRADUATION: {

src/components/Card/InformCard/index.tsx

@@ -8,7 +8,7 @@ import { THEME } from '@styles/ThemeProvider/theme';
 import { IconKind } from '@type/styles/icon';
 
 interface InformCardProps {
-  icon: IconKind & ('school' | 'notification');
+  icon: IconKind & ('school' | 'schoolBuilding' | 'speaker');
   title: string;
   majorRequired: boolean;
   onClick: () => void;

src/components/Common/Icon/index.tsx

@@ -5,6 +5,7 @@ import {
   MdHome,
   MdAccountCircle,
   MdSchool,
+  MdOutlineLocationCity,
   MdNotifications,
   MdMenu,
   MdArrowBackIos,
@@ -26,6 +27,7 @@ import {
   MdOutlineMyLocation,
   MdOutlineError,
   MdOutlineKeyboardArrowRight,
+  MdOutlineKeyboardArrowDown,
 } from 'react-icons/md';
 
 const ICON: { [key in IconKind]: IconType } = {
@@ -35,8 +37,10 @@ const ICON: { [key in IconKind]: IconType } = {
   menu: MdMenu,
   notification: MdNotifications,
   school: MdSchool,
-  arrowBack: MdArrowBackIos,
+  schoolBuilding: MdOutlineLocationCity,
   arrowRight: MdOutlineKeyboardArrowRight,
+  arrowDown: MdOutlineKeyboardArrowDown,
+  arrowBack: MdArrowBackIos,
   plus: MdAddCircleOutline,
   edit: MdOutlineModeEdit,
   suggest: MdOutlineQuestionAnswer,

src/components/FAQBox/index.tsx

@@ -18,36 +18,32 @@ const FAQBox = ({ question, answer }: FAQBoxProps) => {
   const [showAnswer, setShowAnswer] = useState<boolean>(false);
   const toggleAnswer = () => setShowAnswer((prevState) => !prevState);
 
+  const seperatedAnswerText = answer.text.split(FAQ_CONSTANTS.LINE_SEPERATOR);
   const moveToLink = () => {
     if (!answer.link) return;
     openLink(answer.link);
   };
-
   const hasAnswerLink = () => !!answer.link;
-  const answerTextSeperatedLine = answer.text.split(
-    FAQ_CONSTANTS.LINE_SEPERATOR,
-  );
 
   return (
     <>
       <QuestionContainer onClick={toggleAnswer} showAnswer={showAnswer}>
         <QuestionMark>{FAQ_CONSTANTS.QUESTION_MARK}</QuestionMark>
         <QuestionText>{question}</QuestionText>
         <IconContainer>
-          <Icon kind="arrowRight" size="24" />
+          <Icon kind="arrowDown" size="24" />
         </IconContainer>
       </QuestionContainer>
       {showAnswer && (
         <AnswerContainer>
-          {answerTextSeperatedLine.map((line, index) => (
+          {seperatedAnswerText.map((line, index) => (
             <p key={index}>{line}</p>
           ))}
           {hasAnswerLink() && (
             <StyledLink onClick={moveToLink}>{FAQ_CONSTANTS.LINK}</StyledLink>
           )}
         </AnswerContainer>
       )}
-
       <BoundaryLine />
     </>
   );
@@ -66,7 +62,7 @@ const QuestionContainer = styled.div<{ showAnswer: boolean }>`
       color: ${showAnswer && THEME.PRIMARY};
     }
     & > div > svg {
-      transform: ${showAnswer ? 'rotate(90deg)' : 'rotate(0deg)'};
+      transform: ${showAnswer ? 'rotate(-180deg)' : 'rotate(0deg)'};
       transition: all ease 0.3s;
     }
   `}
@@ -84,8 +80,6 @@ const IconContainer = styled.div`
   position: absolute;
   right: 0;
   display: flex;
-  align-items: center;
-  justify-content: flex-end;
 `;
 
 const AnswerContainer = styled.div`
@@ -102,6 +96,8 @@ const StyledLink = styled.span`
   border-bottom: 1px solid ${THEME.PRIMARY};
 `;
 
-const BoundaryLine = styled.div`
-  border-bottom: 1px solid #ededed;
+const BoundaryLine = styled.hr`
+  height: 1px;
+  background-color: #ededed;
+  border: none;
 `;

src/pages/Announcement/components/AnnounceSearch.tsx → src/components/InformUpperLayout/InformSearchForm.tsx

@@ -7,19 +7,19 @@ import useRouter from '@hooks/useRouter';
 import useToasts from '@hooks/useToast';
 import React, { useRef } from 'react';
 
-interface AnnounceSearchProps {
+interface InformSearchForm {
   category: 'school' | 'major';
 }
 
-const AnnounceSearch = ({ category }: AnnounceSearchProps) => {
+const InformSearchForm = ({ category }: InformSearchForm) => {
   const { routerTo } = useRouter();
   const { addToast } = useToasts();
-
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     if (!inputRef.current) return;
     e.preventDefault();
+
     if (inputRef.current.value.length === 0) {
       addToast(TOAST_MESSAGES.SEARCH_KEYWORD);
       return;
@@ -31,22 +31,20 @@ const AnnounceSearch = ({ category }: AnnounceSearchProps) => {
   };
 
   return (
-    <div>
-      <StyledForm onSubmit={handleSubmit}>
-        <StyledInput
-          ref={inputRef}
-          type="text"
-          placeholder={PLCACEHOLDER_MESSAGES.SEARCH_TITLE}
-        />
-        <StyledIconWrapper onClick={() => handleSubmit}>
-          <Icon kind="search" color="#7A9DD3" />
-        </StyledIconWrapper>
-      </StyledForm>
-    </div>
+    <StyledForm onSubmit={handleSubmit}>
+      <StyledInput
+        ref={inputRef}
+        type="text"
+        placeholder={PLCACEHOLDER_MESSAGES.SEARCH_TITLE}
+      />
+      <StyledIconWrapper onClick={() => handleSubmit}>
+        <Icon kind="search" color="#7A9DD3" />
+      </StyledIconWrapper>
+    </StyledForm>
   );
 };
 
-export default AnnounceSearch;
+export default InformSearchForm;
 
 const StyledForm = styled.form`
   display: flex;

src/components/InformUpperLayout/domain/getInformUpperLayoutSubElement.ts

@@ -1,13 +1,15 @@
 import { Children, isValidElement } from 'react';
 
+import InformSearchForm from '../InformSearchForm';
 import InformSubTitle from '../InformSubTitle';
 import InformTitle from '../InformTitle';
 import InformTypeButton from '../InformTypeButton';
 
 type InformUpperLayoutChildType =
   | typeof InformTitle
   | typeof InformSubTitle
-  | typeof InformTypeButton;
+  | typeof InformTypeButton
+  | typeof InformSearchForm;
 
 const getInformUpperLayoutSubElement = (
   children: React.ReactNode,

src/components/InformUpperLayout/index.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import React from 'react';
 
 import getInformUpperLayoutSubElement from './domain/getInformUpperLayoutSubElement';
+import InformSearchForm from './InformSearchForm';
 import InformSubTitle from './InformSubTitle';
 import InformTitle from './InformTitle';
 import InformTypeButton from './InformTypeButton';
@@ -18,11 +19,16 @@ const InformUpperLayout = ({ children }: StrictPropsWithChildren) => {
     children,
     InformTypeButton,
   );
+  const informSearchForm = getInformUpperLayoutSubElement(
+    children,
+    InformSearchForm,
+  );
 
   return (
     <Container>
       {informTitle}
       {informSubTitle}
+      {informSearchForm}
       {informTypeButton && (
         <TypeButtonContainer>{informTypeButton}</TypeButtonContainer>
       )}
@@ -35,6 +41,7 @@ export default InformUpperLayout;
 InformUpperLayout.InformTitle = InformTitle;
 InformUpperLayout.InformSubTitle = InformSubTitle;
 InformUpperLayout.InformTypeButton = InformTypeButton;
+InformUpperLayout.InformSearchForm = InformSearchForm;
 
 const Container = styled.section`
   padding: 0px 20px 0px 20px;
@@ -43,7 +50,7 @@ const Container = styled.section`
 `;
 
 const TypeButtonContainer = styled.div`
-  padding: 0 0 10px 0;
+  padding: 10px 0 10px 0;
   display: flex;
   column-gap: 10px;
 `;

src/components/List/AnnounceList/index.tsx

@@ -1,7 +1,5 @@
 import { ANNOUNCEMENT_TYPE } from '@constants/announcement';
-import styled from '@emotion/styled';
 import { AnnounceSearchList } from '@pages/Announcement/components';
-import { THEME } from '@styles/ThemeProvider/theme';
 import { AnnounceItemList, AnnouncementType } from '@type/announcement';
 import { AxiosError, AxiosResponse } from 'axios';
 import { Fragment } from 'react';
@@ -32,7 +30,6 @@ const AnnounceList = ({ resource, type }: AnnounceListProps) => {
 
   return (
     <>
-      <BoundaryLine />
       {type === ANNOUNCEMENT_TYPE.NORMAL &&
         normalAnnouncemnet.map((announce, idx) => (
           <Fragment key={idx}>
@@ -55,7 +52,3 @@ const AnnounceList = ({ resource, type }: AnnounceListProps) => {
 };
 
 export default AnnounceList;
-
-const BoundaryLine = styled.div`
-  border-bottom: 1px solid ${THEME.TEXT.BLACK};
-`;

src/constants/tip.ts

@@ -38,8 +38,8 @@ export const SHORTCUT_DATA: readonly TipData[] = [
   {
     title: '이루미',
     subTitle: '부경대 포털 사이트\n바로가기',
-    webpPath: '/assets/tipImages/webp/baekgyeong_teach.webp',
-    pngPath: '/assets/tipImages/png/baekgyeong_teach.png',
+    webpPath: '/assets/tipImages/webp/baekgyeong_hand_love.webp',
+    pngPath: '/assets/tipImages/png/baekgyeong_hand_love.png',
     link: 'https://portal.pknu.ac.kr/',
   },
   {

src/pages/Announcement/components/AnnounceContainer.tsx

@@ -1,11 +1,13 @@
 import fetchAnnounceList from '@apis/Suspense/fetch-announce-list';
+import InformUpperLayout from '@components/InformUpperLayout';
 import AnnounceList from '@components/List/AnnounceList';
 import AnnounceCardSkeleton from '@components/List/AnnounceList/Skeleton';
 import { ANNOUNCEMENT_TYPE } from '@constants/announcement';
 import PATH from '@constants/path';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import useRouter from '@hooks/useRouter';
+import { THEME } from '@styles/ThemeProvider/theme';
 import {
   AnnounceItemList,
   AnnouncementCategory,
@@ -14,9 +16,6 @@ import {
 import React, { Suspense, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
-import AnnounceSearch from './AnnounceSearch';
-import AnnounceTypeButtons from './AnnounceTypeButtons';
-
 interface AnnounceContainerProps {
   title: string;
   category: AnnouncementCategory;
@@ -45,20 +44,21 @@ const AnnounceContainer = ({
 
   return (
     <Container>
-      <AnnounceTitle>{title}</AnnounceTitle>
-      <AnnounceSearch category={category} />
-      <ButtonContainer>
-        <AnnounceTypeButtons
+      <InformUpperLayout>
+        <InformUpperLayout.InformTitle title={title} />
+        <InformUpperLayout.InformSearchForm category={category} />
+        <InformUpperLayout.InformTypeButton
           type="일반"
-          onClick={showNormalAnnouncement}
           isActive={type === ANNOUNCEMENT_TYPE.NORMAL}
+          onClick={showNormalAnnouncement}
         />
-        <AnnounceTypeButtons
+        <InformUpperLayout.InformTypeButton
           type="고정"
-          onClick={showPinnedAnnouncement}
           isActive={type === ANNOUNCEMENT_TYPE.PINNED}
+          onClick={showPinnedAnnouncement}
         />
-      </ButtonContainer>
+      </InformUpperLayout>
+      <BoundaryLine />
       <AnnounceListContainer type={type as AnnouncementType}>
         <Suspense fallback={<AnnounceCardSkeleton length={30} />}>
           <AnnounceList resource={resource} type={type as AnnouncementType} />
@@ -71,23 +71,9 @@ const AnnounceContainer = ({
 export default AnnounceContainer;
 
 const Container = styled.div`
-  overflow-x: hidden;
   display: flex;
   flex-direction: column;
-
-  row-gap: 15px;
-  padding: 10px;
-`;
-
-const AnnounceTitle = styled.span`
-  margin-top: 1rem;
-  font-size: 1.5rem;
-  font-weight: bold;
-`;
-
-const ButtonContainer = styled.div`
-  display: flex;
-  column-gap: 10px;
+  overflow-x: hidden;
 `;
 
 const getAnimationType = (type: AnnouncementType) => {
@@ -96,7 +82,8 @@ const getAnimationType = (type: AnnouncementType) => {
 };
 
 const AnnounceListContainer = styled.div<{ type: AnnouncementType }>`
-  width: 100%;
+  padding: 0 20px 0 20px;
+
   overflow: hidden;
   animation: ${({ type }) => getAnimationType(type)} 0.3s forwards;
 `;
@@ -118,3 +105,11 @@ const AnnounceSlideLeft = keyframes`
     transform: translateX(0%);
   }
 `;
+
+const BoundaryLine = styled.hr`
+  height: 1px;
+  width: calc(100% - 40px);
+  margin: 0 auto;
+  background-color: ${THEME.TEXT.BLACK};
+  border: none;
+`;