From f26de3b00ef46263e69c494452e2e6eed648d5a6 Mon Sep 17 00:00:00 2001 From: khyeonmin Date: Sat, 7 Jun 2025 18:40:39 +0900 Subject: [PATCH] Style(frontend): redesign UI and enable enlarged job image preview --- frontend/spec-trackr-app/src/com_sp.jsx | 136 +++++---- frontend/spec-trackr-app/src/sp_com.jsx | 3 +- frontend/spec-trackr-app/src/total.css | 360 ------------------------ 3 files changed, 80 insertions(+), 419 deletions(-) delete mode 100644 frontend/spec-trackr-app/src/total.css diff --git a/frontend/spec-trackr-app/src/com_sp.jsx b/frontend/spec-trackr-app/src/com_sp.jsx index 8ab907173..f7d28f546 100644 --- a/frontend/spec-trackr-app/src/com_sp.jsx +++ b/frontend/spec-trackr-app/src/com_sp.jsx @@ -132,7 +132,7 @@ const ComSp = ({ onSpecTabClick }) => { // --- 렌더링 --- return ( - + {/* 상단 중앙 제목 */}

SpecTrackr

@@ -264,67 +264,89 @@ const ComSp = ({ onSpecTabClick }) => { posting.image !== "null" && posting.image !== null && posting.image.trim() !== ""; + return ( -
-
-
{selectedCompany}
- {selectedPosition} -
-
-
-
- - {posting.location} -
-
- - {posting.education_level} -
-
- - {posting.experience} -
-
- {isValidImage && ( -
- 채용 이미지 { - e.target.onerror = null; - e.target.style.display = "none"; - }} - /> + {isValidImage ? ( + // 이미지가 있을 때: 이미지만 보여줌 + + ) : ( + // 이미지가 없을 때: 텍스트 정보 전체 제공 + <> +
+
+
{selectedCompany}
+ {selectedPosition} +
+
+
+
+ + {posting.location} +
+
+ + {posting.education_level} +
+
+ + {posting.experience} +
+
+
+
+ +
요구사항
+
+
    + {posting.etc_requirements + ?.split(/[•■ㅁㅇㆍ·*＞-]\s*/) + .filter(item => item.trim() !== "") + .map((req, idx) => ( +
  • + • {req.trim()} +
    • + ))} +
+
+
+
+ +
우대사항
+
+

+ {posting.preferred_qualification || "우대사항이 없습니다"} +

+
+ )} -
-
- -
요구사항
-
-
    - {posting.etc_requirements - ?.split(/[•■ㅁㅇㆍ·*＞-]\s*/) - .filter(item => item.trim() !== "") - .map((req, idx) => ( -
  • - • {req.trim()} -
    • - ))} -
-
-
-
- -
우대사항
-
-

- {posting.preferred_qualification || "우대사항이 없습니다"} -

-
); diff --git a/frontend/spec-trackr-app/src/sp_com.jsx b/frontend/spec-trackr-app/src/sp_com.jsx index 3e608a8ab..646a36b6a 100644 --- a/frontend/spec-trackr-app/src/sp_com.jsx +++ b/frontend/spec-trackr-app/src/sp_com.jsx @@ -11,7 +11,6 @@ import { } from "react-bootstrap"; import { FaSearch, FaBuilding, FaUserTie, FaUser, FaArrowLeft, FaArrowRight } from "react-icons/fa"; import TableauEmbed from "./TableauEmbed"; -import "./total.css"; const initialSpec = { school: "", @@ -147,7 +146,7 @@ const SpCom = ({ onCompanyTabClick }) => { // --- 렌더링 --- return ( - + {/* 상단 중앙 제목 */}

SpecTrackr

diff --git a/frontend/spec-trackr-app/src/total.css b/frontend/spec-trackr-app/src/total.css deleted file mode 100644 index 8663b7de5..000000000 --- a/frontend/spec-trackr-app/src/total.css +++ /dev/null @@ -1,360 +0,0 @@ -.container { - padding: 1.5rem; - border: 1px solid #ccc; - border-radius: 0.375rem; - max-width: none; - margin: 1rem; - font-family: sans-serif; - background-color: #f9f9f9; -} - -.title { - font-size: 1.875rem; - font-weight: 700; - margin-bottom: 1.5rem; - color: #333; -} - -.tab-wrapper { - border: 1px solid #ccc; - border-radius: 0.375rem; - background-color: #fff; - overflow: hidden; -} - -.button-group { - display: flex; - gap: 0.5rem; - padding: 1rem 1.5rem 0.5rem 1.5rem; - background-color: #fff; - margin-bottom: 0; -} - -.btn { - padding: 0.5rem 1rem; - border-radius: 0.375rem 0.375rem 0 0; - background-color: #eee; - color: #333; - border: none; - cursor: pointer; - border-bottom: 2px solid transparent; -} - -.btn.selected { - background-color: #ddd; - border-bottom: 2px solid #666; -} - -.btn-light { - background-color: #eee; -} - -.outer-box { - padding: 1.5rem; - border: 1px solid #ccc; - border-radius: 0.375rem; - margin-top: 0; - background-color: #fff; -} - -.section { - margin-bottom: 1.5rem; -} - -.job-btn { - padding: 0.25rem 0.75rem; - border: 1px solid #ddd; - border-radius: 0.375rem; - background-color: #f9f9f9; - cursor: pointer; -} - -.job-btn.selected { - background-color: #ccc; -} - -.select-label { - display: block; - margin-bottom: 0.25rem; - color: #333; - font-weight: 600; -} - -.select { - width: 100%; - padding: 0.25rem 0.5rem; - border: 1px solid #ccc; - border-radius: 0.375rem; -} - -.select-row { - display: flex; - gap: 1rem; - margin-top: 1rem; - margin-bottom: 1.5rem; -} -.select-col { - flex: 1; -} - -.tab-group { - display: flex; - gap: 0.5rem; - margin-bottom: 0; -} - -.tab-btn { - padding: 0.25rem 1rem; - border-radius: 0.375rem 0.375rem 0 0; - cursor: pointer; - border: none; -} - -.tab-active { - background-color: #ddd; -} - -.tab-inactive { - background-color: #eee; -} - -.result-box { - max-height: 300px; - overflow-y: auto; - padding: 10px; - border: 1px solid #ccc; - border-radius: 8px; - background-color: #fff; -} - -/* 채용정보 */ - -.posting-item { - display: grid; - grid-template-columns: auto; - gap: 10px; - padding: 12px; - border-bottom: 1px solid #ccc; - line-height: 1.6; -} - -.posting-info { - border-radius: 0.5rem; - line-height: 2; - color: #333; - font-size: 1rem; - user-select: text; -} - -@media (max-width: 600px) { - .posting-info { - padding: 0.8rem 1rem; - font-size: 0.9rem; - max-width: 100%; - } -} - -.image-container { - width: 100%; -} - -.job-image { - width: 100%; - max-width: 700px; - height: auto; - display: block; - object-fit: contain; - margin: 0 auto; -} - -/* 스펙 기준 검색 탭 관련 */ - -.spec-input-section { - margin-bottom: 1.5rem; -} - -.spec-input-label { - display: block; - margin-bottom: 0.25rem; - font-weight: 600; - color: #000; -} - -.spec-input-box { - display: flex; - flex-wrap: wrap; - gap: 1rem; - border: 1px solid #ccc; - border-radius: 0.375rem; - padding: 1.5rem 1rem; - background-color: #f9f9f9; - margin-bottom: 1.5rem; - justify-content: space-between; -} - -.spec-btn { - background-color: #eee; - border: none; - border-radius: 0.375rem; - padding: 0.5rem 1rem 0.25rem 1rem; - font-size: 1rem; - font-weight: 600; - color: #000; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - min-width: 9rem; - margin-bottom: 0.5rem; - cursor: pointer; - position: relative; -} - -.spec-input { - margin-top: 0.25rem; - width: 100%; - padding: 0.25rem 0.5rem; - border: 1px solid #ccc; - border-radius: 0.375rem; - font-size: 1rem; - background-color: #fff; - color: #000; -} - -.spec-compare-row { - display: flex; - gap: 1rem; - margin-bottom: 1.5rem; - justify-content: space-between; -} - -/* ✅ 새로 추가된 부분 */ -.spec-column { - display: flex; - flex-direction: column; - align-items: center; - width: 48%; -} - -.spec-title-outside { - font-weight: bold; - font-size: 1.125rem; - margin-bottom: 0.5rem; - text-align: center; - color: #000; -} -/* ✅ 기존 내용 유지 가능 */ -.spec-box { - position: relative; - border: 1px solid #e9d5ff; - border-radius: 0.375rem; - background-color: white; - min-height: 8rem; - padding: 0 3rem; - display: flex; - align-items: center; - justify-content: center; -} - -.spec-content { - color: #000; - font-size: 1rem; - line-height: 1.5; -} - -/* 기존 타이틀 스타일 (필요 없을 시 제거 가능) */ -.spec-title { - font-weight: 700; - margin-bottom: 0.5rem; - color: #000; - font-size: 1rem; -} - -.company-section { - margin-top: 1.5rem; -} - -.company-label { - display: block; - font-weight: 600; - margin-bottom: 0.25rem; - color: black; -} - -.company-carousel { - display: flex; - align-items: center; - justify-content: center; - position: relative; - margin-top: 1.5rem; - padding: 1rem; - background-color: #f5f5f5; - border-radius: 0.75rem; -} - -.carousel-arrow { - background: none; - border: none; - font-size: 2rem; - color: #333; - cursor: pointer; - z-index: 2; -} - -.carousel-arrow:disabled { - opacity: 0.3; - cursor: default; -} - -.carousel-content { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1.5rem; - width: 100%; - max-width: 800px; - padding: 0 2rem; -} - -.company-card { - background-color: #fff; - border: 1px solid #ddd; - border-radius: 0.75rem; - padding: 1rem; - text-align: center; - box-shadow: 0 2px 5px rgba(0,0,0,0.05); -} - -.company-name { - font-weight: bold; - font-size: 1rem; - margin-bottom: 0.25rem; -} - -.position-name { - font-size: 0.9rem; - color: #666; -} - -@media (max-width: 900px) { - .spec-input-box { - flex-direction: column; - align-items: stretch; - } - .spec-compare-row { - flex-direction: column; - gap: 1rem; - } - .spec-column { - width: 100%; - } - - .tableau-section { - margin-top: 40px; - } - - .tableau-box { - width: 100%; - max-width: 1400px; - margin: 0 auto; - } -}