[feat] 검색 페이지 api 연결 전 뷰 생성

src/assets/svg/IcAngryBear.jsx

@@ -0,0 +1,14 @@
+const IcAngryBear = () => (
+<svg width="60" height="38" viewBox="0 0 60 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="14.1925" cy="8.94741" rx="3.68422" ry="3.68422" fill="black"/>
+<ellipse cx="45.7714" cy="8.94741" rx="3.68422" ry="3.68422" fill="black"/>
+<line x1="8.91757" y1="1.30022" x2="19.4439" y2="7.61603" stroke="black" stroke-width="2"/>
+<line x1="49.9211" y1="1.85284" x2="39.4518" y2="8.26284" stroke="black" stroke-width="2"/>
+<ellipse cx="29.7053" cy="26.1049" rx="13.1579" ry="11.579" fill="#F2C879"/>
+<ellipse cx="30.2316" cy="15.0521" rx="3.15791" ry="1.57895" fill="black"/>
+<path d="M12.6316 20.8415C12.6316 22.5856 9.80394 23.9994 6.31581 23.9994C2.82769 23.9994 0 22.5856 0 20.8415C0 19.0974 2.82769 17.6836 6.31581 17.6836C9.80394 17.6836 12.6316 19.0974 12.6316 20.8415Z" fill="#EFDDE3"/>
+<path d="M60 20.8415C60 22.5856 57.1723 23.9994 53.6842 23.9994C50.1961 23.9994 47.3684 22.5856 47.3684 20.8415C47.3684 19.0974 50.1961 17.6836 53.6842 17.6836C57.1723 17.6836 60 19.0974 60 20.8415Z" fill="#EFDDE3"/>
+</svg>
+);
+
+export default IcAngryBear;

src/assets/svg/IcCalmBear.jsx

@@ -0,0 +1,12 @@
+const IcCalmBear = ()=> (
+< svg width="60" height="33" viewBox="0 0 60 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="29.7046" cy="20.8402" rx="13.1579" ry="11.579" fill="#F2C879"/>
+<ellipse cx="30.2309" cy="9.78745" rx="3.15791" ry="1.57895" fill="black"/>
+<path d="M12.6316 15.5769C12.6316 17.3209 9.80394 18.7348 6.31581 18.7348C2.82769 18.7348 0 17.3209 0 15.5769C0 13.8328 2.82769 12.4189 6.31581 12.4189C9.80394 12.4189 12.6316 13.8328 12.6316 15.5769Z" fill="#EFDDE3"/>
+<path d="M60 15.5769C60 17.3209 57.1723 18.7348 53.6842 18.7348C50.1961 18.7348 47.3684 17.3209 47.3684 15.5769C47.3684 13.8328 50.1961 12.4189 53.6842 12.4189C57.1723 12.4189 60 13.8328 60 15.5769Z" fill="#EFDDE3"/>
+<ellipse cx="14.1925" cy="3.68422" rx="3.68422" ry="3.68422" fill="black"/>
+<ellipse cx="45.7714" cy="3.68422" rx="3.68422" ry="3.68422" fill="black"/>
+</svg>
+);
+
+export default IcCalmBear;

src/assets/svg/IcCancel.jsx

@@ -0,0 +1,7 @@
+const IcCancel = () => (
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L15.9783 15.1358" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<path d="M1 15.5571L16 1.44317" stroke="black" stroke-width="2" stroke-linecap="round"/>
+</svg>
+);
+export default IcCancel;

src/assets/svg/IcHappyBear.jsx

@@ -0,0 +1,14 @@
+const IcHappyBear = () => (
+<svg width="60" height="31" viewBox="0 0 60 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="29.7053" cy="18.8461" rx="13.1579" ry="11.579" fill="#F2C879"/>
+<ellipse cx="30.2316" cy="7.7933" rx="3.1579" ry="1.57895" fill="black"/>
+<path d="M12.6316 13.5827C12.6316 15.3268 9.80392 16.7406 6.3158 16.7406C2.82768 16.7406 0 15.3268 0 13.5827C0 11.8386 2.82768 10.4248 6.3158 10.4248C9.80392 10.4248 12.6316 11.8386 12.6316 13.5827Z" fill="#EFDDE3"/>
+<path d="M60 13.5827C60 15.3268 57.1723 16.7406 53.6842 16.7406C50.1961 16.7406 47.3684 15.3268 47.3684 13.5827C47.3684 11.8386 50.1961 10.4248 53.6842 10.4248C57.1723 10.4248 60 11.8386 60 13.5827Z" fill="#EFDDE3"/>
+<rect width="7.77096" height="2.38843" rx="1.19421" transform="matrix(-0.795154 -0.606407 -0.606407 0.795154 20.6238 4.71191)" fill="black"/>
+<rect width="7.77096" height="2.16869" rx="1.08435" transform="matrix(-0.905091 0.425219 0.425219 0.905091 19.6658 3.73828)" fill="black"/>
+<rect x="39.9993" y="4.70801" width="7.58204" height="2.33036" rx="1.16518" transform="rotate(-37.3302 39.9993 4.70801)" fill="black"/>
+<rect x="40.9353" y="3.75586" width="7.58204" height="2.11597" rx="1.05798" transform="rotate(25.1645 40.9353 3.75586)" fill="black"/>
+</svg>
+);
+
+export default IcHappyBear;

src/assets/svg/IcSadBear.jsx

@@ -0,0 +1,14 @@
+const IcSadBear = () => (
+<svg width="60" height="32" viewBox="0 0 60 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="29.7046" cy="19.7367" rx="13.1579" ry="11.579" fill="#F2C879"/>
+<ellipse cx="30.2309" cy="8.68393" rx="3.15791" ry="1.57895" fill="black"/>
+<path d="M18.1487 13.5438C18.8988 12.4158 19.8071 9.70188 18.1251 7.82299C16.4431 5.94409 17.352 3.34974 18.102 2.22183L15.2208 3.11663L12.6981 2.08265C11.9382 3.59273 10.7368 6.85053 12.0101 7.80111C13.2834 8.7517 12.77 12.0337 12.0101 13.5438L18.1487 13.5438Z" fill="#9EE7EB"/>
+<path d="M12.6316 14.4733C12.6316 16.2174 9.80394 17.6312 6.31581 17.6312C2.82769 17.6312 0 16.2174 0 14.4733C0 12.7293 2.82769 11.3154 6.31581 11.3154C9.80394 11.3154 12.6316 12.7293 12.6316 14.4733Z" fill="#EFDDE3"/>
+<path d="M60 14.4733C60 16.2174 57.1723 17.6312 53.6842 17.6312C50.1961 17.6312 47.3684 16.2174 47.3684 14.4733C47.3684 12.7293 50.1961 11.3154 53.6842 11.3154C57.1723 11.3154 60 12.7293 60 14.4733Z" fill="#EFDDE3"/>
+<path d="M47.3505 13.1054C48.1502 12.073 49.0173 9.37314 47.2064 7.64173C45.3955 5.91032 45.4207 2.88465 46.2204 1.85226L43.3335 3.07092L40.697 2.39536C39.8883 3.77851 39.6657 6.76408 41.0347 7.64173C42.4037 8.51937 42.3698 11.7225 41.5611 13.1056L47.3505 13.1054Z" fill="#9EE7EB"/>
+<path d="M10.5083 1C11.8002 2.58869 15.5035 4.81285 19.982 1" stroke="black" stroke-width="2"/>
+<path d="M38.9292 1C40.2211 2.58869 43.9244 4.81285 48.4029 1" stroke="black" stroke-width="2"/>
+</svg>
+);
+
+export default IcSadBear;

src/assets/svg/IcSearching.jsx

@@ -0,0 +1,8 @@
+const IcSearching = () => (
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.25" cy="8.25" r="7" stroke="white" stroke-width="2.5"/>
+<path d="M13 13.5L17.5 18" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+</svg>
+);
+
+export default IcSearching;

src/assets/svg/IcSurprisedBear.jsx

@@ -0,0 +1,14 @@
+const IcSurprisedBear = () => (
+<svg width="68" height="52" viewBox="0 0 68 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="29.8164" cy="40.3296" rx="13.2075" ry="11.6226" fill="#F2C879"/>
+<ellipse cx="30.3446" cy="29.2358" rx="3.16979" ry="1.5849" fill="black"/>
+<path d="M12.6792 35.0467C12.6792 36.7974 9.84084 38.2165 6.33958 38.2165C2.83833 38.2165 0 36.7974 0 35.0467C0 33.2961 2.83833 31.877 6.33958 31.877C9.84084 31.877 12.6792 33.2961 12.6792 35.0467Z" fill="#EFDDE3"/>
+<path d="M60.2256 35.0467C60.2256 36.7974 57.3872 38.2165 53.886 38.2165C50.3847 38.2165 47.5464 36.7974 47.5464 35.0467C47.5464 33.2961 50.3847 31.877 53.886 31.877C57.3872 31.877 60.2256 33.2961 60.2256 35.0467Z" fill="#EFDDE3"/>
+<path d="M17.9438 19.9401C17.9438 23.7332 16.2881 26.808 14.2457 26.808C12.2033 26.808 10.5476 23.7332 10.5476 19.9401C10.5476 16.1471 12.2033 13.0723 14.2457 13.0723C16.2881 13.0723 17.9438 16.1471 17.9438 19.9401Z" fill="black"/>
+<ellipse cx="45.9437" cy="19.9401" rx="3.69809" ry="6.86788" fill="black"/>
+<path d="M63.9778 20.7436L60.6878 11.7416C60.0785 7.43637 58.4944 -0.000144835 63.9778 2.11566e-09C69.4613 0.00014484 66.6347 12.5553 66.9024 11.7416C66.9938 11.4638 65.9275 17.7429 63.9778 20.7436Z" fill="#FDE17F"/>
+<ellipse cx="64.3676" cy="24.018" rx="1.09177" ry="1.63765" fill="#FDE17F"/>
+</svg>
+);
+
+export default IcSurprisedBear;

src/assets/svg/IcWorriedBear.jsx

@@ -0,0 +1,18 @@
+const IcWorriedBear = () => (
+<svg width="60" height="38" viewBox="0 0 60 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="29.7046" cy="26.0526" rx="13.1579" ry="11.579" fill="#F2C879"/>
+<ellipse cx="30.2309" cy="14.9999" rx="3.15791" ry="1.57895" fill="black"/>
+<path d="M12.6316 20.7893C12.6316 22.5333 9.80394 23.9472 6.31581 23.9472C2.82769 23.9472 0 22.5333 0 20.7893C0 19.0452 2.82769 17.6313 6.31581 17.6313C9.80394 17.6313 12.6316 19.0452 12.6316 20.7893Z" fill="#EFDDE3"/>
+<path d="M60 20.7893C60 22.5333 57.1723 23.9472 53.6842 23.9472C50.1961 23.9472 47.3684 22.5333 47.3684 20.7893C47.3684 19.0452 50.1961 17.6313 53.6842 17.6313C57.1723 17.6313 60 19.0452 60 20.7893Z" fill="#EFDDE3"/>
+<path d="M20.6066 8.48518C20.6066 11.6768 18.0145 14.264 14.8171 14.264C11.6196 14.264 9.02759 11.6768 9.02759 8.48518C9.02759 6.67933 13.0079 2.34522 14.8171 2.70632C18.0145 2.70632 20.6066 5.29361 20.6066 8.48518Z" fill="black"/>
+<ellipse cx="13.3698" cy="6.31942" rx="2.17106" ry="2.16707" fill="white"/>
+<ellipse cx="16.9881" cy="9.93007" rx="1.44737" ry="1.44472" fill="white"/>
+<path d="M38.9293 8.90559C38.9293 12.0972 41.5214 14.6845 44.7188 14.6845C47.9163 14.6845 50.5083 12.0972 50.5083 8.90559C50.5083 7.09974 46.528 2.76563 44.7188 3.12673C41.5214 3.12673 38.9293 5.71402 38.9293 8.90559Z" fill="black"/>
+<ellipse cx="2.17106" cy="2.16707" rx="2.17106" ry="2.16707" transform="matrix(-1 0 0 1 48.3372 4.5708)" fill="white"/>
+<ellipse cx="1.44737" cy="1.44472" rx="1.44737" ry="1.44472" transform="matrix(-1 0 0 1 43.9951 8.90576)" fill="white"/>
+<path d="M7.35034 7.31581C9.31526 7.08189 13.3293 5.49124 13.6662 1" stroke="black"/>
+<path d="M52.6135 8.36855C50.6486 8.13463 46.6346 6.54398 46.2977 2.05273" stroke="black"/>
+</svg>
+);
+
+export default IcWorriedBear;

src/assets/svg/index.js

@@ -1,3 +1,11 @@
+export { default as IcCancel } from './IcCancel';
+export { default as IcAngryBear } from './IcAngryBear';
+export { default as IcCalmBear } from './IcCalmBear';
+export { default as IcHappyBear } from './IcHappyBear';
+export { default as IcSadBear } from './IcSadBear';
+export { default as IcSurprisedBear } from './IcSurprisedBear';
+export { default as IcWorriedBear } from './IcWorriedBear';
+export { default as IcSearching } from './IcSearching';
 export { default as IcError } from './IcError';
 export { default as IcMyPage } from './IcMyPage';
 export { default as IcSearchByEmotion } from './IcSearchByEmotionButton';

src/components/Search/CurrentBox/CurrentBox.jsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { IcCancel } from '../../../assets/svg';
+import * as S from './CurrentBox.style';
+
+function CurrentBox () {
+    const [boxes, setBoxes] = useState([
+        { id: 1, text: "일기 1" },
+        { id: 2, text: "일기 2" },
+        { id: 3, text: "일기 3" },
+    ]);
+
+    const handleDelete = (id) => {
+        setBoxes(boxes.filter(box => box.id !== id));
+        console.log(" 버튼 눌렸다.");
+    };
+
+    return (
+        <S.CurrentBoxListWrapper>
+        {boxes.map((box) => (
+            <S.CurrentBoxWrapper key={box.id}>
+                <S.Text>{box.text}</S.Text>
+                <IcCancel onClick={() => handleDelete(box.id)} />
+            </S.CurrentBoxWrapper>
+        ))}
+    </S.CurrentBoxListWrapper>
+    )
+}
+
+export default CurrentBox;

src/components/Search/CurrentBox/CurrentBox.style.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const CurrentBoxListWrapper = styled.div`
+  ${({ theme: { mixin } }) => mixin.flexCenter({})};
+  gap: 0.8rem; 
+`;
+
+export const CurrentBoxWrapper = styled.div`
+${({ theme: { mixin } }) => mixin.flexBox({justify: 'space-between', align: 'center'})};
+width: 32rem;
+height: 5.5rem;
+border-radius: 20px;
+padding : 0 2.4rem;
+background: rgba(255, 255, 255, 0.75);
+`;
+
+export const Text = styled.div`
+color: black;
+${({ theme }) => theme.fonts.body_01};
+`;

src/components/Search/DiaryBox/DiaryBox.jsx

@@ -0,0 +1,15 @@
+import * as S from './DiaryBox.style';
+
+function DiaryBox () {
+    return (
+        <S.DiaryBoxWrapper>
+            <S.Img/>
+            <S.TextWrapper>
+                <S.DiaryContent>...내가 어제 일기를 썼는데...</S.DiaryContent>
+                <S.Date>2024.03.02 | 운수좋은 날</S.Date>
+            </S.TextWrapper>
+        </S.DiaryBoxWrapper>
+    )
+}
+
+export default DiaryBox;

src/components/Search/DiaryBox/DiaryBox.style.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+export const DiaryBoxWrapper = styled.div`
+${({ theme: { mixin } }) => mixin.flexBox({align: 'center'})};
+padding: 0.9rem;
+background: rgba(255, 255, 255, 0.70);
+border-radius: 30px;
+width: 32rem;
+height: 7.8rem;
+gap:1.3rem;
+`;
+
+export const Img = styled.img`
+width: 6rem;
+height: 6rem;
+background: gray;
+border-radius: 20px;
+
+`;
+
+export const TextWrapper = styled.div`
+${({ theme: { mixin } }) => mixin.flexBox({direction: 'column'})};
+`;
+
+export const DiaryContent = styled.p`
+${({ theme }) => theme.fonts.body_01};
+
+`;
+
+export const Date = styled.p`
+${({ theme }) => theme.fonts.body_10};
+`;

src/components/Search/FeelingBox/FeelingBox.jsx

@@ -0,0 +1,51 @@
+import { useNavigate } from 'react-router-dom';
+import { IcHappyBear, IcSadBear, IcAngryBear, IcWorriedBear, IcCalmBear, IcSurprisedBear } from '../../../assets/svg';
+import * as S from './FeelingBox.style';
+import usePostFeelingList from '../../../hooks/queries/mypage/usePostFeelingList';
+import { useRecoilState } from 'recoil';
+import { diaryListAtom } from '../../../recoil/atoms';
+
+function FeelingBox () {
+    const navigate = useNavigate();
+    const mutation = usePostFeelingList();
+    const [diaryList, setDiaryList] = useRecoilState(diaryListAtom);
+
+    const feelings = [
+        { icon: IcHappyBear, label: "기쁨", text: 'HAPPY' },
+        { icon: IcSadBear, label: "슬픔", text: 'SAD'},
+        { icon: IcAngryBear, label: "분노",text: 'ANGRY' },
+        { icon: IcWorriedBear, label: "걱정",text: 'WORRIED' },
+        { icon: IcCalmBear, label: "평온",text : 'RELAX' },
+        { icon: IcSurprisedBear, label: "놀람",text: 'SURPRISED' },
+    ];
+
+    const handleFeelingBtn = (btnEnum) => {
+        const body = {
+            feeling : btnEnum,
+          };
+
+          mutation.mutate(body, {
+            onSuccess: (response) => {
+              setDiaryList(handleList(response.data.feelingList));
+              navigate('/searchbyemotion/diarylist');
+            },
+            onError: (error) => {
+              setErrorMessage(error.response.data.message);
+              console.log(errorMessage);
+            //   openModal();
+            }
+          });
+    }
+    return (
+        <S.CarouselWrapper>
+            {feelings.map((feeling, index) => (
+                <S.FeelingBoxWrapper key={index} onClick={()=>{handleFeelingBtn(feeling.text)}}>
+                        <feeling.icon />
+                        {feeling.label}
+                </S.FeelingBoxWrapper>
+            ))}
+        </S.CarouselWrapper>
+    )
+}
+
+export default FeelingBox;

src/components/Search/FeelingBox/FeelingBox.style.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const CarouselWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  overflow-x: scroll; /* 가로 스크롤을 활성화 */
+  scroll-snap-type: x mandatory; /* 스크롤 스냅을 적용하여 자연스러운 캐러셀 */
+  gap: 1.4rem;
+
+  &::-webkit-scrollbar {
+    display: none; /* 스크롤바 숨기기 */
+  }
+
+`;
+
+export const FeelingBoxWrapper = styled.div`
+${({ theme: { mixin } }) => mixin.flexBox({justify: 'center', align: 'center'})};
+width: 15rem;
+height: 9rem;
+gap: 1.5rem;
+padding:0 2rem;
+background: rgba(255, 89, 89, 0.20); 
+border: 2px solid white;
+border-radius: 30px; 
+${({ theme }) => theme.fonts.body_01};
+
+`;
+

src/components/Search/Input/SearchInput.jsx

@@ -0,0 +1,14 @@
+import * as S from './SearchInput.style';
+
+function SearchInput ({ onHoverChange }) {
+    return (
+        <S.InputWrappr>
+            <S.Input
+                placeholder='검색할 키워드를 입력하세요.'
+                onMouseEnter={() => onHoverChange(true)}
+                onMouseLeave={() => onHoverChange(false)}/>
+        </S.InputWrappr>
+    )
+}
+
+export default SearchInput;

src/components/Search/Input/SearchInput.style.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+export const InputWrappr = styled.div`
+display:flex;
+padding : 2.2rem;
+width: 27.6rem;
+height: 6rem;
+border-radius: 20px; 
+background-color: white; 
+    opacity: 0.5; 
+
+`;
+
+export const Input = styled.input`
+${({ theme }) => theme.fonts.body_02};
+${({ theme }) => theme.colors.text_gray};
+border: none;
+outline: none;
+`;

src/pages/Information/Information.style.js

@@ -3,7 +3,7 @@ import { IcHoneyBear } from "../../assets/svg";
 
 export const InfoWrapper = styled.div`
     ${({ theme: { mixin } }) => mixin.flexCenter({})};
-    width: 100%
+    width: 100%;
     height: auto;
     min-height: 100vh;
     max-height: fit-content;

src/pages/SearchDiary/SearchDiary.jsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import CurrentBox from '../../components/Search/CurrentBox/CurrentBox';
+import DiaryBox from '../../components/Search/DiaryBox/DiaryBox';
+import FeelingBox from '../../components/Search/FeelingBox/FeelingBox';
+import SearchInput from '../../components/Search/Input/SearchInput';
+import * as S from './SearchDiary.style';
+import { Navigate, useNavigate } from 'react-router-dom';
+
+function SearchDiary() {
+    const [isHovered, setIsHovered] = useState(false);
+    const navigate = useNavigate();
+    const handleHomeBtn = () => {
+        navigate('/main');
+    }
+    return (
+        <S.SearchingWrapper>
+            <S.Header>
+            <SearchInput onHoverChange={setIsHovered} />
+            {isHovered?<S.BackBtn>검색</S.BackBtn>:<S.BackBtn onClick={handleHomeBtn}>취소</S.BackBtn>}
+
+            </S.Header>
+
+            {isHovered ? (
+                <DiaryBox />
+            ) : (
+                <>
+                    <S.FeelingBtnList>
+                        <p>감정별 조회</p>
+                        <FeelingBox />
+                    </S.FeelingBtnList>
+
+                    <S.CurrentBoxList>
+                        <p>최근 검색</p>
+                        <CurrentBox />
+                    </S.CurrentBoxList>
+                </>
+            )}
+        </S.SearchingWrapper>
+    )
+}
+
+export default SearchDiary;