refactor: 헤더, 메인카드, 하단 푸터 S:SURE로 변경 (#403)

## 1️⃣ 작업 내용 Summary - resolved #402 ussum 문구를 ssure로 변경했습니다. https://www.figma.com/design/bvPbGZ4yQbtxoW66PCnAuF/%EC%88%AD%EC%8B%A4%EB%8C%80%ED%95%99%EA%B5%90-%EC%B4%9D%ED%95%99%EC%83%9D%ED%9A%8C-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80?node-id=9661-22251&p=f&t=S5GAQ9x0qoLhtYXw-0 원래는 문구가 text였는데 svg로 대체되면서 svg 패키지 설정을 했습니다. 온보딩은 아직 디자인이 나오지않아 ussum입니다. ## 2️⃣ 추후 작업할 내용 ## 3️⃣ 체크리스트 - [x] `main` 브랜치의 최신 코드를 `pull` 받았나요?
ssu-student-union · Feb 27, 2025 · 6df84b2 · 6df84b2
1 parent 5839595
commit 6df84b2
Show file tree

Hide file tree

Showing 14 changed files with 1,971 additions and 133 deletions.
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@toast-ui/editor": "^3.2.2",
     "@types/node": "^20.12.2",
     "@types/react": "^18.2.66",
@@ -75,7 +76,8 @@
     "prettier-plugin-tailwindcss": "^0.5.9",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "resolutions": {
     "rollup": "4.24.0",

diff --git a/src/assets/image/logo/ssure_white_logo.svg b/src/assets/image/logo/ssure_white_logo.svg
diff --git a/src/components/Logo/SsureLogo.tsx b/src/components/Logo/SsureLogo.tsx
@@ -0,0 +1,5 @@
+import SsureLogo from '@/assets/image/logo/ssure_white_logo.svg?react';
+
+export function Logo({ className }: { className?: string }) {
+  return <SsureLogo className={`h-full w-full ${className}`} />;
+}
diff --git a/src/components/Logo/Logo.tsx → src/components/Logo/UssumLogo.tsx b/src/components/Logo/Logo.tsx → src/components/Logo/UssumLogo.tsx
@@ -1,4 +1,4 @@
-export function Logo({ fill = '#ffffff', size = '32px' }: { fill?: string; size?: string }) {
+export function UssumLogo({ fill = '#ffffff', size = '32px' }: { fill?: string; size?: string }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/MainCarousel/index.tsx b/src/components/MainCarousel/index.tsx
@@ -5,6 +5,7 @@ import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import { useRecoilValue } from 'recoil';
 import { LoginState } from '@/recoil/atoms/atom';
+import { Logo } from '../Logo/SsureLogo';
 
 const CounterItem = ({ isActive }: { isActive: boolean }) => (
   <span className={`block h-[7px] w-[45px] rounded-[15px] ${isActive ? 'bg-[#B8B8B8]' : 'bg-[#E4E4E4]'}`} />
@@ -52,9 +53,9 @@ const MainCarousel = () => {
       </Slider>
 
       <div className="pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center text-center text-white">
-        <div className="pointer-events-auto text-xl font-bold">제64대 총학생회</div>
-        <h1 className="pointer-events-auto text-[80px] font-black leading-none">US:SUM</h1>
-
+        <div className="pointer-events-auto text-xl font-bold">제65대 총학생회</div>
+        <h1 className="pointer-events-auto text-[80px] font-black leading-none"></h1>
+        <Logo className="pointer-events-auto h-[97.92px] w-[310.62px] xs:h-[57.8px] xs:w-[165.65px] sm:h-[57.8px] sm:w-[165.65px]" />
         {!isLogin && (
           <button
             onClick={(e) => {

diff --git a/src/components/PostCard/PostCardBasicMissing.tsx b/src/components/PostCard/PostCardBasicMissing.tsx
@@ -3,8 +3,6 @@ import { Badge } from '../ui/badge';
 import { Size } from './const/state';
 import { getStyles } from './const/style';
 import { cn } from '@/libs/utils';
-import { Logo } from '@/components/Logo/Logo';
-import { useResize } from '@/hooks/useResize';
 
 interface PostCardProps {
   imgUrl?: string;
@@ -34,9 +32,6 @@ const PostCard = ({
 }: PostCardProps) => {
   const styles = getStyles(size);
 
-  const { width } = useResize();
-  const mobile_screen = width < 391;
-
   const maxTitleLength = size === Size.default ? 12 : 8;
   const maxSubtitleLength = size === Size.default ? 24 : 18;
 
@@ -67,10 +62,9 @@ const PostCard = ({
             <div className={`flex items-end gap-1 font-normal text-gray-500 ${styles.date}`}>
               {cardType === 'Basic' && (
                 <div className="relative flex items-baseline">
-                  <span className="absolute left-0 top-[2px] flex items-baseline">
-                    <Logo size={mobile_screen ? '10px' : '12px'} fill="#9CA3AF" />
+                  <span>
+                    {profileName} {profileName && '•'}
                   </span>
-                  <span className="ml-4 xs:ml-3">{profileName} •</span>
                   <span>{date}</span>
                 </div>
               )}

diff --git a/src/const/studentCouncil.ts b/src/const/studentCouncil.ts
@@ -0,0 +1,7 @@
+// 현 총학생회 명
+const STUDENT_COUNCIL_NAME = 'S:SURE';
+
+// 이메일
+const EMAIL = 'ssu65th@gmail.com';
+
+export { STUDENT_COUNCIL_NAME, EMAIL };
diff --git a/src/containers/common/Footer/Footer.tsx b/src/containers/common/Footer/Footer.tsx
@@ -1,21 +1,20 @@
-import { Logo } from '@/components/Logo/Logo';
+import { EMAIL, STUDENT_COUNCIL_NAME } from '@/const/studentCouncil';
 import { EnvelopeSimple } from '@phosphor-icons/react';
 
 export const Footer = () => {
   return (
     <footer className="flex h-fit w-full flex-col bg-primary text-white xs:items-center xs:justify-center xs:gap-[5px] xs:py-[21px] sm:items-center sm:justify-center sm:gap-[5px] sm:py-[21px] md:gap-[19px] md:px-[60px] md:py-[34.5px] lg:gap-[27px] lg:px-[87px] lg:py-[71px] xl:gap-[27px] xl:px-[87px] xl:py-[71px] xxl:gap-[27px] xxl:px-[87px] xxl:py-[71px]">
-      <div className="xs:size-[28px] sm:size-[28px] md:size-[103px] lg:size-[103px] xl:w-[103px] xxl:w-[103px]">
-        <Logo size={'100%'} />
-      </div>
       <div className="flex flex-col gap-[10px] xs:text-center sm:text-center">
         <strong>
-          <p className="xs:text-[13px] sm:text-[13px]">제64대 숭실대학교 총학생회 US:SUM</p>
+          <p className="decoration-skip-ink-none text-left text-[24px] font-bold leading-[28.64px] underline-offset-[from-font] xs:text-[13px] sm:text-[13px]">
+            제65대 숭실대학교 총학생회 {STUDENT_COUNCIL_NAME}
+          </p>
         </strong>
         <p className="xs:text-[12px] sm:text-[12px]">서울시 동작구 상도로 369 숭실대학교 학생회관 106호 총학생회실</p>
       </div>
       <div className="flex items-center gap-[8px]">
         <EnvelopeSimple size={23} />
-        <p className="xs:text-[13px] sm:text-[13px]">ussum64@gmail.com</p>
+        <p className="xs:text-[13px] sm:text-[13px]">{EMAIL}</p>
       </div>
       <div className="flex items-center gap-[1px] xs:text-[13px] sm:text-[13px]">
         <a href="/personal-data?category=personal">개인정보처리방침</a>

diff --git a/src/containers/common/Header/Header.tsx b/src/containers/common/Header/Header.tsx
@@ -1,13 +1,12 @@
 import { cn } from '@/libs/utils';
 import { List } from '@phosphor-icons/react';
-import { Logo } from '@/components/Logo/Logo';
+import { Logo } from '@/components/Logo/SsureLogo';
 import { getStyles } from './const/style';
 import { HeaderSheet } from './component/HeaderSheet';
 import { AuthButton } from './component/AuthButton';
 import { State } from './const/state';
 import { Navigation } from './component/Navigation';
 import { Link } from 'react-router-dom';
-import { useHeaderSize } from '@/hooks/useHeaderSize';
 
 interface HeaderProps {
   state?: State;
@@ -16,7 +15,6 @@ interface HeaderProps {
 
 export function Header({ state = State.Onboarding, onLogout = () => {} }: HeaderProps) {
   const styles = getStyles(state);
-  const isSmall = useHeaderSize();
   return (
     <div
       className={cn(
@@ -35,8 +33,7 @@ export function Header({ state = State.Onboarding, onLogout = () => {} }: Header
       <div className={cn(styles.headerItemStyle, 'xs:px-0.5 sm:px-0.5 md:px-0.5 lg:px-0.5')}>
         <Link to="/">
           <div className="flex items-center gap-4">
-            <Logo size={isSmall ? '23px' : '46px'} fill={styles.fillColor} />
-            <span className={cn(styles.textColor, 'min-w-fit text-[20px] text-lg font-bold')}>US:SUM</span>
+            <Logo className="h-[26px]" />
           </div>
         </Link>
       </div>

diff --git a/src/pages/petition-notice/[id]/containers/PostPetitionDetailPostSection.tsx b/src/pages/petition-notice/[id]/containers/PostPetitionDetailPostSection.tsx
@@ -4,7 +4,7 @@ import { useResize } from '@/hooks/useResize';
 import { Viewer } from '@toast-ui/react-editor';
 import { ThumbsUp } from '@phosphor-icons/react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Logo } from '@/components/Logo/Logo';
+import { UssumLogo } from '@/components/Logo/UssumLogo';
 import Breadcrumb from '@/components/Breadcrumb';
 import { PostHead } from '@/components/PostHead';
 import { useGetBoardDetail } from '@/hooks/api/get/useGetBoardDetail';
@@ -202,7 +202,7 @@ export function PostPetitionDetailPostSection() {
                       key={official_comment.id}
                     >
                       <div className="mb-2 flex text-[1.125rem] font-bold xs:text-[0.75rem]">
-                        <Logo size={mobile_screen ? '15px' : '26px'} fill="#2F4BF7" />
+                        <UssumLogo size={mobile_screen ? '15px' : '26px'} fill="#2F4BF7" />
                         <span className="ml-2 text-[#2F4BF7]">{official_comment.authorName} 공식답변</span>
                       </div>
                       <p className="text-[1.125rem] font-medium text-[#7E7E7E] xs:text-[0.75rem]">

diff --git a/src/types/svg.d.ts b/src/types/svg.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const value: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default value;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,14 +2,12 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "esModuleInterop": true,
     "module": "ESNext",
     "skipLibCheck": true,
     /* Bundler mode */
+    "types": ["vite-plugin-svgr/client"],
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
@@ -23,18 +21,11 @@
     "noFallthroughCasesInSwitch": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ],
-      "@toast-ui/editor": [
-        "./node_modules/@toast-ui/editor/types"
-      ]
+      "@/*": ["./src/*"],
+      "@toast-ui/editor": ["./node_modules/@toast-ui/editor/types"]
     }
   },
-  "include": [
-    "src",
-    "react-slick.d.ts"
-  ],
+  "include": ["src", "react-slick.d.ts", "svg.d.ts"],
   "references": [
     {
       "path": "./tsconfig.node.json"

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,9 +1,10 @@
 import path from 'path';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), svgr()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),