update:입국 허가요건, 국가별 대사관 모바일 최적화 및 일부 수정

README.md

@@ -1,4 +1,4 @@
-# Travel Guard
+# ✈️ Travel Guard
 
 ### ☑️ 진행상황
 
@@ -7,6 +7,7 @@
 ---
 
 - [x] [Main] globe.gl 연동 & 대륙 입히기
+- [x] [Main] 배경 Color + 별 추가
 - [x] [Main] 위험 경보 API - 3D 지구본 연동
 - [x] [Main] Mobile & Web UI 최적화
 
@@ -22,5 +23,9 @@
 - [x] [국가별 대사관 정보] API 연동
 - [x] [국가별 대사관 정보] 국가 별 정보 (전체 / 디테일)페이지 제작
 - [x] [국가별 대사관 정보] 검색 및 단계 별 정렬 구현
-- [ ] [국가별 대사관 정보] Mobile & Web UI 최적화(WEB 완료)
+- [x] [국가별 대사관 정보] Mobile & Web UI 최적화
 - [ ] Encountered two children with the same key ``에러 해결 . . .
+
+---
+
+- [x] [입국 허가요건 & 국가별 대사관 정보] 모바일 표 사이즈 최적화

src/App.css

@@ -3,7 +3,7 @@ body {
   margin: 0;
   padding: 0;
   height: 100%;
-  /* overflow: hidden; */
+  overflow: hidden;
   color: #f0f0f0;
   background: "linear-gradient(to bottom, #03003d 0%, #070024 43%, #000014 100%)";
 }

src/App.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import "./App.css";
 import GlobeComponent from "./components/layout/globeComponent";
 import Header from "./components/common/Header";
@@ -7,24 +8,73 @@ import CountryDetail from "./pages/CountryDetail";
 import PermissionEnter from "./pages/PermissionEnter";
 import EmbassyPage from "./pages/EmbassyPage";
 import styled from "@emotion/styled";
+import { keyframes } from "@emotion/react";
+
+const twinkle = keyframes`
+  0% { opacity: 0.5; }
+  100% { opacity: 1; }
+`;
+
+const AppContainer = styled.div`
+  position: relative;
+  min-height: 100vh;
+  background: linear-gradient(to bottom, #0a0818 45%, #1b3d50);
+  overflow: hidden;
+`;
+
+const Star = styled.div<{
+  size: number;
+  top: string;
+  left: string;
+  delay: string;
+}>`
+  position: absolute;
+  background-color: white;
+  border-radius: 50%;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  top: ${(props) => props.top};
+  left: ${(props) => props.left};
+  animation: ${twinkle} 2s infinite alternate;
+  animation-delay: ${(props) => props.delay};
+`;
 
 const SubContainer = styled.div`
   padding: 0 15%;
   height: 100%;
-  /* background: linear-gradient(to bottom, #0a033a 0%, #040019 43%, #040019 100%); */
-  /* background: #040019; */
-  background: linear-gradient(to bottom, #0a0818, #1b3d50);
-
   overflow: auto;
+  position: relative;
+  z-index: 1;
   @media (max-width: 768px) {
     padding: 0 12% 0 5%;
   }
 `;
 
+const generateStars = (count: number) => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    size: Math.random() * 2 + 1,
+    top: `${Math.random() * 100}%`,
+    left: `${Math.random() * 100}%`,
+    delay: `${Math.random() * 2}s`,
+  }));
+};
+
 function App() {
+  const stars = useMemo(() => generateStars(100), []);
+
   return (
     <Router>
-      <div className="App">
+      <AppContainer>
+        {stars.map((star) => (
+          <Star
+            key={star.id}
+            size={star.size}
+            top={star.top}
+            left={star.left}
+            delay={star.delay}
+          />
+        ))}
         <Header />
         <Routes>
           <Route path="/" element={<GlobeComponent />} />
@@ -61,7 +111,7 @@ function App() {
             }
           />
         </Routes>
-      </div>
+      </AppContainer>
     </Router>
   );
 }

src/components/common/Header.tsx

@@ -52,7 +52,7 @@ const Menu = styled.ul`
 
 const MenuItem = styled.li<{ isActive: boolean }>`
   font-family: "Pretendard", sans-serif;
-  font-size: 20px;
+  font-size: 23px;
   font-weight: 400;
   color: #f0f0f0;
   text-align: center;

src/components/common/PageHeader.tsx

@@ -7,6 +7,9 @@ import { faSearch } from "@fortawesome/free-solid-svg-icons";
 const HeaderContainer = styled.div`
   margin: 50px auto;
   color: #f0f0f0;
+  @media (max-width: 768px) {
+    padding: 0 10px;
+  }
 `;
 
 const Title = styled.h1`
@@ -59,6 +62,7 @@ const SearchInput = styled.input`
   }
   @media (max-width: 768px) {
     font-size: 14px;
+    width: 77%;
   }
 `;
 
@@ -94,7 +98,7 @@ const PageHeader: React.FC<SearchProps> = ({
         </SearchIcon>
         <SearchInput
           type="text"
-          placeholder="국가 명을 입력하세요"
+          placeholder="국가명을 입력하세요"
           onChange={onSearchChange}
         />
       </SearchContainer>

src/components/common/ScrollableTable.tsx

@@ -3,8 +3,9 @@ import styled from "@emotion/styled";
 
 const ScrollWrapper = styled.div`
   max-height: 560px;
+  width: 100%;
   overflow-x: auto;
-  padding: 0 20px;
+  padding: 0 10px;
 
   &::-webkit-scrollbar {
     height: 8px;
@@ -18,12 +19,20 @@ const ScrollWrapper = styled.div`
     background: #5e5e5e;
     border-radius: 10px;
   }
+
+  @media (max-width: 768px) {
+    padding: 0 5px;
+  }
 `;
 
 const TableContainer = styled.div`
   background: rgba(41, 46, 52, 0.7);
   border-radius: 10px;
   padding: 20px;
+
+  @media (max-width: 768px) {
+    padding: 5px;
+  }
 `;
 
 const Table = styled.table`
@@ -37,6 +46,7 @@ const Table = styled.table`
     text-align: left;
     border-bottom: 1px solid #5e5e5e;
     line-height: 150%;
+    word-break: break-word;
   }
 
   th {
@@ -45,6 +55,12 @@ const Table = styled.table`
     font-size: 24px;
     line-height: 100%;
     font-weight: 500;
+
+    @media (max-width: 768px) {
+      font-size: 16px;
+      padding: 8px;
+      position: sticky;
+    }
   }
 
   th:nth-child(1) {
@@ -61,6 +77,10 @@ const Table = styled.table`
     color: #f0f0f0;
     font-size: 20px;
     padding-right: 5px;
+
+    @media (max-width: 768px) {
+      font-size: 14px;
+    }
   }
 
   tr:hover td {

src/components/layout/EmbrassyComponent.tsx

@@ -25,7 +25,7 @@ const EmbassyInfoContainer = styled.div`
   margin-top: 20px;
 
   @media (max-width: 768px) {
-    width: 50%;
+    width: 100%;
     padding: 0; // 모바일 여백 조정
     font-size: 10px;
   }

src/components/layout/LevelColors.tsx

@@ -62,8 +62,8 @@ const containerStyle = css`
   z-index: 100;
 
   @media (max-width: 768px) {
-    bottom: 32%;
-    left: 43%;
+    bottom: 25%;
+    left: 50%;
     transform: translate(-50%, 50%);
     width: 300px;
     padding: 15px;

src/components/layout/globeComponent.tsx

@@ -60,13 +60,7 @@ const GlobeComponent: React.FC = () => {
   const globeContainerStyle = css`
     width: 100%;
     height: calc(100vh - 140px);
-
-    background: linear-gradient(
-      to bottom,
-      #0a033a 0%,
-      #040019 43%,
-      #040019 100%
-    );
+    background: linear-gradient(to bottom, #0a0818 45%, #1b3d50);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -76,6 +70,41 @@ const GlobeComponent: React.FC = () => {
       height: 100vh;
     }
   `;
+  const starFieldStyle = css`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  `;
+
+  const starStyle = css`
+    position: absolute;
+    background-color: white;
+    border-radius: 50%;
+    animation: twinkle 2s infinite alternate;
+
+    @keyframes twinkle {
+      0% {
+        opacity: 0.5;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  `;
+  const generateStars = (count: number) => {
+    return Array.from({ length: count }, (_, i) => ({
+      id: i,
+      size: Math.random() * 2 + 1,
+      left: `${Math.random() * 100}%`,
+      top: `${Math.random() * 100}%`,
+      animationDelay: `${Math.random() * 2}s`,
+    }));
+  };
+
+  const stars = generateStars(50);
 
   const selectedCountryStyle = css`
     position: absolute;
@@ -138,7 +167,7 @@ const GlobeComponent: React.FC = () => {
       color: #b0b0b0;
 
       @media (max-width: 768px) {
-        font-size: 10px;
+        font-size: 12px;
       }
     }
   `;
@@ -160,6 +189,21 @@ const GlobeComponent: React.FC = () => {
 
   return (
     <div css={globeContainerStyle}>
+      <div css={starFieldStyle}>
+        {stars.map((star) => (
+          <div
+            key={star.id}
+            css={css`
+              ${starStyle}
+              width: ${star.size}px;
+              height: ${star.size}px;
+              left: ${star.left};
+              top: ${star.top};
+              animation-delay: ${star.animationDelay};
+            `}
+          />
+        ))}
+      </div>
       <Globe
         ref={globeEl}
         width={globeDimensions.width}

src/pages/CountryInfoPage.tsx

@@ -59,7 +59,7 @@ const Tab = styled.button<{ active: boolean }>`
   }
 
   @media (max-width: 768px) {
-    padding: 8px 10px;
+    padding: 10px 25px;
     font-size: 14px;
   }
 `;
@@ -85,6 +85,8 @@ const DataContainer = styled.div`
 
   @media (max-width: 768px) {
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    max-height: 410px;
+    padding: 10px 5px;
   }
 `;
 

src/pages/EmbassyPage.tsx

@@ -16,6 +16,12 @@ const Container = styled.div`
   background: transparent;
   min-height: 100vh;
   padding: 20px;
+  width: 100%;
+
+  @media (max-width: 768px) {
+    padding: 0;
+    width: 110%;
+  }
 `;
 
 const EmbassyPage: React.FC = () => {
@@ -52,7 +58,7 @@ const EmbassyPage: React.FC = () => {
     <Container>
       <PageHeader
         title="국가별 대사관 정보"
-        subtitle="국가명 검색을 통해 대사관 정보를 얻을 수 있습니다."
+        subtitle="국가명 검색을 통해 비상시 필요한 대사관 정보를 얻을 수 있습니다."
         onSearchChange={handleSearchChange}
       />
       {filteredData && filteredData.length > 0 ? (

src/pages/PermissionEnter.tsx

@@ -7,7 +7,12 @@ import styled from "@emotion/styled";
 const Container = styled.div`
   background: transparent;
   min-height: 100vh;
+  width: 100%;
   padding: 20px;
+  @media (max-width: 768px) {
+    padding: 0;
+    width: 110%;
+  }
 `;
 
 const PermissionEnter: React.FC = () => {