THE-SOPT-WEB · leeseooo · Jun 23, 2022 · Jun 23, 2022 · Jun 23, 2022 · Jun 23, 2022
diff --git a/week4-ts/.gitignore b/week4-ts/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.env.local
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/week4-ts/index.html b/week4-ts/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/week4-ts/package.json b/week4-ts/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "week4-ts",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@types/styled-components": "^5.1.25",
+    "axios": "^0.27.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "styled-components": "^5.3.5",
+    "styled-reset": "^4.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^1.3.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.9"
+  }
+}
diff --git a/week4-ts/src/App.tsx b/week4-ts/src/App.tsx
@@ -0,0 +1,10 @@
+import GlobalStyle from "./styles/global";
+import MainPage from "./pages/MainPage";
+export default function App() {
+  return (
+    <>
+      <GlobalStyle />
+      <MainPage />
+    </>
+  );
+}
diff --git a/week4-ts/src/components/ResultSection.tsx b/week4-ts/src/components/ResultSection.tsx
@@ -0,0 +1,31 @@
+import { Store } from "../types";
+import Skeleton from "../components/Skeleton";
+import StoreCard from "./StoreCard";
+
+interface ResultSectionProps {
+  storeInfo: Store[];
+  isCheck: boolean;
+  isLoading: boolean;
+}
+
+export default function ResultSection({
+  storeInfo,
+  isCheck,
+  isLoading,
+}: ResultSectionProps) {
+  return (
+    <>
-export default function ResultSection({
-  storeInfo,
-  isCheck,
-  isLoading,
-}: ResultSectionProps) {
-  return (
-    <>
+export default function ResultSection(props: ResultSectionProps) {
+  const {storeInfo, isCheck, isLoading} = props
+
+  return (
+    <>
-export default function ResultSection({
-  storeInfo,
-  isCheck,
-  isLoading,
-}: ResultSectionProps) {
-  return (
-    <>
+export default function ResultSection(props: ResultSectionProps) {
+  const {storeInfo, isCheck, isLoading} = props
+
+  return (
+    <>
+      {isLoading &&
+        new Array(10).fill(1).map((_, idx) => {
+          return <Skeleton key={idx} />;
+        })}
+      {!isLoading && storeInfo.length === 0 ? (
+        <div style={{ color: "#fff" }}>검색 결과가 없습니다.</div>
+      ) : (
+        storeInfo?.map((store: Store, idx: number) => (
+          <StoreCard key={idx} store={store} isCheck={isCheck} />
+        ))
+      )}
-      {isLoading &&
-        new Array(10).fill(1).map((_, idx) => {
-          return <Skeleton key={idx} />;
-        })}
-      {!isLoading && storeInfo.length === 0 ? (
-        <div style={{ color: "#fff" }}>검색 결과가 없습니다.</div>
-      ) : (
-        storeInfo?.map((store: Store, idx: number) => (
-          <StoreCard key={idx} store={store} isCheck={isCheck} />
-        ))
-      )}
+  if(isLoading) {
+    new Array(10).fill(1).map((_, idx) => {
+      return <Skeleton key={idx} />;
+    })
+  } else {
+    return (
+      <>
+        {storeInfo.length === 0 ? (
+          <div style={{ color: "#fff" }}>검색 결과가 없습니다.</div>
+        ) : (
+          storeInfo?.map((store: Store, idx: number) => (
+            <StoreCard key={idx} store={store} isCheck={isCheck} />
+          ))
+        )}
+      </>
+    )
+  }
-      {isLoading &&
-        new Array(10).fill(1).map((_, idx) => {
-          return <Skeleton key={idx} />;
-        })}
-      {!isLoading && storeInfo.length === 0 ? (
-        <div style={{ color: "#fff" }}>검색 결과가 없습니다.</div>
-      ) : (
-        storeInfo?.map((store: Store, idx: number) => (
-          <StoreCard key={idx} store={store} isCheck={isCheck} />
-        ))
-      )}
+  if(isLoading) {
+    new Array(10).fill(1).map((_, idx) => {
+      return <Skeleton key={idx} />;
+    })
+  } else {
+    return (
+      <>
+        {storeInfo.length === 0 ? (
+          <div style={{ color: "#fff" }}>검색 결과가 없습니다.</div>
+        ) : (
+          storeInfo?.map((store: Store, idx: number) => (
+            <StoreCard key={idx} store={store} isCheck={isCheck} />
+          ))
+        )}
+      </>
+    )
+  }
+    </>
+  );
+}
diff --git a/week4-ts/src/components/SearchSection.tsx b/week4-ts/src/components/SearchSection.tsx
@@ -0,0 +1,87 @@
+import styled from "styled-components";
+import { useState, useEffect } from "react";
+
+interface SearchSectionProps {
+  onClick: (isCheck: boolean, myTown: string) => void;
+}
+
+export default function SearchSection({ onClick }: SearchSectionProps) {
+  const [isCheck, setIsCheck] = useState<boolean>(false);
+  const [myTown, setMyTown] = useState<string>("");
+
+  useEffect(() => {
+    if (isCheck) setMyTown("");
+  }, [isCheck]);
+
+  return (
+    <StWrapper>
+      <StCheckBoxWrapper>
+        <label htmlFor="checkbox">지역 기반으로 검색</label>
+        <input
+          type="checkbox"
+          id="checkbox"
+          onChange={() => setIsCheck(!isCheck)}
+        />
+      </StCheckBoxWrapper>
+
+      <StTextInputWrapper>
+        <label htmlFor="text">우리 동네는 여기에요</label>
+        <input
+          type="text"
+          placeholder="지역을 입력해주세요."
-        <label htmlFor="text">우리 동네는 여기에요</label>
-        <input
-          type="text"
-          placeholder="지역을 입력해주세요."
+        <label htmlFor="text">우리 동네는 여기에요</label>
+        <input
+          type="text"
+          id="text"
+          placeholder="지역을 입력해주세요."
-        <label htmlFor="text">우리 동네는 여기에요</label>
-        <input
-          type="text"
-          placeholder="지역을 입력해주세요."
+        <label htmlFor="text">우리 동네는 여기에요</label>
+        <input
+          type="text"
+          id="text"
+          placeholder="지역을 입력해주세요."
+          disabled={isCheck}
+          value={myTown}
+          onChange={(e) => setMyTown(e.target.value)}
+        />
+      </StTextInputWrapper>
+
+      <StSearchButton type="button" onClick={() => onClick(isCheck, myTown)}>
+        검색하기
+      </StSearchButton>
+    </StWrapper>
+  );
+}
+
+const StWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 0;
+  gap: 10px;
+  font-size: 20px;
+  color: #fff;
+  border-bottom: 2px solid #fff;
+  width: 100%;
+`;
-  return (
-    <StWrapper>
-      <StCheckBoxWrapper>
-        <label htmlFor="checkbox">지역 기반으로 검색</label>
-        <input
-          type="checkbox"
-          id="checkbox"
-          onChange={() => setIsCheck(!isCheck)}
-        />
-      </StCheckBoxWrapper>
-
-      <StTextInputWrapper>
-        <label htmlFor="text">우리 동네는 여기에요</label>
-        <input
-          type="text"
-          placeholder="지역을 입력해주세요."
-          disabled={isCheck}
-          value={myTown}
-          onChange={(e) => setMyTown(e.target.value)}
-        />
-      </StTextInputWrapper>
-
-      <StSearchButton type="button" onClick={() => onClick(isCheck, myTown)}>
-        검색하기
-      </StSearchButton>
-    </StWrapper>
-  );
-}
-
-const StWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 0;
-  gap: 10px;
-  font-size: 20px;
-  color: #fff;
-  border-bottom: 2px solid #fff;
-  width: 100%;
-`;
+   return (
+    <StForm onSubmit={(e) => onClick(isCheck, myTown, e)}>
+      <StCheckBoxWrapper>
+        <label htmlFor="checkbox">지역 기반으로 검색</label>
+        <input
+          type="checkbox"
+          id="checkbox"
+          onChange={() => setIsCheck(!isCheck)}
+        />
+      </StCheckBoxWrapper>
+
+      <StTextInputWrapper>
+        <label htmlFor="text">우리 동네는 여기에요</label>
+        <input
+          type="text"
+          placeholder="지역을 입력해주세요."
+          disabled={isCheck}
+          value={myTown}
+          onChange={(e) => setMyTown(e.target.value)}
+        />
+      </StTextInputWrapper>
+
+      <StSearchButton type="submit">
+        검색하기
+      </StSearchButton>
+    </StForm>
+  );
+}
+
+const StForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 0;
+  gap: 10px;
+  font-size: 20px;
+  color: #fff;
+  border-bottom: 2px solid #fff;
+  width: 100%;
+`;
-  return (
-    <StWrapper>
-      <StCheckBoxWrapper>
-        <label htmlFor="checkbox">지역 기반으로 검색</label>
-        <input
-          type="checkbox"
-          id="checkbox"
-          onChange={() => setIsCheck(!isCheck)}
-        />
-      </StCheckBoxWrapper>
-
-      <StTextInputWrapper>
-        <label htmlFor="text">우리 동네는 여기에요</label>
-        <input
-          type="text"
-          placeholder="지역을 입력해주세요."
-          disabled={isCheck}
-          value={myTown}
-          onChange={(e) => setMyTown(e.target.value)}
-        />
-      </StTextInputWrapper>
-
-      <StSearchButton type="button" onClick={() => onClick(isCheck, myTown)}>
-        검색하기
-      </StSearchButton>
-    </StWrapper>
-  );
-}
-
-const StWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 0;
-  gap: 10px;
-  font-size: 20px;
-  color: #fff;
-  border-bottom: 2px solid #fff;
-  width: 100%;
-`;
+   return (
+    <StForm onSubmit={(e) => onClick(isCheck, myTown, e)}>
+      <StCheckBoxWrapper>
+        <label htmlFor="checkbox">지역 기반으로 검색</label>
+        <input
+          type="checkbox"
+          id="checkbox"
+          onChange={() => setIsCheck(!isCheck)}
+        />
+      </StCheckBoxWrapper>
+
+      <StTextInputWrapper>
+        <label htmlFor="text">우리 동네는 여기에요</label>
+        <input
+          type="text"
+          placeholder="지역을 입력해주세요."
+          disabled={isCheck}
+          value={myTown}
+          onChange={(e) => setMyTown(e.target.value)}
+        />
+      </StTextInputWrapper>
+
+      <StSearchButton type="submit">
+        검색하기
+      </StSearchButton>
+    </StForm>
+  );
+}
+
+const StForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 0;
+  gap: 10px;
+  font-size: 20px;
+  color: #fff;
+  border-bottom: 2px solid #fff;
+  width: 100%;
+`;
+const StCheckBoxWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  & > label {
+    color: #fff;
+    font-weight: bold;
+  }
+`;
+const StTextInputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+`;
+const StSearchButton = styled.button`
+  border: none;
+  border-radius: 10px;
+  background-color: #fff;
+  color: #000;
+  font-weight: 700;
+
+  width: 70px;
+  height: 25px;
+
+  &:hover {
+    background-color: #828282;
+    color: #fff;
+  }
+`;
diff --git a/week4-ts/src/components/Skeleton.tsx b/week4-ts/src/components/Skeleton.tsx
@@ -0,0 +1,72 @@
+import styled, { keyframes } from "styled-components";
+
+function Skeleton() {
+  return (
+    <SkeletonWrapper>
+      <SkeletonTitle />
+      <SkeletonInfo>
+        <SkeletonPhone />
+        <SkeletonAddress />
+      </SkeletonInfo>
+    </SkeletonWrapper>
+  );
+}
+
+const loading = keyframes`
+0% {
+        transform:  translateX(0);
+    }
+    50%,100%{
+        transform:translateX(268px);
+    }
+`;
+
+const LoadingAnimation = styled.div`
+  overflow: hidden;
+  position: relative;
+  opacity: 0.5;
+
+  &::before {
+    content: "";
+    width: 20px;
+    height: 80px;
+    position: absolute;
+    background: linear-gradient(to right, #bdbdbd, #fff, #bdbdbd);
+    animation: ${loading} 1.5s infinite linear;
+  }
+`;
+
+const SkeletonWrapper = styled.li`
+  display: flex;
+  flex-direction: column;
+  height: 80px;
+  background-color: #fff;
+  border-radius: 10px;
+`;
+
+const SkeletonTitle = styled(LoadingAnimation)`
+  margin: 10px 0 20px 20px;
+  width: 90px;
+  height: 20px;
+  background-color: #bdbdbd;
+`;
+
+const SkeletonInfo = styled.div`
+  display: flex;
+  gap: 20px;
+`;
+
+const SkeletonPhone = styled(LoadingAnimation)`
+  width: 90px;
+  height: 20px;
+  margin-left: 20px;
+  background-color: #bdbdbd;
+`;
+
+const SkeletonAddress = styled(LoadingAnimation)`
+  width: 140px;
+  margin-right: 20px;
+  background-color: #bdbdbd;
+`;
+
+export default Skeleton;
diff --git a/week4-ts/src/components/StoreCard.tsx b/week4-ts/src/components/StoreCard.tsx
@@ -0,0 +1,74 @@
+import styled from "styled-components";
+import { Store } from "../types";
+
+interface StoreCardProps {
+  store: Store;
+  isCheck: boolean;
+}
+
+export default function StoreCard({ store, isCheck }: StoreCardProps) {
+  const { place_url, place_name, phone, distance, address_name } = store;
+
+  return (
+    <StCard>
+      <a href={place_url || undefined}>{place_name}</a>
-      <a href={place_url || undefined}>{place_name}</a>
+      <a href={place_url}>{place_name}</a>
-      <a href={place_url || undefined}>{place_name}</a>
+      {place_url && <a href={place_url}>{place_name}</a>}
-      <a href={place_url || undefined}>{place_name}</a>
+      <a href={place_url}>{place_name}</a>
-      <a href={place_url || undefined}>{place_name}</a>
+      {place_url && <a href={place_url}>{place_name}</a>}
+      <StCardInfo>
+        <p className="info__tel">{phone || "번호 없음"}</p>
+        {isCheck ? (
+          <p>{distance}m</p>
+        ) : (
+          <p className="info__address">{address_name}</p>
+        )}
+      </StCardInfo>
+    </StCard>
+  );
+}
+const StCard = styled.li`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 20px;
+  width: 280px;
+  height: 80px;
+  font-size: 14px;
+  background-color: #fff;
+  color: #000;
+  border-radius: 10px;
+
+  & > a {
+    height: fit-content;
+    font-size: 16px;
+    font-weight: 700;
+    padding-left: 20px;
+    cursor: pointer;
+    color: inherit;
+  }
+`;
+
+const StCardInfo = styled.div`
+  display: flex;
+  gap: 20px;
+  width: 95%;
+  font-weight: 400;
+  justify-content: space-between;
+
+  & > .info__tel {
+    width: 100px;
+    height: fit-content;
+    min-height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 20px;
+    border-radius: 15px;
+    background-color: #828282;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  & > .info__address {
+    max-width: 150px;
+  }
+`;
diff --git a/week4-ts/src/favicon.svg b/week4-ts/src/favicon.svg
diff --git a/week4-ts/src/main.tsx b/week4-ts/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)