diff --git a/package-lock.json b/package-lock.json index 44b00e7..60c6b5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,10 +11,11 @@ "autoprefixer": "10.4.15", "eslint": "8.49.0", "eslint-config-next": "13.4.19", - "next": "13.4.19", + "next": "^13.4.19", "postcss": "8.4.29", "react": "18.2.0", "react-dom": "18.2.0", + "styled-components": "^6.1.1", "tailwindcss": "3.3.3" } }, @@ -48,6 +49,24 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -371,6 +390,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "node_modules/@types/stylis": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.3.tgz", + "integrity": "sha512-86XLCVEmWagiUEbr2AjSbeY4qHN9jMm3pgM3PuBYfLIbT0MpDSnA3GA/4W7KoH/C/eeK77kNaeIxZzjhKYIBgw==" + }, "node_modules/@typescript-eslint/parser": { "version": "6.6.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.6.0.tgz", @@ -860,6 +884,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001529", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001529.tgz", @@ -978,6 +1010,24 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -989,6 +1039,11 @@ "node": ">=4" } }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -3333,6 +3388,11 @@ "node": ">=10" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -3479,6 +3539,60 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/styled-components": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.1.tgz", + "integrity": "sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==", + "dependencies": { + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/unitless": "^0.8.0", + "@types/stylis": "^4.0.2", + "css-to-react-native": "^3.2.0", + "csstype": "^3.1.2", + "postcss": "^8.4.31", + "shallowequal": "^1.1.0", + "stylis": "^4.3.0", + "tslib": "^2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, "node_modules/styled-jsx": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", @@ -3501,6 +3615,11 @@ } } }, + "node_modules/stylis": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", + "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" + }, "node_modules/sucrase": { "version": "3.34.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", diff --git a/package.json b/package.json index 9b2c45b..735dae9 100644 --- a/package.json +++ b/package.json @@ -10,16 +10,16 @@ }, "imports": { "app/": "./src/app/*" -}, + }, "dependencies": { "autoprefixer": "10.4.15", "eslint": "8.49.0", "eslint-config-next": "13.4.19", - "next": "13.4.19", + "next": "^13.4.19", "postcss": "8.4.29", "react": "18.2.0", "react-dom": "18.2.0", + "styled-components": "^6.1.1", "tailwindcss": "3.3.3" } - } diff --git a/src/app/components/MyPage.jsx b/src/app/components/MyPage.jsx new file mode 100644 index 0000000..a2ed60e --- /dev/null +++ b/src/app/components/MyPage.jsx @@ -0,0 +1,123 @@ +"use client"; +import React from "react"; +import styled from "styled-components"; +// import calendarIcon from "../img/calendarIcon.png"; +// import heartIcon from "../img/heartIcon.png"; +// import alarmImg from "../img/alarm.png"; + +export default function MyPage() { + return ( + +
+
+ Profile + Settings +
+
+
+ +

Hello, Linda

+ +
+
{/* calendarIcon */}
+
{/* heartIcon */}
+
+
+ +
+

알림 목록

+
+
+
+
+
+
+
+ + ); +} + +const MyPageWrap = styled.div` + width: 494px; + + border-radius: 28px 0px 0px 28px; + background: #000; + + padding: 56px 60px 26px 60px; + display: flex; + flex-direction: column; + + .header { + display: flex; + justify-content: space-between; + align-items: center; + .text-container { + color: #fff; + font-size: 15px; + font-style: normal; + font-weight: 700; + line-height: normal; + + display: flex; + gap: 40px; + } + .profile-img { + width: 52px; + height: 52px; + border-radius: 20px; + background: #454545; + } + } + + .hello { + color: #fff; + font-size: 40px; + font-style: normal; + font-weight: 700; + line-height: normal; + + margin-top: 145px; + } + + .btn-container { + display: flex; + gap: 10px; + margin-top: 45px; + + div { + width: 158px; + height: 210px; + border-radius: 20px; + background: #454545; + } + } + + .footer { + display: flex; + flex-direction: column; + gap: 26px; + + margin-top: 59px; + + h2 { + color: #fff; + font-size: 23px; + font-style: normal; + font-weight: 600; + line-height: normal; + } + + .alarm-container { + display: flex; + flex-direction: column; + gap: 35px; + + .alarm { + width: 231px; + height: 48px; + background-color: rgba(177, 177, 205, 1); + border-radius: 15px; + } + } + } +`; diff --git a/src/app/img/alarm.png b/src/app/img/alarm.png new file mode 100644 index 0000000..b88eb98 Binary files /dev/null and b/src/app/img/alarm.png differ diff --git a/src/app/img/calendarIcon.png b/src/app/img/calendarIcon.png new file mode 100644 index 0000000..1c9fb61 Binary files /dev/null and b/src/app/img/calendarIcon.png differ diff --git a/src/app/img/heartIcon.png b/src/app/img/heartIcon.png new file mode 100644 index 0000000..8ccd9d5 Binary files /dev/null and b/src/app/img/heartIcon.png differ diff --git a/src/app/page.js b/src/app/page.js index 155a4f3..71e8816 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,113 +1,20 @@ -import Image from 'next/image' +"use client"; +import MyPage from "./components/MyPage"; + +const styles = { + fullScreen: { + width: "100vw", // 뷰포트 너비 전체 + overflowY: "auto" /* 내용이 넘칠 때 수직 스크롤이 생기도록 설정합니다. */, + display: "flex", // 내부 요소들을 수평 또는 수직으로 배치하기 위해 사용합니다. + justifyContent: "center", // 수평 정렬을 가운데로 설정합니다. + alignItems: "center", // 수직 정렬을 가운데로 설정합니다. + }, +}; export default function Home() { return ( -
-
-

- Get started by editing  - src/app/page.js -

-
- - By{' '} - Vercel Logo - -
-
- -
- Next.js Logo -
- -
- -

- Chicken!{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{' '} - - -> - -

-

- Explore the Next.js 13 playground. -

- - - -

- Deploy{' '} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ) +
+ +
+ ); }