From f309612b746516d7afb6b2f8aa49d69ea6b9ff63 Mon Sep 17 00:00:00 2001 From: kyr4601 Date: Thu, 12 Dec 2024 18:28:33 +0900 Subject: [PATCH 1/9] =?UTF-8?q?Chore:=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 263 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 243 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index df6b8a2..f2f3f33 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,257 @@ -# πŸŽ‚ 케이꾸 +# πŸŽ‚ 케이꾸 πŸŽ‚ -- 배포 URL : https://k-koo.kro.kr +> 케이크 μœ„μ— μŒ“μ΄λŠ” μš°μ •κ³Ό μ‚¬λž‘, 생일날 μ—΄λ¦¬λŠ” λ‚˜λ§Œμ˜ 둀링페이퍼 케이꾸! πŸ‘‰ https://k-koo.kro.kr/ +![image](https://github.com/user-attachments/assets/121a00b3-57a0-4733-87c1-b2f4287ef16a) -
-## ν”„λ‘œμ νŠΈ μ†Œκ°œ +### Frontend + +
+ + + + + + + + + +
+ +### Backend + +
+ + + +
+ +### Etc + +
+ + + + +
+ +
+ +## πŸ“– Description +νŠΉλ³„ν•œ λ‚ , νŠΉλ³„ν•œ 기얡을 케이꾸와 ν•¨κ»˜ λ§Œλ“€μ–΄λ³΄μ„Έμš”! πŸŽ‚ + +μƒμΌμ—λ§Œ μ—΄λ¦¬λŠ” λ‚˜λ§Œμ˜ 둀링페이퍼둜 μ‚¬λž‘κ³Ό μš°μ •μ΄ λ‹΄κΈ΄ μΆ•ν•˜ 글을 λ°›μ•„λ³΄μ„Έμš”. + +케이크에 νŽΈμ§€λ₯Ό λ”ν•˜κ³ , ν•΄λ§ˆλ‹€ μ†Œμ€‘ν•œ 좔얡을 간직할 수 μžˆλŠ” νŽΈμ§€ν•¨κΉŒμ§€! + +케이꾸가 μ „ν•˜λŠ” μž‘μ€ νŽΈμ§€, 큰 μ„€λ ˜ – μ§€κΈˆ μΌ€μ΄κΎΈλ‘œ μžŠμ§€ λͺ»ν•  생일을 μ€€λΉ„ν•˜μ„Έμš”. + +## :baby_chick: Demo +

+ + + + + + + +

+ +## ⭐ Main Feature + +### νšŒμ›κ°€μž… 및 둜그인 +- JWT, Cookie 이용 +- Access Token, Refresh Token 검증 둜직 κ΅¬ν˜„ + +### 케이크 κΎΈλ―ΈκΈ° +- νšŒμ›κ°€μž… 직후 케이크 μ‹œνŠΈ, 크림 색상 κ³ λ₯΄λ„둝 둜직 κ΅¬ν˜„ +- μ–Έμ œλ“ μ§€ μ›ν•˜λŠ” μƒ‰μƒμœΌλ‘œ μˆ˜μ • κ°€λŠ₯ + +### νŽΈμ§€ 쑰회, μž‘μ„± +- 케이크 μ‘°νšŒμ‹œ μ˜¬ν•΄ 받은 νŽΈμ§€ 쑰회 κ΅¬ν˜„ +- μ—°λ„λ³„λ‘œ λ³΄κ΄€λœ νŽΈμ§€ 쑰회 κ΅¬ν˜„, μœˆλ„μœ™ 적용 +- 친ꡬ 케이크 μ‘°νšŒμ‹œ μž₯μ‹μ΄ˆ κ³ λ₯΄κΈ°, νŽΈμ§€ μž‘μ„± κ΅¬ν˜„ + +### νŽΈμ§€ μˆ˜μ‹  μ•Œλ¦Ό +- Web Workerλ₯Ό ν™œμš©ν•œ ν‘Έμ‹œ μ•Œλ¦Ό κΈ°λŠ₯ κ΅¬ν˜„ + +### 기타 κΈ°λŠ₯ +- 링크 곡유 (카카였, 페이슀뢁, URL 볡사) +- λ§ˆμ΄νŽ˜μ΄μ§€ (νšŒμ› 정보 쑰회/μˆ˜μ •, νƒˆν‡΄, λ‘œκ·Έμ•„μ›ƒ) +- 아이디, λΉ„λ°€λ²ˆν˜Έ μ°ΎκΈ° (이메일 인증) -- μΌ€μ΄κΎΈλŠ” 생일날 μƒμΌνŽΈμ§€κ°€ μ˜€ν”ˆλ˜λŠ” 둀링페이퍼 μ„œλΉ„μŠ€μž…λ‹ˆλ‹€. -- μƒμΌμžλŠ” μžμ‹ λ§Œμ˜ 케이크λ₯Ό λ§Œλ“€μ–΄ SNS에 링크λ₯Ό κ³΅μœ ν•  수 μžˆμŠ΅λ‹ˆλ‹€. -- 링크에 μ ‘μ†ν•˜λ©΄ μžμ‹ λ§Œμ˜ μŠ€νƒ€μΌλ‘œ κΎΈλ©°λ‚Έ νŽΈμ§€μ§€μ— μΆ•ν•˜ 글을 μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€. -- μΆ•ν•˜κΈ€μ΄ μž‘μ„±λ˜λ©΄ μƒμΌμžμ˜ 케이크에 μΆ”κ°€λ˜κ³ , 생일 당일 λ‚  κ³΅κ°œλ©λ‹ˆλ‹€. -- 연도 별 νŽΈμ§€ν•¨μ΄ μžˆμ–΄ 맀년 받은 νŽΈμ§€λ₯Ό 보관 및 μ—΄λžŒν•  수 μžˆμŠ΅λ‹ˆλ‹€. -- νŽΈμ§€κ°€ μƒμ„±λ˜λ©΄ μ‚¬λž‘μ΄λ‚˜ μš°μ •κ³Ό 같은 νŽΈμ§€ λ‚΄μš©μ„ μ•”μ‹œν•˜λŠ” ν‚€μ›Œλ“œκ°€ 같이 μ „μ†‘λ˜μ–΄ κΆκΈˆμ¦μ„ μœ λ°œν•©λ‹ˆλ‹€. -
+## πŸ’» Getting Started +### Installation +``` +pnpm install +``` +### Develop Mode +``` +pnpm run dev +``` +### Production +``` +pnpm run build -## νŒ€μ› ꡬ성 +pnpm run start +``` +## :open_file_folder: Project Structure + +```markdown +///////////////////////////////////// +// turborepoλ₯Ό ν™œμš©ν•œ λͺ¨λ…Έλ ˆν¬ ꡬ쑰 // +///////////////////////////////////// + +KKOO +β”œβ”€β”€ .github +β”œβ”€β”€ .husky +β”œβ”€β”€ apps +β”‚ β”œβ”€β”€ client // ν΄λΌμ΄μ–ΈνŠΈ +β”‚ β”‚ β”œβ”€β”€ config +β”‚ β”‚ β”œβ”€β”€ e2e +β”‚ β”‚ β”œβ”€β”€ public +β”‚ β”‚ β”œβ”€β”€ src +β”‚ β”‚ β”‚ β”œβ”€β”€ apis +β”‚ β”‚ β”‚ β”œβ”€β”€ assets +β”‚ β”‚ β”‚ β”œβ”€β”€ components +β”‚ β”‚ β”‚ β”œβ”€β”€ hooks +β”‚ β”‚ β”‚ β”œβ”€β”€ pages +β”‚ β”‚ β”‚ β”œβ”€β”€ store +β”‚ β”‚ β”‚ β”œβ”€β”€ styles +β”‚ β”‚ β”‚ β”œβ”€β”€ test +β”‚ β”‚ β”‚ β”œβ”€β”€ utils +β”‚ β”‚ | β”œβ”€β”€ App.css +β”‚ β”‚ | β”œβ”€β”€ App.tsx +β”‚ β”‚ | β”œβ”€β”€ index.tsx +β”‚ β”‚ | β”œβ”€β”€ ModalPortal.ts +β”‚ β”‚ | └── firebase-messaging-sw.ts +β”‚ β”‚ β”œβ”€β”€ Dockerfile +β”‚ β”‚ β”œβ”€β”€ package.json +β”‚ β”‚ β”œβ”€β”€ playwright.config.ts +β”‚ β”‚ β”œβ”€β”€ tsconfig.json +β”‚ β”‚ β”œβ”€β”€ webpack.config.dev.js +β”‚ β”‚ └── webpack.config.prod.js +β”‚ β”œβ”€β”€ server // μ„œλ²„ +β”‚ β”œβ”€β”€ src +β”‚ β”‚ β”œβ”€β”€ models // Prisma CRUD λͺ¨λ“ˆ ν•¨μˆ˜ λͺ¨μŒ +β”‚ β”‚ β”œβ”€β”€ routes // API μš”μ²­ μˆ˜μ‹ , 응닡 λ°˜ν™˜ +β”‚ β”‚ └── service // λΉ„μ¦ˆλ‹ˆμŠ€ 둜직 +β”‚ β”œβ”€β”€ Dockerfile +β”‚ β”œβ”€β”€ package.json +β”‚ β”œβ”€β”€ tsconfig.json +β”‚ └── .eslintrc.js +β”œβ”€β”€ packages // ν΄λΌμ΄μ–ΈνŠΈ, μ„œλ²„ 곡톡 λͺ¨λ“ˆ or ꡬ성 파일 +β”‚ β”œβ”€β”€ database // Prisma ν΄λΌμ΄μ–ΈνŠΈ +β”‚ β”œβ”€β”€ eslint-config +β”‚ β”œβ”€β”€ jest-presets +β”‚ β”œβ”€β”€ schemas // Zod νƒ€μž… 정리 +β”‚ β”œβ”€β”€ types +β”‚ β”œβ”€β”€ typescript-config +| └── utils +β”œβ”€β”€ .dockerignore +β”œβ”€β”€ .gitignore +β”œβ”€β”€ docker-compose-cache.json +β”œβ”€β”€ docker-compose.yml +β”œβ”€β”€ nginx.conf +β”œβ”€β”€ package.json +β”œβ”€β”€ pnpm-lock.yaml +β”œβ”€β”€ pnpm-workspace.yaml +β”œβ”€β”€ README.md +└── turbo.json + +``` + +## πŸ”¨ Architecture +```mermaid +flowchart TB + subgraph Client["Client (Browser)"] + React["React\n(TypeScript)"] + Zustand["Zustand\n(State Management)"] + ReactQuery["React Query\n(Server State)"] + React --> Zustand + React --> ReactQuery + end + + subgraph BuildTools["Build & Tools"] + Webpack["Webpack"] + Babel["Babel"] + TypeScript["TypeScript"] + Jest["Jest/Playwright\n(Testing)"] + StyleComp["styled-components"] + end + + subgraph CICD["CI/CD Pipeline"] + GHA["GitHub Actions"] + Husky["Husky"] + Docker["Docker"] + end + + subgraph Server["Server Environment"] + Nginx["Nginx\n(Reverse Proxy)"] + Express["Express.js\n(TypeScript)"] + Prisma["Prisma ORM"] + end + + subgraph Cloud["AWS Cloud"] + EC2["AWS EC2"] + S3["AWS S3"] + RDS["PostgreSQL\n(RDS)"] + end + + subgraph Monitoring["Monitoring"] + Sentry["Sentry"] + end + + Client -->|API Requests| Nginx + Nginx -->|Proxy| Express + Express --> Prisma + Prisma --> RDS + + BuildTools -->|Build| Client + CICD -->|Deploy| EC2 + Client -->|Error Tracking| Sentry + + EC2 --> Nginx + S3 -->|Static Assets| Nginx +``` + +## βš’ CI/CD +- github actionsλ₯Ό ν™œμš©ν•΄μ„œ 지속적 톡합 및 배포 +- origin에 pushν•  경우, `husky`λ₯Ό ν™œμš©ν•΄ ν…ŒμŠ€νŠΈ μ½”λ“œ, ν¬λ§·νŒ…, λ¦°νŒ… 검사λ₯Ό ν•˜κ³  톡과될 경우 push에 μ„±κ³΅ν•œλ‹€. +- `feature` λΈŒλžœμΉ˜μ—μ„œ `develop`으둜 Pull Requestλ₯Ό 보내면, CIκ°€ λ™μž‘λœλ‹€. +- `develop`μ—μ„œ `main`둜 Pull Requestλ₯Ό 보내면, CIκ°€ λ™μž‘λ˜κ³  Mergeκ°€ 되면, 운영 λ¦¬μ†ŒμŠ€μ— λ°°ν¬λœλ‹€. + +## πŸ‘¨β€πŸ’» Role & Contribution + +**Frontend (Web)** +- νšŒμ›κ°€μž…, 둜그인 +- λ§ˆμ΄νŽ˜μ΄μ§€ +- 케이크 쑰회/생성/μˆ˜μ • +- νŽΈμ§€ 쑰회/생성 (μ˜¬ν•΄, 연도별) +- 링크 곡유 + +**Server** +- AWS EC2, S3 ν΄λΌμš°λ“œ ν™˜κ²½ μ„ΈνŒ… +- Express.js μ„ΈνŒ… +- Nginx μ„ΈνŒ… + +**Devops** +- CI/CD ꡬ좕 (Docker, Github Action) +- μ„œλ²„ λͺ¨λ‹ˆν„°λ§ + +**etc** +- 기획, λ””μžμΈ +- 전체 기술 μŠ€νƒ μ„ μ • +- 전체 μ•„ν‚€ν…μ²˜ ꡬ성 +- 전체 개발 일정 및 이슈 관리 + +## πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦ Developer
| **μ΄μ€μ˜** | **κΉ€μ˜ˆλ¦°** | | :------: | :------: | | [
@ieun32](https://github.com/ieun32) | [
@kyr4601](https://github.com/kyr4601) |
- -
- -## 1. 개발 ν™˜κ²½ - -- Front-end : React, Typescript, webpack, babel, eslint, prettier, styled-components, Zustand, React-query, jest, playwright, -- Back-end : Express.js, Typescript, postgreSQL, Prisma -- ν”„λ‘œμ νŠΈ 관리 : Turborepo, Pnpm, Github From 7a40c7cdd23987f3ed5d4a49414f00ab31f2031c Mon Sep 17 00:00:00 2001 From: kyr4601 Date: Thu, 12 Dec 2024 18:29:09 +0900 Subject: [PATCH 2/9] =?UTF-8?q?Refactor:=20=EC=84=9C=EB=B2=84=20=ED=99=98?= =?UTF-8?q?=EA=B2=BD=EB=B3=80=EC=88=98=20=EC=B2=98=EB=A6=AC=20=EB=B0=A9?= =?UTF-8?q?=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/mainDeploy.yml | 48 ++++++++++++++++++++++++++++---- 1 file changed, 42 insertions(+), 6 deletions(-) diff --git a/.github/workflows/mainDeploy.yml b/.github/workflows/mainDeploy.yml index ddcc10a..b0200ca 100644 --- a/.github/workflows/mainDeploy.yml +++ b/.github/workflows/mainDeploy.yml @@ -65,7 +65,48 @@ jobs: MEASUREMENT_ID: ${{ secrets.MEASUREMENT_ID }} PASSWORD_SALT: ${{ secrets.PASSWORD_SALT }} - - name: Create JSON file + - name: Generate Environment Variables File for Server + run: | + echo "SERVER_PORT=$SERVER_PORT" >> .env + echo "SERVER_URL=$SERVER_URL" >> .env + echo "KAKAO_CLIENT_ID=$KAKAO_CLIENT_ID" >> .env + echo "KAKAO_REDIRECT_URI=$KAKAO_REDIRECT_URI" >> .env + echo "GOOGLE_CLIENT_ID=$GOOGLE_CLIENT_ID" >> .env + echo "GOOGLE_CLIENT_SECRET=$GOOGLE_CLIENT_SECRET" >> .env + echo "GOOGLE_REDIRECT_URI=$GOOGLE_REDIRECT_URI" >> .env + echo "CLIENT_URL=$CLIENT_URL" >> .env + echo "DATABASE_URL=$DATABASE_URL" >> .env + echo "JWT_SECRET=$JWT_SECRET" >> .env + echo "OPENAI_API_KEY=$OPENAI_API_KEY" >> .env + echo "EMAILJS_SERVICE_ID=$EMAILJS_SERVICE_ID" >> .env + echo "EMAILJS_TEMPLATE_ID=$EMAILJS_TEMPLATE_ID" >> .env + echo "EMAILJS_PWD_TEMPLATE_ID=$EMAILJS_PWD_TEMPLATE_ID" >> .env + echo "EMAILJS_PUBLIC_KEY=$EMAILJS_PUBLIC_KEY" >> .env + echo "EMAILJS_PRIVATE_KEY=$EMAILJS_PRIVATE_KEY" >> .env + echo "PASSWORD_SALT=$PASSWORD_SALT" >> .env + echo "ENVIRONMENT=$ENVIRONMENT" >> .env + working-directory: . + env: + SERVER_PORT: ${{ secrets.SERVER_PORT }} + SERVER_URL: ${{ secrets.SERVER_URL }} + KAKAO_CLIENT_ID: ${{ secrets.KAKAO_CLIENT_ID }} + KAKAO_REDIRECT_URI: ${{ secrets.KAKAO_REDIRECT_URI }} + GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }} + GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }} + GOOGLE_REDIRECT_URI: ${{ secrets.GOOGLE_REDIRECT_URI }} + CLIENT_URL: ${{ secrets.CLIENT_URL }} + DATABASE_URL: ${{ secrets.DATABASE_URL }} + JWT_SECRET: ${{ secrets.JWT_SECRET }} + OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }} + EMAILJS_SERVICE_ID: ${{ secrets.EMAILJS_SERVICE_ID }} + EMAILJS_TEMPLATE_ID: ${{ secrets.EMAILJS_TEMPLATE_ID }} + EMAILJS_PWD_TEMPLATE_ID: ${{ secrets.EMAILJS_PWD_TEMPLATE_ID }} + EMAILJS_PUBLIC_KEY: ${{ secrets.EMAILJS_PUBLIC_KEY }} + EMAILJS_PRIVATE_KEY: ${{ secrets.EMAILJS_PRIVATE_KEY }} + PASSWORD_SALT: ${{ secrets.PASSWORD_SALT }} + ENVIRONMENT: ${{ secrets.ENVIRONMENT }} + + - name: Create JSON file for FCM env: TYPE: ${{ secrets.TYPE }} PROJECT_ID: ${{ secrets.PROJECT_ID }} @@ -127,11 +168,6 @@ jobs: docker-compose.yml docker-compose-cache.json - # - name: Build and push - # run: | - # docker compose build - # docker compose push - - name: Pull and restart Docker Container uses: appleboy/ssh-action@master with: From a1150fb27e46da54d75f4a0b2d8601ed83a813dd Mon Sep 17 00:00:00 2001 From: kyr4601 Date: Thu, 12 Dec 2024 18:29:47 +0900 Subject: [PATCH 3/9] =?UTF-8?q?Refactor:=20docker=20compose=20env=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docker-compose.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/docker-compose.yml b/docker-compose.yml index ff8b7f5..c718cee 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -20,6 +20,7 @@ services: - 3001:3001 networks: - app_network + env_file: ".env" networks: app_network: From be8b3943e621d9b96585dc6eba9c8d11b0887a0a Mon Sep 17 00:00:00 2001 From: kyr4601 Date: Thu, 12 Dec 2024 18:53:20 +0900 Subject: [PATCH 4/9] =?UTF-8?q?Feature:=20PC=EB=B2=84=EC=A0=84=20=EB=A7=81?= =?UTF-8?q?=ED=81=AC=EA=B3=B5=EC=9C=A0=20=EB=AA=A8=EB=8B=AC=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/src/components/cake/Sidebar.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/apps/client/src/components/cake/Sidebar.tsx b/apps/client/src/components/cake/Sidebar.tsx index c7c8c99..5d2549a 100644 --- a/apps/client/src/components/cake/Sidebar.tsx +++ b/apps/client/src/components/cake/Sidebar.tsx @@ -7,17 +7,21 @@ import { useNavigate } from 'react-router-dom'; import useToggleStore from '../../store/useToggleStore'; import { fetchUserInfo } from '#pages/CreateLetter.tsx'; import axiosInstance from '#apis/axios.ts'; +import ShareUrlModal from '#components/modal/ShareUrlModal.tsx'; const Sidebar: React.FC<{ isMyCake: boolean }> = ({ isMyCake }) => { const navigate = useNavigate(); const setToggle = useToggleStore((state) => state.setToggle); const [user, setUser] = useState(''); + const [nickname, setNickname] = useState(''); const [selectedMenu, setSelectedMenu] = useState('cake'); + const [open, setOpen] = useState(false); useEffect(() => { fetchUserInfo().then((data) => { if (data) { setUser(data.userId); + setNickname(data.nickname); } }); }, []); @@ -52,6 +56,10 @@ const Sidebar: React.FC<{ isMyCake: boolean }> = ({ isMyCake }) => { } } + function handleOpen() { + setOpen(!open); + } + return (
@@ -81,10 +89,15 @@ const Sidebar: React.FC<{ isMyCake: boolean }> = ({ isMyCake }) => { 케이크 μˆ˜μ • -
  • +
  • 링크 곡유
    • + {' '} @@ -27,8 +28,9 @@ const Pagenation: React.FC = ({ ); @@ -54,9 +56,16 @@ const PageContainer = styled.div` height: 29px; border-radius: 50%; border: none; + display: flex; + justify-content: center; + align-items: center; background: var(--orange-500); font-family: Pretendard; color: var(--white); + + &.next{ + transform: rotate(180deg); + } } span{ From f35be5321e72ff5e25d271303cb35708f3ff800e Mon Sep 17 00:00:00 2001 From: kyr4601 Date: Sun, 15 Dec 2024 21:32:03 +0900 Subject: [PATCH 7/9] =?UTF-8?q?Fix:=20=EC=BC=80=EC=9D=B4=ED=81=AC=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=86=A0=EA=B8=80=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/src/components/common/Toggle.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/client/src/components/common/Toggle.tsx b/apps/client/src/components/common/Toggle.tsx index 55d44a6..f715a78 100644 --- a/apps/client/src/components/common/Toggle.tsx +++ b/apps/client/src/components/common/Toggle.tsx @@ -19,13 +19,13 @@ const Toggle: React.FC = ({ ownerId, toggle, onClick }) => { return ( - + - + - + {toggle ? ( From 568facd03d0cf551c497e65a51ccd4b4d2289223 Mon Sep 17 00:00:00 2001 From: kyr4601 Date: Sun, 15 Dec 2024 21:58:30 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Fix:=20=EB=AA=A8=EB=8B=AC=20UI=20=EA=B9=A8?= =?UTF-8?q?=EC=A7=90=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../client/src/components/cake/SharedCake.tsx | 3 +- apps/client/src/components/modal/Modal.tsx | 37 ++++++++--------- .../src/components/modal/ShareUrlModal.tsx | 40 ++++++++++++------- 3 files changed, 45 insertions(+), 35 deletions(-) diff --git a/apps/client/src/components/cake/SharedCake.tsx b/apps/client/src/components/cake/SharedCake.tsx index 57d3f51..9dcdea1 100644 --- a/apps/client/src/components/cake/SharedCake.tsx +++ b/apps/client/src/components/cake/SharedCake.tsx @@ -85,8 +85,7 @@ const SharedCake: React.FC = ({ ownerId, data }) => { - νŽΈμ§€λ₯Ό μž‘μ„±ν•˜λ©΄ 포인트λ₯Ό 얻을 수 μžˆμ–΄μš”. - 둜그인 ν•˜μ‹œκ² μ–΄μš”? + νŽΈμ§€λ₯Ό μž‘μ„±ν•˜λ©΄ 포인트λ₯Ό 얻을 수 μžˆμ–΄μš”.{'\n'}둜그인 ν•˜μ‹œκ² μ–΄μš”? + +

    λ‚΄ 케이크 κ³΅μœ ν•˜κΈ°

    +
    + kakaoShare(nickname)}> + + + facebookShare(nickname)}> + + + + + +
    + +     ); }; @@ -78,3 +80,11 @@ const IconButton = styled.button` cursor: pointer; margin: 0 0.5rem; `; + +const ShareBox = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 24px; +` From 9b043e09d675ec14d31acace023608e7c779736d Mon Sep 17 00:00:00 2001 From: kyr4601 Date: Mon, 16 Dec 2024 19:29:30 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Fix:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/src/assets/icons/HomeIcon.tsx | 4 ++-- apps/client/src/assets/icons/PersonIcon.tsx | 2 ++ apps/client/src/components/cake/CakeHeader.tsx | 2 -- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/client/src/assets/icons/HomeIcon.tsx b/apps/client/src/assets/icons/HomeIcon.tsx index 7a1ad2e..56cbe92 100644 --- a/apps/client/src/assets/icons/HomeIcon.tsx +++ b/apps/client/src/assets/icons/HomeIcon.tsx @@ -4,8 +4,8 @@ const HomeIcon = (props: SVGProps) => { return ( ) => { return ( diff --git a/apps/client/src/components/cake/CakeHeader.tsx b/apps/client/src/components/cake/CakeHeader.tsx index b1cf94a..e24ba89 100644 --- a/apps/client/src/components/cake/CakeHeader.tsx +++ b/apps/client/src/components/cake/CakeHeader.tsx @@ -39,12 +39,10 @@ const Phrase = styled.h1` `; const MyPageButton = styled.button` - position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%; border-width: 0; - display: relative; overflow: hidden; cursor: pointer; display: flex;