diff --git a/_data/company.ts b/_data/company.ts index 0b862ae1..50900b09 100644 --- a/_data/company.ts +++ b/_data/company.ts @@ -1,12 +1,23 @@ -import { Company, CompanyName, ProjectName } from '~/about/work/models'; +import { + Company, + CompanyName, + JobPosition, + ProjectName, +} from '~/about/work/models'; const LINE: Company = { company: CompanyName.LINE, companyHref: 'https://www.linkedin.com/company/line-messenger/', companyLogoUrl: - 'https://github.com/1ilsang/dev/assets/23524849/815bfc87-2cec-43b1-b8c3-edb9db91b3b9', + 'https://github.com/1ilsang/dev/assets/23524849/81800e67-b54f-41e8-a232-520c99f465c8', + position: JobPosition.FE, workStartDate: 1596985200000, projectList: [ + { + name: ProjectName.LPC, + tags: ['Vite', 'pnpm', 'React-Query'], + startDate: 1709218800000, + }, { name: ProjectName.UVP, tags: [ @@ -19,6 +30,14 @@ const LINE: Company = { 'Webpack', ], startDate: 1604156400000, + endDate: 1709218800000, + }, + { + name: ProjectName.VLC, + tags: ['React18', 'React-Testing-Library', 'React-Query', 'WebSocket'], + url: 'https://oa-live.line.biz/', + startDate: 1686495600000, + endDate: 1709218800000, }, { name: ProjectName.OAL, @@ -32,19 +51,15 @@ const LINE: Company = { ], url: 'https://oa-live.line.biz/', startDate: 1659279600000, + endDate: 1709218800000, }, - { - name: ProjectName.VLC, - tags: ['React18', 'React-Testing-Library', 'React-Query'], - url: 'https://oa-live.line.biz/', - startDate: 1686495600000, - }, + { name: ProjectName.LDS_CALENDAR, - tags: ['React18', 'vite'], + tags: ['React18', 'Vite'], startDate: 1680274800000, + endDate: 1688137200000, }, - { name: ProjectName.PLACE, tags: ['Next12', 'Redux', 'Redux-Saga', 'Swiper'], @@ -67,7 +82,7 @@ const BLIND: Company = { companyHref: 'https://www.linkedin.com/company/teamblind/', companyLogoUrl: 'https://github.com/1ilsang/dev/assets/23524849/abdc15c8-571c-430c-a3c3-f2473aedd201', - position: 'Node.js Server Developer', + position: JobPosition.FULL_STACK, workStartDate: 1564930800000, workEndDate: 1596726000000, projectList: [ @@ -101,7 +116,7 @@ const SmileGate: Company = { 'https://github.com/1ilsang/dev/assets/23524849/932fade0-e7bf-4fdc-b7a8-c346fedbb76d', workStartDate: 1520780400000, workEndDate: 1525791600000, - position: 'Frontend Developer(intern)', + position: `${JobPosition.FE}(intern)`, projectList: [ { name: ProjectName.Stove, diff --git a/src/features/about/education/Container.tsx b/src/features/about/education/Container.tsx index bc212a4f..04dc1223 100644 --- a/src/features/about/education/Container.tsx +++ b/src/features/about/education/Container.tsx @@ -1,6 +1,6 @@ import { FunctionComponent } from 'react'; -import Logo from '../work/card/content/Logo'; +import LeftSide from '../work/card/content/LeftSide'; import ContentHeadline from '../work/card/content/Headline'; import { Catholic } from '~data/education'; @@ -16,20 +16,16 @@ const EducationContainer: FunctionComponent = ({
EDUCATION
-
- +
{Catholic.major}
diff --git a/src/features/about/work/card/Container.tsx b/src/features/about/work/card/Container.tsx index cf82c13f..8868fa8c 100644 --- a/src/features/about/work/card/Container.tsx +++ b/src/features/about/work/card/Container.tsx @@ -2,7 +2,7 @@ import { FunctionComponent, useEffect, useState } from 'react'; import { Company } from '../models'; -import Logo from './content/Logo'; +import LeftSide from './content/LeftSide'; import ContentHeadline from './content/Headline'; import CompanyContentProject from './content/Project'; @@ -20,11 +20,10 @@ const WorkCardContainer: FunctionComponent = ( companyHref, companyLogoUrl, company, - format, position = 'Software Engineer', } = props; - const [open, setOpen] = useState(true); + const [open, setOpen] = useState(false); const handleHeadlineClick = () => setOpen(!open); const [hydrated, setHydrated] = useState(false); @@ -44,22 +43,22 @@ const WorkCardContainer: FunctionComponent = ( return (
- +
{position}
{projectList.map((project) => ( - + ))}
diff --git a/src/features/about/work/card/content/Headline.tsx b/src/features/about/work/card/content/Headline.tsx index 7c9032a6..78547a0b 100644 --- a/src/features/about/work/card/content/Headline.tsx +++ b/src/features/about/work/card/content/Headline.tsx @@ -1,24 +1,13 @@ import { FunctionComponent, MouseEventHandler } from 'react'; -import { WorkCardContainerProps } from '../Container'; - -import DateFormatter from '~/shared/components/DateFormatter'; - -type ContentHeadlineProps = Pick< - WorkCardContainerProps, - 'workStartDate' | 'workEndDate' -> & { +type ContentHeadlineProps = { name: string; - format?: string; onClick?: MouseEventHandler; hover?: boolean; }; const ContentHeadline: FunctionComponent = ({ name, - workStartDate, - workEndDate, - format = 'yyyy.MM', onClick, hover = true, }) => { @@ -31,15 +20,6 @@ const ContentHeadline: FunctionComponent = ({ > {name} -
- ( ~{' '} - {workEndDate ? ( - - ) : ( - 'Present' - )} - ) -
); }; diff --git a/src/features/about/work/card/content/LeftSide.tsx b/src/features/about/work/card/content/LeftSide.tsx new file mode 100644 index 00000000..a475574c --- /dev/null +++ b/src/features/about/work/card/content/LeftSide.tsx @@ -0,0 +1,44 @@ +import { FunctionComponent } from 'react'; + +import { WorkCardContainerProps } from '../Container'; + +import ProjectDate from './ProjectDate'; + +type LeftSideProps = Pick< + WorkCardContainerProps, + 'workStartDate' | 'workEndDate' +> & { + href: string; + logoUrl: string; + alt: string; + format?: string; +}; + +const LeftSide: FunctionComponent = ({ + href, + logoUrl, + alt, + workStartDate, + workEndDate, + format = 'yyyy.MM', +}) => { + return ( +
+ + {alt} + + +
+ ); +}; + +export default LeftSide; diff --git a/src/features/about/work/card/content/Logo.tsx b/src/features/about/work/card/content/Logo.tsx deleted file mode 100644 index 8d17eafa..00000000 --- a/src/features/about/work/card/content/Logo.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { FunctionComponent } from 'react'; - -type LogoProps = { - href: string; - logoUrl: string; - alt: string; - border?: boolean; -}; - -const Logo: FunctionComponent = ({ - href, - logoUrl, - alt, - border = true, -}) => { - return ( -
- - {alt} - -
- ); -}; - -export default Logo; diff --git a/src/features/about/work/card/content/Project.tsx b/src/features/about/work/card/content/Project.tsx index 118d4de6..d470cc7b 100644 --- a/src/features/about/work/card/content/Project.tsx +++ b/src/features/about/work/card/content/Project.tsx @@ -28,17 +28,13 @@ const CompanyContentProject: FunctionComponent = ({ endDate, format = 'yyyy.MM', }) => { - const [open, setOpen] = useState(name === ProjectName.UVP); + const [open, setOpen] = useState(false); const handleDetailClick: MouseEventHandler = () => { setOpen(!open); }; const openClassName = open ? 'show' : 'hide'; - const privateProject = [ProjectName.VLC]; - if (privateProject.includes(name)) { - return null; - } return (
@@ -50,13 +46,11 @@ const CompanyContentProject: FunctionComponent = ({ > {name}
- {open && ( - - )} + diff --git a/src/features/about/work/card/content/ProjectDate.tsx b/src/features/about/work/card/content/ProjectDate.tsx index 796eb39a..5ee50b1d 100644 --- a/src/features/about/work/card/content/ProjectDate.tsx +++ b/src/features/about/work/card/content/ProjectDate.tsx @@ -1,4 +1,4 @@ -import { FunctionComponent } from 'react'; +import { FunctionComponent, memo } from 'react'; import { CompanyContentProjectProps } from './Project'; @@ -9,18 +9,15 @@ type ProjectDateProps = Pick< 'startDate' | 'endDate' | 'format' >; -const ProjectDate: FunctionComponent = ({ - format, - startDate, - endDate, -}) => { - return ( -
- ( - ~{' '} - {endDate ? : 'Present'}) -
- ); -}; +const ProjectDate: FunctionComponent = memo( + ({ format, startDate, endDate }) => { + return ( +
+ -{' '} + {endDate ? : 'Present'} +
+ ); + }, +); export default ProjectDate; diff --git a/src/features/about/work/card/content/description/Bleet.tsx b/src/features/about/work/card/content/description/Bleet.tsx index 855b370a..79e14531 100644 --- a/src/features/about/work/card/content/description/Bleet.tsx +++ b/src/features/about/work/card/content/description/Bleet.tsx @@ -17,17 +17,14 @@ const Bleet: FunctionComponent = () => {

    - 메인 서버 개발자로 Node.js를 활용해 API를 개발하였습니다. Beta - 오픈까지 작업하였습니다. + 메인 서버 개발자로 Node.js를 활용해 API를 개발. Beta 오픈까지 작업
  • - 블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업을 - 주도적으로 진행하였습니다. -
    • -
  • Firebase를 통한 채팅 기능을 개발하였습니다.
    • -
  • - Swagger 및 문서화를 통해 클라이언트 호출이 용이하도록 하였습니다. + 블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업 + 주도적으로 진행
    • +
  • Firebase를 통한 채팅 기능 개발
    • +
  • Swagger 및 문서화를 통해 클라이언트 호출이 용이하도록 함
diff --git a/src/features/about/work/card/content/description/Blind.tsx b/src/features/about/work/card/content/description/Blind.tsx index 007b1549..1ff58172 100644 --- a/src/features/about/work/card/content/description/Blind.tsx +++ b/src/features/about/work/card/content/description/Blind.tsx @@ -16,9 +16,9 @@ const Blind: FunctionComponent = () => { 직장인 익명 플랫폼입니다.

    - 블라인드 어드민 및 서버 API를 개발하였습니다. -
  • 어드민 페이지 개선 작업을 진행했습니다.
    • -
  • 신고하기 및 패널티 등의 API를 개선하였습니다.
    • + 블라인드 어드민 및 서버 API를 개발 +
  • 어드민 페이지 개선 작업 진행
    • +
  • 신고하기 및 패널티 등의 API를 개선
diff --git a/src/features/about/work/card/content/description/LPC.tsx b/src/features/about/work/card/content/description/LPC.tsx new file mode 100644 index 00000000..0bb09821 --- /dev/null +++ b/src/features/about/work/card/content/description/LPC.tsx @@ -0,0 +1,11 @@ +import { FunctionComponent } from 'react'; + +const LPC: FunctionComponent = () => { + return ( + <> +

LandPress Content 개발

+ + ); +}; + +export default LPC; diff --git a/src/features/about/work/card/content/description/LdsCalendar.tsx b/src/features/about/work/card/content/description/LdsCalendar.tsx index 09938d37..f0d0f913 100644 --- a/src/features/about/work/card/content/description/LdsCalendar.tsx +++ b/src/features/about/work/card/content/description/LdsCalendar.tsx @@ -17,17 +17,15 @@ const LdsCalendar: FunctionComponent = () => {

    - OA LIVE CMS 개발 과정에서 방송 세팅에 필요한 캘린더를 개발하던중 - 공통화되면 좋겠다싶어 자발적으로 시작한 프로젝트입니다. + 사내 공용 캘린더 라이브러리의 부재로 자발적으로 시작한 프로젝트
  • - 다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 - 개발하였습니다. + 다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발
      -
    • 다국어 및 Timezone 설정을 할 수 있습니다.
      • +
    • 다국어 및 Timezone 설정 가능
    • - 모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션을 제공하여 유연한 - 캘린더가 될 수 있도록 하였습니다. + 모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션을 제공, 유연한 + 캘린더가 될 수 있도록 개발
    • diff --git a/src/features/about/work/card/content/description/MyBiskit.tsx b/src/features/about/work/card/content/description/MyBiskit.tsx index 10c4e8c1..dbd3779b 100644 --- a/src/features/about/work/card/content/description/MyBiskit.tsx +++ b/src/features/about/work/card/content/description/MyBiskit.tsx @@ -16,30 +16,28 @@ const MyBiskit: FunctionComponent = () => { 및 원데이 클래스를 다양한 쿠폰과 정기 결제로 수강할 수 있습니다.

      - Nuxt.js를 활용해 앞단부터 뒷단까지 개발하였습니다. -
    • 다양한 프로모션 페이지 및 상세 페이지 등을 개발하였습니다
      • + Nuxt.js로 페이지 및 서버 개발 +
    • 다양한 프로모션 페이지 및 상세 페이지 개발
    • - 쿠폰 및 결제 API를 개선/개발하였습니다. + 쿠폰 및 결제 API 개선/개발
      • 테스트 코드를 적용해 리팩토링 과정의 사이드 이펙트를 간소화 - 하고자 노력했습니다. -
        • -
      • - 트랜잭션 적용 및 결제 플로우 간소화 작업을 진행하였습니다. + 하고자 노력
        • +
      • 트랜잭션 적용 및 결제 플로우 간소화 작업을 진행
    • - 지표 분석을 위한 크롤러를 개발하였습니다. + 지표 분석을 위한 크롤러를 개발
      • - Puppeteer를 활용해 추출한 데이터를 JSON으로 가공해 S3에 저장하고 - 차트 페이지를 만들었습니다. + Puppeteer를 활용해 추출한 데이터를 JSON으로 가공후 S3에 저장. + 차트 페이지를 제공
      • - 사내 엔지니어링 세미나 "주니어의 반란"을 주최하여 개발 - 여정을 공유했습니다. + 사내 엔지니어링 세미나 "주니어의 반란"을 주최, 개발 + 여정을 공유
      • diff --git a/src/features/about/work/card/content/description/OAL.tsx b/src/features/about/work/card/content/description/OAL.tsx index e9dc0e7b..47a67921 100644 --- a/src/features/about/work/card/content/description/OAL.tsx +++ b/src/features/about/work/card/content/description/OAL.tsx @@ -16,17 +16,16 @@ const OAL: FunctionComponent = () => { 있는 CMS 페이지입니다.

        -
      • 방송에 관련된 CRUD 페이지들을 개발하였습니다.
      • - 방송 디테일 페이지를 개발하였습니다. + 방송 디테일 페이지 개발
          -
        • 실시간 채팅을 위한 WebSocket 개발을 하였습니다.
          • +
        • 실시간 채팅을 위한 WebSocket 개발
      • - 시각화 페이지를 개발하였습니다. + 시각화 페이지 개발
          -
        • 차트 및 테이블 영역을 개발하였습니다.
          • +
        • Chart.js를 활용해 통계 차트 및 테이블 영역 개발
      diff --git a/src/features/about/work/card/content/description/OAP.tsx b/src/features/about/work/card/content/description/OAP.tsx index 70eb4b87..0418d137 100644 --- a/src/features/about/work/card/content/description/OAP.tsx +++ b/src/features/about/work/card/content/description/OAP.tsx @@ -19,19 +19,18 @@ const OAP: FunctionComponent = () => {

      • - Traffic, Nearby, Takeout 등의 플러그인을 개발하였습니다. + Traffic, Nearby, Takeout 등의 플러그인 개발
          -
        • 플러그인의 중복된 코드를 개선하였습니다.
          • +
        • 플러그인의 중복된 코드를 개선
        • - 데이터 이관 작업을 통해 서로 다른 페이지의 싱크를 맞추는 작업을 - 하였습니다. + 데이터 이관 작업을 통해 서로 다른 페이지의 싱크 맞추는 작업 진행
      • - React 프로젝트를 Next.js로 리팩터링하였습니다. + React {'->'} Next.js 리팩터링 진행
          -
        • 커스텀 서버를 개발하였습니다.
          • +
        • 커스텀 서버 개발
      diff --git a/src/features/about/work/card/content/description/Place.tsx b/src/features/about/work/card/content/description/Place.tsx index b37a56ed..60e8d765 100644 --- a/src/features/about/work/card/content/description/Place.tsx +++ b/src/features/about/work/card/content/description/Place.tsx @@ -18,19 +18,16 @@ const Place: FunctionComponent = () => {

      • - Home 화면을 개발하였습니다. + Home 화면 개발
          -
        • 위치 기반 API Flow를 정리하였습니다.
          • +
        • 위치 기반 API Flow 정리
        • -
      • Profile/Settings 개발 하였습니다.
        • +
      • Profile/Settings 개발
      • - Koa 커스텀 서버 개발을 진행하였습니다. + Koa 커스텀 서버 개발
          -
        • - nGrinder를 활용해 Stress test를 통해 서버 가용량 산출 작업을 - 하였습니다. -
          • +
        • nGrinder를 활용 Stress test 진행후 서버 가용량 산출
      diff --git a/src/features/about/work/card/content/description/Stove.tsx b/src/features/about/work/card/content/description/Stove.tsx index df2f1398..27a3e003 100644 --- a/src/features/about/work/card/content/description/Stove.tsx +++ b/src/features/about/work/card/content/description/Stove.tsx @@ -7,11 +7,11 @@ const Stove: FunctionComponent = () => {

      유저 타임라인 개발

        - 출시 예정 게임의 유저 타임라인을 개발하였습니다. -
      • 방명록 CRUD 기능 개발했습니다.
        • -
      • 댓글 / 신고하기 기능 개발했습니다.
        • + 출시 예정 게임 유저 타임라인 개발 +
      • 방명록 CRUD 기능 개발
        • +
      • 댓글 / 신고하기 기능 개발
      • - 재밌고 즐겁게 인턴생활을 했습니다. + 재밌고 즐겁게 인턴생활 적응
        • { - const MAX_DESKTOP = 1399; - const MAX_TABLET = 1023; - const MAX_MOBILE = 767; - const [backgroundHeight, setBackgroundHeight] = useState(400); - - useLayoutEffect(() => { - const calcHeight = (() => { - if (typeof window === 'undefined') return 400; - const { innerWidth } = window; - - if (innerWidth <= MAX_MOBILE) return 185; - else if (innerWidth <= MAX_TABLET) return 385; - else if (innerWidth <= MAX_DESKTOP) return 425; - else return 400; - })(); - setBackgroundHeight(calcHeight); - setTimeout(() => { - setBackgroundHeight(undefined); - }, 1000); - }, []); - return ( <>
          @@ -41,38 +19,33 @@ const UVP: FunctionComponent = () => { 목표로 합니다.

            - UVP의 메인테이너로 참여해 v0부터 v3까지 주도적으로 개발하였습니다. + UVP의 메인테이너로 참여해 v0부터 v3까지 주도적으로 개발
          • - v1: 런타임 이전에 코드 동작을 이해하고 유지보수의 용이를 목표로 - 개발하였습니다. + v1: 런타임 이전에 코드 동작을 이해하고 유지보수의 용이를 목표로 개발
            • - 레거시 프로젝트를 인수인계 받아 최신화 작업을 주도적으로 - 진행했습니다. + 레거시 프로젝트를 인수인계 받아 최신화 작업을 주도적으로 진행
            • TypeScript 적용 및 선언적 컴포넌트화를 통해 런타임 이전에 코드 - 구성을 이해할 수 있도록 하였습니다. + 구성을 이해할 수 있도록 개발
            • - 이벤트의 흐름을 정리하여 동작의 시각화 및 디버깅 과정을 - 향상시켰습니다. + 이벤트의 흐름을 정리하여 동작의 시각화 및 디버깅 과정을 향상
          • - v2: 친절한 라이브러리를 목표로 개발하였습니다. 배포 안정화 및 친절한 - 문서화를 목표로 하였습니다. + v2: 친절한 라이브러리를 목표로 개발 진행. 배포 안정화 및 친절한 + 문서화를 목표로 개발
            • jsx-dom에서 preact로 마이그레이션 및 zustand, jest, cypress, - storybook을 도입했습니다. -
              • -
            • ESM 및 완전한 키보드 제어를 지원(웹 접근성)하였습니다.
              • -
            • 테스트 코드로 라이브러리의 안정성을 높였습니다.
              • -
            • - tsdoc 및 storybook으로 문서화를 진행해 DX 향상을 이루었습니다. + storybook을 도입
              • +
            • ESM 및 완전한 키보드 제어를 지원(웹 접근성)
              • +
            • 테스트 코드로 라이브러리의 안정성 향상
              • +
            • tsdoc 및 storybook으로 문서화를 진행해 DX 향상 성취
            • 관련 발표:  {
          • - v3: 확장성을 목표로 개발하였습니다. + v3: 확장성을 목표로 개발
            • yarn monorepo, turborepo를 통해 플러그인 개발이 용이하도록 - 레포를 변경했습니다. + 레포를 변경
            • 단일 컴포넌트 라이브러리 구조에서 플러그인을 주입 받을수 있는 - 구조로 변경했습니다. + 구조로 변경
              • VideoCore 영역과 UI 영역, 추가 기능(HLS, IMA, Thumbnail 등)으로 영역을 분리하여 목적에 맞게 플러그인을 조합해 적용 - 할 수 있게 되었습니다. + 할 수 있게 됨
              • 번들 크기 및 배포 사이드 이펙트 영향도 감소의 효과와 더불어 - 라이브러리의 확장성(추가 기능의 유연성)을 크게 늘렸습니다. + 라이브러리의 확장성(추가 기능의 유연성) 성취
              • 라인의 다양한 서비스 니즈를 만족시키고 보다 안정적인 기능 - 추가를 이어갈 수 있었습니다. + 추가를 이어갈 수 있게 됨
              • diff --git a/src/features/about/work/models.ts b/src/features/about/work/models.ts index 9f15e914..8e4d47e4 100644 --- a/src/features/about/work/models.ts +++ b/src/features/about/work/models.ts @@ -13,7 +13,9 @@ export enum CompanyName { Blind = 'TeamBlind', Smilegate = 'Smilegate', } + export enum ProjectName { + LPC = 'LandPress Content', OAL = 'Official Account LIVE CMS', VLC = 'VOOM LIVE CMS', LDS_CALENDAR = 'LINE Design System - Calendar', @@ -26,10 +28,45 @@ export enum ProjectName { Stove = 'Stove', } +export enum JobPosition { + FE = 'Frontend Engineer', + FULL_STACK = 'Fullstack Engineer', +} + +export type Technique = + | 'Vite' + | 'pnpm' + | 'React-Query' + | 'HTMLVideo' + | 'Preact10' + | 'Zustand' + | 'Turborepo' + | 'Storybook' + | 'Cypress' + | 'Webpack' + | 'React18' + | 'React-Testing-Library' + | 'WebSocket' + | 'MSW' + | 'Chart.js' + | 'Next12' + | 'Redux' + | 'Redux-Saga' + | 'Swiper' + | 'Node.js' + | 'MySQL' + | 'Swagger' + | 'Firebase' + | 'Nuxt2' + | 'PHP' + | 'Docker' + | 'Redis' + | 'Vue2'; + export type Project = { name: ProjectName; url?: string; startDate: number; - tags: string[]; + tags: Technique[]; endDate?: number; }; diff --git a/src/features/shared/components/DateFormatter.tsx b/src/features/shared/components/DateFormatter.tsx index 4a771612..3b9518b4 100644 --- a/src/features/shared/components/DateFormatter.tsx +++ b/src/features/shared/components/DateFormatter.tsx @@ -1,4 +1,4 @@ -import { FunctionComponent, useEffect, useState } from 'react'; +import { FunctionComponent, useLayoutEffect, useState } from 'react'; import { formatDate, parseISO } from '../helpers/date'; @@ -17,7 +17,7 @@ const DateFormatter: FunctionComponent = ({ }) => { const [dateTime, setDateTime] = useState(null); - useEffect(() => { + useLayoutEffect(() => { const time = type === 'iso' ? parseISO(String(date)) : formatDate(date, format); setDateTime(time); diff --git a/src/features/styles/ui/about/index.scss b/src/features/styles/ui/about/index.scss index 76efe31c..42b8d5a6 100644 --- a/src/features/styles/ui/about/index.scss +++ b/src/features/styles/ui/about/index.scss @@ -117,18 +117,27 @@ &-card { display: flex; + margin-top: 1rem; padding: 10px 0; @include mobile { flex-direction: column; } - .logo { - width: 6rem; - border-radius: 13px; + .left-side { + width: 13rem; - &:hover { - filter: drop-shadow(2px 2px 4px lightgray) invert(2%); + .logo { + width: 4rem; + height: 4rem; + + &:hover { + filter: drop-shadow(2px 2px 4px lightgray) invert(2%); + } + } + + .date { + margin-top: 0.3rem; } } @@ -152,7 +161,7 @@ .title { font-size: 1.5rem; - font-weight: 500; + font-weight: bold; user-select: none; } diff --git a/src/features/styles/ui/about/project.scss b/src/features/styles/ui/about/project.scss index af9a634f..3b6bba96 100644 --- a/src/features/styles/ui/about/project.scss +++ b/src/features/styles/ui/about/project.scss @@ -14,8 +14,10 @@ flex-direction: column; .title-wrap { + width: 100%; display: flex; align-items: center; + justify-content: space-between; } .title { @@ -45,8 +47,9 @@ } .date { + color: $sub-color; font-style: italic; - font-size: 0.9rem; + margin-right: 1rem; } }