design: 토글 버튼, 더보기 아이콘 디자인 변경

GlowTales · Aug 28, 2024 · 1fb78f5 · 1fb78f5
1 parent ce0dfe7
commit 1fb78f5
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/dropdowntrireverse.png b/public/dropdowntrireverse.png
diff --git a/src/components/common/common.styled.ts b/src/components/common/common.styled.ts
@@ -52,6 +52,7 @@ export const CommonTitleWrapper = styled.div`
   align-items: flex-start;
   margin: 5px;
   .more {
+    display: flex;
     margin-right: 1rem;
     font-size: 1.8rem;
     text-align: center;

diff --git a/src/components/common/dropDown/Dropdown.tsx b/src/components/common/dropDown/Dropdown.tsx
@@ -39,7 +39,7 @@ const Dropdown = ({ selectList, setter, width }: DropdownProps) => {
         )}
         {selectedText || "옵션 선택"}
         <img
-          src="/dropdowntri.png"
+          src={isOpen?"/dropdowntrireverse.png":"/dropdowntri.png"}
           alt="드롭다운 삼각형"
           onClick={toggleDropdown}
         />

diff --git a/src/components/main/homeMain/homeRecentTales/HomeRecentTales.tsx b/src/components/main/homeMain/homeRecentTales/HomeRecentTales.tsx
@@ -11,6 +11,7 @@ import { CardProps } from "@type/card";
 import { useNavigate } from "react-router-dom";
 import { useMediaQuery } from "react-responsive";
 import Card from "@components/common/card/Card";
+import { FaAngleRight } from "react-icons/fa6";
 
 const HomeRecentTales = () => {
   const mediaQuery = useMediaQuery({ query: "(max-width: 710px)" });
@@ -41,7 +42,8 @@ const HomeRecentTales = () => {
       <CommonTitleWrapper>
         <CommonTitle>최근 생성한 동화</CommonTitle>
         <div className="more" onClick={handleMoreClick}>
-          {"더보기 >"}
+          {"더보기"}
+          <FaAngleRight />
         </div>
       </CommonTitleWrapper>
       {mediaQuery ? (

diff --git a/src/components/main/learnMain/learned/Learned.tsx b/src/components/main/learnMain/learned/Learned.tsx
@@ -6,10 +6,10 @@ import {
   ItemWrapper,
 } from "@components/common/common.styled";
 import { LearnedProps } from "@type/card";
-
 import { useEffect, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import { useNavigate } from "react-router-dom";
+import { FaAngleRight } from "react-icons/fa6";
 
 const Learned = () => {
   const navigate = useNavigate();
@@ -34,7 +34,8 @@ const Learned = () => {
       <CommonTitleWrapper>
         <CommonTitle>최근 학습한 동화</CommonTitle>
         <div className="more" onClick={handleMoreClick}>
-          {"더보기 >"}
+          {"더보기"}
+          <FaAngleRight />
         </div>
       </CommonTitleWrapper>
       <ItemWrapper>

diff --git a/src/components/main/learnMain/unLearned/UnLearned.tsx b/src/components/main/learnMain/unLearned/UnLearned.tsx
@@ -9,6 +9,7 @@ import { UnLearnedProps } from "@type/card";
 import { useEffect, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import { useNavigate } from "react-router-dom";
+import { FaAngleRight } from "react-icons/fa6";
 
 const UnLearned = () => {
   const navigate = useNavigate();
@@ -34,7 +35,8 @@ const UnLearned = () => {
       <CommonTitleWrapper>
         <CommonTitle>아직 학습하지 않은 동화</CommonTitle>
         <div className="more" onClick={handleMoreClick}>
-          {"더보기 >"}
+          {"더보기"}
+          <FaAngleRight />
         </div>
       </CommonTitleWrapper>
       <ItemWrapper>

diff --git a/src/components/main/learnMain/word/Word.tsx b/src/components/main/learnMain/word/Word.tsx
@@ -5,9 +5,9 @@ import {
 } from "@components/common/common.styled";
 import { WordProps } from "@type/card";
 import * as S from "./Word.styled";
-
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { FaAngleRight } from "react-icons/fa6";
 
 const Word = () => {
   const navigate = useNavigate();
@@ -43,7 +43,8 @@ const Word = () => {
       <CommonTitleWrapper>
         <CommonTitle>단어장</CommonTitle>
         <div className="more" onClick={handleMoreClick}>
-          {"더보기 >"}
+          {"더보기"}
+          <FaAngleRight />
         </div>
       </CommonTitleWrapper>
       <S.GridWrapper>