Skip to content

Commit

Permalink
fix : 동물파일명, 변수명 서버 response로 전부 통일 2차
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimjuyoung99
kimjuyoung99 committed May 26, 2024
1 parent 9197ae6 commit dc78304
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 78 deletions.
0 src/Assets/Animals/M_Dino.png → src/Assets/Animals/M_DINOSAUR.png
View file
File renamed without changes
0 src/Assets/Animals/W_Dear.png → src/Assets/Animals/W_DEER.png
View file
File renamed without changes
0 src/Assets/Animals/W_DesertFox.png → src/Assets/Animals/W_DESERT_FOX.png
View file
File renamed without changes
0 src/Assets/Animals/W_Ham.png → src/Assets/Animals/W_HAMSTER.png
View file
File renamed without changes
113 changes: 35 additions & 78 deletions src/Pages/Festival/AnimalMatchResult/AnimalMatchResult.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,44 @@ import { useState, useEffect } from 'react';
import styled from 'styled-components';
import { useNavigate, useContext } from 'react-router-dom';

import M_Bear from '../../../Assets/Animals/M_BEAR.png';
import M_Cat from '../../../Assets/Animals/M_CAT.png';
import M_Dino from '../../../Assets/Animals/M_DINO.png';
import M_BEAR from '../../../Assets/Animals/M_BEAR.png';
import M_CAT from '../../../Assets/Animals/M_CAT.png';
import M_DINOSAUR from '../../../Assets/Animals/M_DINOSAUR.png';
import M_DOG from '../../../Assets/Animals/M_DOG.png';
import M_Rabbit from '../../../Assets/Animals/M_RABBIT.png';
import M_Wolf from '../../../Assets/Animals/M_WOLF.png';
import M_RABBIT from '../../../Assets/Animals/M_RABBIT.png';
import M_WOLF from '../../../Assets/Animals/M_WOLF.png';

import W_Cat from '../../../Assets/Animals/W_CAT.png';
import W_Dear from '../../../Assets/Animals/W_DEAR.png';
import W_DesertFox from '../../../Assets/Animals/W_DESERTFOX.png';
import W_CAT from '../../../Assets/Animals/W_CAT.png';
import W_DEER from '../../../Assets/Animals/W_DEER.png';
import W_DESERT_FOX from '../../../Assets/Animals/W_DESERT_FOX.png';
import W_DOG from '../../../Assets/Animals/W_DOG.png';
import W_Rabbit from '../../../Assets/Animals/W_RABBIT.png';
import W_RABBIT from '../../../Assets/Animals/W_RABBIT.png';
import W_HAMSTER from '../../../Assets/Animals/W_HAMSTER.png'

const ANIMAL_IMAGES = {
M_BEAR,
M_CAT,
M_DINO,
M_DINOSAUR,
M_DOG,
M_RABBIT,
M_WOLF,
W_CAT,
W_DEAR,
W_DESERTFOX,
W_DEER,
W_DESERT_FOX,
W_DOG,
W_RABBIT,
W_HAMSTER,
};

const ANIMAL_TYPES = {
BEAR: '곰',
CAT: '고양이',
DINO: '공룡',
DINOSAUR: '공룡',
DOG: '강아지',
RABBIT: '토끼',
HAMSTER: '햄스터',
WOLF: '늑대',
DEAR: '사슴',
DEER: '사슴',
DESERT_FOX: '사막여우',
};

Expand All @@ -47,27 +50,9 @@ const AnimalMatchResult = () => {
const [kakaoLink, setKakaoLink] = useState('');
const [gender, setGender] = useState('');

// const setTemporaryData = gender => {
// if (gender === 'MALE') {
// setSelfAnimalTypes(['DOG', 'DOG', 'DOG']);
// setOpponentAnimalTypes(['DOG', 'DOG', 'DOG']);
// } else if (gender === 'FEMALE') {
// setSelfAnimalTypes(['DOG', 'DOG', 'DOG']);
// setOpponentAnimalTypes(['DOG', 'DOG', 'DOG']);
// }
// setMeetingGroupType('THREE_ON_THREE');
// setKakaoLink(null);

// console.log('Temporary selfAnimalTypes:', ['DOG', 'DOG', 'DOG']);
// console.log('Temporary opponentAnimalTypes:', ['DOG', 'DOG', 'DOG']);
// console.log('ANIMAL_TYPES[selfAnimalTypes[0]]:', ANIMAL_TYPES['DOG']);
// };

useEffect(() => {
const gender = localStorage.getItem('gender');
setGender(gender);
//setTemporaryData(gender);


const fetchData = async () => {
try {
Expand All @@ -77,29 +62,16 @@ const AnimalMatchResult = () => {
);
const data = await response.json();
console.log(data);
console.log(data.data.femaleUsers);
console.log(data.data.maleUsers);

console.log(data.data);


const gender = localStorage.getItem('gender'); // 로컬스토리지에서 gender 값을 가져옴
setGender(gender);

if (gender === 'MALE') {
setSelfAnimalTypes(
data.data.maleUsers.map(user => user.selfAnimalType)
);
setOpponentAnimalTypes(
data.data.femaleUsers.map(user => user.selfAnimalType)
);
setSelfAnimalTypes(data.data.maleUsers.map(user => user.selfAnimalType));
setOpponentAnimalTypes(data.data.femaleUsers.map(user => user.selfAnimalType));
} else if (gender === 'FEMALE') {
setSelfAnimalTypes(
data.data.femaleUsers.map(user => user.selfAnimalType)
);
setOpponentAnimalTypes(
data.data.maleUsers.map(user => user.selfAnimalType)
);
setSelfAnimalTypes(data.data.femaleUsers.map(user => user.selfAnimalType));
setOpponentAnimalTypes(data.data.maleUsers.map(user => user.selfAnimalType));
}

setMeetingGroupType(data.data.meetingGroupType);
Expand All @@ -120,27 +92,26 @@ const AnimalMatchResult = () => {
: gender === 'MALE'
? 'W'
: 'M';

console.log("변환된 동물 변수 : "+`${prefix}_${animalType}`);

console.log("성별 붙인 키 : "+ `${prefix}_${animalType}`);
return `${prefix}_${animalType}`;
};

const renderAnimalCards = (animalTypes, isSelf) => {
return animalTypes.map((animalType, index) => {
const animalImageKey = getAnimalImageKey(animalType, isSelf);
const animalImage = getAnimalImageKey(animalType, isSelf);
console.log("animalImageKey : "+ animalImageKey);
console.log("animalImage : "+ animalImage);
return (
const animalImage = ANIMAL_IMAGES[animalImageKey];
console.log("animalImageKey : " + ANIMAL_TYPES[animalType]);
console.log("animalImage : " + animalImage)

return (
<Container key={index}>
<CardContainer2>
<Card>
<AnimalImage src={M_DOG} alt={ANIMAL_TYPES[selfAnimalTypes[0]]} />
<AnimalName>{ANIMAL_TYPES[animalType]}상</AnimalName>
<AnimalImage src={animalImage} alt={ANIMAL_TYPES[animalType]} />
<AnimalName>{ANIMAL_TYPES[animalType]}상</AnimalName>
</Card>
</CardContainer2>
</Container>
</CardContainer2>
</Container>
);
});
};
Expand All @@ -150,27 +121,14 @@ const AnimalMatchResult = () => {
<CardContainer>
<CardContainer2>
<Title>본인 동물상</Title>
{/* <AnimalBox>
<AnimalImage src={M_Dog} alt={ANIMAL_TYPES[selfAnimalTypes[0]]} />
<AnimalBoxText>
{ANIMAL_TYPES[selfAnimalTypes[0]]}상
</AnimalBoxText>
</AnimalBox> */}
<CardGroup>
{renderAnimalCards(selfAnimalTypes.slice(1), true)}
{renderAnimalCards(selfAnimalTypes, true)}
</CardGroup>
</CardContainer2>
<CardContainer2>
<Title>상대 동물상</Title>
{/* <AnimalBox>
<AnimalImage src={M_Dog} alt={ANIMAL_TYPES[selfAnimalTypes[0]]} />
<AnimalBoxText>
{ANIMAL_TYPES[opponentAnimalTypes[0]]}상
</AnimalBoxText>
</AnimalBox> */}
<CardGroup>
{renderAnimalCards(opponentAnimalTypes.slice(1), true)}
{renderAnimalCards(opponentAnimalTypes, false)}
</CardGroup>
</CardContainer2>
</CardContainer>
Expand All @@ -179,6 +137,7 @@ const AnimalMatchResult = () => {
</Container>
);
};

export default AnimalMatchResult;

const Container = styled.div`
Expand All @@ -201,7 +160,6 @@ const CardContainer = styled.div`
flex-direction: row;
flex-direction: column;
@media (max-width: 768px) {
flex-direction: column;
align-items: center;
Expand Down Expand Up @@ -238,6 +196,7 @@ const Title = styled.h1`
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
margin-top: 20px;
margin-bottom:10px;
`;

const Card = styled.div`
Expand Down Expand Up @@ -315,5 +274,3 @@ const AnimalBoxText = styled.h1`
letter-spacing: -0.333px;
margin-top: 10px;
`;


0 comments on commit dc78304

Please sign in to comment.