From 916037c0105e8fce75c179e462db1ec27f682373 Mon Sep 17 00:00:00 2001 From: woals2840 <143878241+woals2840@users.noreply.github.com> Date: Sun, 12 Jan 2025 21:29:56 +0900 Subject: [PATCH 001/117] Update issue templates MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 이슈 템플릿 --- .github/ISSUE_TEMPLATE/chore-template.md | 16 ++++++++++++++++ .github/ISSUE_TEMPLATE/feature-template.md | 17 +++++++++++++++++ .github/ISSUE_TEMPLATE/fix-template.md | 16 ++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE/chore-template.md create mode 100644 .github/ISSUE_TEMPLATE/feature-template.md create mode 100644 .github/ISSUE_TEMPLATE/fix-template.md diff --git a/.github/ISSUE_TEMPLATE/chore-template.md b/.github/ISSUE_TEMPLATE/chore-template.md new file mode 100644 index 0000000..293bb9f --- /dev/null +++ b/.github/ISSUE_TEMPLATE/chore-template.md @@ -0,0 +1,16 @@ +--- +name: Chore Template +about: 개발 환경 세팅 시 사용하는 템플릿입니다 +title: "[Chore] 이슈번호" +labels: '' +assignees: '' + +--- + +### 목적 +> 수정하려는 버그 등에 대해 간결하게 설명해주세요 + +### 작업 상세 내용 +- [ ] TODO + +### 유의사항 diff --git a/.github/ISSUE_TEMPLATE/feature-template.md b/.github/ISSUE_TEMPLATE/feature-template.md new file mode 100644 index 0000000..d89d7a7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature-template.md @@ -0,0 +1,17 @@ +--- +name: Feature Template +about: 기능 개발을 위한 이슈 템플릿입니다 +title: "[Feat] 이슈 내용" +labels: '' +assignees: woals2840 + +--- + +### 목적 +> 추가하려는 기능 등에 대해 간결하게 설명해주세요 + + +### 작업 상세 내용 +- [ ] TODO + +### 유의사항 diff --git a/.github/ISSUE_TEMPLATE/fix-template.md b/.github/ISSUE_TEMPLATE/fix-template.md new file mode 100644 index 0000000..af4ee29 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/fix-template.md @@ -0,0 +1,16 @@ +--- +name: Fix Template +about: 버그 수정시 사용하는 템플릿입니다. +title: "[Fix] 작업내용" +labels: '' +assignees: '' + +--- + +### 목적 +> 수정하려는 버그 등에 대해 간결하게 설명해주세요 + +### 작업 상세 내용 +- [ ] TODO + +### 유의사항 From c4355f282ab2fdd77b5abfba20f83af0000d67e4 Mon Sep 17 00:00:00 2001 From: devhaeun Date: Sun, 19 Jan 2025 17:02:05 +0900 Subject: [PATCH 002/117] =?UTF-8?q?chore:=20TS=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=ED=99=98=20-=20typescript=20=EC=84=A4=EC=B9=98=20-=20vite.conf?= =?UTF-8?q?ig.ts.=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EB=B0=94=EA=BE=B8?= =?UTF-8?q?=EA=B8=B0=20-=20ts.config.josn,=20tsconfig.node.json=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=88=98=EC=A0=95=20-=20vite-env.d.ts=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1=20-=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=ED=98=95=EC=8B=9D=20.jsx=EC=97=90=EC=84=9C=20.tsx?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- package-lock.json | 16 ++++++++++++-- package.json | 1 + src/{App.jsx => App.tsx} | 0 src/{main.jsx => main.tsx} | 4 ++-- .../{root-layout.jsx => root-layout.tsx} | 0 src/routes/{router.jsx => router.tsx} | 0 src/vite-env.d.ts | 1 + tsconfig.json | 21 +++++++++++++++++++ tsconfig.node.json | 9 ++++++++ vite.config.js => vite.config.ts | 0 11 files changed, 49 insertions(+), 5 deletions(-) rename src/{App.jsx => App.tsx} (100%) rename src/{main.jsx => main.tsx} (65%) rename src/routes/{root-layout.jsx => root-layout.tsx} (100%) rename src/routes/{router.jsx => router.tsx} (100%) create mode 100644 src/vite-env.d.ts create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json rename vite.config.js => vite.config.ts (100%) diff --git a/index.html b/index.html index 83a5500..46807bf 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,6 @@
- + diff --git a/package-lock.json b/package-lock.json index 183abc0..47ad96a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.14.0", "prettier": "^3.4.2", + "typescript": "^5.7.3", "vite": "^6.0.5" } }, @@ -1220,7 +1221,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz", "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==", "devOptional": true, - "license": "MIT", "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -1231,7 +1231,6 @@ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz", "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==", "dev": true, - "license": "MIT", "peerDependencies": { "@types/react": "^18.0.0" } @@ -4424,6 +4423,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/typescript": { + "version": "5.7.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz", + "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/unbox-primitive": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz", diff --git a/package.json b/package.json index 2c52d47..270ebb4 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.14.0", "prettier": "^3.4.2", + "typescript": "^5.7.3", "vite": "^6.0.5" } } diff --git a/src/App.jsx b/src/App.tsx similarity index 100% rename from src/App.jsx rename to src/App.tsx diff --git a/src/main.jsx b/src/main.tsx similarity index 65% rename from src/main.jsx rename to src/main.tsx index b9a1a6d..2b9db7a 100644 --- a/src/main.jsx +++ b/src/main.tsx @@ -1,9 +1,9 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' -import App from './App.jsx' +import App from './App.js' -createRoot(document.getElementById('root')).render( +createRoot(document.getElementById('root')!).render( , diff --git a/src/routes/root-layout.jsx b/src/routes/root-layout.tsx similarity index 100% rename from src/routes/root-layout.jsx rename to src/routes/root-layout.tsx diff --git a/src/routes/router.jsx b/src/routes/router.tsx similarity index 100% rename from src/routes/router.jsx rename to src/routes/router.tsx diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..151aa68 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..829a8fe --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] + } \ No newline at end of file diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..eedc67d --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] + } \ No newline at end of file diff --git a/vite.config.js b/vite.config.ts similarity index 100% rename from vite.config.js rename to vite.config.ts From 3a64d914223ea17f843661876a2c935cd741c4c8 Mon Sep 17 00:00:00 2001 From: devhaeun Date: Wed, 22 Jan 2025 18:01:12 +0900 Subject: [PATCH 003/117] =?UTF-8?q?Style:=20=ED=97=A4=EB=8D=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=81=AC=EA=B8=B0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 1440 크기에 맞게 전체 요소들 크기 수정 - router element에 Header 컴포넌트 추가 - 컴포넌트 이름 SearchBox -> Header 수정 - 로그인 상태에 따라 로그인/로그아웃 버튼 다르게 보이는 로직 추가 - 래플 업로드 버튼 삭제 - 충전/환전 버튼 추가 --- src/App.tsx | 3 +- src/assets/searchBox/hamburgerBars.png | Bin 462 -> 0 bytes src/assets/searchBox/icon-hamburger.svg | 5 + src/assets/searchBox/icon-heart.svg | 5 +- src/assets/searchBox/icon-mypage.svg | 4 + src/assets/searchBox/icon-notice.svg | 8 +- src/assets/searchBox/icon-setting.svg | 4 +- src/assets/searchBox/img-charge-ticket.png | Bin 0 -> 527 bytes src/components/Header.tsx | 206 +++++++++++++++++++++ src/components/SearchBox.tsx | 204 -------------------- src/routes/router.tsx | 3 +- 11 files changed, 226 insertions(+), 216 deletions(-) delete mode 100644 src/assets/searchBox/hamburgerBars.png create mode 100644 src/assets/searchBox/icon-hamburger.svg create mode 100644 src/assets/searchBox/icon-mypage.svg create mode 100644 src/assets/searchBox/img-charge-ticket.png create mode 100644 src/components/Header.tsx delete mode 100644 src/components/SearchBox.tsx diff --git a/src/App.tsx b/src/App.tsx index 9ab6659..aab249e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,11 @@ import Router from './routes/router'; -import SearchBox from './components/SearchBox'; +import Header from './components/Header'; // import SearchBox from './components/SearchBox'; function App() { return ( <> - ); } diff --git a/src/assets/searchBox/hamburgerBars.png b/src/assets/searchBox/hamburgerBars.png deleted file mode 100644 index f9df5d83c9b8a5ffaf57d45702d06ccd1fcbdf2b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 462 zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGojKx9jP7LeL$-D%zJ3L(+Ln`9l z-Ztbq6d=NSF=eTkncm4`ho)-fDSYTQ_*l56_2c;`T8%sM<5o7>E^W?dIwIc4z;uKy zX%8!hfON-4F$ISlg=5hT3>zCI@)`e&Jt(WMd33%e^Uv?EF}qewzxT&_C&Tf-tR3GK zp-LcnefS0D=gZXnv`d)N_``t-i%~f3z#*}J4@3WQdGXIFF*UB-D2@VY`16vxpC>taOm02z?j5rc#nyAiTJpN|Lij2)_)J`0FB#k z!XohC65AvG=jIUe8eTF!`rLb1|9(fWv4Fe>e&hdfi}ofY&fK(nB`|^*JYD@<);T3K F0RXy!s5}4w diff --git a/src/assets/searchBox/icon-hamburger.svg b/src/assets/searchBox/icon-hamburger.svg new file mode 100644 index 0000000..95381fc --- /dev/null +++ b/src/assets/searchBox/icon-hamburger.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/searchBox/icon-heart.svg b/src/assets/searchBox/icon-heart.svg index 3f73b49..11b987e 100644 --- a/src/assets/searchBox/icon-heart.svg +++ b/src/assets/searchBox/icon-heart.svg @@ -1,4 +1,3 @@ - - - + + \ No newline at end of file diff --git a/src/assets/searchBox/icon-mypage.svg b/src/assets/searchBox/icon-mypage.svg new file mode 100644 index 0000000..11ddacc --- /dev/null +++ b/src/assets/searchBox/icon-mypage.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/searchBox/icon-notice.svg b/src/assets/searchBox/icon-notice.svg index 584c8ed..76783ce 100644 --- a/src/assets/searchBox/icon-notice.svg +++ b/src/assets/searchBox/icon-notice.svg @@ -1,5 +1,5 @@ - - - - + + + + \ No newline at end of file diff --git a/src/assets/searchBox/icon-setting.svg b/src/assets/searchBox/icon-setting.svg index 86d9d90..c4da854 100644 --- a/src/assets/searchBox/icon-setting.svg +++ b/src/assets/searchBox/icon-setting.svg @@ -1,4 +1,4 @@ - - + + \ No newline at end of file diff --git a/src/assets/searchBox/img-charge-ticket.png b/src/assets/searchBox/img-charge-ticket.png new file mode 100644 index 0000000000000000000000000000000000000000..9f988e3eecbe24d34bfc904e314c3366c87ca0c4 GIT binary patch literal 527 zcmV+q0`UEbP)4-Ehq>=$_t4uHP6Sse$;q}z`%#UN1Uw841%Gmi$Pyw3x* z%IEJIMaFjPgr?Cv-N~CI3FLX+Dz}pN;qxAD`ghW#`Fsvdh@uD_#{pf}VLF|{Y&L^! zz(%2NjQ5psnQK=Q*6THWYnmprEQ{`4*Olg$JegJ!yZo}xdY05sZ;v5GK517V-QayByCdVZ%=my%G(wd>C0ERH5vQW1uA*>h{OEEzX4*eRy$|p RA^iXV002ovPDHLkV1jX$-pBv| literal 0 HcmV?d00001 diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..3164c94 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,206 @@ +import styled from 'styled-components'; +import imgLogo from '../assets/searchBox/logo.png'; +import icHamburger from '../assets/searchBox/icon-hamburger.svg'; +import ticket from '../assets/searchBox/ticket.png'; +import icNotice from '../assets/searchBox/icon-notice.svg'; +import icSetting from '../assets/searchBox/icon-setting.svg'; +import icSearch from '../assets/searchBox/icon-search.svg'; +import icHeart from '../assets/searchBox/icon-heart.svg'; +import icMyPage from '../assets/searchBox/icon-mypage.svg'; +import chargeTicket from '../assets/searchBox/img-charge-ticket.png'; +import { useState } from 'react'; + +const Header = () => { + let [isLoggedIn, setIsLoggedIn] = useState(false); + return ( + + + + + {isLoggedIn ? '로그아웃' : '로그인'} + + + + + 알림 + + + + + 설정 + + + + + + + 카테고리 + + + + + + + + + 관심 + + + + 마이페이지 + + + + 충전/환전 + + + + + ); +} + +export default Header; + +const Wrapper = styled.div` + min-width: 1440px; + display: flex; + justify-content: center; +` + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 100% + height: 295px; +` + +const TopContainer = styled.div` + display: flex; + justify-content: flex-end; + align-items: center; + margin: 0 34px 26px 0; +` + +const LoginBtn = styled.button<{state:boolean}>` + width: 99.355px; + height: 26.644px; + border-radius: 40px; + ${props => props.state ? + `border: 1px solid #8F8E94; + background-color: transparent; + color: #8F8E94;` + : + `border: 1px solid #C908FF; + background: rgba(201, 8, 255, 0.20); + color: #C908FF;` + } + font-family: Pretendard; + font-size: 15px; + font-weight: 500; + line-height: 18px; + letter-spacing: -0.165px; + cursor: pointer; +` + +const IconTextDiv = styled.div<{fontSize:string, color?:string, fontWeight?:string}>` + font-size: ${props => props.fontSize}; + color: ${props => props.color || '#8F8E94'}; + text-align: center; + font-family: Pretendard; + font-style: normal; + font-weight: ${props => props.fontWeight || '600'}; + line-height: 18px; + letter-spacing: -0.165px; +` + +const SearchBoxContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; +` + +const LogoImg = styled.img` + width: 133px; + height: 64px; + margin-right: 39px; +` + +const SearchBoxDiv = styled.div` + position: relative; + width: 560px; + height: 42px; + border-radius: 51px; + border: 2px solid #8F8E94; + box-sizing: border-box; + padding: 3px 20px; + display: flex; + margin: 0 26px 0 0; +` + +const TicketImg = styled.img` + position: absolute; + bottom: 105%; + left: 50%; + transform: translateX(-50%); +` + +const SearchInput = styled.input` + width: 100%; + height: 100%; + border: none; + outline: none; + font-size: 18px; + font-family: Pretendard; + font-style: normal; + line-height: 18px; + letter-spacing: -0.165px; +` + +const SearchIcon = styled.img` + cursor: pointer; + width: 20.975px; +` + +const SmallIconDiv = styled.div` + display: flex; + column-gap: 11px; + align-items: center; + justify-content: space-evenly; + height: 65px; + cursor: pointer; +` + +const IconDiv = styled.div` + display: flex; + flex-direction: column; + row-gap: 6px; + align-items: center; + justify-content: space-evenly; + height: 56px; + min-width: 61px; + margin: 0 25px 0 0; + cursor: pointer; +` + +// const UploadBtn = styled.button` +// color: white; +// background-color: #C908FF; +// border-radius: 15px; +// border: none; +// width: 98.897px; +// height: 99px; +// display: flex; +// flex-direction: column; +// align-items: center; +// justify-content: space-evenly; +// padding: 10px 10px 8px 11px; +// cursor: pointer; +// margin-left: 13px; +// ` + +const LineDiv = styled.div<{height:string, margin:string}>` + width: 1px; + height: ${props => props.height}; + background: #8F8E94; + margin: ${props => props.margin}; +` \ No newline at end of file diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx deleted file mode 100644 index 1b21ec1..0000000 --- a/src/components/SearchBox.tsx +++ /dev/null @@ -1,204 +0,0 @@ -import styled from 'styled-components'; -import imgLogo from '../assets/searchBox/logo.png'; -import hamburgerBars from '../assets/searchBox/hamburgerBars.png'; -import ticket from '../assets/searchBox/ticket.png'; -import icNotice from '../assets/searchBox/icon-notice.svg'; -import icSetting from '../assets/searchBox/icon-setting.svg'; -import icSearch from '../assets/searchBox/icon-search.svg'; -import icHeart from '../assets/searchBox/icon-heart.svg'; -import icUpload from '../assets/searchBox/icon-upload.svg'; - -const SearchBox = () => { - return ( - - - - 로그인 - - - - 알림 - - - - - 설정 - - - -
- -
- - - 카테고리 - - - - - - - - - - - 관심 - - - - - 마이페이지 - - - - 래플 업로드 - - - - - ); -} - -export default SearchBox; - -const Wrapper = styled.div` - width: 1920px; - display: flex; - justify-content: center; -` - -const Container = styled.div` - padding-top: 48px; - // background-color: red; - display: flex; - flex-direction: column; - // align-items: center; - width: 1568.42px; // 1920-(상단바 양옆 공백 너비) - height: 295px; -` - -const TopContainer = styled.div` - display: flex; - justify-content: flex-end; - align-items: center; - margin: 0 34px 53px 0; -` - -const LoginBtn = styled.button` - width: 111.883px; - height: 30px; - border-radius: 40px; - border: 1px solid #8F8E94; - background-color: transparent; - color: #8F8E94; - font-family: Pretendard; - font-size: 15px; - font-weight: 600; - line-height: 18px; - letter-spacing: -0.165px; - margin-right: 25px; - cursor: pointer; -` - -const IconTextDiv = styled.div<{fontSize:string, color?:string, fontWeight?:string}>` - font-size: ${props => props.fontSize}; - color: ${props => props.color || '#8F8E94'}; - text-align: center; - font-family: Pretendard; - font-style: normal; - font-weight: ${props => props.fontWeight || '600'}; - line-height: 18px; - letter-spacing: -0.165px; -` - -const SearchBoxContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; -` - -const LogoImg = styled.img` - width: 243.746px; - height: 117px; - margin-right: 25px; -` - -const SearchBoxDiv = styled.div` - position: relative; - width: 741.228px; - height: 63px; - border-radius: 51px; - border: 2px solid #8F8E94; - box-sizing: border-box; - padding: 3px 70px 3px 30px; -` - -const TicketImg = styled.img` - position: absolute; - bottom: 105%; - left: 50%; - transform: translateX(-50%); -` - -const SearchInput = styled.input` - width: 100%; - height: 100%; - border: none; - outline: none; - font-size: 23px; - font-family: Pretendard; - font-style: normal; - line-height: 18px; - letter-spacing: -0.165px; -` - -const SearchIcon = styled.img` - position: absolute; - right: 27px; - top: 15px; - cursor: pointer; -` - -const SmallIconDiv = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-evenly; - height: 65px; - margin: 0 21px 0 25px; - cursor: pointer; -` - -const IconDiv = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-evenly; - height: 85px; - min-width: 80px; - margin: 0 21px 0 25px; - cursor: pointer; -` - -const UploadBtn = styled.button` - color: white; - background-color: #C908FF; - border-radius: 15px; - border: none; - width: 98.897px; - height: 99px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-evenly; - padding: 10px 10px 8px 11px; - cursor: pointer; - margin-left: 13px; -` - -const LineDiv = styled.div<{height:string, margin:string}>` - width: 1px; - height: ${props => props.height}; - background: #8F8E94; - margin: ${props => props.margin}; -` \ No newline at end of file diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 2c64821..b92d450 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; +import Header from '../components/Header'; const router = createBrowserRouter([ { path: '/', - element:

홈 페이지

, + element:
, children: [], }, ]); From dc4e8ddbc2e4aef477b8ef16533edb3afe4ae437 Mon Sep 17 00:00:00 2001 From: devhaeun Date: Wed, 22 Jan 2025 18:13:34 +0900 Subject: [PATCH 004/117] =?UTF-8?q?Chore:=20router=EC=97=90=20Header=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Header 스타일 코드 주석 삭제 - 래플 업로드 버튼의 스타일링은 다른 곳에서 사용될 가능성을 염두하여 주석 처리만 수행 - router에 기본 element로 Header 컴포넌트 연결 --- src/App.tsx | 1 - src/components/Header.tsx | 7 ++++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index aab249e..0222e76 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,4 @@ import Router from './routes/router'; -import Header from './components/Header'; // import SearchBox from './components/SearchBox'; function App() { diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 3164c94..dfaa6a5 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -9,8 +9,10 @@ import icHeart from '../assets/searchBox/icon-heart.svg'; import icMyPage from '../assets/searchBox/icon-mypage.svg'; import chargeTicket from '../assets/searchBox/img-charge-ticket.png'; import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; const Header = () => { + const navigate = useNavigate(); let [isLoggedIn, setIsLoggedIn] = useState(false); return ( @@ -31,7 +33,7 @@ const Header = () => { - + navigate('/')} /> 카테고리 @@ -123,6 +125,9 @@ const LogoImg = styled.img` width: 133px; height: 64px; margin-right: 39px; + &:hover { + cursor: pointer; + } ` const SearchBoxDiv = styled.div` From f08451951ec9d023ff3c04be9599d88e5723e532 Mon Sep 17 00:00:00 2001 From: devhaeun Date: Wed, 22 Jan 2025 18:16:42 +0900 Subject: [PATCH 005/117] =?UTF-8?q?Fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20props=20=EC=A0=84=EB=8B=AC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 로그인 버튼에 전달하는 props에 string 타입으로 값을 전달하도록 수정함 --- src/components/Header.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index dfaa6a5..987f331 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -18,7 +18,7 @@ const Header = () => { - + {isLoggedIn ? '로그아웃' : '로그인'} @@ -83,11 +83,11 @@ const TopContainer = styled.div` margin: 0 34px 26px 0; ` -const LoginBtn = styled.button<{state:boolean}>` +const LoginBtn = styled.button<{state:string}>` width: 99.355px; height: 26.644px; border-radius: 40px; - ${props => props.state ? + ${props => props.state==='true' ? `border: 1px solid #8F8E94; background-color: transparent; color: #8F8E94;` From cf463e8c24e66ebd3b2213cdd5d7e476eb0d6782 Mon Sep 17 00:00:00 2001 From: devhaeun Date: Wed, 22 Jan 2025 18:53:31 +0900 Subject: [PATCH 006/117] =?UTF-8?q?Feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 카테고리 아이콘 클릭 시 드롭다운 메뉴가 나타나는 기능 추가 --- src/components/CategoryMenu.tsx | 48 +++++++++++++++++++++++++++++++++ src/components/Header.tsx | 32 ++++++++++++++++++---- 2 files changed, 75 insertions(+), 5 deletions(-) create mode 100644 src/components/CategoryMenu.tsx diff --git a/src/components/CategoryMenu.tsx b/src/components/CategoryMenu.tsx new file mode 100644 index 0000000..ed5df7d --- /dev/null +++ b/src/components/CategoryMenu.tsx @@ -0,0 +1,48 @@ +import styled from "styled-components"; + +const CategoryMenu = ({clicked}:{clicked:boolean}) => { + return ( + + 전체 카테고리 + 여성의류 + 남성의류 + 신발 + 악세사리 + 디지털 + 가전제품 + 스포츠/레저 + 차량/오토바이 + 굿즈 + 예술/희귀/수집품 + 음반/악기 + 도서/티켓/문구 + 뷰티 + 인테리어 + 생활용품 + 공구/산업용품 + 식품 + 유아 + 반려동물 + 기타 + 재능 + + ) +} + +export default CategoryMenu; + +const CategoryUl = styled.ul<{show:string}>` + width: 414px; + position: absolute; + top: 45px; + left: -55px; + ${props => props.show === 'true' ? + 'display: block' + : + 'display: none' + } +` + +const CategoryLi = styled.li` + list-style: none; +` \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 987f331..105ced9 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -10,10 +10,13 @@ import icMyPage from '../assets/searchBox/icon-mypage.svg'; import chargeTicket from '../assets/searchBox/img-charge-ticket.png'; import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import CategoryMenu from './CategoryMenu'; const Header = () => { const navigate = useNavigate(); - let [isLoggedIn, setIsLoggedIn] = useState(false); + const [isLoggedIn, setIsLoggedIn] = useState(false); + const [isCatClicked, setIsCatClicked] = useState(false); + return ( @@ -34,10 +37,13 @@ const Header = () => { navigate('/')} /> - - - 카테고리 - + + setIsCatClicked(!isCatClicked)}> + + 카테고리 + + + @@ -130,6 +136,10 @@ const LogoImg = styled.img` } ` +const CategoryContainer = styled.div` + position: relative; +` + const SearchBoxDiv = styled.div` position: relative; width: 560px; @@ -187,6 +197,18 @@ const IconDiv = styled.div` cursor: pointer; ` +const IconHamburgerDiv = styled.div` + display: flex; + flex-direction: column; + row-gap: 6px; + align-items: center; + justify-content: space-between; + height: 56px; + min-width: 61px; + margin: 0 25px 0 0; + cursor: pointer; +` + // const UploadBtn = styled.button` // color: white; // background-color: #C908FF; From 9671aa56ae693dc422e815a3d11bcffdb1101c93 Mon Sep 17 00:00:00 2001 From: devhaeun Date: Wed, 22 Jan 2025 19:54:59 +0900 Subject: [PATCH 007/117] =?UTF-8?q?Feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 카테고리 아이콘 스타일 수정 - 카테고리 아이콘 클릭 시 드롭다운 메뉴 나타나도록 기능 추가 --- src/components/CategoryMenu.tsx | 41 ++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/src/components/CategoryMenu.tsx b/src/components/CategoryMenu.tsx index ed5df7d..ffc8582 100644 --- a/src/components/CategoryMenu.tsx +++ b/src/components/CategoryMenu.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; const CategoryMenu = ({clicked}:{clicked:boolean}) => { return ( - 전체 카테고리 + 전체 카테고리 여성의류 남성의류 신발 @@ -32,10 +32,10 @@ const CategoryMenu = ({clicked}:{clicked:boolean}) => { export default CategoryMenu; const CategoryUl = styled.ul<{show:string}>` - width: 414px; + width: 200px; position: absolute; top: 45px; - left: -55px; + left: -65px; ${props => props.show === 'true' ? 'display: block' : @@ -43,6 +43,41 @@ const CategoryUl = styled.ul<{show:string}>` } ` +const CategoryName = styled.li` + list-style: none; + height: 36px; + border: 1px solid #8F8E94; + background: #FFF; + display: flex; + align-items: center; + padding: 0 15px; + font-size: 15.5px; + font-weight: 700; + color: #000; + font-family: Pretendard; + font-style: normal; + line-height: 45px; /* 204.545% */ + letter-spacing: -0.165px; + &:hover { + cursor: default; + } +` + const CategoryLi = styled.li` list-style: none; + height: 36px; + background: #FFF; + display: flex; + align-items: center; + padding: 4px 0 0 15px; + font-size: 14px; + font-weight: 400; + color: #000; + font-family: Pretendard; + font-style: normal; + line-height: 45px; /* 204.545% */ + letter-spacing: -0.165px; + &:hover { + cursor: pointer; + } ` \ No newline at end of file From 5da1834519b1fe9956f0cde247b1b3281b27046c Mon Sep 17 00:00:00 2001 From: devhaeun Date: Fri, 24 Jan 2025 00:11:00 +0900 Subject: [PATCH 008/117] =?UTF-8?q?Style:=20=EC=84=B8=EB=AF=B8=EC=BD=9C?= =?UTF-8?q?=EB=A1=A0=20=EC=B6=94=EA=B0=80=20#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Header 컴포넌트 Container 내 세미콜론 추가 --- src/components/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 105ced9..7ffc459 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -78,7 +78,7 @@ const Wrapper = styled.div` const Container = styled.div` display: flex; flex-direction: column; - width: 100% + width: 100%; height: 295px; ` From 01ed09c7dcf3b470494fb0dfdb6b9a8e9904fbe3 Mon Sep 17 00:00:00 2001 From: devhaeun Date: Fri, 24 Jan 2025 00:38:54 +0900 Subject: [PATCH 009/117] =?UTF-8?q?Feat:=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EB=B0=8F=20Wrapper=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 레이아웃 폴더에 RootLayout 파일 생성 및 Wrapper 스타일 컴포넌트 옮김 --- src/components/Header.tsx | 12 +++--------- src/layout/RootLayout.tsx | 20 ++++++++++++++++++++ src/routes/router.tsx | 4 ++-- 3 files changed, 25 insertions(+), 11 deletions(-) create mode 100644 src/layout/RootLayout.tsx diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 7ffc459..a4d0f5a 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -18,7 +18,6 @@ const Header = () => { const [isCatClicked, setIsCatClicked] = useState(false); return ( - @@ -63,23 +62,18 @@ const Header = () => { - ); } export default Header; -const Wrapper = styled.div` - min-width: 1440px; - display: flex; - justify-content: center; -` - const Container = styled.div` display: flex; flex-direction: column; width: 100%; - height: 295px; + height: 188px; + border-bottom: 1px solid #E4E4E4; + // background-color: green; ` const TopContainer = styled.div` diff --git a/src/layout/RootLayout.tsx b/src/layout/RootLayout.tsx new file mode 100644 index 0000000..646c939 --- /dev/null +++ b/src/layout/RootLayout.tsx @@ -0,0 +1,20 @@ +import styled from "styled-components"; +import Header from "../components/Header"; +import { Outlet } from "react-router-dom"; + +const RootLayout = () => { + return ( + +
+ + + ); +}; + +export default RootLayout; + +const Wrapper = styled.div` + min-width: 1440px; + display: flex; + justify-content: center; +` \ No newline at end of file diff --git a/src/routes/router.tsx b/src/routes/router.tsx index b92d450..aba89c5 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; -import Header from '../components/Header'; +import RootLayout from '../layout/RootLayout'; const router = createBrowserRouter([ { path: '/', - element:
, + element: , children: [], }, ]); From 11ecf3e97ad4b69989bf14697fe0e6b32f083cbf Mon Sep 17 00:00:00 2001 From: devhaeun Date: Fri, 24 Jan 2025 01:48:52 +0900 Subject: [PATCH 010/117] =?UTF-8?q?Feat:=20=EB=9E=98=ED=94=8C=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20#10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 래플 업로드 페이지 생성 --- src/pages/RaffleUploadPage.tsx | 18 ++++++++++++++++++ src/routes/router.tsx | 3 ++- 2 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 src/pages/RaffleUploadPage.tsx diff --git a/src/pages/RaffleUploadPage.tsx b/src/pages/RaffleUploadPage.tsx new file mode 100644 index 0000000..5ea3cf8 --- /dev/null +++ b/src/pages/RaffleUploadPage.tsx @@ -0,0 +1,18 @@ +import styled from "styled-components"; + +const RaffleUploadPage = () => { + return ( + +
상품 정보
+
거래 설정
+ + + ); +}; + +export default RaffleUploadPage; + +const UploadContainer = styled.div` + display: flex; + flex-direction: column; +` \ No newline at end of file diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 2c64821..10ccc5d 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; +import RaffleUploadPage from '../pages/RaffleUploadPage'; const router = createBrowserRouter([ { path: '/', - element:

홈 페이지

, + element: , children: [], }, ]); From 9489bc9013a4ac10f4bee785de5b8eaa5a06db6e Mon Sep 17 00:00:00 2001 From: devhaeun Date: Fri, 24 Jan 2025 17:27:04 +0900 Subject: [PATCH 011/117] =?UTF-8?q?Feat:=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EB=B0=8F=20Wrapper=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95=20#10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 래플 업로드 페이지 라우터 경로 수정 - RootLayout을 감싼 Wrapper의 flex-direction을 column으로 변경 --- src/layout/RootLayout.tsx | 1 + src/pages/RaffleUploadPage.tsx | 1 + src/routes/router.tsx | 8 +++++++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/layout/RootLayout.tsx b/src/layout/RootLayout.tsx index 646c939..c905778 100644 --- a/src/layout/RootLayout.tsx +++ b/src/layout/RootLayout.tsx @@ -16,5 +16,6 @@ export default RootLayout; const Wrapper = styled.div` min-width: 1440px; display: flex; + flex-direction: column; justify-content: center; ` \ No newline at end of file diff --git a/src/pages/RaffleUploadPage.tsx b/src/pages/RaffleUploadPage.tsx index 5ea3cf8..8447d5a 100644 --- a/src/pages/RaffleUploadPage.tsx +++ b/src/pages/RaffleUploadPage.tsx @@ -13,6 +13,7 @@ const RaffleUploadPage = () => { export default RaffleUploadPage; const UploadContainer = styled.div` + width: 100%; display: flex; flex-direction: column; ` \ No newline at end of file diff --git a/src/routes/router.tsx b/src/routes/router.tsx index aba89c5..bdbd8b8 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -1,12 +1,18 @@ import React from 'react'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import RootLayout from '../layout/RootLayout'; +import RaffleUploadPage from '../pages/RaffleUploadPage'; const router = createBrowserRouter([ { path: '/', element: , - children: [], + children: [ + { + path: 'raffle-upload', + element: + } + ], }, ]); From 504d76ffcfdc9c64b629fcf05d5da55106cf9576 Mon Sep 17 00:00:00 2001 From: devhaeun Date: Fri, 24 Jan 2025 17:30:00 +0900 Subject: [PATCH 012/117] =?UTF-8?q?Design:=20Wrapper=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80=20#10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Wrapper 컴포넌트 스타일에 align-items를 center로 추가 justify-content: center 주석 처리 --- src/layout/RootLayout.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/layout/RootLayout.tsx b/src/layout/RootLayout.tsx index c905778..49a805c 100644 --- a/src/layout/RootLayout.tsx +++ b/src/layout/RootLayout.tsx @@ -17,5 +17,6 @@ const Wrapper = styled.div` min-width: 1440px; display: flex; flex-direction: column; - justify-content: center; + align-items: center; + // justify-content: center; ` \ No newline at end of file From 2bdabbe0758c78431fb67e6218caa211257762ef Mon Sep 17 00:00:00 2001 From: devhaeun Date: Sun, 26 Jan 2025 21:19:04 +0900 Subject: [PATCH 013/117] =?UTF-8?q?Design:=20=EB=9E=98=ED=94=8C=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI?= =?UTF-8?q?=20#10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 래플 업로드 페이지 UI 완성 --- src/pages/RaffleUploadPage.tsx | 238 ++++++++++++++++++++++++++++++++- 1 file changed, 231 insertions(+), 7 deletions(-) diff --git a/src/pages/RaffleUploadPage.tsx b/src/pages/RaffleUploadPage.tsx index 8447d5a..1b746ad 100644 --- a/src/pages/RaffleUploadPage.tsx +++ b/src/pages/RaffleUploadPage.tsx @@ -2,18 +2,242 @@ import styled from "styled-components"; const RaffleUploadPage = () => { return ( - -
상품 정보
-
거래 설정
- - + +
+ + + 상품 정보 + + + + 상품 이미지 +
이미지
+ + +
+ 카테고리 + + + + +
+
+ 상품명 + +
+
+ 상태 + 미개봉 + 새상품 + 상태 + 상 + 중 + 하 +
+ + 설명 +