From 14971c8d7ebe54480802ca60c8039d05cb0de3c5 Mon Sep 17 00:00:00 2001 From: ChaDongmin Date: Tue, 16 Jan 2024 20:26:47 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Refactor:=20=ED=8F=AC=EC=BC=93=EB=AA=AC=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=EC=8B=9C=20=EB=B3=84=EC=B9=AD=20=EB=9E=9C?= =?UTF-8?q?=EB=8D=A4=20=EB=B6=80=EC=97=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/cardEdit/SearchDropdown.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/cardEdit/SearchDropdown.tsx b/src/components/cardEdit/SearchDropdown.tsx index d265a93..33ea855 100644 --- a/src/components/cardEdit/SearchDropdown.tsx +++ b/src/components/cardEdit/SearchDropdown.tsx @@ -6,6 +6,7 @@ import { POKEMON_NAME } from '@/lib/pokemonName'; import { reverseObject } from '@/lib/util/reverseObject'; import { IoChevronForward } from '@react-icons/all-files/io5/IoChevronForward'; import { IoChevronBack } from '@react-icons/all-files/io5/IoChevronBack'; +import { POKEMON_NICKNAME1, POKEMON_NICKNAME2 } from '@/lib/constants'; interface SearchDropdownProps { searchResults: (PokemonType | undefined)[] | null; @@ -13,11 +14,16 @@ interface SearchDropdownProps { } const SearchDropdown = ({ searchResults, setIsOpen }: SearchDropdownProps) => { - const { setPokemonData } = useSelectedPokemonForCard(); + const { setPokemonNickName1, setPokemonNickName2, setPokemonData } = + useSelectedPokemonForCard(); const [currentPage, setCurrentPage] = useState(1); const POKEMONS_PER_PAGE = 12; - const selectPokemon = (pokemon: PokemonType | null) => { + const handleClick = (pokemon: PokemonType | null) => { + const randomIndex1 = Math.floor(Math.random() * POKEMON_NICKNAME1.length); + const randomIndex2 = Math.floor(Math.random() * POKEMON_NICKNAME2.length); + setPokemonNickName1(POKEMON_NICKNAME1[randomIndex1]); + setPokemonNickName2(POKEMON_NICKNAME2[randomIndex2]); setPokemonData(pokemon); setIsOpen(false); }; @@ -79,7 +85,7 @@ const SearchDropdown = ({ searchResults, setIsOpen }: SearchDropdownProps) => {
  • selectPokemon(pokemon ? pokemon : null)} + onClick={() => handleClick(pokemon ? pokemon : null)} >
    Date: Tue, 16 Jan 2024 22:46:17 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Feat:=20framer=20motion=20=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20plate=20=EC=95=84=EC=BD=94=EB=94=94=EC=96=B8=20?= =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/plate/FilterPlates.tsx | 35 +++++++++----- src/components/plate/Plate.module.scss | 64 ++++++++++++-------------- 2 files changed, 54 insertions(+), 45 deletions(-) diff --git a/src/components/plate/FilterPlates.tsx b/src/components/plate/FilterPlates.tsx index 8822e3f..17ff16f 100644 --- a/src/components/plate/FilterPlates.tsx +++ b/src/components/plate/FilterPlates.tsx @@ -4,12 +4,18 @@ import useSelectedStore from '@/store/useSelectedStore'; import PlateHideButton from './PlateHideButton'; import { useState } from 'react'; import Inner from '../Inner'; +import { AnimatePresence, motion } from 'framer-motion'; const FilterPlates = () => { const koreanTypes = Object.values(POKEMON_TYPES); const [isOpen, setIsOpen] = useState(true); const { selectedPlate, setSelectedPlate } = useSelectedStore(); + const variants = { + open: { height: '200px' }, + closed: { height: 0 }, + }; + const renderTypes = (types: string[]) => types.map((koreanType) => { const isPlateSelected = selectedPlate.includes(koreanType); @@ -38,18 +44,25 @@ const FilterPlates = () => { return (
    -
    - -
    + {isOpen && ( + - *속성을 선택해주세요. -
    {renderTypes(koreanTypes)}
    -
    -     -
    + + *속성을 선택해주세요. + + {renderTypes(koreanTypes)} + + + + )} +
    ); diff --git a/src/components/plate/Plate.module.scss b/src/components/plate/Plate.module.scss index e23f5f3..35128e9 100644 --- a/src/components/plate/Plate.module.scss +++ b/src/components/plate/Plate.module.scss @@ -2,15 +2,38 @@ @import 'src/styles/theme.scss'; .wrapper { + position: relative; + height: 100%; + margin-top: -30px; display: flex; flex-direction: column; align-items: center; + width: 100%; + margin-bottom: 60px; + + .container { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + background-color: #fff; + border-bottom: 3px solid #000; + overflow: hidden; + + .type_plates { + margin-top: 20px; + height: 100%; + display: flex; + flex-wrap: wrap; + gap: 8px; + } + } } -.type_outer_container { - width: 100%; - height: 100%; - border-bottom: 4px solid #000; +.plate_wrapper { + display: flex; + flex-direction: column; + align-items: center; } .type_plate { @@ -28,36 +51,6 @@ gap: 3px; } -.type_container { - padding: 25px 0; - gap: 15px; - display: flex; - flex-direction: column; - overflow: hidden; - max-height: 500px; - opacity: 1; - transition: 0.3s ease-out; - - &.closed { - max-height: 0; - opacity: 0; - overflow: hidden; - padding: 0; - } - - > span { - align-self: flex-start; - font-size: 13px; - font-weight: 400; - } - - .type_plates { - display: flex; - flex-wrap: wrap; - gap: 10px; - } -} - @each $type, $color in $type-colors { .click_plate.#{$type} { @include plate_click_style($color); @@ -87,6 +80,9 @@ } .hide_button { + position: absolute; + top: unset; + bottom: -25px; cursor: pointer; outline: none; background-color: transparent; From d02d367ae39bcaa756322636df2b37c98c23f8bf Mon Sep 17 00:00:00 2001 From: ChaDongmin Date: Tue, 16 Jan 2024 22:46:38 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Design:=20plate=5Fwrapper=EB=A1=9C=20class?= =?UTF-8?q?=20=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/plate/Plate.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/plate/Plate.tsx b/src/components/plate/Plate.tsx index 2dc373f..6d8fe3a 100644 --- a/src/components/plate/Plate.tsx +++ b/src/components/plate/Plate.tsx @@ -29,7 +29,9 @@ const Plate = ({ pokemonTypeProp }: PlateProp) => {
    ); - return
    {renderTypes(pokemonTypeProp)}
    ; + return ( +
    {renderTypes(pokemonTypeProp)}
    + ); }; export default Plate; From 1ff2f4266dc61a325ee75cbc8613cd4f97e43e1c Mon Sep 17 00:00:00 2001 From: ChaDongmin Date: Tue, 16 Jan 2024 22:47:07 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Design:=20media=20query=EC=9A=A9=20mixin=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20plate=20=EB=91=A5=EA=B8=80?= =?UTF-8?q?=EA=B8=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/mixin.scss | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss index 6644b73..d0fce23 100644 --- a/src/styles/mixin.scss +++ b/src/styles/mixin.scss @@ -32,7 +32,7 @@ } @mixin plate_pokemon_type($color) { - border-radius: 8px; + border-radius: 16.5px; align-items: center; font-size: 10px; justify-content: center; @@ -54,3 +54,21 @@ width: $width; height: $height; } + +@mixin mobile { + @media (max-width: 738px) { + @content; + } +} + +@mixin tablet { + @media (max-width: 1024px) { + @content; + } +} + +@mixin desktop { + @media (max-width: 1366px) { + @content; + } +} From dd3211f2f8f572bbab2e586e2391461b4f2f262f Mon Sep 17 00:00:00 2001 From: ChaDongmin Date: Tue, 16 Jan 2024 23:10:19 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Design:=20framer=20motion=20=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20plate=20=ED=86=A0=EA=B8=80=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/plate/FilterPlates.tsx | 2 +- src/components/plate/Plate.module.scss | 13 +++++++++++++ src/components/plate/PlateHideButton.tsx | 21 ++++++++++++++++++--- 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/src/components/plate/FilterPlates.tsx b/src/components/plate/FilterPlates.tsx index 17ff16f..9197d0d 100644 --- a/src/components/plate/FilterPlates.tsx +++ b/src/components/plate/FilterPlates.tsx @@ -63,7 +63,7 @@ const FilterPlates = () => { )} - + ); }; diff --git a/src/components/plate/Plate.module.scss b/src/components/plate/Plate.module.scss index 35128e9..adafde0 100644 --- a/src/components/plate/Plate.module.scss +++ b/src/components/plate/Plate.module.scss @@ -92,4 +92,17 @@ border-right: 15px solid transparent; border-top: 24px solid #000; width: 111px; + + div { + position: absolute; + left: 0; + right: 0; + top: -18px; + margin: auto; + scale: 1.5; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + } } diff --git a/src/components/plate/PlateHideButton.tsx b/src/components/plate/PlateHideButton.tsx index f127853..5d29fc3 100644 --- a/src/components/plate/PlateHideButton.tsx +++ b/src/components/plate/PlateHideButton.tsx @@ -1,17 +1,32 @@ import styles from './Plate.module.scss'; - +import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp'; +import { motion } from 'framer-motion'; interface PlateHideButtonProp { + isOpen: boolean; setIsOpen: React.Dispatch>; } -const PlateHideButton = ({ setIsOpen }: PlateHideButtonProp) => { +const PlateHideButton = ({ isOpen, setIsOpen }: PlateHideButtonProp) => { + const variant = { + open: { rotate: 0 }, + close: { rotate: 180 }, + }; + return ( + > + + + + ); };