feat: 동의한 후보 목록 노출

src/app/main.css

@@ -58,8 +58,9 @@
 }
 
 .listTitle {
-  margin-top: 30px;
+  margin-top: 70px;
   position: relative;
+  color: white;
 }
 
 .footer {
@@ -164,7 +165,7 @@
 
 .worker {
   width: 100%;
-  margin-top: 64px;
+  margin-top: 70px;
 }
 
 .contactText {
@@ -256,4 +257,8 @@
 em {
   background-color: #2B5DE4;
   font-style: normal;
+}
+
+.result {
+  max-width: 50rem;
 }

src/app/page.tsx

@@ -7,8 +7,7 @@ import MiniStar from "@/components/MiniStar";
 import Ask from "@/components/Ask";
 import Stats from "@/components/Stats";
 import Logo from "@/components/Logo";
-// import Result from "@/components/Result";
-
+import Result from "@/components/Result";
 
 
 export default function Home() {
@@ -96,9 +95,9 @@ export default function Home() {
           </p>
         </div >
 
-        {/* <div className="result">
+        <div className="result">
           <Result />
-        </div> */}
+        </div>
 
         <div className="worker" id="askSection">
           <Ask />

src/components/Ask/index.js

@@ -60,7 +60,7 @@ const reducer = (state, action) => {
 }
 
 
-const useCandidates = () => {
+export const useCandidates = () => {
   const [state, dispatch] = React.useReducer(reducer, initial)
 
   const actions = {
@@ -89,6 +89,12 @@ const useCandidates = () => {
       const response = await fetch(`/parties/${party.value}/candidates.json`)
       const data = await response.json()
       actions.SET(data)
+    },
+    byId: async id => {
+      actions.FETCH()
+      const response = await fetch(`/candidates/${id}.json`)
+      const data = await response.json()
+      return data
     }
   }
 

src/components/Result.tsx

@@ -3,26 +3,42 @@
 import React from 'react';
 import client from '@/utils/client'
 import './result.css'
+import { useCandidates } from './Ask';
 
 const Response = ({member}: any) => (
     <div className="member">
         <h3 className="name">{member.name}</h3>
-        <p className="party">{member.party}</p>
-        <p className="region">{member.region === '비례' ? '비례대표' : member.region.name}</p>
+        <div className="affiliation">
+            <p className="party">{member.party}</p>
+            <p className="region">{member.region === '비례' ? '비례대표' : member.region.name}</p>
+        </div>
     </div>
 )
 
 const Result = () => {
+    const { fetchCandidates } = useCandidates()
     const [agrees, setAgrees] = React.useState<any[]>([])
     const [disagrees, setDisagrees] = React.useState<any[]>([])
 
-    React.useEffect(() => {
-        const fetchResponses = async () => {
-            const { data } = await client().get(`/api/responses`)
+    const fetchResponses = async () => {
+        const { data: responses } = await client().get(`/api/responses`)
+        // const { agreed, disagreed } = responses
+        const agreedCandidates = await getCandidate(responses.agreed)
+        // const disagreedCandidates = await getCandidate(disagreed)
+
+        setAgrees(agreedCandidates)
+        // setDisagrees(disagreedCandidates)
+    }
 
-            setAgrees(data.agreed)
-            setDisagrees(data.disagreed)
-        }
+    async function getCandidate(candidates: any) {
+        return Promise.all(candidates.map(async (candidate: any) => {
+            const candidateInfo = await fetchCandidates.byId(candidate.id)
+            const { choice, id } = candidate
+            return { candidate: candidateInfo, choice, id }
+        }))
+    }
+
+    React.useEffect(() => {
         fetchResponses()
     }, [])
 
@@ -41,18 +57,18 @@ const Result = () => {
 
             {agrees.length > 0 &&
                 <div>
-                    <h3 className="listTitle">전체 찬성한 후보 목록</h3>
+                    <h3 className="listTitle">동의한 후보 목록</h3>
                     <ul className="list">
                         {agrees.map(response => (
-                            <li key={`agree-${response.id}`} style={{padding: '5px 0'}}>
+                            <li key={`agree-${response.id}`} style={{padding: '10px 0'}}>
                                 <Response member={response.candidate}/>
                             </li>
                         ))}
                     </ul>
                 </div>
             }
 
-            {disagrees.length > 0 &&
+            {/* {disagrees.length > 0 &&
                 <div>
                     <h3 className="listTitle">반대한 후보 목록</h3>
                     <ul className="list">
@@ -63,7 +79,7 @@ const Result = () => {
                         ))}
                     </ul>
                 </div>
-            }
+            } */}
         </div>
     )
 }

src/components/result.css

@@ -11,21 +11,47 @@
 .member {
   position: relative;
   text-align: center;
-  width: 100px;
+  width: 140px;
   height: auto;
-  margin-right: 4px;
+  margin-right: 8px;
 }
-.member h3 {
-  background: #ffc700;
+.member .affiliation {
+  position: absolute;
+  top: 40px;
+  width: 100%;
+}
+.member .name {
+  --radius: 100px;
+  width: var(--radius);
+  height: var(--radius);
+  padding-top: 12px;
+  border-radius: 50%;
+  margin: 0 auto;
+  background: linear-gradient(120deg, #466de7, #e490dd);
+  font-weight: 600;
+  color: white;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
 }
 .member p {
+  font-size: 12px;
+  background: white;
+  padding: 6px;
   margin: auto 0;
+  border-radius: 8px;
+  border: 2px solid #5b5b5e;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.member .party {
+  border-bottom: 2px dashed #5b5b5e;
+  font-weight: 700;
 }
 .member .region {
-  opacity: 0.6;
-  padding-bottom: 4px;
-  font-size: 0.75rem;
+  border-top: none;
 }
+
 /*
   h3
     position relative