diff --git a/README.md b/README.md index d5682e6..6058e5e 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# TaeGong-s-life +# DeepBlue ## 실행 전 .env 파일 추가 해주세요 diff --git a/backend/database.py b/backend/database.py index eb101cc..370cea6 100644 --- a/backend/database.py +++ b/backend/database.py @@ -7,7 +7,7 @@ # # ker.internal 외부에서 도커에 접속하기 위한 주소 if os.getenv('MYSQL_HOST'): - SQLALCHEMY_DATABASE_URL = "mysql+pymysql://taegong:taegong@host.docker.internal:3306/taegong" + SQLALCHEMY_DATABASE_URL = "mysql+pymysql://taegong:taegong@172.17.0.1:3306/taegong" else: SQLALCHEMY_DATABASE_URL = "mysql+pymysql://taegong:taegong@localhost:3306/taegong" diff --git a/db/Dockerfile b/db/Dockerfile new file mode 100644 index 0000000..3171346 --- /dev/null +++ b/db/Dockerfile @@ -0,0 +1,13 @@ +#Create MySQL Image for JSP Tutorial Application +FROM mysql:8.0-oracle + +WORKDIR /db + +# Use the environment variables from the .env file +ENV MYSQL_ROOT_PASSWORD=root +ENV MYSQL_DATABASE=taegong +ENV MYSQL_USER=taegong +ENV MYSQL_PASSWORD=taegong + +EXPOSE 3306 + diff --git a/db/README.md b/db/README.md new file mode 100644 index 0000000..8c604c8 --- /dev/null +++ b/db/README.md @@ -0,0 +1,6 @@ +# 실행 방법 + +## 1. docker 이미지 만들기 +docker build -t mysql . +## 2.컨테이너 실행하기 +docker run --name mysql -p 3306:3306 mysql diff --git a/Docker-compose.yml b/docker-compose.yaml similarity index 64% rename from Docker-compose.yml rename to docker-compose.yaml index fdd1b14..8a62b81 100644 --- a/Docker-compose.yml +++ b/docker-compose.yaml @@ -12,15 +12,23 @@ services: mysql: container_name: taegong_mysql - image: mysql:8.0-oracle + # image: mysql:8.0-oracle + build: + context: ./db + dockerfile: Dockerfile volumes: - mysql_data_dev:/mysql - env_file: - - ./.env + # env_file: + # - ./.env networks: - mynet ports: - 3306:3306 + healthcheck: + test: ["CMD", "mysqladmin", "ping", "-h", "localhost"] + interval: 30s + timeout: 10s + retries: 3 backend: container_name: taegong_backend @@ -28,7 +36,7 @@ services: environment: MYSQL_HOST: "1234" entrypoint: /bin/bash - command: -c "sleep 10 && uvicorn main:app --host 0.0.0.0 --reload" + command: -c "uvicorn main:app --host 0.0.0.0 --reload" ports: - 8000:8000 networks: @@ -36,7 +44,8 @@ services: # 작업이 끝나도 종료되지 않게 하는 명령 tty: true depends_on: - - mysql + mysql: + condition: service_healthy volumes: mysql_data_dev: null diff --git a/frontend/src/assets/crucian.jpg b/frontend/src/assets/crucian.jpg new file mode 100644 index 0000000..4188e28 Binary files /dev/null and b/frontend/src/assets/crucian.jpg differ diff --git a/frontend/src/assets/glassPreview.png b/frontend/src/assets/glassPreview.png new file mode 100644 index 0000000..d823a48 Binary files /dev/null and b/frontend/src/assets/glassPreview.png differ diff --git a/frontend/src/assets/home.png b/frontend/src/assets/home.png deleted file mode 100644 index b69a98c..0000000 Binary files a/frontend/src/assets/home.png and /dev/null differ diff --git a/frontend/src/assets/jellyfish.jpg b/frontend/src/assets/jellyfish.jpg new file mode 100644 index 0000000..4996791 Binary files /dev/null and b/frontend/src/assets/jellyfish.jpg differ diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png new file mode 100644 index 0000000..c233732 Binary files /dev/null and b/frontend/src/assets/logo.png differ diff --git a/frontend/src/assets/seaweeds.png b/frontend/src/assets/seaweeds.png deleted file mode 100644 index 8a4201f..0000000 Binary files a/frontend/src/assets/seaweeds.png and /dev/null differ diff --git a/frontend/src/assets/shark.jpg b/frontend/src/assets/shark.jpg new file mode 100644 index 0000000..b6e6d79 Binary files /dev/null and b/frontend/src/assets/shark.jpg differ diff --git a/frontend/src/assets/smallFish.png b/frontend/src/assets/smallFish.png deleted file mode 100644 index 62a42b5..0000000 Binary files a/frontend/src/assets/smallFish.png and /dev/null differ diff --git a/frontend/src/assets/turtle.jpg b/frontend/src/assets/turtle.jpg new file mode 100644 index 0000000..a39d867 Binary files /dev/null and b/frontend/src/assets/turtle.jpg differ diff --git a/frontend/src/assets/up-icon.png b/frontend/src/assets/up-icon.png new file mode 100644 index 0000000..ff3622f Binary files /dev/null and b/frontend/src/assets/up-icon.png differ diff --git a/frontend/src/components/DetailFishList/index.scss b/frontend/src/components/DetailFishList/index.scss new file mode 100644 index 0000000..df3a858 --- /dev/null +++ b/frontend/src/components/DetailFishList/index.scss @@ -0,0 +1,144 @@ +@import '@/media.scss'; +.DetailPage { + color: black; + background-color: rgba(217, 217, 217, 0.5); + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; +} + +.DetailPage_inform { + display: flex; + flex-direction: column; + position: relative; + width: 80vw; + height: 80%; + min-height: 300px; + background-color: white; + border: 3px solid #0e1733; + border-radius: 1rem; + overflow: scroll; + padding: 1.5rem; + box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; + align-items: center; + animation: showEncyclopedia 0.5s; + + @include tablet { + display: flex; + flex-direction: row; + } +} + +.DetailPage_inform-img { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + min-width: 90%; + min-height: 40%; + min-height: 200px; + border-radius: 1rem; + margin-right: 1rem; + margin-bottom: 1rem; + overflow: hidden; + + @include tablet { + min-width: 40%; + min-height: 60%; + } +} + +.DetailPage_inform-input { + display: flex; + flex-direction: column; + border: 3px solid #0e1733; + margin-right: 1rem; + padding: 1rem; + padding-right: 3rem; + border-radius: 1rem; + min-width: 90%; + & > h1 { + font-size: 3rem; + font-weight: bold; + } + @include tablet { + min-width: 40%; + } +} + +.DetailPage_inform-closed_season { + margin-bottom: 1rem; + + & > h1 { + font-size: 1.5rem; + font-weight: bold; + } + & > p { + opacity: 0.5; + } +} + +.DetailPage_inform-toxicyty { + & > h1 { + font-size: 1.5rem; + font-weight: bold; + } + & > p { + opacity: 0.5; + } +} + +.DetailPage_description { + padding: 0.5rem; + flex-grow: 1; + margin-top: 1rem; + + & > h1 { + font-size: 1.5rem; + font-weight: bold; + } + & > p { + opacity: 0.5; + } +} + +.DetailPage_line { + width: 100%; + height: 1px; + background-color: black; + margin-bottom: 1rem; +} + +.DetailPage_closed { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 5px; + right: 5px; + width: 3.5rem; + height: 3.5rem; + border-radius: 50%; + background-color: gray; + cursor: pointer; + font-size: 1.5rem; + &:hover { + opacity: 0.9; + background-color: #0e1733; + color: white; + } +} + +@keyframes showEncyclopedia { + 0% { + opacity: 0.3; + transform: translateY(-50px); + } + 100% { + opacity: 1; + transform: translateY(0px); + } +} diff --git a/frontend/src/components/DetailFishList/index.tsx b/frontend/src/components/DetailFishList/index.tsx new file mode 100644 index 0000000..c529ef1 --- /dev/null +++ b/frontend/src/components/DetailFishList/index.tsx @@ -0,0 +1,67 @@ +import { fishInform } from '@/mocks/handlers'; +import React from 'react'; +import './index.scss'; + +interface fishInfromProps extends fishInform { + setModal: React.Dispatch>; + modal: boolean; +} + +const DetaiFish = ({ + fish_type, + toxicyty, + image, + closed_season, + description, + setModal, + modal, +}: fishInfromProps) => { + const closeModal = (e: any) => { + if ( + e.target.className !== 'DetailPage_inform' && + e.target.className == 'DetailPage' + ) { + setModal(!modal); + } else if (e.target.className == 'DetailPage_closed') { + setModal(!modal); + } + }; + return ( +
closeModal(e)} className="DetailPage"> +
+
+
+

{fish_type}

+
+
+

서식기간

+

{closed_season}

+
+
+

이거... 먹을 수 있는건가요?

+

+ {toxicyty == 'yes' + ? '네 맛있게드세요.' + : '아니요 ! 먹으면 안돼요!'} +

+
+
+

설명

+

{description}

+
+
+ closeModal(e)} className="DetailPage_closed"> + X + +
+
+ ); +}; + +export default DetaiFish; diff --git a/frontend/src/page/insertImage/index.scss b/frontend/src/components/insertImage/index.scss similarity index 50% rename from frontend/src/page/insertImage/index.scss rename to frontend/src/components/insertImage/index.scss index a5388bf..dcfbbab 100644 --- a/frontend/src/page/insertImage/index.scss +++ b/frontend/src/components/insertImage/index.scss @@ -1,49 +1,39 @@ @import '../../media.scss'; -.img-view { - width: 100%; - height: 100vh; - display: flex; - flex-direction: column; - background: linear-gradient(180deg, #4da8bc 0%, #306c79 100%); - position: relative; -} - -.insertImage-view { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - .insert_box { width: 35rem; - height: 22.5rem; + height: 23.5rem; display: flex; + color: black !important; flex-direction: column; justify-content: center; align-items: center; + max-width: 70%; background: #ffffff; + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25), + inset 4px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 20px; - max-width: 70%; + margin: 0 auto; + margin-top: 32px; + opacity: 0; + animation: showInsertImage 1s 1.3s alternate forwards; @include tablet { height: 25rem; + max-width: 90%; } } .insert_picture { - max-width: 65%; + max-width: 80%; width: 30rem; - height: 17.5rem; + height: 19.5rem; display: flex; justify-content: center; align-items: center; flex-direction: column; - background: rgba(157, 255, 255, 0.3); + background: white; border: 3.5px dashed #000000; border-radius: 20px; @@ -81,13 +71,20 @@ display: flex; justify-content: center; align-items: center; - width: 6rem; height: 3.5rem; + font-weight: bold; margin-top: 10px; background-color: rgb(219, 249, 249); - border-radius: 1rem; - + background: #ffffff; + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25), + inset 4px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 10px; + color: black; + margin: 0 auto; + margin-top: 12px; + opacity: 0; + animation: showInsertImage 1s 1.7s alternate forwards; &:hover { scale: 1.05; } @@ -98,49 +95,14 @@ } } -/////// 여기부터는 position으로 이미지를 레이아웃할떄 쓴 css -.insert_fishImg { - position: absolute; - width: 8rem; - height: 14rem; - left: 5px; - top: 50%; - - & img { - width: 100%; - height: 100%; - } - - @include tablet { - left: calc(30px + 3%); - } -} - -.insert_fishImg2 { - position: absolute; - width: 8rem; - height: 14rem; - right: 5px; - top: 30%; - - & img { - width: 100%; - height: 100%; - } - @include tablet { - right: calc(30px + 3%); +@keyframes showInsertImage { + 0% { + opacity: 0; + transform: translateY(10px); } -} - -.insert_seaweedsImg { - width: 14rem; - height: 14rem; - position: absolute; - right: 15%; - bottom: 0; - & img { - width: 100%; - height: 100%; + 100% { + opacity: 1; + transform: translateY(0px); } } diff --git a/frontend/src/page/insertImage/index.tsx b/frontend/src/components/insertImage/index.tsx similarity index 56% rename from frontend/src/page/insertImage/index.tsx rename to frontend/src/components/insertImage/index.tsx index 7029f71..235d923 100644 --- a/frontend/src/page/insertImage/index.tsx +++ b/frontend/src/components/insertImage/index.tsx @@ -48,49 +48,32 @@ const InsertImage = () => { }); return ( -
-