diff --git a/app/(nav)/myPage/myPage.styles.ts b/app/(nav)/myPage/myPage.styles.ts
new file mode 100644
index 00000000..73b388da
--- /dev/null
+++ b/app/(nav)/myPage/myPage.styles.ts
@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import colors from '@/styles/color/palette';
+
+export const MyPageWrapper = styled.div`
+ padding: 0 16px;
+`;
+
+export const ProfileWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px 0px;
+`;
+
+export const SmallButtonWrapper = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+`;
+
+export const Separator = styled.div`
+ height: 9px;
+ width: calc(100% + 32px); /* 부모 padding 16px * 2 보정 */
+ margin: 0 -16px; /* MyPageWrapper의 padding 값 반영 */
+ background-color: ${colors.gray[95]};
+`;
diff --git a/app/(nav)/myPage/page.tsx b/app/(nav)/myPage/page.tsx
index 41769ab1..af29ed10 100644
--- a/app/(nav)/myPage/page.tsx
+++ b/app/(nav)/myPage/page.tsx
@@ -1,11 +1,34 @@
'use client';
import TopBar from '@/components/Common/TopBar/TopBar';
+import {
+ MyPageWrapper,
+ ProfileWrapper,
+ SmallButtonWrapper,
+ Separator,
+} from '@/app/(nav)/myPage/myPage.styles';
+import ProfileInfo from '@/components/Layout/MyPage/ProfileInfo';
+import SettingButton from '@/components/Layout/MyPage/SettingButton';
+import SmallButton from '@/components/Layout/MyPage/SmallButton';
const MyPage = () => {
return (
<>
-
- My Page
+
+
+
+
+
+ {}}>캐릭터 수정
+ {}}>닉네임 변경
+
+
+
+ {}} />
+ {}} />
+ {}} />
+ {}} />
+ {}} />
+
);
};
diff --git a/components/Common/NavBar/NavBar.tsx b/components/Common/NavBar/NavBar.tsx
index 6414bb4b..d5b9de3d 100644
--- a/components/Common/NavBar/NavBar.tsx
+++ b/components/Common/NavBar/NavBar.tsx
@@ -52,9 +52,9 @@ const NavBar = () => {
랭킹
-
- setSelected('mypage')}>
- {selected === 'mypage' ? : }
+
+ setSelected('myPage')}>
+ {selected === 'myPage' ? : }
마이페이지
diff --git a/components/Layout/MyPage/ProfileInfo.styles.ts b/components/Layout/MyPage/ProfileInfo.styles.ts
new file mode 100644
index 00000000..a4b9f058
--- /dev/null
+++ b/components/Layout/MyPage/ProfileInfo.styles.ts
@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import colors from '@styles/color/palette';
+
+export const ProfileInfoWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 12px; /* 프로필과 버튼 간 간격 */
+`;
+
+export const ImageWrapper = styled.div`
+ margin-bottom: 12px; /* 이미지와 이름/이메일 간 간격 */
+ background-color: ${colors.gray[80]};
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
+
+export const ProfileName = styled.div`
+ font-size: 14px;
+ margin-bottom: 4px; /* 이름과 이메일 간 간격 */
+ font-weight: bold;
+ text-align: center;
+`;
+
+export const ProfileEmail = styled.div`
+ font-size: 12px;
+ color: ${colors.gray[60]};
+ text-align: center;
+`;
diff --git a/components/Layout/MyPage/ProfileInfo.tsx b/components/Layout/MyPage/ProfileInfo.tsx
new file mode 100644
index 00000000..dd22b2a7
--- /dev/null
+++ b/components/Layout/MyPage/ProfileInfo.tsx
@@ -0,0 +1,23 @@
+import {
+ ProfileInfoWrapper,
+ ImageWrapper,
+ ProfileName,
+ ProfileEmail,
+} from '@/components/Layout/MyPage/ProfileInfo.styles';
+
+import ProfileImg from '@/styles/Icon/Profile_Snowman1.svg';
+import Image from 'next/image';
+
+const ProfileInfo = () => {
+ return (
+
+
+
+
+ 김눈사람
+ urdego@gmail.com
+
+ );
+};
+
+export default ProfileInfo;
diff --git a/components/Layout/MyPage/SettingButton.styles.ts b/components/Layout/MyPage/SettingButton.styles.ts
new file mode 100644
index 00000000..dd1b3251
--- /dev/null
+++ b/components/Layout/MyPage/SettingButton.styles.ts
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const SetButtonWrapper = styled.div`
+ width: 100%;
+ height: 55px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ align-self: stretch;
+`;
+
+export const SetButton = styled.div`
+ font-size: 14px;
+ font-weight: 700;
+ border: none;
+`;
diff --git a/components/Layout/MyPage/SettingButton.tsx b/components/Layout/MyPage/SettingButton.tsx
new file mode 100644
index 00000000..cc65132b
--- /dev/null
+++ b/components/Layout/MyPage/SettingButton.tsx
@@ -0,0 +1,22 @@
+import {
+ SetButton,
+ SetButtonWrapper,
+} from '@components/Layout/MyPage/SettingButton.styles';
+import direction from '@styles/Icon/Right_dir.svg';
+import Image from 'next/image';
+
+interface SettingButtonProps {
+ label: string;
+ onClick: () => void;
+}
+
+const SettingButton = ({ label, onClick }: SettingButtonProps) => {
+ return (
+
+ {label}
+
+
+ );
+};
+
+export default SettingButton;
diff --git a/components/Layout/MyPage/SmallButton.styles.ts b/components/Layout/MyPage/SmallButton.styles.ts
new file mode 100644
index 00000000..dc6cb8ec
--- /dev/null
+++ b/components/Layout/MyPage/SmallButton.styles.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import colors from '@/styles/color/palette';
+
+export const SButton = styled.button`
+ width: 166px;
+ padding: 12px 16px;
+ font-size: 12px;
+ font-weight: 700;
+ text-align: center;
+ border-radius: 4px;
+ border: 1px solid ${colors.gray[80]};
+ background-color: white;
+ cursor: pointer;
+
+ &:disabled {
+ border-color: #e0e0e0;
+ background-color: #f9f9f9;
+ color: #b0b0b0;
+ cursor: not-allowed;
+ }
+`;
diff --git a/components/Layout/MyPage/SmallButton.tsx b/components/Layout/MyPage/SmallButton.tsx
new file mode 100644
index 00000000..1ca81da0
--- /dev/null
+++ b/components/Layout/MyPage/SmallButton.tsx
@@ -0,0 +1,12 @@
+import { SButton } from '@components/Layout/MyPage/SmallButton.styles';
+
+interface SmallButtonProps {
+ onClick: () => void;
+ children: React.ReactNode;
+}
+
+const SmallButton = ({ onClick, children }: SmallButtonProps) => {
+ return {children};
+};
+
+export default SmallButton;
diff --git a/package-lock.json b/package-lock.json
index 5123bc92..69492792 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,6 @@
"@storybook/nextjs": "^8.4.4",
"@storybook/react": "^8.4.4",
"@storybook/test": "^8.4.4",
- "@svgr/webpack": "^8.1.0",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
@@ -1315,22 +1314,6 @@
"@babel/core": "^7.0.0-0"
}
},
- "node_modules/@babel/plugin-transform-react-constant-elements": {
- "version": "7.25.9",
- "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.25.9.tgz",
- "integrity": "sha512-Ncw2JFsJVuvfRsa2lSHiC55kETQVLSnsYGQ1JDDwkUeWGTL/8Tom8aLTnlqgoeuopWrbbGndrc9AlLYrIosrow==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@babel/helper-plugin-utils": "^7.25.9"
- },
- "engines": {
- "node": ">=6.9.0"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
"node_modules/@babel/plugin-transform-react-display-name": {
"version": "7.25.9",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.25.9.tgz",
@@ -3998,277 +3981,6 @@
"storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
}
},
- "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
- "version": "8.0.0",
- "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
- "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
- "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
- "version": "8.0.0",
- "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
- "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
- "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
- "version": "8.0.0",
- "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
- "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
- "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
- "version": "8.0.0",
- "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
- "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
- "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
- "version": "8.0.0",
- "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
- "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
- "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
- "version": "8.0.0",
- "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
- "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
- "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
- "version": "8.1.0",
- "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
- "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
- "node_modules/@svgr/babel-plugin-transform-svg-component": {
- "version": "8.0.0",
- "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
- "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
- "node_modules/@svgr/babel-preset": {
- "version": "8.1.0",
- "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
- "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
- "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
- "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
- "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
- "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
- "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
- "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
- "@svgr/babel-plugin-transform-svg-component": "8.0.0"
- },
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
- "node_modules/@svgr/core": {
- "version": "8.1.0",
- "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
- "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@babel/core": "^7.21.3",
- "@svgr/babel-preset": "8.1.0",
- "camelcase": "^6.2.0",
- "cosmiconfig": "^8.1.3",
- "snake-case": "^3.0.4"
- },
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- }
- },
- "node_modules/@svgr/hast-util-to-babel-ast": {
- "version": "8.0.0",
- "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
- "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@babel/types": "^7.21.3",
- "entities": "^4.4.0"
- },
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- }
- },
- "node_modules/@svgr/plugin-jsx": {
- "version": "8.1.0",
- "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
- "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@babel/core": "^7.21.3",
- "@svgr/babel-preset": "8.1.0",
- "@svgr/hast-util-to-babel-ast": "8.0.0",
- "svg-parser": "^2.0.4"
- },
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- },
- "peerDependencies": {
- "@svgr/core": "*"
- }
- },
- "node_modules/@svgr/plugin-svgo": {
- "version": "8.1.0",
- "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz",
- "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "cosmiconfig": "^8.1.3",
- "deepmerge": "^4.3.1",
- "svgo": "^3.0.2"
- },
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- },
- "peerDependencies": {
- "@svgr/core": "*"
- }
- },
- "node_modules/@svgr/webpack": {
- "version": "8.1.0",
- "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-8.1.0.tgz",
- "integrity": "sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@babel/core": "^7.21.3",
- "@babel/plugin-transform-react-constant-elements": "^7.21.3",
- "@babel/preset-env": "^7.20.2",
- "@babel/preset-react": "^7.18.6",
- "@babel/preset-typescript": "^7.21.0",
- "@svgr/core": "8.1.0",
- "@svgr/plugin-jsx": "8.1.0",
- "@svgr/plugin-svgo": "8.1.0"
- },
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/gregberge"
- }
- },
"node_modules/@swc/counter": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -4361,16 +4073,6 @@
"@testing-library/dom": ">=7.21.4"
}
},
- "node_modules/@trysound/sax": {
- "version": "0.2.0",
- "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
- "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
- "dev": true,
- "license": "ISC",
- "engines": {
- "node": ">=10.13.0"
- }
- },
"node_modules/@types/aria-query": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -6221,19 +5923,6 @@
"tslib": "^2.0.3"
}
},
- "node_modules/camelcase": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
- "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=10"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
"node_modules/camelize": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
@@ -6604,33 +6293,6 @@
"dev": true,
"license": "MIT"
},
- "node_modules/cosmiconfig": {
- "version": "8.3.6",
- "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
- "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "import-fresh": "^3.3.0",
- "js-yaml": "^4.1.0",
- "parse-json": "^5.2.0",
- "path-type": "^4.0.0"
- },
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "url": "https://github.com/sponsors/d-fischer"
- },
- "peerDependencies": {
- "typescript": ">=4.9.5"
- },
- "peerDependenciesMeta": {
- "typescript": {
- "optional": true
- }
- }
- },
"node_modules/create-ecdh": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -6793,20 +6455,6 @@
"postcss-value-parser": "^4.0.2"
}
},
- "node_modules/css-tree": {
- "version": "2.3.1",
- "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
- "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "mdn-data": "2.0.30",
- "source-map-js": "^1.0.1"
- },
- "engines": {
- "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
- }
- },
"node_modules/css-what": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -6840,42 +6488,6 @@
"node": ">=4"
}
},
- "node_modules/csso": {
- "version": "5.0.5",
- "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
- "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "css-tree": "~2.2.0"
- },
- "engines": {
- "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
- "npm": ">=7.0.0"
- }
- },
- "node_modules/csso/node_modules/css-tree": {
- "version": "2.2.1",
- "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
- "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "mdn-data": "2.0.28",
- "source-map-js": "^1.0.1"
- },
- "engines": {
- "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
- "npm": ">=7.0.0"
- }
- },
- "node_modules/csso/node_modules/mdn-data": {
- "version": "2.0.28",
- "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
- "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
- "dev": true,
- "license": "CC0-1.0"
- },
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -7403,19 +7015,6 @@
"integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==",
"license": "MIT"
},
- "node_modules/entities": {
- "version": "4.5.0",
- "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
- "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
- "dev": true,
- "license": "BSD-2-Clause",
- "engines": {
- "node": ">=0.12"
- },
- "funding": {
- "url": "https://github.com/fb55/entities?sponsor=1"
- }
- },
"node_modules/env-paths": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
@@ -10260,13 +9859,6 @@
"safe-buffer": "^5.1.2"
}
},
- "node_modules/mdn-data": {
- "version": "2.0.30",
- "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
- "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
- "dev": true,
- "license": "CC0-1.0"
- },
"node_modules/memfs": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
@@ -12742,17 +12334,6 @@
"jquery": ">=1.8.0"
}
},
- "node_modules/snake-case": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
- "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "dot-case": "^3.0.4",
- "tslib": "^2.0.3"
- }
- },
"node_modules/socket.io-client": {
"version": "4.8.1",
"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
@@ -13389,112 +12970,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
- "node_modules/svg-parser": {
- "version": "2.0.4",
- "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
- "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
- "dev": true,
- "license": "MIT"
- },
- "node_modules/svgo": {
- "version": "3.3.2",
- "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
- "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@trysound/sax": "0.2.0",
- "commander": "^7.2.0",
- "css-select": "^5.1.0",
- "css-tree": "^2.3.1",
- "css-what": "^6.1.0",
- "csso": "^5.0.5",
- "picocolors": "^1.0.0"
- },
- "bin": {
- "svgo": "bin/svgo"
- },
- "engines": {
- "node": ">=14.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/svgo"
- }
- },
- "node_modules/svgo/node_modules/commander": {
- "version": "7.2.0",
- "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
- "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">= 10"
- }
- },
- "node_modules/svgo/node_modules/css-select": {
- "version": "5.1.0",
- "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
- "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
- "dev": true,
- "license": "BSD-2-Clause",
- "dependencies": {
- "boolbase": "^1.0.0",
- "css-what": "^6.1.0",
- "domhandler": "^5.0.2",
- "domutils": "^3.0.1",
- "nth-check": "^2.0.1"
- },
- "funding": {
- "url": "https://github.com/sponsors/fb55"
- }
- },
- "node_modules/svgo/node_modules/dom-serializer": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
- "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "domelementtype": "^2.3.0",
- "domhandler": "^5.0.2",
- "entities": "^4.2.0"
- },
- "funding": {
- "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
- }
- },
- "node_modules/svgo/node_modules/domhandler": {
- "version": "5.0.3",
- "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
- "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
- "dev": true,
- "license": "BSD-2-Clause",
- "dependencies": {
- "domelementtype": "^2.3.0"
- },
- "engines": {
- "node": ">= 4"
- },
- "funding": {
- "url": "https://github.com/fb55/domhandler?sponsor=1"
- }
- },
- "node_modules/svgo/node_modules/domutils": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
- "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
- "dev": true,
- "license": "BSD-2-Clause",
- "dependencies": {
- "dom-serializer": "^2.0.0",
- "domelementtype": "^2.3.0",
- "domhandler": "^5.0.3"
- },
- "funding": {
- "url": "https://github.com/fb55/domutils?sponsor=1"
- }
- },
"node_modules/swiper": {
"version": "11.1.15",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.15.tgz",
diff --git a/package.json b/package.json
index 4744c567..27f91895 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,6 @@
"@storybook/nextjs": "^8.4.4",
"@storybook/react": "^8.4.4",
"@storybook/test": "^8.4.4",
- "@svgr/webpack": "^8.1.0",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
diff --git a/stories/Layout/Mypage/ProfileInfo.stories.tsx b/stories/Layout/Mypage/ProfileInfo.stories.tsx
new file mode 100644
index 00000000..7c5a201e
--- /dev/null
+++ b/stories/Layout/Mypage/ProfileInfo.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ProfileInfo from '@/components/Layout/MyPage/ProfileInfo';
+
+const meta = {
+ title: 'MyPage/ProfileInfo',
+ component: ProfileInfo,
+ tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
diff --git a/stories/Layout/Mypage/SettingButton.stories.tsx b/stories/Layout/Mypage/SettingButton.stories.tsx
new file mode 100644
index 00000000..5dd8b7eb
--- /dev/null
+++ b/stories/Layout/Mypage/SettingButton.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SettingButton from '@components/Layout/MyPage/SettingButton';
+
+const meta = {
+ title: 'MyPage/SettingButton',
+ component: SettingButton,
+ tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ label: '비밀번호 변경',
+ onClick: () => alert('Button clicked!'),
+ },
+};
diff --git a/stories/Layout/Mypage/SmallButton.stories.tsx b/stories/Layout/Mypage/SmallButton.stories.tsx
new file mode 100644
index 00000000..d7b33288
--- /dev/null
+++ b/stories/Layout/Mypage/SmallButton.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SmallButton from '@/components/Layout/MyPage/SmallButton';
+
+const meta = {
+ title: 'MyPage/SmallButton',
+ component: SmallButton,
+ tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ onClick: () => alert('Button clicked!'),
+ children: 'Click Me',
+ },
+};
diff --git a/styles/Icon/Profile_Snowman1.svg b/styles/Icon/Profile_Snowman1.svg
new file mode 100644
index 00000000..4798ec83
--- /dev/null
+++ b/styles/Icon/Profile_Snowman1.svg
@@ -0,0 +1,14 @@
+