From 43ce570f1bc0da813c476cb781933fcd3bbf8e41 Mon Sep 17 00:00:00 2001
From: Honghyeonji <66579773+Honghyeonji@users.noreply.github.com>
Date: Tue, 28 Jan 2025 17:05:44 +0900
Subject: [PATCH] =?UTF-8?q?[release]=20dev=20->=20main=20=EB=B8=8C?=
 =?UTF-8?q?=EB=9E=9C=EC=B9=98=20merge=20/=201.1.0version=20upgrade=20(#39)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔨 refactor: Docker 이미지 최적화를 위한 코드 리팩토링

* 🙀 chore: 오타 수정

* 🐛 fix: COPY 경로 수정

* 🐛 fix: swagger-auto 명령어 추가

* 🙀 chore: 오타수정

* 🐛 fix: backend 이미지가 base-image를 사용하지 않으므로 새로운 패키지 매니저 설치 및 추가 파일 복사하는 로직 추가

* 🐛 fix: pnpm-lock 복사 코드 추가

* 🐛 fix: 서버 패키지 설치 안되는 오류 해결하기 위해 코드 수정

* 🐛 fix: eslint 경로 체크용 package 폴더 추가 복사

* 🐛 fix: 의존성을 복사해오고 dev용을 지우는 방식으로 수정

* 🐛 fix: pnpm-workspace 파일 복사

* 🙀 chore: cicd 스크립트 오타 수정

* 🙀 chore: copy 명령어 합침

* 🙀 chore: 코드 구조 변경

* 🐛 fix: COPY 경로 수정

* 🙀 chore: 경로 오타 수정

* 🔨 refactor: 배포시 swagger-auto 안 하게 로직 수정 및 prod 종속성에 필요한 패키지 dev 종속성에서 이동

* 🙀 chore: 경로 오타 수정

* 🙀 chore: 안쓰는 라이브러리 삭제

* 🚨 !HOTFIX!: env 설정 누락된 코드 추가

* 🚨 !HOTFIX!: env 설정 누락된 코드 추가

* [#10] 홈페이지 가상스크롤 적용 (#14)

* ✨ feat: scroll의 Y 좌표를 리턴하는 useScroll 커스텀 훅 추가

* 🚚 rename: hooks/css에 있던 useWindowSize 훅 폴더 위치 변경

* ✨ feat: 가상스크롤 구현 중

* 🙀 chore: 함수명 오타 수정

* ✨ feat: 가상스크롤 커스텀훅 추가

* ✨ feat: WorkspaceGrid 컴포넌트에 가상스크롤 적용

* 🙀 chore: grid의 총 높이 계산할 때 반올림   적용

* [#11] Google Analytics 적용 (#15)

* ✨ feat: ga4 코드 추가

* 🔨 refactor: 로컬 환경 디버깅용 코드로 전환

* 🙀 chore: GA 디버깅 코드 삭제

* 🔨 refactor: workflow 에 dockerhub 사용하는 코드 제거

* ✨ feat: 이벤트 트레이싱

* 🔨 refactor: docker hub 로그인 부분 삭제

* 🔨 refactor: workflow와 compose 파일 dockerhub 쓰는 스크립트로 수정

* 🐛 fix: dockerhub 쓰는 버전에서는 build단계에서 pnpm 설치가 필요 없으니 해당 코드 삭제

* 🔨 refactor: deploy단계에서 docker hub 로그인 하는 부분 이동

* 🙀 chore: git 상태 확인하는 코드 추가

* 🙀 chore: docker compose cache_from 부분 삭제(dockerhub에서 가져올 땐 필요 없음)

* 🙀 chore: docker hub 로그인 방식 수정

* 🙀 chore: 안쓰는 옵션 삭제

* 🐛 fix: base-image 이름 변경

* 🙀 chore: 언더바 하이픈으로 수정

* 🙀 chore: 안쓰는 코드 삭제

* 🐛 fix: dockercompose 코드에서 build내에 image 잘 못 넣은 코드 수정

* 🙀 chore: docker 로그인 확인을 위한 docker info 코드 추가

* 🔨 refactor: docker compose에서 base 이미지 가져오는 것을 명시적으로 표시

* 🙀 chore: docker compose config 확인을 위한 코드 추가

* 🙀 chore: docker compose 체크를 위한 경로 수정

* 🙀 chore: 필요없는 코드 삭제

* 🐛 fix: compose 파일에서 base 부분 삭제

* 🔨 refactor: docker 캐시 이용하는 방법으로 변경

* 🔨 refactor: docker tag 설정해주는 코드 추가

* 🙀 chore: 코드 변경

* 🔨 refactor: github actions 캐시사용하는 방식으로 변경

* 🔨 refactor: docker build 코드 cache 가져오게 수정

* 🔨 refactor: buildx 코드 추가

* 🔨 refactor: docker buildx 사용하는 방식 수정

* 🔨 refactor: base 이미지에 로컬태그를 붙여주는 방식 대신 레지스트리 경로를 명시적으로 표시하는 방식으로 수정

* 🔨 refactor: docker 이미지 빌드 때 사용하는 cache from-to 원격주소로 변경

* 🔨 refactor: github action 캐싱키 변경 및 docker 이미지 빌드 시 cache 주소 잘못 쓴 것 수정

* 🙀 chore: docker image output 명시적으로 작성

* 🔨 refactor: base image를 hub에 push하지 않고 로컬에서 빌드해서 그대로 사용하는 방식으로 수정

* 🙀 chore: latest 태그 제거

* 🙀 chore: 베이스 이미지 빌드할 때 load: true 옵션 추가

* 🔨 refactor: base-image도 docker hub에 올리는 방법으로 재수정

* 🙀 chore: username 잘 나오는지 확인

* 🙀 chore: set up docker buildx 에서 with 설정 추가

* 🙀 chore: 캐시 초기화 코드 추가

* 🙀 chore: build-args 넣어주는 방식 수정

* 🙀 chore: build-args 넣어주는 방식 수정

* Update boolock-dev-cicd.yml

* Update boolock-dev-cicd.yml

* 🙀 chore: 디버깅용 코드 추가

* 🔨 refactor: base image 로컬 빌드 및 사용으로 방법 변경

* 🔨 refactor: cache-from 타입 inline으로 변경

* 🙀 chore: github actions 로컬에 base-image가 잘 남겨져 있는지 확인하는 코드 추가

* [#18] useQuery, useInfiniteQuery -> useSuspenseQuery, useSuspenseInfiniteQuery 교체 (#19)

* 🔨 refactor: useQuery를 useSuspenseQuery로 교체 및 error 처러 코드 삭제

* 🔨 refactor: 로딩 UI 및 에러 처리 코드 삭제

* 🔨 refactor: suspense 적용 및 error boundy fallback에 workspace 에러 페이지 설정

* 🔨 refactor: useInfinityQuery -> useSuspenseQuery로 교체

* 🙀 chore: 400 에러와 404에러의 에러 코드 및 상태 메세지가 잘못 설정 되어 있어 올바르게 수정

* 🐛 fix: 기존 에러 발생 시 500 에러로만 응답하는 문제 해결

* 🔨 refactor: workspaceContainer에서 워크스페이스 데이터를 렌더링하고 페칭하는 부분을 분리함

* 🙀 chore: 컴포넌트 분리에 따른 코드 수정

* 🙀 chore: github action 에서 파일명 변경을 감지하지 못한 문제로 인해 파일명 변경

* 🙀 chore: 불필요한 console.log 삭제

* 🔨 refactor: base-image cache 루트 변경

* 🔨 refactor: type=local로 재변경

* 🔨 refactor: base-image load단계 추가

* 🙀 chore: 이미지 태그 삭제

* 🙀 chore: 이전 코드에서 캐싱 잘 되는지 확인용

* 🙀 chore: dockerhub_username arg 추가

* 🔨 refactor: 이전버전에 cache 경로만 수정

* 🙀 chore: build-args 추가

* 🔨 refactor: buildx 플러그인 초기화 옵션 + cache에서 이미지 사용시 모든 캐시 데이터를 최대한 활용하는 mode=max 옵션 추가

* 🙀 chore: base-image 캐싱 추가

* 🔨 refactor: base image 로컬 저장 및 hub push 둘 다 되게 수정

* 🙀 chore: verify 스텝 추가

* [#21] 홈페이지 로딩 시 스켈레톤UI에 그리드가 적용되지 않는 문제 해결, 워크스페이스 로딩 화면 조건부 렌더링 (#22)

* 🐛 fix: 스켈레톤UI에 그리드가 안되는 문제 해결

* ✨ feat: 워크스페이스 로딩 시간이 0.05초 이상일 때만 로딩 화면이 렌더링되도록 변경

* 🙀 chore: 오타 수정

* 🙀 chore: 아ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ

* 🔨 refactor: 원격에서 base-image 가져와서 load하는 방식으로 수정

* 🙀 chore: 경로 명시적으로 쓰기

* 🙀 chore: docker 네트워크 연결 테스트 코드 추가

* 🙀 chore: docker login 스텝 이동

* 🙀 chore: 토큰 코드 추가

* 🙀 chore: token 발급받는 부분 추가

* 🚨 !HOTFIX!: error가 발생할 때 return 해야하는데 그렇지 않을 때 return 하여 workspace가 초기화되지않는 문제 해결

* 🙀 chore: dockerfile FROM base image 경로를 직접적으로 입력하는 버전

* 🙀 chore: base-image outputs 타입을 oci로 변경

* 🙀 chore: docker 이미지 빌드 platform을 linux/amd64로 명시

* 🙀 chore: 타입 명시

* 🚨 !HOTFIX!: workflow on 설정 main push 일 경우로 수정

* ✨ feat: 서버 분할로 인해 cicd dev버전과 main 버전 분리 및 배포를 위한 설정 이분할

* 🙀 chore: 워크플로우 이름 변경

* 🙀 chore: 병합하면서 사라진 dev cicd의 on 조건 추가

* 🙀 chore: docker hub password token으로 변경

* 🙀 chore: client dockerfile 오타 수정

* 🙀 chore: dockerfile.test 오타 수정

* 🔨 refactor: cache type gha로 변경

* 🙀 chore: compose 배포 명령어 수정

* 🙀 chore: 두번 쓴 명령어 삭제

* 🙀 chore: env 설정 확인용 스크립트 추가

* 🙀 chore: cache docker layers 단계 없어도 동작하는지 확인

* 🙀 chore: 주석 제거

* 🔨 refactor: cache-from/to registry type으로 변경

* 🙀 chore: docker chche 타입 gha 타입으로 변경

* 🔨 refactor: github action deploy 과정 push에서만 사용되게 코드 추가

* 🔨 refactor: 브랜치별 워크플로우 시나리오 분리

* 🙀 chore: docker arg 선언 줄분리

* 🔨 refactor: docker compose 파일 type env 설정에 따른 port 설정해주는 코드 추가

* 🔨 refactor: HTTP/1.1 -> HTTP/2.0 개선 설정 추가

* 🔨 refactor: HTTP/2.0 -> HTTP/3.0 개선 설정 추가

* [HOTFIX] cicd 및 docker-compose 코드 수정 (#29)

* 🙀 chore: compose 코드 수정

* 🙀 chore: 현재 브랜치에서 deploy 체크하게 브랜치 설정코드 수정

* 🙀 chore: ssl_port 빈칸 표시

* 🙀 chore: # 처리 삭제

* 🙀 chore: 아예 SSL_PORT 설정 없애보기

* 🙀 chore: 우회방식 사용

* 🔨 refactor: docker compose 파일 test 버전 추가 및 cicd 코드 수정

* 🙀 chore: 합치기 전 설정 수정

* [#31] “Code 하이라이팅” 코드 품질 개선 (#36)

* 🔨 refactor: 변수 유틸함수로 분리

* 🔨 refactor: 애니메이션 코드 커스텀 훅으로 분리

* 🙀 chore: 훅에 주석 처리

* 🔨 refactor: 애니메이션 지속 시간 (매직넘버) 상수화

* 🙀 chore: 오타 수정

* 🔨 refactor: 클래스명 계산 로직 추상화

* 🔨 refactor: 마우스 호버 이벤트 훅 관리 + 라인클래스이름 추상화

* 🔨 refactor: 파싱 코드 추상화 + 함수 설명 주석 추가

* 🔨 refactor: Props Drilling이 나타나는 컴포넌트를 삭제하고 부모 컴포넌트로 이전.

* 🔨 refactor: viewer 클래스명 생성 함수 분리

* 🔨 refactor: 타입 분리 + index.ts로 import 문 간소화하여 가독성 개선

* [#26] 워크스페이스 페이지의 불필요한 리렌더링 개선 (#35)

* ✨ feat: css 속성 물음표 아이콘 좌표를 전역 상태로 관리하는 것이 아닌 local 상태 변수를 통해 관리하도록 변경

* Revert "✨ feat: css 속성 물음표 아이콘 좌표를 전역 상태로 관리하는 것이 아닌 local 상태 변수를 통해 관리하도록 변경"

This reverts commit b4409efc9409f65ab7ef76221c77e75b155b3666.

* 🔨 refactor: css속성 물음표 아이콘 좌표를 전역상태가 아닌 local 상태로 관리

* 🔨 refactor: 기존에 사용하던 매직넘버를 삭제하고 useLayoutEffect를 통해 툴팁의 높이를 직접 측정하고 툴팁의 좌표를 계산하는 방식으로 변경

* 🔨 refactor: css item 물음표 아이콘 위치를 전역 상태가 아닌 로컬 상태변수로 관리하도록 변경, 불필요한 cssTooltiptore 삭제

* 🔨 refactor: useCssTooltip 훅을 통해 좌표 계산을 하도록 변경

* 🙀 chore: 타입 단언 대신 타입 선언으로 변경경

* 🙀 chore: 불필요한 변수 및 반환값 삭제

* 🙀 chore: 커스텀 select에서 사용하는 type 및 enum type 폴더로 분리

* 🔨 refactor: css 클래스 리스트를 만드는 로직을 커스텀 훅으로 분리

* 🔨 refactor: useCssPropsStore에서 각 상태를 구조분해할당으로 사용하여 모든 상태를 구독하여 불필요한 리렌더링이 발생하는 문제를 해결함

* 🎨 style: 불필요한 스타일 코드 삭제

* 🙀 chore: 변경된 props 반영

* [#25] 사용자가이드 단계 이동시 헤더 내 모든 요소 리렌더링 개선 (#37)

* 🎨 style: 도움말버튼 컴포넌트 분리 (HelpButton)

* 🔨 refactor: 코치마크 단계 이동시 도움말버튼 리렌더링 개선

* 🔨 refactor: 헤더 상단 버튼 각각 메모이제이션

* 🔨 refactor: 코치마크 4단계로 이동하거나 4단계 였던 경우에만 HeaderButtons 리렌더링 되도록  메모이제이션

* 🔨 refactor: 워크스페이스 헤더 리렌더링 개선 완료

* 🐛 fix: 대소문자 오타 수정

* 📝 docs: README 수정

* [#34] 수동 저장 -> 자동 저장으로 변경 (#38)

* 🙀 chore: build시 오류 생기는 코드 제거

---------

Co-authored-by: YEONGJAE LEE <71895560+lee0jae330@users.noreply.github.com>
Co-authored-by: Gyeungil Choi <chlruddlf73@naver.com>
Co-authored-by: Yujin <yujinyll9148@gmail.com>
Co-authored-by: lee0jae330 <xingxing2001@cau.ac.kr>
Co-authored-by: chichoc <chichoc.dev@gmail.com>
---
 .github/workflows/boolock-dev-cicd.yml        | 138 ++++++++----------
 .github/workflows/boolock-main-cicd.yml       | 107 ++++++++++++++
 README.md                                     |   6 +-
 apps/client/Dockerfile                        |   7 +-
 apps/client/Dockerfile.test                   |  19 +++
 apps/client/{ => production}/nginx.conf       |   8 +
 apps/client/src/entities/index.ts             |   1 +
 .../CodeExportButton/CodeExportButton.tsx     |   6 +-
 .../CssCategoryButton/CssCategoryButton.tsx   |   4 +-
 .../workspace/CssOptionItem/CssOptionItem.tsx |  22 ++-
 .../CssTooltip/CssTooltip.stories.tsx         |  18 +--
 .../workspace/CssTooltip/CssTooltip.tsx       |  16 +-
 .../workspace/HelpButton/HelpButton.tsx       |  22 +++
 .../workspace/RedoButton/RedoButton.tsx       |   5 +-
 .../workspace/SaveButton/SaveButton.tsx       |  44 +-----
 .../workspace/UndoButton/UndoButton.tsx       |   5 +-
 .../WorkspaceNameInput/WorkspaceNameInput.tsx |   6 +-
 .../src/pages/Workspacepage/WorkspacePage.tsx |  15 +-
 .../CodeContent/CodeContent.stories.tsx       |  44 ------
 .../components/CodeContent/CodeContent.tsx    |  76 ----------
 .../components/CodeViewer/CodeViewer.tsx      |  56 +++----
 .../components/LineNumbers/LineNumbers.tsx    |  26 ++--
 .../code-highlighter/components/index.ts      |   2 +
 .../code-highlighter/constants/index.ts       |   6 +
 .../shared/code-highlighter/hooks/index.ts    |   2 +
 .../hooks/useDiffCodeAnimate.ts               |  32 ++++
 .../hooks/useHoverLineNumber.ts               |  20 +++
 .../shared/code-highlighter/types/index.ts    |  43 ++++++
 .../code-highlighter/utils/getClassNames.ts   |  29 ++++
 .../utils/getLineNumberClass.ts               |  13 ++
 .../utils/getParsedCodeLineList.ts            |  21 +++
 .../utils/getViewerClassNames.ts              |  10 ++
 .../shared/code-highlighter/utils/index.ts    |   6 +
 .../utils/parseHighlightCss.ts                |   8 +-
 .../utils/parseHighlightHtml.ts               |   5 +
 .../src/shared/hooks/capturePreview.worker.ts |  32 ++++
 .../src/shared/hooks/css/useCssClassList.ts   |  23 +++
 .../src/shared/hooks/css/useCssOptionItem.ts  |  12 +-
 .../src/shared/hooks/css/useCssOptions.ts     |   5 +-
 .../src/shared/hooks/css/useCssTooltip.ts     |  36 +++--
 apps/client/src/shared/hooks/index.ts         |   1 +
 .../shared/hooks/queries/useGetWorkspace.ts   |   6 +-
 .../shared/hooks/queries/useSaveWorkspace.ts  |   1 -
 .../hooks/usePreventLeaveWorkspacePage.ts     |  34 ++---
 .../src/shared/hooks/useWorkspaceSave.ts      |  82 +++++++++++
 apps/client/src/shared/store/index.ts         |   1 -
 .../src/shared/store/useCssPropsStore.ts      |   3 +-
 .../src/shared/store/useCssTooptipStore.ts    |  24 ---
 .../src/shared/types/customSelectType.ts      |  10 ++
 apps/client/src/shared/types/index.ts         |   2 +
 apps/client/src/shared/ui/index.ts            |   3 +-
 apps/client/src/shared/ui/logo/Logo.tsx       |   5 +-
 apps/client/src/shared/ui/select/Select.tsx   |  18 +--
 .../client/src/shared/utils/capturePreview.ts |  57 --------
 .../src/shared/utils/convertToCanvas.ts       |  36 +++++
 apps/client/src/shared/utils/index.ts         |   2 +-
 .../workspace/PreviewBox/PreviewBox.tsx       |  35 ++++-
 .../WorkspaceContent/WorkspaceContent.tsx     |  34 +++--
 .../WorkspaceHeaderButtons.tsx                |  18 ++-
 .../WorkspacePageHeader.tsx                   |  49 ++++---
 .../CssOptionItemList/CssOptionItemList.tsx   |   2 +-
 .../CssPropsSelectBoxHeader.tsx               |  26 +---
 apps/client/test/nginx.conf                   |  28 ++++
 apps/client/vite.config.ts                    |   3 +
 apps/server/Dockerfile                        |   4 +-
 docker-compose.test.yml                       |  12 ++
 docker-compose.yml                            |  25 +---
 67 files changed, 901 insertions(+), 576 deletions(-)
 create mode 100644 .github/workflows/boolock-main-cicd.yml
 create mode 100644 apps/client/Dockerfile.test
 rename apps/client/{ => production}/nginx.conf (87%)
 create mode 100644 apps/client/src/entities/workspace/HelpButton/HelpButton.tsx
 delete mode 100644 apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.stories.tsx
 delete mode 100644 apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.tsx
 create mode 100644 apps/client/src/shared/code-highlighter/components/index.ts
 create mode 100644 apps/client/src/shared/code-highlighter/constants/index.ts
 create mode 100644 apps/client/src/shared/code-highlighter/hooks/index.ts
 create mode 100644 apps/client/src/shared/code-highlighter/hooks/useDiffCodeAnimate.ts
 create mode 100644 apps/client/src/shared/code-highlighter/hooks/useHoverLineNumber.ts
 create mode 100644 apps/client/src/shared/code-highlighter/types/index.ts
 create mode 100644 apps/client/src/shared/code-highlighter/utils/getClassNames.ts
 create mode 100644 apps/client/src/shared/code-highlighter/utils/getLineNumberClass.ts
 create mode 100644 apps/client/src/shared/code-highlighter/utils/getParsedCodeLineList.ts
 create mode 100644 apps/client/src/shared/code-highlighter/utils/getViewerClassNames.ts
 create mode 100644 apps/client/src/shared/code-highlighter/utils/index.ts
 create mode 100644 apps/client/src/shared/hooks/capturePreview.worker.ts
 create mode 100644 apps/client/src/shared/hooks/css/useCssClassList.ts
 create mode 100644 apps/client/src/shared/hooks/useWorkspaceSave.ts
 delete mode 100644 apps/client/src/shared/store/useCssTooptipStore.ts
 create mode 100644 apps/client/src/shared/types/customSelectType.ts
 delete mode 100644 apps/client/src/shared/utils/capturePreview.ts
 create mode 100644 apps/client/src/shared/utils/convertToCanvas.ts
 create mode 100644 apps/client/test/nginx.conf
 create mode 100644 docker-compose.test.yml

diff --git a/.github/workflows/boolock-dev-cicd.yml b/.github/workflows/boolock-dev-cicd.yml
index 51cd35b..c703073 100644
--- a/.github/workflows/boolock-dev-cicd.yml
+++ b/.github/workflows/boolock-dev-cicd.yml
@@ -1,4 +1,4 @@
-name: ci/cd action
+name: dev ci/cd action
 
 on:
   push:
@@ -10,110 +10,90 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20.x'
-
-      - name: Install Pnpm
-        run: npm install -g pnpm
 
-      - name: Package install with pnpm
-        run: pnpm install:all
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+        with:
+          buildkitd-flags: --debug
 
       - name: Set BE .env
         run: |
-          echo "MONGO_URI=${{ secrets.MONGO_URI }}" > apps/server/.env
-          echo "SSH_HOST=${{ secrets.SSH_HOST }}" >> apps/server/.env
-          echo "SSH_PORT=${{ secrets.SSH_PORT }}" >> apps/server/.env
-          echo "SSH_USER=${{ secrets.SSH_USER }}" >> apps/server/.env
-          echo "SSH_PASSWORD=${{ secrets.SSH_PASSWORD }}" >> apps/server/.env
-          echo "SSH_DATABASE_HOST=${{ secrets.SSH_DATABASE_HOST }}" >> apps/server/.env
-          echo "SSH_DATABASE_PORT=${{ secrets.SSH_DATABASE_PORT }}" >> apps/server/.env
-          echo "LOCAL_PORT=${{ secrets.LOCAL_PORT }}" >> apps/server/.env
-          echo "IS_LOCAL=true" >> apps/server/.env
-          echo "SERVER_CORS_ACCEPT=http://localhost:5173" >> apps/server/.env
+          echo "MONGO_URI=${{ secrets.TEST_MONGO_URI }}"  > apps/server/.env
+          echo "IS_LOCAL=false" >> apps/server/.env
+          echo "SERVER_CORS_ACCEPT=${{ secrets.TEST_SERVER_CORS_ACCEPT }}" >> apps/server/.env
           echo "S3_ACCESS_KEY=${{ secrets.S3_ACCESS_KEY }}" >> apps/server/.env
           echo "S3_SECRET_KEY=${{ secrets.S3_SECRET_KEY }}" >> apps/server/.env
           echo "S3_BUCKET_NAME=${{ secrets.S3_BUCKET_NAME }}" >> apps/server/.env
-
+          echo "NODE_ENV=production" >> apps/server/.env
+      
       - name: Set FE .env
         run: |
-          echo "VITE_SERVER_URL=http://localhost:3000" > apps/client/.env
+          echo "VITE_SERVER_URL=${{ secrets.DEPLOY_VITE_SERVER_URL }}" > apps/client/.env
           echo "VITE_MIXPANEL_TOKEN=${{ secrets.VITE_MIXPANEL_TOKEN }}" >> apps/client/.env
           echo "VITE_STATIC_STORAGE_URL=${{ secrets.VITE_STATIC_STORAGE_URL }}" >> apps/client/.env
 
-      - name: Set Nginx SSL files
-        run: |
-          mkdir -p apps/client/ssl
-          echo "${{ secrets.SSL_FULLCHAIN }}" > apps/client/ssl/fullchain.pem
-          echo "${{ secrets.SSL_PRIVKEY }}" > apps/client/ssl/privkey.pem
-
-      - name: Buld Frontend
-        run: |
-          cd apps/client
-          pnpm run build
-
-      - name: Build Backend
-        run: |
-          cd apps/server
-          pnpm run swagger-auto
-          pnpm run build
-
-      - name: Build base image
-        run: |
-          docker build . --file Dockerfile.base --tag ${{ secrets.DOCKERHUB_USERNAME }}/boolock_base_test:1.0
-          docker tag ${{ secrets.DOCKERHUB_USERNAME }}/boolock_base_test:1.0 base-image
-
-      - name: Build frontend and backend images
-        run: |
-          docker build . --file apps/client/Dockerfile --tag ${{ secrets.DOCKERHUB_USERNAME }}/boolock_client_test:1.0
-          docker build . --file apps/server/Dockerfile --tag ${{ secrets.DOCKERHUB_USERNAME }}/boolock_server_test:1.0
-
       - name: Login to Docker Hub
         uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_PASSWORD }}
+          password: ${{ secrets.DOCKERHUB_ACCESS_TOKEN }}
 
-      - name: Docker Hub push
-        run: |
-          docker push ${{ secrets.DOCKERHUB_USERNAME }}/boolock_base_test:1.0
-          docker push ${{ secrets.DOCKERHUB_USERNAME }}/boolock_client_test:1.0
-          docker push ${{ secrets.DOCKERHUB_USERNAME }}/boolock_server_test:1.0
+      - name: Build and Push Base Image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: Dockerfile.base
+          push: true 
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/base-image-test:latest
+          cache-from: type=gha,scope=base-image-test
+          cache-to: type=gha,mode=max,scope=base-image-test
+
+      - name: Build and Push Frontend Image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: apps/client/Dockerfile.test
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/boolock_client_test:latest
+          cache-from: type=gha,scope=frontend-test
+          cache-to: type=gha,mode=max,scope=frontend-test
+          build-args: |
+            DOCKERHUB_USERNAME=${{ secrets.DOCKERHUB_USERNAME }}
+            TYPE=test
+
+      - name: Build and Push Backend Image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: apps/server/Dockerfile
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/boolock_server_test:latest
+          cache-from: type=gha,scope=backend-test
+          cache-to: type=gha,mode=max,scope=backend-test
+          build-args: |
+            DOCKERHUB_USERNAME=${{ secrets.DOCKERHUB_USERNAME }}
+            TYPE=test
 
   deploy:
+    if: github.event_name == 'push'
     needs: build
     runs-on: ubuntu-latest
     steps:
-      - name: Login to Docker Hub
-        run: sudo docker login -u ${{ secrets.DOCKERHUB_USERNAME }} -p ${{ secrets.DOCKERHUB_PASSWORD }}
-
       - name: Deploy with docker
         uses: appleboy/ssh-action@v0.1.6
         with:
-          host: ${{ secrets.SSH_HOST }}
-          username: ${{ secrets.SSH_USER }}
-          password: ${{ secrets.SSH_PASSWORD }}
-          port: ${{ secrets.SSH_PORT }}
+          host: ${{ secrets.TEST_SSH_HOST }}
+          username: ${{ secrets.TEST_SSH_USER }}
+          password: ${{ secrets.TEST_SSH_PASSWORD }}
+          port: ${{ secrets.TEST_SSH_PORT }}
           script: |
             cd boolock/refactor-web31-BooLock
-            git checkout main
-            git pull origin main
-
-            echo "MONGO_URI=${{ secrets.DEPLOY_MONGO_URI }}"  > apps/server/.env
-            echo "IS_LOCAL=false" >> apps/server/.env
-            echo "SERVER_CORS_ACCEPT=${{ secrets.DEPLOY_SERVER_CORS_ACCEPT }}" >> apps/server/.env
-            echo "S3_ACCESS_KEY=${{ secrets.S3_ACCESS_KEY }}" >> apps/server/.env
-            echo "S3_SECRET_KEY=${{ secrets.S3_SECRET_KEY }}" >> apps/server/.env
-            echo "S3_BUCKET_NAME=${{ secrets.S3_BUCKET_NAME }}" >> apps/server/.env
-            echo "NODE_ENV=production" >> apps/server/.env
+            git fetch origin
+            git checkout dev
+            git pull origin dev
 
-            echo "VITE_SERVER_URL=${{ secrets.DEPLOY_VITE_SERVER_URL }}" > apps/client/.env
-            echo "VITE_MIXPANEL_TOKEN=${{ secrets.VITE_MIXPANEL_TOKEN }}" >> apps/client/.env
-            echo "VITE_STATIC_STORAGE_URL=${{ secrets.VITE_STATIC_STORAGE_URL }}" >> apps/client/.env
+            echo "DOCKERHUB_USERNAME=${{ secrets.DOCKERHUB_USERNAME }}" > .env
+            echo "${{ secrets.DOCKERHUB_ACCESS_TOKEN }}" | docker login -u ${{ secrets.DOCKERHUB_USERNAME }} --password-stdin
 
-            sudo docker compose pull
-            sudo docker compose down
-            sudo docker compose up -d --build
-            sudo docker image prune -f
+            sudo docker compose -f docker-compose.test.yml pull
+            sudo docker compose -f docker-compose.test.yml up -d --force-recreate --remove-orphans
diff --git a/.github/workflows/boolock-main-cicd.yml b/.github/workflows/boolock-main-cicd.yml
new file mode 100644
index 0000000..44508d7
--- /dev/null
+++ b/.github/workflows/boolock-main-cicd.yml
@@ -0,0 +1,107 @@
+name: main ci/cd action
+
+on:
+  push:
+    branches: ['main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+        with:
+          buildkitd-flags: --debug
+
+      - name: Set BE .env
+        run: |
+          echo "MONGO_URI=${{ secrets.DEPLOY_MONGO_URI }}"  > apps/server/.env
+          echo "IS_LOCAL=false" >> apps/server/.env
+          echo "SERVER_CORS_ACCEPT=${{ secrets.DEPLOY_SERVER_CORS_ACCEPT }}" >> apps/server/.env
+          echo "S3_ACCESS_KEY=${{ secrets.S3_ACCESS_KEY }}" >> apps/server/.env
+          echo "S3_SECRET_KEY=${{ secrets.S3_SECRET_KEY }}" >> apps/server/.env
+          echo "S3_BUCKET_NAME=${{ secrets.S3_BUCKET_NAME }}" >> apps/server/.env
+          echo "NODE_ENV=production" >> apps/server/.env
+      
+      - name: Set FE .env
+        run: |
+          echo "VITE_SERVER_URL=${{ secrets.DEPLOY_VITE_SERVER_URL }}" > apps/client/.env
+          echo "VITE_MIXPANEL_TOKEN=${{ secrets.VITE_MIXPANEL_TOKEN }}" >> apps/client/.env
+          echo "VITE_STATIC_STORAGE_URL=${{ secrets.VITE_STATIC_STORAGE_URL }}" >> apps/client/.env
+
+      - name: Set Nginx SSL files
+        run: |
+          mkdir -p apps/client/ssl
+          echo "${{ secrets.SSL_FULLCHAIN }}" > apps/client/ssl/fullchain.pem
+          echo "${{ secrets.SSL_PRIVKEY }}" > apps/client/ssl/privkey.pem
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_ACCESS_TOKEN }}
+
+      - name: Build and Push Base Image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: Dockerfile.base
+          push: true 
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/base-image-prod:latest
+          cache-from: type=gha,scope=base-image-prod
+          cache-to: type=gha,mode=max,scope=base-image-prod
+
+      - name: Build and Push Frontend Image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: apps/client/Dockerfile
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/boolock_client_prod:latest
+          cache-from: type=gha,scope=frontend
+          cache-to: type=gha,mode=max,scope=frontend
+          build-args: |
+            DOCKERHUB_USERNAME=${{ secrets.DOCKERHUB_USERNAME }}
+            TYPE=prod
+
+      - name: Build and Push Backend Image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: apps/server/Dockerfile
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/boolock_server_prod:latest
+          cache-from: type=gha,scope=backend
+          cache-to: type=gha,mode=max,scope=backend
+          build-args: |
+            DOCKERHUB_USERNAME=${{ secrets.DOCKERHUB_USERNAME }}
+            TYPE=prod
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Login to Docker Hub
+        run: sudo docker login -u ${{ secrets.DOCKERHUB_USERNAME }} -p ${{ secrets.DOCKERHUB_PASSWORD }}
+
+      - name: Deploy with docker
+        uses: appleboy/ssh-action@v0.1.6
+        with:
+          host: ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          password: ${{ secrets.SSH_PASSWORD }}
+          port: ${{ secrets.SSH_PORT }}
+          script: |
+            cd boolock/refactor-web31-BooLock
+            git fetch origin
+            git checkout main
+            git pull origin main
+
+            echo "DOCKERHUB_USERNAME=${{ secrets.DOCKERHUB_USERNAME }}" > .env
+            echo "${{ secrets.DOCKERHUB_ACCESS_TOKEN }}" | docker login -u ${{ secrets.DOCKERHUB_USERNAME }} --password-stdin
+
+            sudo docker compose pull
+            sudo docker compose up -d --force-recreate --remove-orphans
\ No newline at end of file
diff --git a/README.md b/README.md
index 8d7ef2a..7d868ea 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,11 @@
 <h1>BooLock</h1>
   
-<img width="1704" alt="Frame 2016" src="https://github.com/user-attachments/assets/74cc69d6-7d6f-48ed-9e06-1d6d5f6a5c43">
-
-</div>
+![image](https://github.com/user-attachments/assets/c58af651-8a5d-4b09-a98e-04ce50f27fca)
 
 <br/>
 
 <p align="center"> <br/>
-  <strong>웹 개발, 블록으로 쉽고 즐겁게!</strong> <br />
+  <strong>웹 개발, 블록 조립으로 쉽고 재밌게!</strong> <br />
   <strong>HTML과 CSS를 배우는 블록코딩 플랫폼</strong> <br /> <br />
   나만의 창작물을 완성하고, 새로운 웹 개발의 가능성을 경험해보세요. ♥️ <br /> <br />
   <strong>👇 배포 사이트</strong> <br />
diff --git a/apps/client/Dockerfile b/apps/client/Dockerfile
index 6f9915d..c234586 100644
--- a/apps/client/Dockerfile
+++ b/apps/client/Dockerfile
@@ -1,4 +1,7 @@
-FROM base-image AS frontend-build
+
+ARG DOCKERHUB_USERNAME
+ARG TYPE
+FROM ${DOCKERHUB_USERNAME}/base-image-${TYPE} AS frontend-build
 
 WORKDIR /app/apps/client
 COPY ./apps/client .
@@ -7,7 +10,7 @@ RUN pnpm install --offline --frozen-lockfile &&\
 
 FROM nginx:alpine AS frontend
 
-COPY /apps/client/nginx.conf /etc/nginx/conf.d/default.conf
+COPY /apps/client/production/nginx.conf /etc/nginx/conf.d/default.conf
 COPY /apps/client/ssl /etc/nginx/ssl
 RUN chmod 644 /etc/nginx/ssl/fullchain.pem &&\ 
   chmod 600 /etc/nginx/ssl/privkey.pem &&\ 
diff --git a/apps/client/Dockerfile.test b/apps/client/Dockerfile.test
new file mode 100644
index 0000000..1270603
--- /dev/null
+++ b/apps/client/Dockerfile.test
@@ -0,0 +1,19 @@
+ARG DOCKERHUB_USERNAME
+ARG TYPE
+FROM ${DOCKERHUB_USERNAME}/base-image-${TYPE} AS frontend-build
+
+WORKDIR /app/apps/client
+COPY ./apps/client .
+RUN pnpm install --offline --frozen-lockfile &&\
+  pnpm run build
+
+FROM nginx:alpine AS frontend
+
+COPY /apps/client/test/nginx.conf /etc/nginx/conf.d/default.conf
+RUN chown -R nginx:nginx /usr/share/nginx/html 
+
+COPY --from=frontend-build /app/apps/client/dist /usr/share/nginx/html/
+RUN chmod -R 755 /usr/share/nginx/html 
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/apps/client/nginx.conf b/apps/client/production/nginx.conf
similarity index 87%
rename from apps/client/nginx.conf
rename to apps/client/production/nginx.conf
index 3bb2383..50b2bcb 100644
--- a/apps/client/nginx.conf
+++ b/apps/client/production/nginx.conf
@@ -9,10 +9,18 @@ server {
 
 server {
     listen 443 ssl;
+    http2 on;
+    http3 on;
+    quic_retry off;
+
     server_name boolock.site;
 
     ssl_certificate /etc/nginx/ssl/fullchain.pem;
     ssl_certificate_key /etc/nginx/ssl/privkey.pem;
+    ssl_protocols TLSv1.3;
+    ssl_prefer_server_ciphers off;
+
+    add_header Alt-Svc 'h3-23=":443"; ma=86400';
 
     location / {
         root /usr/share/nginx/html;
diff --git a/apps/client/src/entities/index.ts b/apps/client/src/entities/index.ts
index adb8eeb..7d89b56 100644
--- a/apps/client/src/entities/index.ts
+++ b/apps/client/src/entities/index.ts
@@ -19,3 +19,4 @@ export { ImageTagModalImg } from './workspace/ImageTagModalImg/ImageTagModalImg'
 export { ImageTagModalButton } from './workspace/ImageTagModalButton/ImageTagModalButton';
 export { ImageTagModalListItem } from './workspace/ImageTagModalListItem/ImageTagModalListItem';
 export { CodeExportButton } from './workspace/CodeExportButton/CodeExportButton';
+export { HelpButton } from './workspace/HelpButton/HelpButton';
diff --git a/apps/client/src/entities/workspace/CodeExportButton/CodeExportButton.tsx b/apps/client/src/entities/workspace/CodeExportButton/CodeExportButton.tsx
index f407d8e..112c3c0 100644
--- a/apps/client/src/entities/workspace/CodeExportButton/CodeExportButton.tsx
+++ b/apps/client/src/entities/workspace/CodeExportButton/CodeExportButton.tsx
@@ -1,9 +1,9 @@
 import { Spinner } from '@/shared/ui';
 import { exportPreviewHtml } from '@/shared/utils';
 import toast from 'react-hot-toast';
-import { useState } from 'react';
+import { memo, useState } from 'react';
 
-export const CodeExportButton = () => {
+export const CodeExportButton = memo(() => {
   const [isLoading, setIsLoading] = useState(false);
 
   const handleClick = () => {
@@ -32,4 +32,4 @@ export const CodeExportButton = () => {
       )}
     </button>
   );
-};
+});
diff --git a/apps/client/src/entities/workspace/CssCategoryButton/CssCategoryButton.tsx b/apps/client/src/entities/workspace/CssCategoryButton/CssCategoryButton.tsx
index 2a94421..f0ec73e 100644
--- a/apps/client/src/entities/workspace/CssCategoryButton/CssCategoryButton.tsx
+++ b/apps/client/src/entities/workspace/CssCategoryButton/CssCategoryButton.tsx
@@ -1,6 +1,5 @@
 import { TCssCategory } from '@/shared/types';
 import { useCssPropsStore } from '@/shared/store';
-
 type CssCategoryButtonProps = {
   cssCategory: TCssCategory;
 };
@@ -11,7 +10,8 @@ type CssCategoryButtonProps = {
  * CSS 카테고리를 선택할 수 있는 버튼 컴포넌트
  */
 export const CssCategoryButton = ({ cssCategory }: CssCategoryButtonProps) => {
-  const { selectedCssCategory, setSelectedCssCategory } = useCssPropsStore();
+  const selectedCssCategory = useCssPropsStore((state) => state.selectedCssCategory);
+  const setSelectedCssCategory = useCssPropsStore((state) => state.setSelectedCssCategory);
 
   return (
     <button
diff --git a/apps/client/src/entities/workspace/CssOptionItem/CssOptionItem.tsx b/apps/client/src/entities/workspace/CssOptionItem/CssOptionItem.tsx
index 6c3af78..e514517 100644
--- a/apps/client/src/entities/workspace/CssOptionItem/CssOptionItem.tsx
+++ b/apps/client/src/entities/workspace/CssOptionItem/CssOptionItem.tsx
@@ -1,9 +1,9 @@
-import { Select, SelectSize } from '@/shared/ui';
-import { useCssOptionItem, useCssOptions, useCssTooltip } from '@/shared/hooks';
+import { SelectSize, TCssCategoryItem } from '@/shared/types';
+import { useCssOptionItem, useCssOptions } from '@/shared/hooks';
 
 import { CssTooltip } from '@/entities';
 import Question from '@/shared/assets/question.svg?react';
-import { TCssCategoryItem } from '@/shared/types';
+import { Select } from '@/shared/ui';
 import { useCssPropsStore } from '@/shared/store';
 
 type CssOptionItemProps = {
@@ -17,7 +17,8 @@ type CssOptionItemProps = {
  * CSS 속성을 선택할 수 있는 컴포넌트
  */
 export const CssOptionItem = ({ cssItem, index }: CssOptionItemProps) => {
-  const { totalCssPropertyObj, currentCssClassName } = useCssPropsStore();
+  const totalCssPropertyObj = useCssPropsStore((state) => state.totalCssPropertyObj);
+  const currentCssClassName = useCssPropsStore((state) => state.currentCssClassName);
   const { handleCssPropertyCheckboxChange, handleCssOptionChange, handleColorChange } =
     useCssOptions();
 
@@ -31,10 +32,10 @@ export const CssOptionItem = ({ cssItem, index }: CssOptionItemProps) => {
     handleEnterKey,
     handleMouseLeave,
     handleChangeInputValue,
+    offsetX,
+    offsetY,
   } = useCssOptionItem(cssItem);
 
-  const { leftX, topY } = useCssTooltip();
-
   return (
     <div
       className={`flex h-[66px] w-full flex-shrink-0 items-center justify-between rounded-lg px-4 ${
@@ -61,12 +62,9 @@ export const CssOptionItem = ({ cssItem, index }: CssOptionItemProps) => {
             onMouseEnter={(e) => handleMouseEnter(e, index)}
             onMouseLeave={handleMouseLeave}
           />
-          <CssTooltip
-            description={cssItem.description}
-            isOpen={isHover && indexOfHover === index}
-            leftX={leftX}
-            topY={topY}
-          />
+          {isHover && indexOfHover === index && (
+            <CssTooltip description={cssItem.description} leftX={offsetX} topY={offsetY} />
+          )}
         </div>
       </div>
       {cssItem.type === 'select' && (
diff --git a/apps/client/src/entities/workspace/CssTooltip/CssTooltip.stories.tsx b/apps/client/src/entities/workspace/CssTooltip/CssTooltip.stories.tsx
index 10fcd9b..e8e8518 100644
--- a/apps/client/src/entities/workspace/CssTooltip/CssTooltip.stories.tsx
+++ b/apps/client/src/entities/workspace/CssTooltip/CssTooltip.stories.tsx
@@ -25,28 +25,23 @@ type Story = StoryObj<typeof CssTooltip>;
 export const Default: Story = {
   args: {
     description: 'css 툴팁입니다.',
-    isOpen: false,
     leftX: 0,
     topY: 0,
   },
   render: (args) => {
-    const [isOpen, setIsOpen] = useState(args.isOpen);
     const [leftX, setLeftX] = useState(0);
     const [topY, setTopY] = useState(0);
 
     const handleMouseEnter = (e: React.MouseEvent) => {
-      setIsOpen(true);
       setLeftX(e.currentTarget.getBoundingClientRect().x + 8);
       setTopY(e.currentTarget.getBoundingClientRect().y + 8);
     };
 
-    const handleMouseLeave = () => {
-      setIsOpen(false);
-    };
+    const handleMouseLeave = () => {};
     return (
       <div>
         <QuestionIcon onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} />
-        <CssTooltip description={args.description} leftX={leftX} topY={topY} isOpen={isOpen} />
+        <CssTooltip description={args.description} leftX={leftX} topY={topY} />
       </div>
     );
   },
@@ -55,28 +50,23 @@ export const Default: Story = {
 export const ScreenOverflow: Story = {
   args: {
     description: 'css 툴팁입니다.',
-    isOpen: false,
     leftX: 0,
     topY: 0,
   },
   render: (args) => {
-    const [isOpen, setIsOpen] = useState(args.isOpen);
     const [leftX, setLeftX] = useState(0);
     const [topY, setTopY] = useState(0);
 
     const handleMouseEnter = (e: React.MouseEvent) => {
-      setIsOpen(true);
       setLeftX(e.currentTarget.getBoundingClientRect().x + 8);
       setTopY(-e.currentTarget.getBoundingClientRect().y + 40);
     };
 
-    const handleMouseLeave = () => {
-      setIsOpen(false);
-    };
+    const handleMouseLeave = () => {};
     return (
       <div>
         <QuestionIcon onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} />
-        <CssTooltip description={args.description} leftX={leftX} topY={topY} isOpen={isOpen} />
+        <CssTooltip description={args.description} leftX={leftX} topY={topY} />
       </div>
     );
   },
diff --git a/apps/client/src/entities/workspace/CssTooltip/CssTooltip.tsx b/apps/client/src/entities/workspace/CssTooltip/CssTooltip.tsx
index 133f656..208e480 100644
--- a/apps/client/src/entities/workspace/CssTooltip/CssTooltip.tsx
+++ b/apps/client/src/entities/workspace/CssTooltip/CssTooltip.tsx
@@ -1,20 +1,22 @@
 import { createPortal } from 'react-dom';
+import { useCssTooltip } from '@/shared/hooks';
 
 type CssTooltipProps = {
   description: string;
-  isOpen: boolean;
   leftX: number;
   topY: number;
 };
 
-export const CssTooltip = ({ description, isOpen, leftX, topY }: CssTooltipProps) => {
-  if (!isOpen) {
-    return null;
-  }
+export const CssTooltip = ({ description, leftX, topY }: CssTooltipProps) => {
+  const { tooltipX, tooltipY, tooltipRef } = useCssTooltip(leftX, topY);
   return createPortal(
     <div
-      className={`text-gray-white text-tooltip-sm fixed left-0 top-0 z-[9999] rounded-3xl ${topY >= 0 ? 'rounded-tl-none' : 'rounded-bl-none'} bg-green-500 px-3 py-2`}
-      style={{ left: `${leftX + 18}px`, top: topY >= 0 ? `${topY + 8}px` : `${-topY}px` }}
+      className={`text-gray-white text-tooltip-sm fixed z-[9999] rounded-3xl ${tooltipY >= 0 ? 'rounded-tl-none' : 'rounded-bl-none'} bg-green-500 px-3 py-2`}
+      style={{
+        left: `${tooltipX + 18}px`,
+        top: tooltipY >= 0 ? `${tooltipY + 8}px` : `${-tooltipY}px`,
+      }}
+      ref={tooltipRef}
     >
       <p>{description}</p>
     </div>,
diff --git a/apps/client/src/entities/workspace/HelpButton/HelpButton.tsx b/apps/client/src/entities/workspace/HelpButton/HelpButton.tsx
new file mode 100644
index 0000000..b11c716
--- /dev/null
+++ b/apps/client/src/entities/workspace/HelpButton/HelpButton.tsx
@@ -0,0 +1,22 @@
+import Question from '@/shared/assets/question.svg?react';
+import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
+import { memo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+
+export const HelpButton = memo(() => {
+  const { openCoachMark } = useCoachMarkStore(
+    useShallow((state) => ({
+      openCoachMark: state.openCoachMark,
+    }))
+  );
+
+  return (
+    <button
+      className="text-medium-rg hover flex items-center gap-1 text-gray-300 hover:text-gray-500"
+      onClick={openCoachMark}
+      aria-label="도움말 버튼"
+    >
+      도움말 <Question />
+    </button>
+  );
+});
diff --git a/apps/client/src/entities/workspace/RedoButton/RedoButton.tsx b/apps/client/src/entities/workspace/RedoButton/RedoButton.tsx
index 6c708e0..5807cc7 100644
--- a/apps/client/src/entities/workspace/RedoButton/RedoButton.tsx
+++ b/apps/client/src/entities/workspace/RedoButton/RedoButton.tsx
@@ -1,12 +1,13 @@
 import { CircleButton } from '@/shared/ui';
 import RightArrow from '@/shared/assets/arrow_right.svg?react';
 import { useWorkspaceStore } from '@/shared/store';
+import { memo } from 'react';
 
 /**
  * @description
  * 워크스페이스 캔버스에서 redo 기능을 실행시키는 버튼입니다.
  */
-export const RedoButton = () => {
+export const RedoButton = memo(() => {
   const { workspace } = useWorkspaceStore();
 
   const handleRedo = () => {
@@ -20,4 +21,4 @@ export const RedoButton = () => {
       <RightArrow />
     </CircleButton>
   );
-};
+});
diff --git a/apps/client/src/entities/workspace/SaveButton/SaveButton.tsx b/apps/client/src/entities/workspace/SaveButton/SaveButton.tsx
index 3a8dda9..dca5134 100644
--- a/apps/client/src/entities/workspace/SaveButton/SaveButton.tsx
+++ b/apps/client/src/entities/workspace/SaveButton/SaveButton.tsx
@@ -1,14 +1,5 @@
-import * as Blockly from 'blockly/core';
-
-import { useCssPropsStore, useResetCssStore, useWorkspaceStore } from '@/shared/store';
-
+import { useWorkspaceSave } from '@/shared/hooks/useWorkspaceSave';
 import { Spinner } from '@/shared/ui';
-import { capturePreview, trackEvent } from '@/shared/utils';
-import { cssStyleToolboxConfig } from '@/shared/blockly';
-import toast from 'react-hot-toast';
-import { useParams } from 'react-router-dom';
-import { useSaveWorkspace } from '@/shared/hooks';
-import { useState } from 'react';
 
 /**
  *
@@ -17,40 +8,13 @@ import { useState } from 'react';
  * 저장 항목 : css 속성, 캔버스 블록 상태, css class 블록, css 리셋 여부, 미리보기 썸네일
  */
 export const SaveButton = () => {
-  const workspaceId = useParams().workspaceId as string;
-  const { mutate: saveWorkspace, isPending } = useSaveWorkspace(workspaceId);
-  const { totalCssPropertyObj } = useCssPropsStore();
-  const { workspace } = useWorkspaceStore();
-  const { isResetCssChecked } = useResetCssStore();
-  const [isCapture, setIsCapture] = useState<boolean>(false);
-
-  const handleClick = async () => {
-    trackEvent('workspace_saved');
-    try {
-      const canvas = Blockly.serialization.workspaces.save(workspace!) as any;
-      setIsCapture(true);
-      const thumbnail = await capturePreview();
-      saveWorkspace({
-        totalCssPropertyObj,
-        canvas,
-        classBlockList: cssStyleToolboxConfig.contents,
-        cssResetStatus: isResetCssChecked,
-        thumbnail,
-      });
-      setIsCapture(false);
-    } catch (error) {
-      if (error instanceof Error) {
-        toast.error(error.message);
-      }
-    } finally {
-      setIsCapture(false);
-    }
-  };
+  const { handleSave, isCapture, isPending } = useWorkspaceSave();
 
   return (
     <>
+      <p>{isPending || isCapture ? '저장 중' : '저장 완료'}</p>
       <button
-        onClick={handleClick}
+        onClick={handleSave}
         className="text-bold-rg w-16 rounded-[30px] bg-green-500 py-2 text-green-100 hover:border hover:border-green-500 hover:bg-green-100 hover:text-green-500"
         disabled={isPending}
         aria-label="워크스페이스 저장 버튼"
diff --git a/apps/client/src/entities/workspace/UndoButton/UndoButton.tsx b/apps/client/src/entities/workspace/UndoButton/UndoButton.tsx
index f1b6707..6a311b2 100644
--- a/apps/client/src/entities/workspace/UndoButton/UndoButton.tsx
+++ b/apps/client/src/entities/workspace/UndoButton/UndoButton.tsx
@@ -1,13 +1,14 @@
 import { CircleButton } from '@/shared/ui';
 import LeftArrow from '@/shared/assets/arrow_left.svg?react';
 import { useWorkspaceStore } from '@/shared/store';
+import { memo } from 'react';
 
 /**
  *
  * @description
  * 워크스페이스 캔버스에서 undo 기능을 실행시키는 버튼입니다.
  */
-export const UndoButton = () => {
+export const UndoButton = memo(() => {
   const { workspace } = useWorkspaceStore();
 
   const handleUndo = () => {
@@ -21,4 +22,4 @@ export const UndoButton = () => {
       <LeftArrow />
     </CircleButton>
   );
-};
+});
diff --git a/apps/client/src/entities/workspace/WorkspaceNameInput/WorkspaceNameInput.tsx b/apps/client/src/entities/workspace/WorkspaceNameInput/WorkspaceNameInput.tsx
index ec2a0f9..4cc6faf 100644
--- a/apps/client/src/entities/workspace/WorkspaceNameInput/WorkspaceNameInput.tsx
+++ b/apps/client/src/entities/workspace/WorkspaceNameInput/WorkspaceNameInput.tsx
@@ -1,4 +1,4 @@
-import { FocusEventHandler, KeyboardEventHandler, useEffect, useState } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, memo, useEffect, useState } from 'react';
 
 import { Spinner } from '@/shared/ui';
 import { useParams } from 'react-router-dom';
@@ -9,7 +9,7 @@ import { useWorkspaceStore } from '@/shared/store';
  * @description
  * 워크스페이스 이름을 수정할 수 있는 컴포넌트입니다.
  */
-export const WorkspaceNameInput = () => {
+export const WorkspaceNameInput = memo(() => {
   const { workspaceId } = useParams() as { workspaceId: string };
   const { mutate, isPending } = useUpdateWorkspaceName();
   const { name } = useWorkspaceStore();
@@ -68,4 +68,4 @@ export const WorkspaceNameInput = () => {
       </div>
     </>
   );
-};
+});
diff --git a/apps/client/src/pages/Workspacepage/WorkspacePage.tsx b/apps/client/src/pages/Workspacepage/WorkspacePage.tsx
index 4078b58..bcc048d 100644
--- a/apps/client/src/pages/Workspacepage/WorkspacePage.tsx
+++ b/apps/client/src/pages/Workspacepage/WorkspacePage.tsx
@@ -4,6 +4,7 @@ import { useGetWorkspace, usePreventLeaveWorkspacePage } from '@/shared/hooks';
 
 import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
 import { useParams } from 'react-router-dom';
+import { useShallow } from 'zustand/react/shallow';
 
 /**
  *
@@ -11,10 +12,16 @@ import { useParams } from 'react-router-dom';
  * 워크스페이스 페이지 컴포넌트
  */
 export const WorkspacePage = () => {
-  const { workspaceId } = useParams();
-  useGetWorkspace(workspaceId as string);
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+  useGetWorkspace(workspaceId!);
   usePreventLeaveWorkspacePage();
-  const { currentStep, isCoachMarkOpen, openCoachMark } = useCoachMarkStore();
+  const { currentStep, isCoachMarkOpen, openCoachMark } = useCoachMarkStore(
+    useShallow((state) => ({
+      currentStep: state.currentStep,
+      isCoachMarkOpen: state.isCoachMarkOpen,
+      openCoachMark: state.openCoachMark,
+    }))
+  );
   const toolboxDiv = document.querySelector('.blocklyToolboxDiv');
 
   useLayoutEffect(() => {
@@ -39,7 +46,7 @@ export const WorkspacePage = () => {
     <>
       <div className="flex h-screen flex-col">
         {isCoachMarkOpen && <CoachMark />}
-        <WorkspacePageHeader />
+        <WorkspacePageHeader currentStep={currentStep} />
         <WorkspaceContent />
       </div>
       <ImageTagModal />
diff --git a/apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.stories.tsx b/apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.stories.tsx
deleted file mode 100644
index 54641ce..0000000
--- a/apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { CodeContent } from './CodeContent';
-
-const meta: Meta<typeof CodeContent> = {
-  title: 'shared/code-highlighter/CodeContent',
-  component: CodeContent,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CodeContent>;
-
-export const Default: Story = {
-  args: {
-    code: `<html>
-    <head></head>
-    <body>
-      <div>
-        <h1>title</h1>
-        <p>content</p>
-      </div>
-    </body>
-  </html>`,
-    codeLineList: [
-      '<html>',
-      '  <head></head>',
-      '  <body>',
-      '    <div>',
-      '      <h1>title</h1>',
-      '      <p>content</p>',
-      '    </div>',
-      '  </body>',
-      '</html>',
-    ],
-    selectedBlockStartLine: 5,
-    selectedBlockLength: 7,
-    selectedBlockType: 'BOOLOCK_SYSTEM_html',
-  },
-};
diff --git a/apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.tsx b/apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.tsx
deleted file mode 100644
index c58cd51..0000000
--- a/apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import styles from '../../styles/CodeViewer.module.css';
-
-type CodeViewerProps = {
-  code: string;
-  codeLineList: string[];
-  selectedBlockStartLine?: number;
-  selectedBlockLength?: number;
-  selectedBlockType?: string | null;
-};
-
-/**
- *
- * @description
- * 변환된 HTML, CSS 코드를 보여주는 컴포넌트
- */
-export const CodeContent = ({
-  code,
-  codeLineList,
-  selectedBlockStartLine,
-  selectedBlockLength,
-  selectedBlockType,
-}: CodeViewerProps) => {
-  const [previousCodeLines, setPreviousCodeLines] = useState<string[]>([]);
-  const [highlightedLines, setHighlightedLines] = useState<number[]>([]);
-
-  // 코드 애니메이션 효과
-  useEffect(() => {
-    const newLineList: number[] = [];
-
-    codeLineList.forEach((line, index) => {
-      if (!previousCodeLines[index] || previousCodeLines[index] !== line) {
-        newLineList.push(index);
-      }
-    });
-
-    setHighlightedLines(newLineList);
-
-    // 애니메이션이 끝난 후 강조 제거
-    const timeout = setTimeout(() => setHighlightedLines([]), 1000);
-
-    setPreviousCodeLines(codeLineList);
-
-    return () => clearTimeout(timeout);
-  }, [code]);
-
-  return (
-    <div className={styles.codeContent}>
-      <pre>
-        <code>
-          {codeLineList.map((line, index) => {
-            const isWithinSelectedBlock =
-              selectedBlockStartLine &&
-              selectedBlockLength &&
-              index + 1 >= selectedBlockStartLine &&
-              index + 1 < selectedBlockStartLine + selectedBlockLength;
-
-            // selectedBlockType에 해당하는 부분 강조
-            const containsSelectedType = selectedBlockType && line.includes(selectedBlockType);
-
-            return (
-              <div
-                key={index}
-                className={`${highlightedLines.includes(index) ? styles.newLine : ''} ${
-                  isWithinSelectedBlock ? styles.blockHighlight : ''
-                } ${containsSelectedType ? styles.highlightBg : ''}`}
-                dangerouslySetInnerHTML={{ __html: line }}
-              />
-            );
-          })}
-        </code>
-      </pre>
-    </div>
-  );
-};
diff --git a/apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.tsx b/apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.tsx
index 490635a..86d3bc0 100644
--- a/apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.tsx
+++ b/apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.tsx
@@ -1,19 +1,10 @@
-import { CodeContent } from '../CodeContent/CodeContent';
-import { LineNumbers } from '../LineNumbers/LineNumbers';
-import { parseHighlightCss } from '../../utils/parseHighlightCss';
-import { parseHighlightHtml } from '../../utils/parseHighlightHtml';
 import styles from '../../styles/CodeViewer.module.css';
+import { LineNumbers } from '../../components';
+import { useDiffCodeAnimate } from '../../hooks';
+import { getParsedCodeLineList, getClassNames, getViewerClassNames } from '../../utils';
+import { CodeViewerProps } from '../../types';
 import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
 
-type CodeViewerProps = {
-  code: string;
-  type: 'html' | 'css';
-  theme?: 'light' | 'dark';
-  selectedBlockStartLine?: number;
-  selectedBlockLength?: number;
-  selectedBlockType?: string | null;
-};
-
 /**
  *
  * @description
@@ -27,27 +18,36 @@ export const CodeViewer = ({
   selectedBlockLength,
   selectedBlockType,
 }: CodeViewerProps) => {
-  const parsedCode =
-    type === 'html'
-      ? parseHighlightHtml(code, styles, selectedBlockType!)
-      : parseHighlightCss(code, styles, selectedBlockType!);
-  const codeLineList = parsedCode.split('\n').filter((line) => line.trim() !== '');
+  const codeLineList = getParsedCodeLineList({ code, type, styles, selectedBlockType });
+  const highlightedLines = useDiffCodeAnimate({ code, codeLineList });
   const { currentStep } = useCoachMarkStore();
 
   return (
-    <div
-      className={`${styles.viewer} ${theme === 'dark' ? styles.dark : styles.light} ${currentStep === 3 ? 'z-[200] bg-white' : ''}`}
-    >
+    <div className={getViewerClassNames({ styles, theme, currentStep })}>
       <div className={styles.scrollContainer}>
         <LineNumbers codeLineList={codeLineList} />
 
-        <CodeContent
-          code={code}
-          codeLineList={codeLineList}
-          selectedBlockLength={selectedBlockLength}
-          selectedBlockStartLine={selectedBlockStartLine}
-          selectedBlockType={selectedBlockType}
-        />
+        <pre className={styles.codeContent}>
+          <code>
+            {codeLineList.map((line, index) => {
+              return (
+                <div
+                  key={index}
+                  className={getClassNames({
+                    styles,
+                    index,
+                    line,
+                    highlightedLines,
+                    selectedBlockStartLine,
+                    selectedBlockLength,
+                    selectedBlockType,
+                  })}
+                  dangerouslySetInnerHTML={{ __html: line }}
+                />
+              );
+            })}
+          </code>
+        </pre>
       </div>
     </div>
   );
diff --git a/apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumbers.tsx b/apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumbers.tsx
index 69a77d2..cb43e06 100644
--- a/apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumbers.tsx
+++ b/apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumbers.tsx
@@ -1,9 +1,7 @@
 import styles from '../../styles/CodeViewer.module.css';
-import { useState } from 'react';
-
-type LineNumbersProps = {
-  codeLineList: string[];
-};
+import { useHoverLineNumber } from '../../hooks';
+import { getLineNumberClass } from '../../utils';
+import { LineNumbersProps } from '../../types';
 
 /**
  *
@@ -11,16 +9,7 @@ type LineNumbersProps = {
  * 코드의 줄 수를 표시하는 컴포넌트
  */
 export const LineNumbers = ({ codeLineList }: LineNumbersProps) => {
-  const [hoveredLineNumber, setHoveredLineNumber] = useState<number | null>(null);
-
-  // 마우스 enter, leave 색상 변화
-  const handleMouseEnter = (lineNumber: number) => {
-    setHoveredLineNumber(lineNumber);
-  };
-
-  const handleMouseLeave = () => {
-    setHoveredLineNumber(null);
-  };
+  const { hoveredLineNumber, handleMouseEnter, handleMouseLeave } = useHoverLineNumber();
 
   return (
     <div className={styles.lineNumbers}>
@@ -29,7 +18,12 @@ export const LineNumbers = ({ codeLineList }: LineNumbersProps) => {
           key={index}
           onMouseEnter={() => handleMouseEnter(index + 1)}
           onMouseLeave={handleMouseLeave}
-          className={`${styles.lineNumber} ${hoveredLineNumber === index + 1 ? styles.lineHighlight : ''}`}
+          className={getLineNumberClass(
+            styles.lineNumber,
+            styles.lineHighlight,
+            index + 1,
+            hoveredLineNumber
+          )}
         >
           {index + 1}
         </div>
diff --git a/apps/client/src/shared/code-highlighter/components/index.ts b/apps/client/src/shared/code-highlighter/components/index.ts
new file mode 100644
index 0000000..2b89597
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/components/index.ts
@@ -0,0 +1,2 @@
+export { CodeViewer } from './CodeViewer/CodeViewer';
+export { LineNumbers } from './LineNumbers/LineNumbers';
diff --git a/apps/client/src/shared/code-highlighter/constants/index.ts b/apps/client/src/shared/code-highlighter/constants/index.ts
new file mode 100644
index 0000000..30b705d
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/constants/index.ts
@@ -0,0 +1,6 @@
+/**
+ *
+ * @description
+ * 애니메이션 지속 시간 (1초)
+ */
+export const ANIMATION_DURATION_MS = 1000;
diff --git a/apps/client/src/shared/code-highlighter/hooks/index.ts b/apps/client/src/shared/code-highlighter/hooks/index.ts
new file mode 100644
index 0000000..1126da2
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/hooks/index.ts
@@ -0,0 +1,2 @@
+export { useDiffCodeAnimate } from './useDiffCodeAnimate';
+export { useHoverLineNumber } from './useHoverLineNumber';
diff --git a/apps/client/src/shared/code-highlighter/hooks/useDiffCodeAnimate.ts b/apps/client/src/shared/code-highlighter/hooks/useDiffCodeAnimate.ts
new file mode 100644
index 0000000..7e32771
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/hooks/useDiffCodeAnimate.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+import { ANIMATION_DURATION_MS } from '../constants';
+import { useDiffCodeAnimateProps } from '../types';
+
+/**
+ *
+ * @description
+ * 변환된 HTML 코드에서 바뀐 코드 라인을 애니메이션 주면서 할당
+ */
+export const useDiffCodeAnimate = ({ code, codeLineList }: useDiffCodeAnimateProps) => {
+  const [previousCodeLines, setPreviousCodeLines] = useState<string[]>([]);
+  const [highlightedLines, setHighlightedLines] = useState<number[]>([]);
+
+  useEffect(() => {
+    const newLineList: number[] = [];
+
+    codeLineList.forEach((line, index) => {
+      if (!previousCodeLines[index] || previousCodeLines[index] !== line) {
+        newLineList.push(index);
+      }
+    });
+
+    setHighlightedLines(newLineList);
+    const timeout = setTimeout(() => setHighlightedLines([]), ANIMATION_DURATION_MS);
+    setPreviousCodeLines(codeLineList);
+
+    return () => clearTimeout(timeout);
+  }, [code]);
+
+  return highlightedLines;
+};
diff --git a/apps/client/src/shared/code-highlighter/hooks/useHoverLineNumber.ts b/apps/client/src/shared/code-highlighter/hooks/useHoverLineNumber.ts
new file mode 100644
index 0000000..8603b2c
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/hooks/useHoverLineNumber.ts
@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+/**
+ *
+ * @description
+ * 마우스 호버한 라인넘버의 색상을 변경하는 함수
+ */
+export const useHoverLineNumber = () => {
+  const [hoveredLineNumber, setHoveredLineNumber] = useState<number | null>(null);
+
+  const handleMouseEnter = (lineNumber: number) => {
+    setHoveredLineNumber(lineNumber);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredLineNumber(null);
+  };
+
+  return { hoveredLineNumber, handleMouseEnter, handleMouseLeave };
+};
diff --git a/apps/client/src/shared/code-highlighter/types/index.ts b/apps/client/src/shared/code-highlighter/types/index.ts
new file mode 100644
index 0000000..ef4dfb6
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/types/index.ts
@@ -0,0 +1,43 @@
+// components 타입
+export type CodeViewerProps = {
+  code: string;
+  type: 'html' | 'css';
+  theme?: 'light' | 'dark';
+  selectedBlockStartLine?: number;
+  selectedBlockLength?: number;
+  selectedBlockType?: string | null;
+};
+
+export type LineNumbersProps = {
+  codeLineList: string[];
+};
+
+// hooks 타입
+export type useDiffCodeAnimateProps = {
+  code: string;
+  codeLineList: string[];
+};
+
+// utils 타입
+export type getClassNamesProps = {
+  styles: { [key: string]: string };
+  index: number;
+  line: string;
+  highlightedLines: number[];
+  selectedBlockStartLine?: number;
+  selectedBlockLength?: number;
+  selectedBlockType?: string | null;
+};
+
+export type getParsedCodeLineListProps = {
+  code: string;
+  type: 'html' | 'css';
+  styles: { [key: string]: string };
+  selectedBlockType?: string | null;
+};
+
+export type getViewerClassNamesProps = {
+  styles: any;
+  theme: string | undefined;
+  currentStep: number;
+};
diff --git a/apps/client/src/shared/code-highlighter/utils/getClassNames.ts b/apps/client/src/shared/code-highlighter/utils/getClassNames.ts
new file mode 100644
index 0000000..02d81f0
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/utils/getClassNames.ts
@@ -0,0 +1,29 @@
+import { getClassNamesProps } from '../types';
+
+/**
+ *
+ * @description
+ * 클래스명을 할당하는 함수
+ */
+export const getClassNames = ({
+  styles,
+  index,
+  line,
+  highlightedLines,
+  selectedBlockStartLine,
+  selectedBlockLength,
+  selectedBlockType,
+}: getClassNamesProps): string => {
+  const isHighlighted = highlightedLines.includes(index) ? styles.newLine : '';
+  const isInSelectedBlock =
+    selectedBlockStartLine &&
+    selectedBlockLength &&
+    index + 1 >= selectedBlockStartLine &&
+    index + 1 < selectedBlockStartLine + selectedBlockLength
+      ? styles.blockHighlight
+      : '';
+  const isOfSelectedType =
+    selectedBlockType && line.includes(selectedBlockType) ? styles.highlightBg : '';
+
+  return `${isHighlighted} ${isInSelectedBlock} ${isOfSelectedType}`.trim();
+};
diff --git a/apps/client/src/shared/code-highlighter/utils/getLineNumberClass.ts b/apps/client/src/shared/code-highlighter/utils/getLineNumberClass.ts
new file mode 100644
index 0000000..7a1fbd1
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/utils/getLineNumberClass.ts
@@ -0,0 +1,13 @@
+/**
+ *
+ * @description
+ * 각 라인넘버에 클래스명을 할당하는 함수
+ */
+export const getLineNumberClass = (
+  baseClass: string,
+  highlightClass: string,
+  lineNumber: number,
+  hoveredLineNumber: number | null
+): string => {
+  return `${baseClass} ${hoveredLineNumber === lineNumber ? highlightClass : ''}`.trim();
+};
diff --git a/apps/client/src/shared/code-highlighter/utils/getParsedCodeLineList.ts b/apps/client/src/shared/code-highlighter/utils/getParsedCodeLineList.ts
new file mode 100644
index 0000000..5e3edab
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/utils/getParsedCodeLineList.ts
@@ -0,0 +1,21 @@
+import { parseHighlightHtml, parseHighlightCss } from '../utils';
+import { getParsedCodeLineListProps } from '../types';
+
+/**
+ *
+ * @description
+ * 코드를 파싱후 라인들을 배열로 반환하는 함수
+ */
+export const getParsedCodeLineList = ({
+  code,
+  type,
+  styles,
+  selectedBlockType,
+}: getParsedCodeLineListProps): string[] => {
+  const parsedCode =
+    type === 'html'
+      ? parseHighlightHtml(code, styles, selectedBlockType || '')
+      : parseHighlightCss(code, styles, selectedBlockType || '');
+
+  return parsedCode.split('\n').filter((line) => line.trim() !== '');
+};
diff --git a/apps/client/src/shared/code-highlighter/utils/getViewerClassNames.ts b/apps/client/src/shared/code-highlighter/utils/getViewerClassNames.ts
new file mode 100644
index 0000000..d01a685
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/utils/getViewerClassNames.ts
@@ -0,0 +1,10 @@
+import { getViewerClassNamesProps } from '../types';
+
+/**
+ *
+ * @description
+ * 클래스명을 할당하는 함수
+ */
+export const getViewerClassNames = ({ styles, theme, currentStep }: getViewerClassNamesProps) => {
+  return `${styles.viewer} ${theme === 'dark' ? styles.dark : styles.light} ${currentStep === 3 ? 'z-[200] bg-white' : ''}`;
+};
diff --git a/apps/client/src/shared/code-highlighter/utils/index.ts b/apps/client/src/shared/code-highlighter/utils/index.ts
new file mode 100644
index 0000000..7e0ad87
--- /dev/null
+++ b/apps/client/src/shared/code-highlighter/utils/index.ts
@@ -0,0 +1,6 @@
+export { getClassNames } from './getClassNames';
+export { getLineNumberClass } from './getLineNumberClass';
+export { getParsedCodeLineList } from './getParsedCodeLineList';
+export { getViewerClassNames } from './getViewerClassNames';
+export { parseHighlightCss } from './parseHighlightCss';
+export { parseHighlightHtml } from './parseHighlightHtml';
diff --git a/apps/client/src/shared/code-highlighter/utils/parseHighlightCss.ts b/apps/client/src/shared/code-highlighter/utils/parseHighlightCss.ts
index 1d79662..3e332bf 100644
--- a/apps/client/src/shared/code-highlighter/utils/parseHighlightCss.ts
+++ b/apps/client/src/shared/code-highlighter/utils/parseHighlightCss.ts
@@ -1,10 +1,16 @@
+/**
+ *
+ * @description
+ * 주어진 CSS 코드에 하이라이트 스타일을 적용하여 변환
+ */
 export const parseHighlightCss = (
   css: string,
   styles: Record<string, string>,
   selectedBlockType: string | null
 ) => {
   const lines = css.split('\n');
-  let isWithinBlock = false; // 블록 내부인지 추적
+  // 블록 내부인지 추적
+  let isWithinBlock = false;
 
   const formattedCss = lines
     .map((line) => {
diff --git a/apps/client/src/shared/code-highlighter/utils/parseHighlightHtml.ts b/apps/client/src/shared/code-highlighter/utils/parseHighlightHtml.ts
index 84ca2a5..f79f0db 100644
--- a/apps/client/src/shared/code-highlighter/utils/parseHighlightHtml.ts
+++ b/apps/client/src/shared/code-highlighter/utils/parseHighlightHtml.ts
@@ -1,3 +1,8 @@
+/**
+ *
+ * @description
+ * 주어진 HTML 코드에 하이라이트 스타일을 적용하여 변환
+ */
 export const parseHighlightHtml = (
   html: string,
   styles: Record<string, string>,
diff --git a/apps/client/src/shared/hooks/capturePreview.worker.ts b/apps/client/src/shared/hooks/capturePreview.worker.ts
new file mode 100644
index 0000000..a75fb84
--- /dev/null
+++ b/apps/client/src/shared/hooks/capturePreview.worker.ts
@@ -0,0 +1,32 @@
+self.onmessage = async (event) => {
+  const { imageData, width, height } = event.data;
+
+  if (!imageData) {
+    self.postMessage({ error: '받은 이미지 데이터가 없습니다' });
+    return;
+  }
+
+  try {
+    const offscreenCanvas = new OffscreenCanvas(width, height);
+    const ctx = offscreenCanvas.getContext('2d');
+
+    if (!ctx) {
+      throw new Error('OffscreenCanvas 컨텍스트가 없음');
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+
+    const blob = await offscreenCanvas.convertToBlob({ type: 'image/webp', quality: 0.8 });
+
+    if (!blob) {
+      self.postMessage({ error: 'Blob 생성 실패' });
+      return;
+    }
+
+    const thumbnail = new File([blob], 'thumbnail.webp', { type: 'image/webp' });
+
+    self.postMessage({ thumbnail });
+  } catch (error) {
+    self.postMessage({ error: error });
+  }
+};
diff --git a/apps/client/src/shared/hooks/css/useCssClassList.ts b/apps/client/src/shared/hooks/css/useCssClassList.ts
new file mode 100644
index 0000000..ab1baec
--- /dev/null
+++ b/apps/client/src/shared/hooks/css/useCssClassList.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+import { TOption } from '@/shared/types';
+import { useClassBlockStore } from '@/shared/store';
+
+export const useCssClassList = () => {
+  const { classBlockList } = useClassBlockStore();
+  const [cssClassList, setCssClassList] = useState<string[]>([]);
+
+  useEffect(() => {
+    setCssClassList(classBlockList);
+  }, [classBlockList]);
+
+  const selectOptions: TOption[] = [
+    { value: '', label: '클래스를 선택해주세요' },
+    ...cssClassList.map((cssClass) => ({
+      value: cssClass,
+      label: cssClass,
+    })),
+  ];
+
+  return { selectOptions };
+};
diff --git a/apps/client/src/shared/hooks/css/useCssOptionItem.ts b/apps/client/src/shared/hooks/css/useCssOptionItem.ts
index b211e2c..431fa38 100644
--- a/apps/client/src/shared/hooks/css/useCssOptionItem.ts
+++ b/apps/client/src/shared/hooks/css/useCssOptionItem.ts
@@ -1,13 +1,14 @@
-import { useCssPropsStore, useCssTooltipStore } from '@/shared/store';
 import { useEffect, useState } from 'react';
 
 import { TCssCategoryItem } from '@/shared/types';
 import { useCssOptions } from '@/shared/hooks';
+import { useCssPropsStore } from '@/shared/store';
 
 export const useCssOptionItem = (cssItem: TCssCategoryItem) => {
   const { handleCssOptionChange } = useCssOptions();
-  const { setOffsetX, setOffsetY } = useCssTooltipStore();
-  const { currentCssClassName, totalCssPropertyObj, selectedCssCategory } = useCssPropsStore();
+  const currentCssClassName = useCssPropsStore((state) => state.currentCssClassName);
+  const totalCssPropertyObj = useCssPropsStore((state) => state.totalCssPropertyObj);
+  const selectedCssCategory = useCssPropsStore((state) => state.selectedCssCategory);
 
   const [cssOptionValue, setCssOptionValue] = useState<string>('');
   const [isHover, setIsHover] = useState<boolean>(false);
@@ -18,6 +19,9 @@ export const useCssOptionItem = (cssItem: TCssCategoryItem) => {
     cssItem.type === 'select' && cssItem.option!.length > 0 ? cssItem.option![0] : ''
   );
 
+  const [offsetX, setOffsetX] = useState<number>(0);
+  const [offsetY, setOffsetY] = useState<number>(0);
+
   useEffect(() => {
     if (totalCssPropertyObj[currentCssClassName]) {
       setCssOptionValue(totalCssPropertyObj[currentCssClassName].cssOptionObj[cssItem.label] || '');
@@ -84,5 +88,7 @@ export const useCssOptionItem = (cssItem: TCssCategoryItem) => {
     handleMouseEnter,
     handleMouseLeave,
     handleChangeInputValue,
+    offsetX,
+    offsetY,
   };
 };
diff --git a/apps/client/src/shared/hooks/css/useCssOptions.ts b/apps/client/src/shared/hooks/css/useCssOptions.ts
index 3f80fcd..dfd31ee 100644
--- a/apps/client/src/shared/hooks/css/useCssOptions.ts
+++ b/apps/client/src/shared/hooks/css/useCssOptions.ts
@@ -4,7 +4,10 @@ import { debounce } from '@/shared/utils';
 import { useCallback } from 'react';
 
 export const useCssOptions = () => {
-  const { setCheckedCssPropertyObj, setCssOptionObj, currentCssClassName } = useCssPropsStore();
+  const setCheckedCssPropertyObj = useCssPropsStore((state) => state.setCheckedCssPropertyObj);
+  const setCssOptionObj = useCssPropsStore((state) => state.setCssOptionObj);
+  const currentCssClassName = useCssPropsStore((state) => state.currentCssClassName);
+
   const { setIsCssChanged } = useWorkspaceChangeStatusStore();
   const handleCssPropertyCheckboxChange = (
     property: string,
diff --git a/apps/client/src/shared/hooks/css/useCssTooltip.ts b/apps/client/src/shared/hooks/css/useCssTooltip.ts
index 3646e7e..f39235c 100644
--- a/apps/client/src/shared/hooks/css/useCssTooltip.ts
+++ b/apps/client/src/shared/hooks/css/useCssTooltip.ts
@@ -1,21 +1,27 @@
-import { useCssTooltipStore } from '@/shared/store';
-import { useEffect } from 'react';
-import { useWindowSize } from '@/shared/hooks';
+import { useLayoutEffect, useRef, useState } from 'react';
 
-export const useCssTooltip = () => {
-  const { leftX, topY, offsetX, offsetY, setLeftX, setTopY } = useCssTooltipStore();
+import { useWindowSize } from '@/shared/hooks';
 
-  const { screenWidth, screenHeight } = useWindowSize();
+export const useCssTooltip = (leftX: number, topY: number) => {
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+  const [tooltipHeight, setTooltipHeight] = useState<number>(0);
+  const { screenHeight } = useWindowSize();
 
-  useEffect(() => {
-    const tooltipHeight = 40;
-    setLeftX(offsetX);
-    if (offsetY + tooltipHeight > screenHeight) {
-      setTopY(-offsetY + tooltipHeight); // 높이를 벗어나는 것임
-    } else {
-      setTopY(offsetY);
+  useLayoutEffect(() => {
+    if (tooltipRef.current) {
+      setTooltipHeight(tooltipRef.current.getBoundingClientRect().height);
     }
-  }, [offsetX, offsetY, screenWidth, screenHeight]);
+    return () => setTooltipHeight(0);
+  }, [tooltipRef.current]);
+
+  let tooltipX = leftX;
+  let tooltipY = 0;
+
+  if (topY + tooltipHeight > screenHeight) {
+    tooltipY = -topY + tooltipHeight;
+  } else {
+    tooltipY = topY;
+  }
 
-  return { leftX, topY };
+  return { tooltipX, tooltipY, tooltipRef };
 };
diff --git a/apps/client/src/shared/hooks/index.ts b/apps/client/src/shared/hooks/index.ts
index adaa1f7..4ec1df7 100644
--- a/apps/client/src/shared/hooks/index.ts
+++ b/apps/client/src/shared/hooks/index.ts
@@ -10,6 +10,7 @@ export { useDeleteImage } from './queries/useDeleteImage';
 export { useCssTooltip } from './css/useCssTooltip';
 export { useCssOptions } from './css/useCssOptions';
 export { useCssOptionItem } from './css/useCssOptionItem';
+export { useCssClassList } from './css/useCssClassList';
 
 export { workspaceKeys } from './query-key/workspaceKeys';
 
diff --git a/apps/client/src/shared/hooks/queries/useGetWorkspace.ts b/apps/client/src/shared/hooks/queries/useGetWorkspace.ts
index f238d33..5a2c466 100644
--- a/apps/client/src/shared/hooks/queries/useGetWorkspace.ts
+++ b/apps/client/src/shared/hooks/queries/useGetWorkspace.ts
@@ -17,13 +17,14 @@ import { workspaceKeys } from '@/shared/hooks';
 export const useGetWorkspace = (workspaceId: string) => {
   const workspaceApi = WorkspaceApi();
   const userId = getUserId() || createUserId();
-  const { initCssPropertyObj } = useCssPropsStore();
+  const initCssPropertyObj = useCssPropsStore((state) => state.initCssPropertyObj);
   const { initClassBlockList } = useClassBlockStore();
   const { setCanvasInfo, setName } = useWorkspaceStore();
   const { resetChangedStatusState } = useWorkspaceChangeStatusStore();
   const { setIsResetCssChecked } = useResetCssStore();
   const { setInitialImageMap, setInitialImageList } = useImageModalStore();
-  const { data, isPending, isError } = useSuspenseQuery({
+  const { data, isError } = useSuspenseQuery({
+
     queryKey: workspaceKeys.detail(workspaceId),
     queryFn: () => {
       resetChangedStatusState();
@@ -55,5 +56,4 @@ export const useGetWorkspace = (workspaceId: string) => {
     setInitialImageMap(data.workspaceDto.imageMap);
     setInitialImageList(data.workspaceDto.imageList);
   }, [isError, data]);
-  return { data, isPending, isError };
 };
diff --git a/apps/client/src/shared/hooks/queries/useSaveWorkspace.ts b/apps/client/src/shared/hooks/queries/useSaveWorkspace.ts
index a331bad..0d2611b 100644
--- a/apps/client/src/shared/hooks/queries/useSaveWorkspace.ts
+++ b/apps/client/src/shared/hooks/queries/useSaveWorkspace.ts
@@ -42,7 +42,6 @@ export const useSaveWorkspace = (workspaceId: string) => {
     onSuccess: () => {
       resetChangedStatusState();
       queryClient.invalidateQueries({ queryKey: workspaceKeys.list() });
-      toast.success('성공적으로 저장되었습니다.');
     },
     onError: () => {
       toast.error('저장에 실패했습니다.');
diff --git a/apps/client/src/shared/hooks/usePreventLeaveWorkspacePage.ts b/apps/client/src/shared/hooks/usePreventLeaveWorkspacePage.ts
index de4c4ad..16b1ad7 100644
--- a/apps/client/src/shared/hooks/usePreventLeaveWorkspacePage.ts
+++ b/apps/client/src/shared/hooks/usePreventLeaveWorkspacePage.ts
@@ -1,8 +1,10 @@
 import { useBlocker } from 'react-router-dom';
 import { useEffect } from 'react';
 import { useWorkspaceChangeStatusStore } from '@/shared/store';
+import { useWorkspaceSave } from './useWorkspaceSave';
 
 export const usePreventLeaveWorkspacePage = () => {
+  const { handleSave } = useWorkspaceSave();
   const { isBlockChanged, isCssChanged } = useWorkspaceChangeStatusStore();
   const blocker = useBlocker(
     ({ currentLocation, nextLocation }) =>
@@ -12,35 +14,21 @@ export const usePreventLeaveWorkspacePage = () => {
   const promptOfLeavePage = `저장하지 않은 변경사항이 있습니다. 정말로 떠나시겠습니까?`;
   useEffect(() => {
     if (blocker.state === 'blocked') {
-      const confirmLeave = window.confirm(promptOfLeavePage);
-      if (confirmLeave) {
-        blocker.proceed();
-      } else {
-        blocker.reset();
-      }
+      handleSave();
     }
   }, [blocker.state, isBlockChanged, isCssChanged]);
 
   const handleBeforeUnload = (e: Event) => {
-    e.preventDefault();
-  };
-
-  const onPreventLeave = () => {
-    window.addEventListener('beforeunload', handleBeforeUnload);
-  };
-
-  const offPreventLeave = () => {
-    window.removeEventListener('beforeunload', handleBeforeUnload);
-  };
-
-  useEffect(() => {
     if (isBlockChanged || isCssChanged) {
-      onPreventLeave();
+      e.preventDefault();
+      alert(promptOfLeavePage);
     } else {
-      offPreventLeave();
+      handleSave();
     }
-    return () => {
-      offPreventLeave();
-    };
+  };
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return window.removeEventListener('beforeunload', handleBeforeUnload);
   }, [isBlockChanged, isCssChanged]);
 };
diff --git a/apps/client/src/shared/hooks/useWorkspaceSave.ts b/apps/client/src/shared/hooks/useWorkspaceSave.ts
new file mode 100644
index 0000000..fc3ebaf
--- /dev/null
+++ b/apps/client/src/shared/hooks/useWorkspaceSave.ts
@@ -0,0 +1,82 @@
+import * as Blockly from 'blockly/core';
+
+import { useCssPropsStore, useResetCssStore, useWorkspaceStore } from '@/shared/store';
+import { convertToCanvas, trackEvent } from '@/shared/utils';
+import { cssStyleToolboxConfig } from '@/shared/blockly';
+import toast from 'react-hot-toast';
+import { useParams } from 'react-router-dom';
+import { useSaveWorkspace } from '@/shared/hooks';
+import { useState } from 'react';
+
+const debounce = (callback: (...args: any[]) => void, delay: number) => {
+  let timer: number;
+
+  return (...args: any[]) => {
+    clearTimeout(timer);
+    timer = window.setTimeout(() => {
+      callback(...args);
+    }, delay);
+  };
+};
+
+export const useWorkspaceSave = () => {
+  const workspaceId = useParams().workspaceId as string;
+  const { mutate: saveWorkspace, isPending } = useSaveWorkspace(workspaceId);
+  const { totalCssPropertyObj } = useCssPropsStore();
+  const { workspace } = useWorkspaceStore();
+  const { isResetCssChecked } = useResetCssStore();
+  const [isCapture, setIsCapture] = useState<boolean>(false);
+
+  const handleSave = async () => {
+    trackEvent('workspace_saved');
+    try {
+      setIsCapture(true);
+      const canvas = await convertToCanvas();
+      const ctx = canvas.getContext('2d');
+      const imageData = ctx!.getImageData(0, 0, canvas.width, canvas.height);
+
+      const worker = new Worker(new URL('./capturePreview.worker.ts', import.meta.url), {
+        type: 'module',
+      });
+
+      worker.postMessage({
+        imageData,
+        width: canvas.width,
+        height: canvas.height,
+      });
+
+      worker.onmessage = (event) => {
+        if (event.data.error) {
+          setIsCapture(false);
+          return;
+        }
+
+        const { thumbnail } = event.data;
+        const serialized = Blockly.serialization.workspaces.save(workspace!) as any;
+
+        saveWorkspace({
+          totalCssPropertyObj,
+          canvas: serialized,
+          classBlockList: cssStyleToolboxConfig.contents,
+          cssResetStatus: isResetCssChecked,
+          thumbnail,
+        });
+        worker.terminate();
+      };
+    } catch (error) {
+      if (error && typeof error == 'string') {
+        toast.error(error);
+      }
+    } finally {
+      setIsCapture(false);
+    }
+  };
+
+  const debouncedHandleSave = debounce(handleSave, 3000);
+
+  return {
+    handleSave: debouncedHandleSave,
+    isPending,
+    isCapture,
+  };
+};
diff --git a/apps/client/src/shared/store/index.ts b/apps/client/src/shared/store/index.ts
index d80a039..a9c3283 100644
--- a/apps/client/src/shared/store/index.ts
+++ b/apps/client/src/shared/store/index.ts
@@ -1,7 +1,6 @@
 export { useLoadingStore } from './useLoadingStore';
 export { useModalStore } from './useModalStore';
 export { useCssPropsStore } from './useCssPropsStore';
-export { useCssTooltipStore } from './useCssTooptipStore';
 export { useClassBlockStore } from './useClassBlockStore';
 export { useWorkspaceChangeStatusStore } from './useWorkspaceChangeStatusStore';
 export { useBlocklyWorkspaceStore } from './useBlocklyWorkspaceStore';
diff --git a/apps/client/src/shared/store/useCssPropsStore.ts b/apps/client/src/shared/store/useCssPropsStore.ts
index 4c1b667..b7cbce7 100644
--- a/apps/client/src/shared/store/useCssPropsStore.ts
+++ b/apps/client/src/shared/store/useCssPropsStore.ts
@@ -1,6 +1,7 @@
+import { removeCssClassNamePrefix, trackEvent } from '../utils';
+
 import { TTotalCssPropertyObj } from '@/shared/types';
 import { create } from 'zustand';
-import { removeCssClassNamePrefix, trackEvent } from '../utils';
 
 type TcssProps = {
   currentCssClassName: string;
diff --git a/apps/client/src/shared/store/useCssTooptipStore.ts b/apps/client/src/shared/store/useCssTooptipStore.ts
deleted file mode 100644
index 257cf98..0000000
--- a/apps/client/src/shared/store/useCssTooptipStore.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { create } from 'zustand';
-
-type TCssTooltip = {
-  offsetX: number;
-  offsetY: number;
-  leftX: number;
-  topY: number;
-
-  setOffsetX: (offsetX: number) => void;
-  setOffsetY: (offsetY: number) => void;
-  setLeftX: (leftX: number) => void;
-  setTopY: (topY: number) => void;
-};
-
-export const useCssTooltipStore = create<TCssTooltip>((set) => ({
-  offsetX: -1,
-  offsetY: -1,
-  leftX: 0,
-  topY: 0,
-  setOffsetX: (offsetX) => set({ offsetX }),
-  setOffsetY: (offsetY) => set({ offsetY }),
-  setLeftX: (leftX) => set({ leftX }),
-  setTopY: (topY) => set({ topY }),
-}));
diff --git a/apps/client/src/shared/types/customSelectType.ts b/apps/client/src/shared/types/customSelectType.ts
new file mode 100644
index 0000000..0e51260
--- /dev/null
+++ b/apps/client/src/shared/types/customSelectType.ts
@@ -0,0 +1,10 @@
+export enum SelectSize {
+  SMALL = 'SMALL',
+
+  MEDIUM = 'MEDIUM',
+}
+
+export type TOption = {
+  value: string;
+  label: string;
+};
diff --git a/apps/client/src/shared/types/index.ts b/apps/client/src/shared/types/index.ts
index ad5afbc..a0d5a3e 100644
--- a/apps/client/src/shared/types/index.ts
+++ b/apps/client/src/shared/types/index.ts
@@ -18,3 +18,5 @@ export type { TTabConfig, TTabsConfig, TTabToolboxConfig } from './tabType';
 export type { TBlock, TToolboxConfig } from './styleToolboxType';
 export type { TButtonContent } from './modalButtonType';
 export type { TImage } from './imageTagType';
+export type { TOption } from './customSelectType';
+export { SelectSize } from './customSelectType';
diff --git a/apps/client/src/shared/ui/index.ts b/apps/client/src/shared/ui/index.ts
index 92d3cc6..03b9b6b 100644
--- a/apps/client/src/shared/ui/index.ts
+++ b/apps/client/src/shared/ui/index.ts
@@ -14,5 +14,4 @@ export { DelayedFallback } from './loading/DelayedFallback';
 export { SkeletonWorkspace } from './skeleton/SkeletonWorkspace';
 export { SkeletonWorkspaceList } from './skeleton/SkeletonWorkspaceList';
 
-export { Select, SelectSize } from './select/Select';
-export type { TOption } from './select/Select';
+export { Select } from './select/Select';
diff --git a/apps/client/src/shared/ui/logo/Logo.tsx b/apps/client/src/shared/ui/logo/Logo.tsx
index 43ac2b0..7b0f8de 100644
--- a/apps/client/src/shared/ui/logo/Logo.tsx
+++ b/apps/client/src/shared/ui/logo/Logo.tsx
@@ -1,6 +1,7 @@
 import BlackLogoText from '@/shared/assets/boolock_logo_black.svg?react';
 import { Link } from 'react-router-dom';
 import WhiteLogoText from '@/shared/assets/boolock_logo_white.svg?react';
+import { memo } from 'react';
 
 type LogoProps = {
   isBlack: boolean;
@@ -11,7 +12,7 @@ type LogoProps = {
  * @description
  * 로고 컴포넌트 (흰색/검은색), 클릭 시 홈페이지로 이동
  */
-export const Logo = ({ isBlack }: LogoProps) => {
+export const Logo = memo(({ isBlack }: LogoProps) => {
   return (
     <Link to="/">
       <div className="flex items-center gap-3">
@@ -25,4 +26,4 @@ export const Logo = ({ isBlack }: LogoProps) => {
       </div>
     </Link>
   );
-};
+});
diff --git a/apps/client/src/shared/ui/select/Select.tsx b/apps/client/src/shared/ui/select/Select.tsx
index 35f48a0..76fcd91 100644
--- a/apps/client/src/shared/ui/select/Select.tsx
+++ b/apps/client/src/shared/ui/select/Select.tsx
@@ -1,20 +1,10 @@
+import { SelectSize, TOption } from '@/shared/types';
 import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { useWindowSize } from '@/shared/hooks';
+
 import ArrowDown from '@/shared/assets/arrow_down.svg?react';
 import ArrowUp from '@/shared/assets/arrow_up.svg?react';
-
-export enum SelectSize {
-  // eslint-disable-next-line no-unused-vars
-  SMALL = 'SMALL',
-  // eslint-disable-next-line no-unused-vars
-  MEDIUM = 'MEDIUM',
-}
-
-export type TOption = {
-  value: string;
-  label: string;
-};
+import { createPortal } from 'react-dom';
+import { useWindowSize } from '@/shared/hooks';
 
 interface SelectProps {
   id?: string;
diff --git a/apps/client/src/shared/utils/capturePreview.ts b/apps/client/src/shared/utils/capturePreview.ts
deleted file mode 100644
index 14e440f..0000000
--- a/apps/client/src/shared/utils/capturePreview.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useIframeStore, useResetCssStore } from '@/shared/store';
-
-import { IFRAME_ERROR_MESSAGE } from '@/shared/utils';
-import html2canvas from 'html2canvas';
-
-export const capturePreview = async () => {
-  const isResetCssChecked = useResetCssStore.getState().isResetCssChecked;
-
-  const previewIframe = useIframeStore.getState().iframeRef?.current;
-
-  if (!previewIframe) {
-    throw new Error(IFRAME_ERROR_MESSAGE.SELECT_PREVIEW_TAB);
-  }
-  const previewDocument = previewIframe?.contentDocument || previewIframe?.contentWindow?.document;
-  if (!previewDocument) {
-    throw new Error(IFRAME_ERROR_MESSAGE.FAIL_TO_SAVE);
-  }
-
-  /**
-   * iframe의 body 태그를 div 태그로 변경하여 html2canvas로 캡쳐할 수 있도록 설정
-   */
-  const previewHtml = previewDocument.documentElement.outerHTML
-    .replace('<body', '<div style="width: 100%; height: 100%;"')
-    .replace('</body>', '</div>');
-  const div = document.createElement('div'); // iframe의 내용을 담을 div 생성
-  if (isResetCssChecked) {
-    div.classList.add('reset-css');
-
-    /**
-     * 만약 reset css를 적용한 경우, reset-css 클래스를 추가하여 reset css 적용
-     * 하지만 reset-css 클래스 사용 시 css 특이성 문제로 인해 기존 css 클래스들이적용되지 않는 경우가 발생함
-     * 그래서 해당 문제를 해결하기 위해 기존 css 클래스들에 대한 특이성을 높이기 위해
-     * .reset-css 클래스를 부모 클래스로 설정하여 특이성 문제를 해결
-     */
-    div.innerHTML = previewHtml
-      .replace('<style>', '<style>.reset-css {')
-      .replace('</style>', '} </style>') as Element['outerHTML'];
-  } else {
-    div.innerHTML = previewHtml || '';
-  }
-
-  /*
-   * div를 화면 밖에서 렌더링하도록 설정 (화면에 보이지 않도록)
-   * z-index를 -1로 설정하여 화면에 보이지 않도록 설정
-   */
-  div.style.position = 'absolute';
-  div.style.top = '-9999px';
-  div.style.zIndex = '-1';
-  div.style.width = '800px';
-  div.style.height = '800px';
-  document.body.appendChild(div);
-  const canvas = await html2canvas(div, { useCORS: true, logging: true, scale: 2, width: 800 });
-  document.body.removeChild(div);
-  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/webp'));
-  const thumbnail = new File([blob as Blob], 'thumbnail.webp', { type: 'image/webp' });
-  return thumbnail;
-};
diff --git a/apps/client/src/shared/utils/convertToCanvas.ts b/apps/client/src/shared/utils/convertToCanvas.ts
new file mode 100644
index 0000000..073c783
--- /dev/null
+++ b/apps/client/src/shared/utils/convertToCanvas.ts
@@ -0,0 +1,36 @@
+import { useIframeStore } from '@/shared/store';
+
+import { IFRAME_ERROR_MESSAGE } from '@/shared/utils';
+import html2canvas from 'html2canvas';
+
+export const convertToCanvas = async () => {
+  const previewIframe = useIframeStore.getState().iframeRef?.current;
+
+  if (!previewIframe) {
+    throw new Error(IFRAME_ERROR_MESSAGE.SELECT_PREVIEW_TAB);
+  }
+  const previewDocument = previewIframe?.contentDocument || previewIframe?.contentWindow?.document;
+  if (!previewDocument) {
+    throw new Error(IFRAME_ERROR_MESSAGE.FAIL_TO_SAVE);
+  }
+
+  const previewY = previewIframe.getBoundingClientRect().y;
+
+  const canvas = await html2canvas(previewDocument.documentElement, {
+    useCORS: true,
+    logging: true,
+    allowTaint: true,
+    imageTimeout: 20000,
+    proxy: 'https://boolock-storage.kr.object.ncloudstorage.com/',
+    scale: 2,
+    width: previewIframe.clientWidth,
+    height: previewIframe.clientWidth,
+    ignoreElements: (element) => {
+      if (!element || !element.getBoundingClientRect) return true;
+      const rect = element.getBoundingClientRect();
+
+      return rect.y - previewY > previewIframe.clientWidth;
+    },
+  });
+  return canvas;
+};
diff --git a/apps/client/src/shared/utils/index.ts b/apps/client/src/shared/utils/index.ts
index e31b41b..160ef74 100644
--- a/apps/client/src/shared/utils/index.ts
+++ b/apps/client/src/shared/utils/index.ts
@@ -13,7 +13,7 @@ export {
 export { debounce } from './debounce';
 export { cssCategoryList } from './cssCategoryList';
 export { hasField } from './typeGuard';
-export { capturePreview } from './capturePreview';
+export { convertToCanvas } from './convertToCanvas';
 export { coachMarkContent } from './coachMarkContent';
 export { IFRAME_ERROR_MESSAGE } from './iframeErrorMessage';
 export { exportPreviewHtml } from './exportPreviewHtml';
diff --git a/apps/client/src/widgets/workspace/PreviewBox/PreviewBox.tsx b/apps/client/src/widgets/workspace/PreviewBox/PreviewBox.tsx
index 308a9eb..9bb2f3c 100644
--- a/apps/client/src/widgets/workspace/PreviewBox/PreviewBox.tsx
+++ b/apps/client/src/widgets/workspace/PreviewBox/PreviewBox.tsx
@@ -34,6 +34,7 @@ export const PreviewBox = ({
   const { currentStep } = useCoachMarkStore();
   const { setIframeRef } = useIframeStore();
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const scrollPosition = useRef<number>(0);
 
   const googleFontsLinksCode = `
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -41,10 +42,13 @@ export const PreviewBox = ({
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css" />
     <link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&family=Gothic+A1:wght@300;400;700&family=IBM+Plex+Sans+KR:wght@300;400;700&family=Nanum+Gothic:wght@400;700&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@200..900&display=swap" rel="stylesheet" />
   `;
-  const finalCssCode = isResetCssChecked ? `${resetCss}\n${cssCode}` : cssCode;
-  const styleCode = `<style> * { box-sizing : border-box; margin : 0; padding : 0; ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #cdd9e4; border-radius: 4px; } } html, head, body { width : 100%; height : 100%;  } ${finalCssCode}</style>`;
-  const indexOfHead = htmlCode.indexOf('</head>');
-  const totalCode = `${htmlCode.slice(0, indexOfHead)}${googleFontsLinksCode}${styleCode}${htmlCode.slice(indexOfHead)}`;
+
+  function getTotalCode() {
+    const finalCssCode = isResetCssChecked ? `${resetCss}\n${cssCode}` : cssCode;
+    const styleCode = `<style> * { box-sizing : border-box; margin : 0; padding : 0; ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #cdd9e4; border-radius: 4px; } } html, head, body { width : 100%; height : 100%;  } ${finalCssCode}</style>`;
+    const indexOfHead = htmlCode.indexOf('</head>');
+    return `${htmlCode.slice(0, indexOfHead)}${googleFontsLinksCode}${styleCode}${htmlCode.slice(indexOfHead)}`;
+  }
 
   useEffect(() => {
     if (iframeRef.current) {
@@ -52,6 +56,27 @@ export const PreviewBox = ({
     }
   }, [iframeRef]);
 
+  useEffect(() => {
+    if (iframeRef.current?.contentWindow) {
+      scrollPosition.current = iframeRef.current.contentWindow.scrollY;
+    }
+
+    if (iframeRef.current) {
+      const iframeDocument = iframeRef.current.contentDocument;
+      if (iframeDocument) {
+        iframeDocument.open();
+        iframeDocument.write(getTotalCode());
+        iframeDocument.close();
+
+        iframeRef.current.onload = async () => {
+          if (iframeRef.current && iframeRef.current.contentWindow) {
+            iframeRef.current.contentWindow.scrollTo(0, scrollPosition.current);
+          }
+        };
+      }
+    }
+  }, [isResetCssChecked, htmlCode, cssCode]);
+
   // TODO: 상수 분리한 후 재사용성 높이기
   /* eslint-disable */
   const copyToClipboard = async (copyText: string, label: string) => {
@@ -118,7 +143,7 @@ export const PreviewBox = ({
         {activeTab === 'preview' && (
           <iframe
             ref={iframeRef}
-            srcDoc={totalCode}
+            srcDoc={getTotalCode()}
             className="h-full w-full"
             title="Preview"
             sandbox="allow-same-origin allow-scripts allow-popups allow-top-navigation-by-user-activation"
diff --git a/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx b/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx
index d030836..1ddcd8e 100644
--- a/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx
+++ b/apps/client/src/widgets/workspace/WorkspaceContent/WorkspaceContent.tsx
@@ -17,6 +17,7 @@ import {
   removeBlockIdFromCode,
   tabToolboxConfig,
 } from '@/shared/blockly';
+import { removeCssClassNamePrefix, trackEvent } from '@/shared/utils';
 import {
   useClassBlockStore,
   useCssPropsStore,
@@ -31,7 +32,7 @@ import FixedFlyout from '@/core/fixedFlyout';
 import TabbedToolbox from '@/core/tabbedToolbox';
 import { customTooltip } from '@/core/customTooltip';
 import { registerCustomComponents } from '@/core/register';
-import { removeCssClassNamePrefix, trackEvent } from '@/shared/utils';
+import { useWorkspaceSave } from '@/shared/hooks/useWorkspaceSave';
 
 for (const blockType in Blockly.Blocks) {
   if (Object.prototype.hasOwnProperty.call(Blockly.Blocks, blockType)) {
@@ -68,15 +69,16 @@ Blockly.WorkspaceSvg.prototype.addTrashcan = function () {
 export const WorkspaceContent = () => {
   const [htmlCode, setHtmlCode] = useState<string>('');
   const [cssCode, setCssCode] = useState<string>('');
-  const { totalCssPropertyObj } = useCssPropsStore();
+  const totalCssPropertyObj = useCssPropsStore((state) => state.totalCssPropertyObj);
+  const setCurrentCssClassName = useCssPropsStore((state) => state.setCurrentCssClassName);
   const { workspace, setWorkspace, canvasInfo } = useWorkspaceStore();
-  const { setIsBlockChanged } = useWorkspaceChangeStatusStore();
-  const { setCurrentCssClassName } = useCssPropsStore();
+  const { isBlockChanged, isCssChanged, setIsBlockChanged } = useWorkspaceChangeStatusStore();
   const { findClassBlock } = useClassBlockStore();
   const [selectedBlockStartLine, setSelectedBlockStartLine] = useState<number>(0);
   const [selectedBlockLength, setSelectedBlockLength] = useState<number>(0);
   const [selectedBlockType, setSelectedBlockType] = useState<string | null>(null);
   const isBlockLoadingFinish = useRef<boolean>(false);
+  const { handleSave, isPending } = useWorkspaceSave();
 
   useEffect(() => {
     const newWorkspace = Blockly.inject('blocklyDiv', {
@@ -141,14 +143,16 @@ export const WorkspaceContent = () => {
         setHtmlCode(codeWithNoId);
       }
 
-      if (
-        event.type === Blockly.Events.VIEWPORT_CHANGE ||
-        event.type === Blockly.Events.BLOCK_DRAG ||
-        event.type === Blockly.Events.BLOCK_FIELD_INTERMEDIATE_CHANGE ||
-        (event.type === Blockly.Events.BLOCK_MOVE && isBlockLoadingFinish.current) ||
-        (event.type === Blockly.Events.BLOCK_DELETE && isBlockLoadingFinish.current)
-      ) {
-        setIsBlockChanged(true);
+      // workspace 변경에 따른 blockChange state 변경
+      if (isBlockLoadingFinish.current) {
+        if (
+          event.type === Blockly.Events.CREATE ||
+          event.type === Blockly.Events.BLOCK_CHANGE ||
+          event.type === Blockly.Events.BLOCK_MOVE ||
+          event.type === Blockly.Events.BLOCK_DELETE
+        ) {
+          setIsBlockChanged(true);
+        }
       }
 
       if (event.type === Blockly.Events.FINISHED_LOADING) {
@@ -237,6 +241,12 @@ export const WorkspaceContent = () => {
     };
   }, [workspace]);
 
+  useEffect(() => {
+    if ((isBlockChanged || isCssChanged) && !isPending) {
+      handleSave();
+    }
+  }, [handleSave, isPending, isBlockChanged, isCssChanged]);
+
   useEffect(() => {
     if (!workspace || !canvasInfo || canvasInfo.length === 0) {
       return;
diff --git a/apps/client/src/widgets/workspace/WorkspaceHeaderButtons/WorkspaceHeaderButtons.tsx b/apps/client/src/widgets/workspace/WorkspaceHeaderButtons/WorkspaceHeaderButtons.tsx
index 9471235..ff283a6 100644
--- a/apps/client/src/widgets/workspace/WorkspaceHeaderButtons/WorkspaceHeaderButtons.tsx
+++ b/apps/client/src/widgets/workspace/WorkspaceHeaderButtons/WorkspaceHeaderButtons.tsx
@@ -1,15 +1,19 @@
-import { CodeExportButton, RedoButton, SaveButton, UndoButton } from '@/entities';
+import { CodeExportButton, RedoButton, UndoButton } from '@/entities';
+import { memo } from 'react';
 
-import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
+type TWorkspaceHeaderButtons = {
+  currentStep: number;
+};
+
+export const WorkspaceHeaderButtons = memo(({ currentStep }: TWorkspaceHeaderButtons) => {
+  const buttonsClassName = `flex items-center gap-3 ${currentStep === 4 ? 'z-[99999]' : ''}`;
 
-export const WorkspaceHeaderButtons = () => {
-  const { currentStep } = useCoachMarkStore();
   return (
-    <div className={`flex items-center gap-3 ${currentStep === 4 ? 'z-[99999]' : ''}`}>
+    <div className={buttonsClassName}>
       <CodeExportButton />
-      <SaveButton />
+
       <UndoButton />
       <RedoButton />
     </div>
   );
-};
+});
diff --git a/apps/client/src/widgets/workspace/WorkspacePageHeader/WorkspacePageHeader.tsx b/apps/client/src/widgets/workspace/WorkspacePageHeader/WorkspacePageHeader.tsx
index 56e070b..6749885 100644
--- a/apps/client/src/widgets/workspace/WorkspacePageHeader/WorkspacePageHeader.tsx
+++ b/apps/client/src/widgets/workspace/WorkspacePageHeader/WorkspacePageHeader.tsx
@@ -1,33 +1,36 @@
-import { WorkspaceNameInput } from '@/entities';
+import { HelpButton, WorkspaceNameInput } from '@/entities';
 import { Logo } from '@/shared/ui';
 import { WorkspaceHeaderButtons } from '../WorkspaceHeaderButtons/WorkspaceHeaderButtons';
-import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
-import Question from '@/shared/assets/question.svg?react';
+import { memo } from 'react';
 
 /**
  *
  * @description
  * 워크스페이스 페이지 헤더 컴포넌트
  */
-export const WorkspacePageHeader = () => {
-  const { openCoachMark } = useCoachMarkStore();
 
-  return (
-    <div className="flex h-14 w-full flex-shrink-0 items-center justify-between border-b border-gray-100 bg-white pl-8 pr-4">
-      <div className="flex items-center gap-5">
-        <Logo isBlack={false} />
-        <WorkspaceNameInput />
-      </div>
-      <div className="flex gap-11">
-        <button
-          className="text-medium-rg hover flex items-center gap-1 text-gray-300 hover:text-gray-500"
-          onClick={openCoachMark}
-          aria-label="도움말 버튼"
-        >
-          도움말 <Question />
-        </button>
-        <WorkspaceHeaderButtons />
-      </div>
-    </div>
-  );
+type TWorkspacePageHeader = {
+  currentStep: number;
 };
+
+export const WorkspacePageHeader = memo(
+  ({ currentStep }: TWorkspacePageHeader) => {
+    return (
+      <div className="flex h-14 w-full flex-shrink-0 items-center justify-between border-b border-gray-100 bg-white pl-8 pr-4">
+        <div className="flex items-center gap-5">
+          <Logo isBlack={false} />
+          <WorkspaceNameInput />
+        </div>
+        <div className="flex gap-11">
+          <HelpButton />
+          <WorkspaceHeaderButtons currentStep={currentStep} />
+        </div>
+      </div>
+    );
+  },
+  (prevProps, nextProps) => {
+    const prevIsFour = prevProps.currentStep !== 4;
+    const nextIsFour = nextProps.currentStep !== 4;
+    return prevIsFour && nextIsFour;
+  }
+);
diff --git a/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx b/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx
index f0faf47..2e170fa 100644
--- a/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx
+++ b/apps/client/src/widgets/workspace/css/CssOptionItemList/CssOptionItemList.tsx
@@ -8,7 +8,7 @@ import { useCssPropsStore } from '@/shared/store';
  * CSS 속성을 설정할 수 있는 컴포넌트의 목록을 보여주는 컴포넌트
  */
 export const CssOptionItemList = () => {
-  const { selectedCssCategory } = useCssPropsStore();
+  const selectedCssCategory = useCssPropsStore((state) => state.selectedCssCategory);
 
   return (
     <article className="flex h-full w-full flex-col gap-4 overflow-y-auto p-3">
diff --git a/apps/client/src/widgets/workspace/css/CssPropsSelectBoxHeader/CssPropsSelectBoxHeader.tsx b/apps/client/src/widgets/workspace/css/CssPropsSelectBoxHeader/CssPropsSelectBoxHeader.tsx
index 21a5826..6b29b2d 100644
--- a/apps/client/src/widgets/workspace/css/CssPropsSelectBoxHeader/CssPropsSelectBoxHeader.tsx
+++ b/apps/client/src/widgets/workspace/css/CssPropsSelectBoxHeader/CssPropsSelectBoxHeader.tsx
@@ -1,7 +1,8 @@
-import { Select, TOption } from '@/shared/ui';
 import { addPrefixToCssClassName, removeCssClassNamePrefix } from '@/shared/utils';
-import { useClassBlockStore, useCssPropsStore } from '@/shared/store';
-import { useEffect, useState } from 'react';
+
+import { Select } from '@/shared/ui';
+import { useCssClassList } from '@/shared/hooks';
+import { useCssPropsStore } from '@/shared/store';
 
 /**
  *
@@ -9,22 +10,9 @@ import { useEffect, useState } from 'react';
  * CSS 클래스를 선택할 수 있는 헤더 컴포넌트
  */
 export const CssPropsSelectBoxHeader = () => {
-  const { currentCssClassName, setCurrentCssClassName } = useCssPropsStore();
-  const { classBlockList } = useClassBlockStore();
-  const [cssClassList, setCssClassList] = useState<string[]>([]);
-
-  useEffect(() => {
-    setCssClassList(classBlockList);
-  }, [classBlockList]);
-
-  const selectOptions: TOption[] = [
-    { value: '', label: '클래스를 선택해주세요' },
-    ...cssClassList.map((cssClass) => ({
-      value: cssClass,
-      label: cssClass,
-    })),
-  ];
-
+  const currentCssClassName = useCssPropsStore((state) => state.currentCssClassName);
+  const setCurrentCssClassName = useCssPropsStore((state) => state.setCurrentCssClassName);
+  const { selectOptions } = useCssClassList();
   return (
     <header className="py-border flex h-12 items-center justify-between border-b-yellow-500 bg-yellow-200 px-4">
       <p className="text-semibold-md text-gray-black truncate">CSS 클래스 속성 편집</p>
diff --git a/apps/client/test/nginx.conf b/apps/client/test/nginx.conf
new file mode 100644
index 0000000..2b4f390
--- /dev/null
+++ b/apps/client/test/nginx.conf
@@ -0,0 +1,28 @@
+server {
+    listen 80;
+
+    location / {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api/ {
+        proxy_pass http://backend:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_cache_bypass $http_upgrade;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    add_header X-Content-Type-Options nosniff;
+    add_header X-Frame-Options SAMEORIGIN;
+    add_header X-XSS-Protection "1; mode=block";
+
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_min_length 256;
+}
diff --git a/apps/client/vite.config.ts b/apps/client/vite.config.ts
index f55f965..12cd8e8 100644
--- a/apps/client/vite.config.ts
+++ b/apps/client/vite.config.ts
@@ -5,6 +5,9 @@ import react from '@vitejs/plugin-react';
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), svgr()],
+  worker: {
+    format: 'es',
+  },
   resolve: {
     alias: {
       '@': '/src',
diff --git a/apps/server/Dockerfile b/apps/server/Dockerfile
index 13d8ccd..116e845 100644
--- a/apps/server/Dockerfile
+++ b/apps/server/Dockerfile
@@ -1,4 +1,6 @@
-FROM base-image AS backend-build
+ARG DOCKERHUB_USERNAME
+ARG TYPE
+FROM ${DOCKERHUB_USERNAME}/base-image-${TYPE} AS backend-build
 
 WORKDIR /app/apps/server
 COPY ./apps/server .
diff --git a/docker-compose.test.yml b/docker-compose.test.yml
new file mode 100644
index 0000000..47fbae0
--- /dev/null
+++ b/docker-compose.test.yml
@@ -0,0 +1,12 @@
+services:
+  frontend:
+    image: ${DOCKERHUB_USERNAME}/boolock_client_test:latest
+    pull_policy: always
+    ports:
+      - '80:80'
+
+  backend:
+    image: ${DOCKERHUB_USERNAME}/boolock_server_test:latest
+    pull_policy: always
+    ports:
+      - '3000:3000'
diff --git a/docker-compose.yml b/docker-compose.yml
index 391d29c..12b06f6 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,30 +1,13 @@
 services:
-  base:
-    build:
-      context: .
-      dockerfile: Dockerfile.base
-    image: base-image
-    command: ['echo', 'Base image built']
-
   frontend:
-    build:
-      context: .
-      dockerfile: ./apps/client/Dockerfile
-      cache_from:
-        - base-image
-    depends_on:
-      - base
+    image: ${DOCKERHUB_USERNAME}/boolock_client_prod:latest
+    pull_policy: always
     ports:
       - '80:80'
       - '443:443'
 
   backend:
-    build:
-      context: .
-      dockerfile: ./apps/server/Dockerfile
-      cache_from:
-        - base-image
-    depends_on:
-      - base
+    image: ${DOCKERHUB_USERNAME}/boolock_server_prod:latest
+    pull_policy: always
     ports:
       - '3000:3000'