#5 feat: 통계 모달 필터 결과 렌더링

qwerty00ui88 · Mar 6, 2024 · e350922 · e350922
1 parent fec670f
commit e350922
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 87 deletions.
diff --git a/src/components/MyComment.tsx b/src/components/MyComment.tsx
@@ -5,8 +5,6 @@ import RecommendItem from './RecommendItem'
 
 function MyComment() {
     const [comment, setComment] = useState([])
-    // eslint-disable-next-line no-console
-    console.log(comment)
     useEffect(() => {
         axios
             .get('http://localhost/mypage/comment-list', {

diff --git a/src/components/MyRecommend.tsx b/src/components/MyRecommend.tsx
@@ -36,8 +36,7 @@ const RecommendItemLi = styled.li`
 
 function MyRecommend() {
     const [recommend, setRecommend] = useState([])
-    // eslint-disable-next-line no-console
-    console.log(recommend)
+
     useEffect(() => {
         axios
             .get('http://localhost/mypage/recommend-list', {

diff --git a/src/components/StatModal2.tsx b/src/components/StatModal2.tsx
@@ -1,15 +1,44 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import axios from 'axios'
 import Button from './commons/Button'
 import DropDown from './commons/DropDown'
+import Poster from './commons/Poster'
+import { ContentType } from './MyFavorite'
+import { ReactComponent as Good } from '../assets/good.svg'
+import { ReactComponent as Bad } from '../assets/bad.svg'
+import { ReactComponent as Favorite } from '../assets/favorite.svg'
+
+export interface StatData {
+    content: ContentType | null
+    count: number
+}
+
+export interface filteredDataType {
+    bestContent: StatData
+    worstContent: StatData
+    mostSelectedFavoriteContent: StatData
+}
 
 const TopSection = styled.div`
     display: flex;
     justify-content: space-between;
     margin: 1rem 0;
 `
 
+const BottomSection = styled.div`
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 3rem;
+    padding: 0 5rem;
+`
+
+const IconAndPoster = styled.div`
+    width: 100%;
+`
+
 const FilterSection = styled.div`
     select {
         margin-right: 1rem;
@@ -21,84 +50,131 @@ function StatModal2({ handlePage }: { handlePage: () => void }) {
     const [region2, setRegion2] = useState<string>('강남구')
     const [gender, setGender] = useState<string>('male')
     const [ageGroup, setAgeGroup] = useState<string>('20')
-
-    useEffect(() => {}, [])
+    const [filteredData, setFilteredData] = useState<filteredDataType>({
+        bestContent: { content: null, count: 0 },
+        worstContent: { content: null, count: 0 },
+        mostSelectedFavoriteContent: { content: null, count: 0 },
+    })
 
     return (
-        <TopSection>
-            <FilterSection>
-                <DropDown
-                    selectId="region1"
-                    onChange={(e) => {
-                        setRegion1(e.target.value)
-                    }}
-                    options={[
-                        { value: '서울특별시', name: '서울특별시' },
-                        { value: '경기도', name: '경기도' },
-                    ]}
-                />
-                <DropDown
-                    selectId="region2"
-                    onChange={(e) => {
-                        setRegion2(e.target.value)
-                    }}
-                    options={[
-                        { value: '강남구', name: '강남구' },
-                        { value: '화성시', name: '화성시' },
-                    ]}
-                />
-                <DropDown
-                    selectId="gender"
-                    onChange={(e) => {
-                        setGender(e.target.value)
-                    }}
-                    options={[
-                        { value: 'male', name: '남성' },
-                        { value: 'female', name: '여성' },
-                    ]}
-                />
-                <DropDown
-                    selectId="ageGroup"
-                    onChange={(e) => {
-                        setAgeGroup(e.target.value)
-                        // eslint-disable-next-line no-console
-                        console.log(e.target.value)
-                    }}
-                    options={[
-                        { value: '10', name: '10대' },
-                        { value: '20', name: '20대' },
-                        { value: '30', name: '30대' },
-                        { value: '40', name: '40대' },
-                        { value: '50', name: '50대' },
-                        { value: '60', name: '60대' },
-                        { value: '70', name: '70대' },
-                        { value: '80', name: '80대' },
-                    ]}
-                />
-                <Button
-                    name="검색"
-                    onClick={() => {
-                        axios
-                            .get(
-                                'http://localhost/statistics/by-region-gender-ageGroup',
-                                {
-                                    params: {
-                                        region: `${region1} ${region2}`,
-                                        gender,
-                                        ageGroup: Number(ageGroup),
-                                    },
-                                    withCredentials: true,
-                                }
-                            )
-                            .then((response) => {
-                                // eslint-disable-next-line no-console
-                                console.log(response)
-                            })
-                    }}
-                />
-            </FilterSection>
-            <Button name="지도로 보기" onClick={handlePage} />
-        </TopSection>
+        <>
+            <TopSection>
+                <FilterSection>
+                    <DropDown
+                        selectId="region1"
+                        onChange={(e) => {
+                            setRegion1(e.target.value)
+                        }}
+                        options={[
+                            { value: '서울특별시', name: '서울특별시' },
+                            { value: '경기도', name: '경기도' },
+                        ]}
+                    />
+                    <DropDown
+                        selectId="region2"
+                        onChange={(e) => {
+                            setRegion2(e.target.value)
+                        }}
+                        options={[
+                            { value: '강남구', name: '강남구' },
+                            { value: '화성시', name: '화성시' },
+                        ]}
+                    />
+                    <DropDown
+                        selectId="gender"
+                        onChange={(e) => {
+                            setGender(e.target.value)
+                        }}
+                        options={[
+                            { value: 'male', name: '남성' },
+                            { value: 'female', name: '여성' },
+                        ]}
+                    />
+                    <DropDown
+                        selectId="ageGroup"
+                        onChange={(e) => {
+                            setAgeGroup(e.target.value)
+                        }}
+                        options={[
+                            { value: '10', name: '10대' },
+                            { value: '20', name: '20대' },
+                            { value: '30', name: '30대' },
+                            { value: '40', name: '40대' },
+                            { value: '50', name: '50대' },
+                            { value: '60', name: '60대' },
+                            { value: '70', name: '70대' },
+                            { value: '80', name: '80대' },
+                        ]}
+                    />
+                    <Button
+                        name="검색"
+                        onClick={() => {
+                            axios
+                                .get(
+                                    'http://localhost/statistics/by-region-gender-ageGroup',
+                                    {
+                                        params: {
+                                            region: `${region1} ${region2}`,
+                                            gender,
+                                            ageGroup: Number(ageGroup),
+                                        },
+                                        withCredentials: true,
+                                    }
+                                )
+                                .then((response) => {
+                                    setFilteredData(response.data)
+                                })
+                        }}
+                    />
+                </FilterSection>
+                <Button name="지도로 보기" onClick={handlePage} />
+            </TopSection>
+            <BottomSection>
+                <IconAndPoster>
+                    <Good fill="#019e74" />
+                    <Poster
+                        mediaType={
+                            filteredData.bestContent.content?.mediaType || null
+                        }
+                        id={filteredData.bestContent.content?.id || null}
+                        posterPath={
+                            filteredData.bestContent.content?.poster_path ||
+                            null
+                        }
+                    />
+                </IconAndPoster>
+                <IconAndPoster>
+                    <Bad fill="rgb(229, 9, 20)" />
+                    <Poster
+                        mediaType={
+                            filteredData.worstContent.content?.mediaType || null
+                        }
+                        id={filteredData.worstContent.content?.id || null}
+                        posterPath={
+                            filteredData.worstContent.content?.poster_path ||
+                            null
+                        }
+                    />
+                </IconAndPoster>
+                <IconAndPoster>
+                    <Favorite fill="#FFD700" />
+                    <Poster
+                        mediaType={
+                            filteredData.mostSelectedFavoriteContent.content
+                                ?.mediaType || null
+                        }
+                        id={
+                            filteredData.mostSelectedFavoriteContent.content
+                                ?.id || null
+                        }
+                        posterPath={
+                            filteredData.mostSelectedFavoriteContent.content
+                                ?.poster_path || null
+                        }
+                    />
+                </IconAndPoster>
+            </BottomSection>
+        </>
     )
 }
 export default StatModal2
diff --git a/src/pages/Detail.tsx b/src/pages/Detail.tsx
@@ -121,10 +121,6 @@ function Detail() {
             .then((response) => {
                 setResponseData(response.data)
             })
-            .catch((error) => {
-                // eslint-disable-next-line no-console
-                console.log(error)
-            })
     }, [])
 
     return (

diff --git a/src/reducers/userReducer.tsx b/src/reducers/userReducer.tsx
@@ -19,8 +19,6 @@ export const login = createAsyncThunk(
         initializeApp(firebaseConfig)
         const auth = getAuth()
         const { user } = await signInWithEmailAndPassword(auth, email, password)
-        // eslint-disable-next-line no-console
-        console.log('🌈 로그인 성공', { user })
         return { uid: user.uid }
     }
 )