From f87ae1aba2bb79dd6f4fc2bbc1bd4cddcf7c51b4 Mon Sep 17 00:00:00 2001
From: Hongje Choi <enc2586@gmail.com>
Date: Mon, 26 Aug 2024 18:46:39 +0900
Subject: [PATCH 1/2] visual: added design at client list page

---
 src/locales/en-US/index.ts     |  6 ++++
 src/locales/ko-KR/index.ts     |  6 ++++
 src/pages/ClientList/index.tsx | 63 +++++++++++++++++++++++++++-------
 src/pages/ClientList/styles.ts | 48 ++++++++++++++++++++++++++
 4 files changed, 111 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/ClientList/styles.ts

diff --git a/src/locales/en-US/index.ts b/src/locales/en-US/index.ts
index f4f736b..4b25242 100644
--- a/src/locales/en-US/index.ts
+++ b/src/locales/en-US/index.ts
@@ -111,4 +111,10 @@ export const main = {
       student_id: "Student ID",
     },
   },
+  clients: {
+    list: {
+      title: "Clients List",
+      add: "Create New",
+    },
+  },
 };
diff --git a/src/locales/ko-KR/index.ts b/src/locales/ko-KR/index.ts
index e97fb93..7b363a9 100644
--- a/src/locales/ko-KR/index.ts
+++ b/src/locales/ko-KR/index.ts
@@ -111,4 +111,10 @@ export const main = {
       student_id: "학번",
     },
   },
+  clients: {
+    list: {
+      title: "클라이언트 목록",
+      add: "새로 생성하기",
+    },
+  },
 };
diff --git a/src/pages/ClientList/index.tsx b/src/pages/ClientList/index.tsx
index f0de6cf..cd06ea1 100644
--- a/src/pages/ClientList/index.tsx
+++ b/src/pages/ClientList/index.tsx
@@ -1,5 +1,16 @@
-import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router-dom";
 import { useClients } from "src/api/client";
+import Button from "src/components/Button";
+
+import {
+  ClientCardContainer,
+  Container,
+  Divider,
+  Row,
+  Section,
+  Title,
+} from "./styles";
 
 const ClientCard = ({
   uuid,
@@ -10,25 +21,53 @@ const ClientCard = ({
   name: string;
   id: string;
 }) => (
-  <div>
-    <Link to={`/clients/${uuid}`}>{name}</Link>
-    <div>id: {id}</div>
-  </div>
+  <ClientCardContainer>
+    <b>
+      <Link to={`/clients/${uuid}`}>{name}</Link>
+    </b>
+    <div>
+      ID: <code>{id}</code>
+    </div>
+  </ClientCardContainer>
 );
 
 const ClientListPage = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
   const { data: clients } = useClients();
   return (
-    <div>
-      <ul>
+    // <div>
+    //   <ul>
+    //     {clients?.map((client) => (
+    //       <li key={client.uuid}>
+    //         <ClientCard {...client} />
+    //       </li>
+    //     ))}
+    //   </ul>
+    //   <Link to="/clients/new">create new client</Link>
+    // </div>
+    <Container>
+      <Section>
+        <Row>
+          <Title>{t("clients.list.title")}</Title>
+        </Row>
+
         {clients?.map((client) => (
-          <li key={client.uuid}>
+          <Row key={client.uuid}>
             <ClientCard {...client} />
-          </li>
+          </Row>
         ))}
-      </ul>
-      <Link to="/clients/new">create new client</Link>
-    </div>
+      </Section>
+
+      <Divider />
+
+      <Section>
+        <Button onClick={() => navigate("/clients/new")}>
+          {t("clients.list.add")}
+        </Button>
+      </Section>
+    </Container>
   );
 };
 
diff --git a/src/pages/ClientList/styles.ts b/src/pages/ClientList/styles.ts
new file mode 100644
index 0000000..135193a
--- /dev/null
+++ b/src/pages/ClientList/styles.ts
@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Divider = styled.div`
+  background-color: #f5f5f5;
+  height: 1px;
+  margin: 1.875rem 0;
+
+  @media screen and (max-width: 425px) {
+    height: 1rem;
+    margin: 1.875rem -2.25rem;
+  }
+`;
+
+export const Section = styled.section`
+  padding: 0 1.875rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+`;
+
+export const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Title = styled.h1`
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--color-primary-text);
+  margin: 0;
+`;
+
+export const ClientCardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.05);
+  width: 100%;
+`;

From 5a75748394b9045f2b4cf4e6af9948692c056452 Mon Sep 17 00:00:00 2001
From: Hongje Choi <enc2586@gmail.com>
Date: Mon, 26 Aug 2024 18:56:21 +0900
Subject: [PATCH 2/2] removed useless commented code lines

---
 src/pages/ClientList/index.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/pages/ClientList/index.tsx b/src/pages/ClientList/index.tsx
index cd06ea1..26df0ce 100644
--- a/src/pages/ClientList/index.tsx
+++ b/src/pages/ClientList/index.tsx
@@ -37,16 +37,6 @@ const ClientListPage = () => {
 
   const { data: clients } = useClients();
   return (
-    // <div>
-    //   <ul>
-    //     {clients?.map((client) => (
-    //       <li key={client.uuid}>
-    //         <ClientCard {...client} />
-    //       </li>
-    //     ))}
-    //   </ul>
-    //   <Link to="/clients/new">create new client</Link>
-    // </div>
     <Container>
       <Section>
         <Row>