From 3d7b8ec208b17221321fc5cc76db636c9cf13c7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= Date: Fri, 6 Mar 2026 10:01:46 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=EC=83=89=EC=83=81=20=ED=86=A0?= =?UTF-8?q?=ED=81=B0=20=ED=8C=8C=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/colors.css | 85 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 src/styles/colors.css diff --git a/src/styles/colors.css b/src/styles/colors.css new file mode 100644 index 00000000..3f9561c9 --- /dev/null +++ b/src/styles/colors.css @@ -0,0 +1,85 @@ +@theme { + /* ======================================== + KONECT COLOR TOKENS (Figma: Konnect_Light) + ======================================== */ + + /* Base */ + --color-black: #323532; + --color-white: #ffffff; + + /* Primary */ + --color-primary-100: #eaf6fb; + --color-primary-200: #cfeaf5; + --color-primary-400: #8ed0e6; + --color-primary-500: #69bfdf; + --color-primary-600: #55a9c7; + --color-primary-700: #428fa9; + --color-primary-800: #2f6e83; + --color-primary-900: #1e4a59; + + /* Text */ + --color-text-100: #e7ebef; + --color-text-200: #c6cfd8; + --color-text-300: #a5b3c1; + --color-text-400: #8497aa; + --color-text-500: #5a6b7f; + --color-text-600: #475769; + --color-text-700: #344352; + --color-text-800: #1e2c3f; + --color-text-900: #021730; + + /* Sub */ + --color-sub-100: #fef6d9; + --color-sub-200: #fcedb2; + --color-sub-300: #f6de8c; + --color-sub-400: #e8c867; + --color-sub-500: #d6af47; + --color-sub-600: #b89236; + --color-sub-700: #937228; + --color-sub-800: #6e531c; + --color-sub-900: #463413; + + /* Danger */ + --color-danger-50: #fffbfb; + --color-danger-100: #fef2f2; + --color-danger-200: #ffebee; + --color-danger-300: #ffccd2; + --color-danger-400: #f49898; + --color-danger-500: #eb6f70; + --color-danger-600: #f64c4c; + --color-danger-700: #ec2d30; + --color-danger-800: #d02a2d; + + /* Warning */ + --color-warning-50: #fffdfa; + --color-warning-100: #fff9ee; + --color-warning-200: #fff7e1; + --color-warning-300: #ffeab3; + --color-warning-400: #ffdd82; + --color-warning-500: #ffc62b; + --color-warning-600: #ffad0d; + --color-warning-700: #fe9b0e; + --color-warning-800: #e2892b; + + /* Success */ + --color-success-50: #fbfefc; + --color-success-100: #f2faf6; + --color-success-200: #e5f5ec; + --color-success-300: #c0e5d1; + --color-success-400: #97d4b4; + --color-success-500: #6bc497; + --color-success-600: #47b881; + --color-success-700: #0c9d61; + --color-success-800: #0f8759; + + /* Info */ + --color-info-50: #f8fcff; + --color-info-100: #f1f8ff; + --color-info-200: #e4f2ff; + --color-info-300: #bdddff; + --color-info-400: #93c8ff; + --color-info-500: #4ba1ff; + --color-info-600: #3b82f6; + --color-info-700: #3a70e2; + --color-info-800: #3664c0; +} From 4a28ffc714a250627c1fc7d44a42380af6b50fa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= Date: Fri, 6 Mar 2026 10:02:00 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=ED=83=80=EC=9D=B4=ED=8F=AC?= =?UTF-8?q?=EA=B7=B8=EB=9E=98=ED=94=BC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.css | 2 + src/styles/theme.css | 165 -------------------------------------- src/styles/typography.css | 165 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 167 insertions(+), 165 deletions(-) create mode 100644 src/styles/typography.css diff --git a/src/index.css b/src/index.css index 520fa9c6..b23555f2 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,8 @@ @import 'tailwindcss'; @import './styles/font.css'; +@import './styles/colors.css'; +@import './styles/typography.css'; @import './styles/theme.css'; :root { diff --git a/src/styles/theme.css b/src/styles/theme.css index f2456e50..ba6b8f56 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -31,169 +31,4 @@ /* Blue Scale */ --color-blue-200: #8ec2fc; --color-blue-500: #59a7fc; - - /* ======================================== - FONT WEIGHTS - ======================================== */ - --font-weight-regular: 400; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-extrabold: 800; - - /* ======================================== - TYPOGRAPHY TOKENS (Mobile) - ======================================== */ - - /* Display (150%) */ - --text-d1: 32px; - --leading-d1: 48px; - --text-d2: 28px; - --leading-d2: 42px; - - /* Heading (160%) */ - --text-h1: 20px; - --leading-h1: 32px; - --text-h2: 18px; - --leading-h2: 28.8px; - --text-h3: 16px; - --leading-h3: 25.6px; - --text-h4: 14px; - --leading-h4: 22.4px; - --text-h5: 13px; - --leading-h5: 20.8px; - - /* Subtitle (160%) */ - --text-sub1: 16px; - --leading-sub1: 25.6px; - --text-sub2: 14px; - --leading-sub2: 22.4px; - --text-sub3: 13px; - --leading-sub3: 20.8px; - --text-sub4: 12px; - --leading-sub4: 19.2px; - - /* Body (160%) */ - --text-body1: 14px; - --leading-body1: 22.4px; - --text-body2: 13px; - --leading-body2: 20.8px; - --text-body3: 12px; - --leading-body3: 19.2px; - - /* Caption (160%) */ - --text-cap1: 11px; - --leading-cap1: 17.6px; - --text-cap2: 10px; - --leading-cap2: 16px; -} - -/* ======================================== - Semantic text utilities - ======================================== */ -@layer utilities { - /* Display */ - .text-d1 { - font-size: var(--text-d1); - line-height: var(--leading-d1); - font-weight: var(--font-weight-extrabold); - } - .text-d2 { - font-size: var(--text-d2); - line-height: var(--leading-d2); - font-weight: var(--font-weight-extrabold); - } - - /* Heading */ - .text-h1 { - font-size: var(--text-h1); - line-height: var(--leading-h1); - font-weight: var(--font-weight-semibold); - } - .text-h2 { - font-size: var(--text-h2); - line-height: var(--leading-h2); - font-weight: var(--font-weight-semibold); - } - .text-h3 { - font-size: var(--text-h3); - line-height: var(--leading-h3); - font-weight: var(--font-weight-semibold); - } - .text-h4 { - font-size: var(--text-h4); - line-height: var(--leading-h4); - font-weight: var(--font-weight-semibold); - } - .text-h5 { - font-size: var(--text-h5); - line-height: var(--leading-h5); - font-weight: var(--font-weight-semibold); - } - - /* Subtitle */ - .text-sub1 { - font-size: var(--text-sub1); - line-height: var(--leading-sub1); - font-weight: var(--font-weight-medium); - } - .text-sub2 { - font-size: var(--text-sub2); - line-height: var(--leading-sub2); - font-weight: var(--font-weight-medium); - } - .text-sub3 { - font-size: var(--text-sub3); - line-height: var(--leading-sub3); - font-weight: var(--font-weight-medium); - } - .text-sub4 { - font-size: var(--text-sub4); - line-height: var(--leading-sub4); - font-weight: var(--font-weight-medium); - } - - /* Body */ - .text-body1 { - font-size: var(--text-body1); - line-height: var(--leading-body1); - font-weight: var(--font-weight-regular); - } - .text-body2 { - font-size: var(--text-body2); - line-height: var(--leading-body2); - font-weight: var(--font-weight-regular); - } - .text-body3 { - font-size: var(--text-body3); - line-height: var(--leading-body3); - font-weight: var(--font-weight-regular); - } - .text-body3-strong { - font-size: var(--text-body3); - line-height: var(--leading-body3); - font-weight: var(--font-weight-semibold); - } - - /* Caption */ - .text-cap1 { - font-size: var(--text-cap1); - line-height: var(--leading-cap1); - font-weight: var(--font-weight-regular); - } - .text-cap1-strong { - font-size: var(--text-cap1); - line-height: var(--leading-cap1); - font-weight: var(--font-weight-semibold); - } - - .text-cap2 { - font-size: var(--text-cap2); - line-height: var(--leading-cap2); - font-weight: var(--font-weight-regular); - } - .text-cap2-strong { - font-size: var(--text-cap2); - line-height: var(--leading-cap2); - font-weight: var(--font-weight-semibold); - } } diff --git a/src/styles/typography.css b/src/styles/typography.css new file mode 100644 index 00000000..3f2789ff --- /dev/null +++ b/src/styles/typography.css @@ -0,0 +1,165 @@ +@theme { + /* ======================================== + KONECT TYPOGRAPHY TOKENS (Mobile) + Figma: 1268:2734 Mobile Typography Style + ======================================== */ + + /* Font Weights */ + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-extrabold: 800; + + /* Display (150%) */ + --D1: 32px; + --leading-d1: 48px; + --D2: 28px; + --leading-d2: 42px; + + /* Heading (160%) */ + --H1: 20px; + --leading-h1: 32px; + --H2: 18px; + --leading-h2: 28.8px; + --H3: 16px; + --leading-h3: 25.6px; + --H4: 14px; + --leading-h4: 22.4px; + --H5: 13px; + --leading-h5: 20.8px; + + /* Subtitle (160%) */ + --Sub1: 16px; + --leading-sub1: 25.6px; + --Sub2: 14px; + --leading-sub2: 22.4px; + --Sub3: 13px; + --leading-sub3: 20.8px; + --Sub4: 12px; + --leading-sub4: 19.2px; + + /* Body (160%) */ + --Body1: 14px; + --leading-body1: 22.4px; + --Body2: 13px; + --leading-body2: 20.8px; + --Body3: 12px; + --leading-body3: 19.2px; + + /* Caption (160%) */ + --Caption1: 11px; + --leading-cap1: 17.6px; + --Caption2: 10px; + --leading-cap2: 16px; +} + +/* ======================================== + Semantic text utilities + ======================================== */ +@layer utilities { + /* Display */ + .D1 { + font-size: var(--D1); + line-height: var(--leading-d1); + font-weight: var(--font-weight-extrabold); + } + .D2 { + font-size: var(--D2); + line-height: var(--leading-d2); + font-weight: var(--font-weight-extrabold); + } + + /* Heading */ + .H1 { + font-size: var(--H1); + line-height: var(--leading-h1); + font-weight: var(--font-weight-semibold); + } + .H2 { + font-size: var(--H2); + line-height: var(--leading-h2); + font-weight: var(--font-weight-semibold); + } + .H3 { + font-size: var(--H3); + line-height: var(--leading-h3); + font-weight: var(--font-weight-semibold); + } + .H4 { + font-size: var(--H4); + line-height: var(--leading-h4); + font-weight: var(--font-weight-semibold); + } + .H5 { + font-size: var(--H5); + line-height: var(--leading-h5); + font-weight: var(--font-weight-semibold); + } + + /* Subtitle */ + .Sub1 { + font-size: var(--Sub1); + line-height: var(--leading-sub1); + font-weight: var(--font-weight-medium); + } + .Sub2 { + font-size: var(--Sub2); + line-height: var(--leading-sub2); + font-weight: var(--font-weight-medium); + } + .Sub3 { + font-size: var(--Sub3); + line-height: var(--leading-sub3); + font-weight: var(--font-weight-medium); + } + .Sub4 { + font-size: var(--Sub4); + line-height: var(--leading-sub4); + font-weight: var(--font-weight-medium); + } + + /* Body */ + .Body1 { + font-size: var(--Body1); + line-height: var(--leading-body1); + font-weight: var(--font-weight-regular); + } + .Body2 { + font-size: var(--Body2); + line-height: var(--leading-body2); + font-weight: var(--font-weight-regular); + } + .Body3 { + font-size: var(--Body3); + line-height: var(--leading-body3); + font-weight: var(--font-weight-regular); + } + .Body3-strong { + font-size: var(--Body3); + line-height: var(--leading-body3); + font-weight: var(--font-weight-medium); + } + + /* Caption */ + .Caption1 { + font-size: var(--Caption1); + line-height: var(--leading-cap1); + font-weight: var(--font-weight-regular); + } + .Caption1-strong { + font-size: var(--Caption1); + line-height: var(--leading-cap1); + font-weight: var(--font-weight-semibold); + } + + .Caption2 { + font-size: var(--Caption2); + line-height: var(--leading-cap2); + font-weight: var(--font-weight-regular); + } + .Caption2-strong { + font-size: var(--Caption2); + line-height: var(--leading-cap2); + font-weight: var(--font-weight-semibold); + } +} From 53f527bd5ca15b67f232378a1fd76ec4d2aba107 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= Date: Fri, 6 Mar 2026 10:02:18 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=ED=94=BC=EA=B7=B8=EB=A7=88=20?= =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=8F=AC=EA=B7=B8=EB=9E=98=ED=94=BC=20?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EB=B0=8D=EC=9C=BC=EB=A1=9C=20=ED=81=B4?= =?UTF-8?q?=EB=9E=98=EC=8A=A4=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/ToggleSwitch.tsx | 2 +- .../layout/Header/components/InfoHeader.tsx | 4 +- src/pages/Auth/SignUp/ConfirmStep.tsx | 23 +++---- src/pages/Auth/SignUp/FinishStep.tsx | 6 +- src/pages/Auth/SignUp/NameStep.tsx | 2 +- src/pages/Auth/SignUp/StudentIdStep.tsx | 2 +- src/pages/Auth/SignUp/TermStep.tsx | 2 +- src/pages/Auth/SignUp/UniversityStep.tsx | 16 ++--- .../Auth/SignUp/components/AgreementArrow.tsx | 4 +- .../Auth/SignUp/components/StepLayout.tsx | 2 +- src/pages/Chat/index.tsx | 2 +- src/pages/Club/Application/clubFeePage.tsx | 4 +- src/pages/Club/Application/index.tsx | 6 +- .../Club/ClubDetail/components/ClubIntro.tsx | 8 +-- .../ClubDetail/components/ClubRecruitment.tsx | 6 +- src/pages/Club/ClubDetail/index.tsx | 4 +- .../Club/ClubList/components/ClubCard.tsx | 8 +-- src/pages/Club/ClubList/index.tsx | 2 +- src/pages/Club/ClubSearch/index.tsx | 2 +- .../Home/components/CouncilNoticeCard.tsx | 4 +- .../Home/components/SimpleAppliedClubCard.tsx | 6 +- src/pages/Home/components/SimpleClubCard.tsx | 8 +-- src/pages/Home/index.tsx | 22 +++---- src/pages/Manager/ManagedAccount/index.tsx | 6 +- .../ManagedApplicationDetail/index.tsx | 30 ++++----- .../Manager/ManagedApplicationList/index.tsx | 14 ++-- src/pages/Manager/ManagedClubDetail/index.tsx | 2 +- src/pages/Manager/ManagedClubList/index.tsx | 2 +- .../Manager/ManagedClubProfile/index.tsx | 8 +-- .../ManagedMemberApplicationDetail/index.tsx | 24 ++++--- src/pages/Manager/ManagedMemberList/index.tsx | 66 +++++++++---------- .../Manager/ManagedRecruitmentForm/index.tsx | 19 +++--- .../Manager/ManagedRecruitmentWrite/index.tsx | 36 +++++----- .../Manager/components/TimePicker/index.tsx | 16 ++--- .../User/MyPage/components/UserInfoCard.tsx | 24 +++---- src/pages/User/MyPage/index.tsx | 10 +-- src/pages/User/Profile/index.tsx | 6 +- 37 files changed, 193 insertions(+), 215 deletions(-) diff --git a/src/components/common/ToggleSwitch.tsx b/src/components/common/ToggleSwitch.tsx index 3d4a8ac0..75c54783 100644 --- a/src/components/common/ToggleSwitch.tsx +++ b/src/components/common/ToggleSwitch.tsx @@ -36,7 +36,7 @@ function ToggleSwitch({ )} diff --git a/src/components/layout/Header/components/InfoHeader.tsx b/src/components/layout/Header/components/InfoHeader.tsx index 138f3279..f67579b4 100644 --- a/src/components/layout/Header/components/InfoHeader.tsx +++ b/src/components/layout/Header/components/InfoHeader.tsx @@ -7,8 +7,8 @@ function InfoHeader() { return (
-
{myInfo.universityName}
-
+
{myInfo.universityName}
+
{myInfo.name} {myInfo.studentNumber}
diff --git a/src/pages/Auth/SignUp/ConfirmStep.tsx b/src/pages/Auth/SignUp/ConfirmStep.tsx index 61d0580f..a9653821 100644 --- a/src/pages/Auth/SignUp/ConfirmStep.tsx +++ b/src/pages/Auth/SignUp/ConfirmStep.tsx @@ -70,31 +70,26 @@ function ConfirmStep() { color="text-red-500" >
- +
- +
- - + +
{error && (
@@ -107,7 +102,7 @@ function ConfirmStep() { )}
-
+
이미 등록된 학번입니다{'\n'} 문의를 통해 문제를 해결해주세요
@@ -115,12 +110,12 @@ function ConfirmStep() { value={inquiryContent} onChange={(e) => setInquiryContent(e.target.value)} placeholder="문의 내용을 입력해주세요" - className="text-sub2 min-h-32 w-full resize-none rounded-lg border-2 border-indigo-200 p-4 placeholder:text-indigo-300" + className="Sub2 min-h-32 w-full resize-none rounded-lg border-2 border-indigo-200 p-4 placeholder:text-indigo-300" /> diff --git a/src/pages/Auth/SignUp/FinishStep.tsx b/src/pages/Auth/SignUp/FinishStep.tsx index 67954b32..a1bdb94e 100644 --- a/src/pages/Auth/SignUp/FinishStep.tsx +++ b/src/pages/Auth/SignUp/FinishStep.tsx @@ -22,11 +22,11 @@ function FinishStep() {
-
환영합니다!
+
환영합니다!
-
{myInfo.name}님
-
+
{myInfo.name}님
+
KONECT 가입이 완료되었습니다.
동아리 활동을 시작해보세요!
diff --git a/src/pages/Auth/SignUp/NameStep.tsx b/src/pages/Auth/SignUp/NameStep.tsx index 4ba05c41..7b7edd0c 100644 --- a/src/pages/Auth/SignUp/NameStep.tsx +++ b/src/pages/Auth/SignUp/NameStep.tsx @@ -29,7 +29,7 @@ function NameStep() { setName(value); }} placeholder="ex) 홍길동" - className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300" + className="H3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300" /> ); diff --git a/src/pages/Auth/SignUp/StudentIdStep.tsx b/src/pages/Auth/SignUp/StudentIdStep.tsx index b91a7f8e..c0655d8c 100644 --- a/src/pages/Auth/SignUp/StudentIdStep.tsx +++ b/src/pages/Auth/SignUp/StudentIdStep.tsx @@ -37,7 +37,7 @@ function StudentIdStep() { setStudentId(value); }} placeholder="ex) 2022136039" - className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300" + className="H3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300" /> ); diff --git a/src/pages/Auth/SignUp/TermStep.tsx b/src/pages/Auth/SignUp/TermStep.tsx index edddc736..c23ee218 100644 --- a/src/pages/Auth/SignUp/TermStep.tsx +++ b/src/pages/Auth/SignUp/TermStep.tsx @@ -35,7 +35,7 @@ function TermStep() { return (
-
서비스 이용 동의
+
서비스 이용 동의
원활한 서비스 이용을 위해 동의해주세요
diff --git a/src/pages/Auth/SignUp/UniversityStep.tsx b/src/pages/Auth/SignUp/UniversityStep.tsx index e046e848..a47c5903 100644 --- a/src/pages/Auth/SignUp/UniversityStep.tsx +++ b/src/pages/Auth/SignUp/UniversityStep.tsx @@ -13,7 +13,7 @@ import { useGetUniversityList } from './hooks/useUniversity'; function UniversityCard({ label, onClick }: { label: string; onClick: () => void }) { return ( -
{label}
+
{label}
 ); @@ -65,7 +65,7 @@ function UniversityStep() { value={universityName} placeholder="학교를 입력해주세요.." onChange={(e) => setUniversityName(e.target.value)} - className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300 placeholder:text-indigo-300" + className="H3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300 placeholder:text-indigo-300" />
{filteredUniversities.map((university) => ( @@ -76,14 +76,12 @@ function UniversityStep() { /> ))} - {hasNoSearchResult && ( -
{`'${trimmed}' 검색 결과가 없어요`}
- )} + {hasNoSearchResult &&
{`'${trimmed}' 검색 결과가 없어요`}
} @@ -91,17 +89,17 @@ function UniversityStep() {
-
학교 문의
+
학교 문의