Merge pull request #15 from whatever-mentoring/feature/Ask-page

feat: 질문하기 페이지 UI 제작

src/App.tsx

@@ -10,6 +10,8 @@ import { MyScrap } from 'pages/Mypage/MyScrap';
 import { Provision } from 'pages/Mypage/Provision';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import WriteAnswer from 'pages/Answer/WriteAnswer';
+import Ask from 'pages/Ask';
+import WriteQuestion from 'pages/Ask/WriteQuestion';
 
 function App() {
   return (
@@ -24,6 +26,10 @@ function App() {
         <Route path="/answer" element={<Answer />} />
         <Route path="/answer/:id" element={<WriteAnswer />} />
 
+        {/* AskPage */}
+        <Route path="/ask" element={<Ask />} />
+        <Route path="/ask/write" element={<WriteQuestion />} />
+
         {/* MyPage */}
         <Route path="/myPage" element={<Mypage />} />
         <Route path="/myPage/myQna" element={<MyQna />} />

src/components/Answer/AnswersContainer.tsx

@@ -1,5 +1,5 @@
 import { Column } from 'assets/common';
-import { AnsButtonCard } from 'components/Card';
+import { AnsButtonCard } from 'components/common/Card';
 
 const AnswersContainer = () => {
   return (

src/components/CategoryBar.tsx → src/components/Category/CategoryBar.tsx

@@ -4,23 +4,32 @@ import { useState } from 'react';
 import { Column, Row } from 'assets/common';
 import Typo from 'styles/Typo';
 
-const CategoryBar = () => {
+const CategoryBar = ({ ctgAll }: { ctgAll: boolean }) => {
   return (
     <Container>
-      <Typo.s1>카테고리</Typo.s1>
-      <Categories></Categories>
+      <Title></Title>
+      <Categories ctgAll={ctgAll}></Categories>
     </Container>
   );
 };
 
-export const Categories = () => {
-  const [categories, setCategories] = useState([
-    { id: 1, name: '전체', selected: true },
-    { id: 2, name: '일상', selected: false },
-    { id: 3, name: '인간관계', selected: false },
-    { id: 4, name: '사회생활', selected: false },
-    { id: 5, name: '기타', selected: false },
-  ]);
+const Categories = ({ ctgAll }: { ctgAll: boolean }) => {
+  const ctgArr = ctgAll
+    ? [
+        { id: 1, name: '전체', selected: true },
+        { id: 2, name: '일상', selected: false },
+        { id: 3, name: '인간관계', selected: false },
+        { id: 4, name: '사회생활', selected: false },
+        { id: 5, name: '기타', selected: false },
+      ]
+    : [
+        { id: 2, name: '일상', selected: false },
+        { id: 3, name: '인간관계', selected: false },
+        { id: 4, name: '사회생활', selected: false },
+        { id: 5, name: '기타', selected: false },
+      ];
+
+  const [categories, setCategories] = useState(ctgArr);
   const handleClick = (id: number) => {
     const updatedCategories = categories.map((category) => {
       if (category.id === id) {
@@ -45,14 +54,20 @@ export const Categories = () => {
     </CtgWrapper>
   );
 };
-
-export default CategoryBar;
-
-export const Container = styled(Column)`
+const Container = styled(Column)`
   width: 100%;
   gap: 6px;
   padding: 10px 30px;
 `;
+const Title = () => {
+  return <Typo.s1>카테고리</Typo.s1>;
+};
+
+CategoryBar.container = Container;
+CategoryBar.ctgs = Categories;
+CategoryBar.text = Title;
+export default CategoryBar;
+
 const CtgWrapper = styled(Row)`
   flex-wrap: wrap;
   gap: 8px;

src/components/Main/CallToAction.tsx

@@ -1,27 +1,30 @@
 import { Column, Row, StyledLink } from 'assets/common';
-import { CTABtn } from 'components/Button';
+import { CTABtn } from 'components/common/Button';
 import styled from 'styled-components';
 import { Palette } from 'styles/Palette';
 import Typo from 'styles/Typo';
 
 const CallToAction = () => {
   return (
-    <StyledLink to="/question">
-      <Container>
-        <Column>
-          <Row>
-            <Typo.h1 color={Palette.Main}>경험 많은</Typo.h1>
-            <Typo.h1>&nbsp;시니어 분들에게</Typo.h1>
-          </Row>
-          <Typo.h1>질문해보세요.✍🏻</Typo.h1>
-        </Column>
-        <CTABtn>질문하러 가기</CTABtn>
-        <Img src="img/smile-face.svg"></Img>
-      </Container>
-    </StyledLink>
+    <Container>
+      <CTAText />
+      <CTABtn to="/ask">질문하러 가기</CTABtn>
+      <Img src="img/smile-face.svg"></Img>
+    </Container>
   );
 };
 
+export const CTAText = () => {
+  return (
+    <Column>
+      <Row>
+        <Typo.h1 color={Palette.Main}>경험 많은</Typo.h1>
+        <Typo.h1>&nbsp;시니어 분들에게</Typo.h1>
+      </Row>
+      <Typo.h1>질문해보세요.✍🏻</Typo.h1>
+    </Column>
+  );
+};
 export default CallToAction;
 
 const Container = styled(Column)`

src/components/Mypage/MyQnaListBox.tsx

@@ -2,7 +2,7 @@ import { styled } from 'styled-components';
 import { Palette } from 'styles/Palette';
 import Typo from 'styles/Typo';
 import { MyPageBoxContainer, Row } from 'assets/common';
-import { CategoryLabel } from 'components/CategoryLabel';
+import { CategoryLabel } from 'components/Category/CategoryLabel';
 
 interface qnaBoxInterface {
   children: string;

src/components/Mypage/ScrapListBox.tsx

@@ -1,7 +1,7 @@
 import { Palette } from 'styles/Palette';
 import Typo from 'styles/Typo';
 import { MyPageBoxContainer, Row, TextContainer } from 'assets/common';
-import { CategoryLabel } from 'components/CategoryLabel';
+import { CategoryLabel } from 'components/Category/CategoryLabel';
 
 interface ScrapBoxInterface {
   children: string;

src/components/Search/SearchBar.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import back from 'assets/icons/back.svg';
 import searchButton from 'assets/icons/search-button.svg';
 import { Palette } from 'styles/Palette';
+import { useNavigate } from 'react-router';
 
 interface searchBarProps {
   text: string;
@@ -17,6 +18,7 @@ const SearchBar = ({
   setIsSearched,
   setSearchText,
 }: searchBarProps) => {
+  const navigate = useNavigate();
   const toggleSearched = () => {
     setIsSearched(true);
     setSearchText(text);
@@ -33,7 +35,7 @@ const SearchBar = ({
 
   return (
     <Container>
-      <img src={back} />
+      <img src={back} onClick={() => navigate(-1)} />
       <SearchInputWrapper>
         <SearchInput
           type="text"

src/components/Search/SearchResult.tsx

@@ -1,11 +1,20 @@
 import { Column, Row } from 'assets/common';
-import CardSlider from 'components/Main/CardSlider';
+import CardSlider from 'components/common/CardSlider';
 import styled from 'styled-components';
 import { Palette } from 'styles/Palette';
 import Typo from 'styles/Typo';
+import { QTitleCard, QContentCard, AnsCard } from 'components/common/Card';
 
 const SearchResult = ({ text }: { text: string }) => {
   let resultNum = 23;
+  const cards = [
+    <QTitleCard></QTitleCard>,
+    <QContentCard></QContentCard>,
+    <AnsCard></AnsCard>,
+    <AnsCard></AnsCard>,
+    <AnsCard></AnsCard>,
+  ];
+
   return (
     <Column gap={30}>
       <Row>
@@ -15,8 +24,8 @@ const SearchResult = ({ text }: { text: string }) => {
         <Typo.b4>개</Typo.b4>
       </Row>
       <ResultContainer>
-        <CardSlider></CardSlider>
-        <CardSlider></CardSlider>
+        <CardSlider cards={cards}></CardSlider>
+        <CardSlider cards={cards}></CardSlider>
       </ResultContainer>
     </Column>
   );

src/components/Button.tsx → src/components/common/Button.tsx

@@ -2,33 +2,38 @@ import styled from 'styled-components';
 import { Palette } from 'styles/Palette';
 import Typo from 'styles/Typo';
 import ctaArrow from 'assets/icons/cta-arrow.svg';
+import { Link } from 'react-router-dom';
 
-export const LongBtn = ({ children }: { children: string }) => {
+interface buttonProps {
+  children: string;
+  to: string;
+}
+export const LongBtn = ({ children, to }: buttonProps) => {
   return (
-    <Container width={330}>
+    <Container to={to}>
       <Typo.h5 color={Palette.White}>{children}</Typo.h5>
     </Container>
   );
 };
 
-export const ShortBtn = ({ children }: { children: string }) => {
+export const ShortBtn = ({ children, to }: buttonProps) => {
   return (
-    <Container>
+    <Container to={to}>
       <Typo.b4 color={Palette.White}>{children}</Typo.b4>
     </Container>
   );
 };
 
-export const CTABtn = ({ children }: { children: string }) => {
+export const CTABtn = ({ children, to }: buttonProps) => {
   return (
-    <CTABtnContainer>
+    <CTABtnContainer to={to}>
       <Typo.b3 color={Palette.White}>{children}</Typo.b3>
       <img src={ctaArrow}></img>
     </CTABtnContainer>
   );
 };
 
-const Container = styled.button<{ width?: number }>`
+const Container = styled(Link)<{ width?: number }>`
   width: ${({ width }) => (width ? `${width}px` : '100%')};
   height: 50px;
 
@@ -39,6 +44,8 @@ const Container = styled.button<{ width?: number }>`
   border: none;
   border-radius: 10px;
   background: ${Palette.Main};
+
+  text-decoration: none;
   cursor: pointer;
 `;
 const CTABtnContainer = styled(Container)`

src/components/Card.tsx → src/components/common/Card.tsx

@@ -9,7 +9,7 @@ import defaultTag from '@assets/icons/default-tag.svg';
 import Typo from 'styles/Typo';
 import { Column, Row, StyledLink } from 'assets/common';
 import { ShortBtn } from './Button';
-import { CategoryLabel } from 'components/CategoryLabel';
+import { CategoryLabel } from 'components/Category/CategoryLabel';
 
 /* Card components */
 
@@ -85,9 +85,7 @@ export const AnsButtonCard = () => {
         <Date>2023.09.11</Date>
       </Column>
 
-      <StyledLink to="/answer/1">
-        <ShortBtn>답변하기</ShortBtn>
-      </StyledLink>
+      <ShortBtn to="/answer/1">답변하기</ShortBtn>
     </ABContainer>
   );
 };

src/components/Main/CardSlider.tsx → src/components/common/CardSlider.tsx

@@ -1,14 +1,13 @@
 import { Column, Row } from 'assets/common';
-import { AnsCard, QContentCard, QTitleCard } from 'components/Card';
+import { AnsCard, QContentCard, QTitleCard } from 'components/common/Card';
 import { useState } from 'react';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import { styled } from 'styled-components';
-import { Palette } from 'styles/Palette';
-import PageIndicator, { Dot } from './PageIndicator';
+import PageIndicator, { Dot } from '../Main/PageIndicator';
 
-const CardSlider = () => {
+const CardSlider = ({ cards }: { cards: React.ReactNode[] }) => {
   const [currentSlide, setCurrentSlide] = useState<number>(0);
   const settings = {
     dots: false,
@@ -21,13 +20,6 @@ const CardSlider = () => {
       setCurrentSlide(current);
     },
   };
-  const cards = [
-    <QTitleCard></QTitleCard>,
-    <QContentCard></QContentCard>,
-    <AnsCard></AnsCard>,
-    <AnsCard></AnsCard>,
-    <AnsCard></AnsCard>,
-  ];
 
   return (
     <Wrapper>

src/components/WriteConfirmBar.tsx → src/components/common/WriteConfirmBar.tsx

@@ -10,14 +10,14 @@ const WriteConfirmBar = ({ userType }: { userType: number }) => {
   const onClickWrite = () => {
     const result = window.confirm('답변을 등록하겠습니까?');
     if (result) {
-      alert('답변이 등록되었습니다.');
+      userType === 1 ? navigate('/answer') : navigate('/ask');
     } else {
     }
   };
   const onClickCancle = () => {
     const result = window.confirm('작성을 취소하시겠습니까?');
     if (result) {
-      userType === 1 ? navigate('/answer') : navigate('/question');
+      userType === 1 ? navigate('/answer') : navigate('/ask');
     } else {
     }
   };